@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Montserrat:wght@400;500&display=swap');

:root{
  --page:#f3ede6;
  --paper:#faf6f0;
  --warm:#eadfd3;
  --ink:#494138;
  --muted:#80766d;
  --accent:#a87358;
  --accent-dark:#805744;
  --line:#d8c8b9;
  --shell:1120px;
  --text:700px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--page)}
body{margin:0;background:var(--page);color:var(--ink);font-family:Montserrat,Arial,sans-serif;font-weight:300;overflow-x:hidden}
body.is-locked{overflow:hidden}
button,input,textarea{font:inherit}
button{color:inherit}
img{display:block;max-width:100%}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400}
p{line-height:1.78;color:var(--muted)}

.site{min-height:100vh}
.site-shell{width:min(var(--shell),100%);margin:0 auto;background:var(--paper);box-shadow:0 0 0 1px rgba(85,69,55,.025)}
.eyebrow{text-transform:uppercase;letter-spacing:.28em;font-size:10px;font-weight:500;color:#98745f;margin-bottom:16px}
.eyebrow--light{color:#eadbcd}
.content-narrow{width:min(var(--text),calc(100% - 56px));margin:0 auto}
.content-medium{width:min(820px,calc(100% - 56px));margin:0 auto}
.content-form{width:min(720px,calc(100% - 42px));margin:0 auto}
.text-section{padding:100px 0}
.text-section--light{background:#faf7f2}
.text-section--warm{background:#ebe0d4}
.text-section h2{font-size:clamp(48px,6vw,78px);line-height:.98;margin-bottom:28px;text-wrap:balance}
.lead{font-size:16px;max-width:660px;margin:0 auto}
.tiny-heart{font:34px Georgia,serif;color:var(--accent);margin-top:26px}
.section-heading{margin-bottom:46px}
.section-heading--center{text-align:center}

/* ========================= INTRO / ENVELOPE ========================= */
.intro{position:fixed;z-index:99999;inset:0;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f2eae1;color:#54493f;overflow:hidden;transition:opacity .9s var(--ease),visibility .9s}
.intro.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.intro__paper{position:absolute;inset:0;background-image:linear-gradient(rgba(249,245,239,.80),rgba(249,245,239,.80)),url('../images/paper-texture.webp');background-size:auto,720px 720px;opacity:.9}
.intro__caption{position:absolute;top:max(34px,env(safe-area-inset-top));z-index:5;text-transform:uppercase;letter-spacing:.32em;font-size:9px;color:rgba(76,65,56,.55)}
.envelope-scene{position:relative;width:min(760px,92vw);height:min(480px,56svh);display:grid;place-items:center;perspective:1800px;transform-style:preserve-3d}
.envelope-branch{position:absolute;width:52%;pointer-events:none;user-select:none;mix-blend-mode:multiply;opacity:.44;filter:saturate(.55) contrast(.92);transition:transform 1.3s var(--ease),opacity 1s}
.envelope-branch--left{left:-1%;bottom:2%;transform:rotate(-22deg)}
.envelope-branch--right{right:-1%;top:3%;transform:scaleX(-1) rotate(-18deg)}

.envelope{position:relative;width:min(610px,86vw);aspect-ratio:1.62/1;border:0;padding:0;background:none;cursor:pointer;perspective:1800px;transform-style:preserve-3d;filter:drop-shadow(0 26px 34px rgba(79,59,45,.18));transition:transform .6s var(--ease),filter .6s}
.envelope:hover{transform:translateY(-4px);filter:drop-shadow(0 32px 42px rgba(79,59,45,.22))}
.envelope:focus-visible{outline:1px solid rgba(145,101,75,.65);outline-offset:10px;border-radius:8px}
.envelope__back,.envelope__side,.envelope__bottom,.envelope__flap,.invite-card{position:absolute;background-color:#eee4d8;background-image:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.16)),url('../images/paper-texture.webp');background-size:auto,620px 620px;background-repeat:no-repeat,repeat}
.envelope__back{z-index:1;inset:0;border:1px solid rgba(128,105,87,.16);border-radius:6px;background-color:#e6d9ca;box-shadow:inset 0 1px 0 rgba(255,255,255,.65)}
.invite-card{z-index:2;left:6.5%;right:6.5%;top:10%;height:79%;border:1px solid rgba(116,96,81,.10);border-radius:2px;background-color:#fbf7f1;box-shadow:0 3px 8px rgba(72,53,40,.06);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;transform:translateY(18%);transform-origin:center bottom;transition:transform 1.15s var(--ease),box-shadow .9s var(--ease),opacity .9s;overflow:hidden}
.invite-card__mini{text-transform:uppercase;letter-spacing:.28em;font-size:8px;color:#998b7f}
.invite-card__names{font:400 31px "Cormorant Garamond",Georgia,serif;color:#544a41;white-space:nowrap}
.invite-card__names i{color:var(--accent);margin:0 7px}
.invite-card__date{font-size:9px;letter-spacing:.22em;color:#8c8178}
.envelope__side{z-index:4;bottom:0;width:52%;height:84%;background-color:#eee3d6;pointer-events:none}
.envelope__side--left{left:0;clip-path:polygon(0 0,100% 58%,100% 100%,0 100%)}
.envelope__side--right{right:0;clip-path:polygon(100% 0,0 58%,0 100%,100% 100%)}
.envelope__bottom{z-index:5;left:0;right:0;bottom:0;height:58%;clip-path:polygon(0 100%,50% 0,100% 100%);background-color:#eaded0;pointer-events:none}
.envelope__flap{z-index:7;top:0;left:0;width:100%;height:58%;clip-path:polygon(0 0,100% 0,50% 100%);background-color:#f0e6da;transform-origin:top center;backface-visibility:hidden;transition:transform 1.05s var(--ease),filter .9s;filter:drop-shadow(0 7px 7px rgba(83,63,48,.06));pointer-events:none}
.envelope__flap:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(112,89,71,.05));opacity:.8}
.seal-wrap{position:absolute;z-index:9;left:50%;top:52%;width:118px;height:118px;transform:translate(-50%,-50%);display:grid;place-items:center;pointer-events:none;transition:transform .65s var(--ease),opacity .55s,filter .55s}
.seal-image{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;filter:drop-shadow(0 7px 8px rgba(65,45,33,.22));user-select:none}
.intro__footer{position:absolute;bottom:max(34px,calc(env(safe-area-inset-bottom) + 24px));z-index:6;text-align:center}
.intro__names{font:400 31px "Cormorant Garamond",Georgia,serif;margin-bottom:8px}
.intro__names i{color:var(--accent);margin:0 5px}
.intro__date{font-size:9px;letter-spacing:.24em;color:#8e8177}
.intro__open{margin-top:22px;border:0;background:none;padding:10px 18px;cursor:pointer;text-transform:uppercase;letter-spacing:.19em;font-size:9px;color:#796d64}
.intro__open-line{display:block;width:44px;height:1px;background:#aa8d79;margin:9px auto 0;transform-origin:center;transition:transform .45s}
.intro__open:hover .intro__open-line{transform:scaleX(1.45)}
.reveal-intro{opacity:0;transform:translateY(10px);animation:introAppear 1.15s var(--ease) forwards}
.envelope-scene.reveal-intro{animation-delay:.18s}
.intro__footer.reveal-intro{animation-delay:.55s}
@keyframes introAppear{to{opacity:1;transform:none}}

.intro.step-seal .seal-wrap{transform:translate(-50%,-62%) scale(.82) rotate(-8deg);opacity:.15;filter:blur(.2px)}
.intro.step-flap .envelope__flap{transform:rotateX(178deg);filter:none;z-index:2}
.intro.step-flap .envelope-branch--left{transform:rotate(-24deg) translate(-8px,6px);opacity:.34}
.intro.step-flap .envelope-branch--right{transform:scaleX(-1) rotate(-20deg) translate(-6px,-5px);opacity:.34}
.intro.step-card .invite-card{z-index:8;transform:translateY(-52%) scale(1.025);box-shadow:0 22px 35px rgba(58,42,31,.14)}
.intro.step-exit .invite-card{transform:translateY(-48%) scale(1.12)}
.intro.step-exit .envelope{transform:translateY(20px) scale(.96);opacity:.86}

/* ========================= PHOTO / HERO ========================= */
.section-photo{position:relative;overflow:hidden;background:#2b261f}
.section-photo__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.025);will-change:transform}
.section-photo__shade{position:absolute;inset:0;pointer-events:none}
.hero{height:min(920px,100svh);min-height:720px;display:grid;place-items:center;color:#fff}
.hero__image{object-position:center 48%}
.hero__shade{background:linear-gradient(0deg,rgba(22,18,14,.55),rgba(22,18,14,.07) 62%),linear-gradient(90deg,rgba(20,16,12,.18),transparent 50%,rgba(20,16,12,.14))}
.hero__content{position:relative;z-index:3;text-align:center;padding:28px}
.hero h1{font-size:clamp(76px,9vw,128px);line-height:.72;margin:0;text-shadow:0 3px 18px rgba(0,0,0,.16)}
.hero h1 i{display:block;color:#e6cbb6;font-size:.43em;margin:.07em 0}
.hero__date{margin-top:28px;font-size:12px;letter-spacing:.31em}
.scroll-arrow{position:absolute;z-index:4;bottom:28px;left:50%;transform:translateX(-50%);width:46px;height:46px;border:1px solid rgba(255,255,255,.62);border-radius:50%;display:grid;place-items:center;color:white;text-decoration:none;font-size:25px;transition:background .25s,transform .25s}
.scroll-arrow:hover{background:rgba(255,255,255,.09);transform:translateX(-50%) translateY(3px)}

/* ========================= STORY ========================= */
.text-section{text-align:center}
.story-photo{margin:0;width:100%;height:clamp(520px,72vw,820px);overflow:hidden;background:#ddd}
.story-photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.035);will-change:transform}
.story-photo--portrait{height:clamp(680px,92vw,980px)}
.story-photo--portrait img{object-position:center 42%}

/* ========================= CALENDAR + COUNTDOWN ========================= */
.date-section{padding-bottom:86px}
.date-title{margin-bottom:38px!important}
.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;width:min(650px,100%);margin:0 auto}
.calendar>*{min-height:58px;display:grid;place-items:center;position:relative;font-size:13px;color:#756d65}
.calendar b{font-size:9px;letter-spacing:.11em;font-weight:500;color:#8d8278}
.wedding-day{color:#fff!important;z-index:1;font-weight:500}
.wedding-day i{position:absolute;z-index:-1;font-style:normal;color:#a8755b;font-size:58px;left:50%;top:48%;transform:translate(-50%,-50%) scale(.8);transition:transform .7s var(--ease)}
.is-visible .wedding-day i{transform:translate(-50%,-50%) scale(1)}
.countdown-block{width:min(760px,calc(100% - 56px));margin:72px auto 0;padding-top:56px;border-top:1px solid rgba(128,105,87,.20);text-align:center}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.countdown div{position:relative}
.countdown div+div:before{content:"";position:absolute;left:-8px;top:12%;bottom:26%;width:1px;background:rgba(123,98,79,.16)}
.countdown strong{display:block;font:400 clamp(42px,6vw,68px) "Cormorant Garamond",Georgia,serif;color:#5a5048;line-height:1}
.countdown span{display:block;margin-top:8px;font-size:9px;letter-spacing:.17em;text-transform:uppercase;color:#998b81}

/* ========================= TIMELINE ========================= */
.timeline-section{padding-top:110px;padding-bottom:110px}
.timeline{text-align:left;position:relative;width:min(760px,100%);margin:0 auto;padding:8px 0}
.timeline__line{position:absolute;left:108px;top:6px;bottom:8px;width:1px;background:#e3d6ca;overflow:hidden}
.timeline__line span{display:block;width:100%;height:100%;background:#a97b61;transform:scaleY(0);transform-origin:top;transition:transform 1.55s var(--ease)}
.timeline.is-visible .timeline__line span{transform:scaleY(1)}
.timeline__item{display:grid;grid-template-columns:82px 24px 1fr;gap:14px;align-items:start;min-height:118px;opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease) var(--delay),transform .7s var(--ease) var(--delay)}
.timeline.is-visible .timeline__item{opacity:1;transform:none}
.timeline__item time{font:400 24px "Cormorant Garamond",Georgia,serif;color:#9a694f;padding-top:3px;text-align:right}
.timeline__dot{width:10px;height:10px;border-radius:50%;background:#a8785d;justify-self:center;margin-top:10px;position:relative;z-index:2;box-shadow:0 0 0 5px #faf7f2}
.timeline__item h3{font-size:33px;margin:0 0 5px;line-height:1.05}
.timeline__item p{font-size:13px;margin:0;max-width:520px}

/* ========================= VENUE ========================= */
.venue{height:min(820px,88svh);min-height:650px;display:grid;place-items:center;color:#fff}
.venue .section-photo__image{object-position:center}
.venue__shade{background:linear-gradient(0deg,rgba(14,17,14,.73),rgba(14,17,14,.10) 65%),linear-gradient(90deg,rgba(14,17,14,.20),transparent 55%)}
.venue__content{position:relative;z-index:3;text-align:center;width:min(760px,calc(100% - 56px))}
.venue h2{font-size:clamp(58px,7vw,94px);line-height:.98;margin-bottom:22px;text-wrap:balance}
.venue p{color:#fff;font-size:15px}
.outline-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border:1px solid currentColor;text-transform:uppercase;letter-spacing:.15em;font-size:9px;text-decoration:none;transition:background .28s,color .28s,transform .28s}
.outline-btn:hover{transform:translateY(-2px)}
.outline-btn--light{color:#fff}
.outline-btn--light:hover{background:#fff;color:#3e372f}

/* ========================= DRESS / DETAILS ========================= */
.dress-section{padding-bottom:82px}
.palette-label{text-transform:uppercase;letter-spacing:.18em;font-size:9px;color:#9a8d83;margin-top:34px}
.palette{display:flex;justify-content:center;gap:13px;margin-top:18px}
.palette span{width:58px;height:58px;border-radius:50%;background:var(--swatch);border:1px solid rgba(80,64,52,.09);box-shadow:0 5px 14px rgba(67,49,37,.08),inset 0 0 0 1px rgba(255,255,255,.20);transform:translateY(8px);opacity:0;transition:opacity .55s var(--ease),transform .55s var(--ease)}
.is-visible .palette span{opacity:1;transform:none}
.is-visible .palette span:nth-child(2){transition-delay:80ms}.is-visible .palette span:nth-child(3){transition-delay:160ms}.is-visible .palette span:nth-child(4){transition-delay:240ms}.is-visible .palette span:nth-child(5){transition-delay:320ms}
.details-section{padding-bottom:90px}
.wish{display:grid;grid-template-columns:26px 1fr;gap:12px;text-align:left;max-width:640px;margin:34px auto 0;padding-top:30px;border-top:1px solid rgba(126,104,87,.15)}
.wish__mark{color:#b18a72;font-size:13px;padding-top:4px}
.wish p{margin:0;font-size:15px}

/* ========================= FORM ========================= */
.rsvp-section{padding-top:104px;padding-bottom:92px}
.guest-form{margin-top:54px;text-align:left}
.field{display:block;margin-bottom:30px;font-size:12px;color:#70675f}
.field>span{display:block;margin-bottom:10px}
.field input,.field textarea{width:100%;border:1px solid #d3c3b4;background:rgba(255,251,246,.84);border-radius:2px;padding:16px 17px;color:#51483f;outline:none;transition:border-color .25s,box-shadow .25s,background .25s}
.field input{height:54px}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:#b4876d;box-shadow:0 0 0 3px rgba(170,119,88,.08);background:#fffaf5}
.choice-group{border:0;padding:0;margin:0 0 30px}
.choice-group legend{font-size:12px;color:#70675f;margin-bottom:13px}
.choice{position:relative;display:flex;align-items:center;gap:12px;min-height:38px;cursor:pointer;color:#716860;font-size:14px}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice__control{width:22px;height:22px;border:1.4px solid #9b8e83;border-radius:50%;background:#fffaf5;display:grid;place-items:center;flex:0 0 auto;transition:border .2s,background .2s,box-shadow .2s}
.choice__control:after{content:"";width:10px;height:10px;border-radius:50%;background:#a57258;transform:scale(0);transition:transform .2s var(--ease)}
.choice input:checked+.choice__control{border-color:#a57258;box-shadow:0 0 0 3px rgba(165,114,88,.08)}
.choice input:checked+.choice__control:after{transform:scale(1)}
.choice--check .choice__control{border-radius:5px}
.choice--check .choice__control:after{width:9px;height:5px;border-radius:0;border-left:2px solid white;border-bottom:2px solid white;background:none;transform:rotate(-45deg) scale(0)}
.choice--check input:checked+.choice__control{background:#a57258}
.choice--check input:checked+.choice__control:after{transform:rotate(-45deg) scale(1)}
.attending-only{overflow:hidden;padding-top:2px}
.attending-only[hidden],.companion-field[hidden]{display:none!important}
.attending-only.is-opening{animation:expandIn .55s var(--ease) both}
@keyframes expandIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.submit-btn{width:100%;height:58px;border:0;background:#a77559;color:#fff;text-transform:uppercase;letter-spacing:.18em;font-size:10px;cursor:pointer;position:relative;overflow:hidden;transition:transform .25s,background .25s,opacity .25s}
.submit-btn:before{content:"";position:absolute;inset:0;background:#885a45;transform:translateX(-101%);transition:transform .45s var(--ease)}
.submit-btn span{position:relative;z-index:1}
.submit-btn:hover:before{transform:none}
.submit-btn:hover{transform:translateY(-1px)}
.submit-btn:disabled{cursor:default;opacity:.62;transform:none}
.form-status{min-height:22px;margin:14px 0 0;text-align:center;font-size:12px;color:#8c6d5a}
.honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.form-success{text-align:center;padding:42px 20px 24px;animation:successIn .75s var(--ease) both}
.form-success__monogram{font:400 34px "Cormorant Garamond",Georgia,serif;color:#9b6f58}
.form-success__monogram i{font-size:.75em;margin:0 4px}
.form-success h3{font-size:54px;margin:10px 0 6px}
.form-success p{margin:0}
@keyframes successIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ========================= FINAL ========================= */
.final{height:min(900px,88svh);min-height:680px;display:grid;place-items:center;color:#fff}
.final__shade{background:linear-gradient(0deg,rgba(15,12,10,.78),rgba(15,12,10,.20) 72%)}
.final__content{position:relative;z-index:3;text-align:center;padding:30px}
.final__hello{font-size:14px;letter-spacing:.15em;margin-bottom:18px}
.final h2{font-size:clamp(76px,9vw,124px);line-height:.72;margin:0}
.final h2 i{display:block;color:#e4c6ae;font-size:.43em;margin:.07em 0}
.final__date{margin-top:26px;letter-spacing:.22em;font-size:12px}
.final__love{margin-top:42px;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#eadfd5}

/* ========================= REVEALS ========================= */
.reveal-group .reveal-item,.reveal-photo,.reveal-timeline{opacity:0;transform:translateY(24px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal-group.is-visible .reveal-item{opacity:1;transform:none}
.reveal-group.is-visible .reveal-item:nth-child(2){transition-delay:90ms}.reveal-group.is-visible .reveal-item:nth-child(3){transition-delay:180ms}.reveal-group.is-visible .reveal-item:nth-child(4){transition-delay:270ms}.reveal-group.is-visible .reveal-item:nth-child(5){transition-delay:360ms}
.reveal-photo.is-visible,.reveal-timeline.is-visible{opacity:1;transform:none}

/* ========================= DESKTOP ========================= */
@media(min-width:901px){
  body{padding:0 26px}
  .site-shell{margin:0 auto}
  .text-section{padding-top:118px;padding-bottom:118px}
  .hero,.final,.venue{border-left:1px solid rgba(255,255,255,.03);border-right:1px solid rgba(255,255,255,.03)}
  .story-photo{height:760px}
  .story-photo--portrait{height:960px;width:min(880px,100%);margin-left:auto;margin-right:auto}
  .story-photo--portrait img{object-position:center 44%}
  .details-section{padding-bottom:100px}
  .rsvp-section{padding-top:124px;padding-bottom:116px}
}

/* ========================= MOBILE ========================= */
@media(max-width:900px){
  :root{--shell:100%;--text:100%}
  body{background:#faf7f2}
  .site-shell{box-shadow:none}
  .content-narrow,.content-medium{width:calc(100% - 40px)}
  .content-form{width:calc(100% - 36px)}
  .text-section{padding:76px 0}
  .text-section h2{font-size:clamp(42px,12.4vw,58px);line-height:1.02;margin-bottom:24px}
  .lead{font-size:15px}
  .hero{height:100svh;min-height:620px}
  .hero__image{object-position:64% center}
  .hero__shade{background:linear-gradient(0deg,rgba(20,16,13,.60),rgba(20,16,13,.05) 75%)}
  .hero__content{align-self:center;width:100%}
  .hero h1{font-size:clamp(72px,20vw,94px)}
  .hero__date{font-size:11px}
  .story-photo{height:62svh;min-height:480px}
  .story-photo--portrait{height:72svh;min-height:600px}
  .calendar{gap:4px}
  .calendar>*{min-height:46px;font-size:12px}
  .date-title{font-size:56px!important}
  .countdown-block{width:calc(100% - 40px);margin-top:58px;padding-top:46px}
  .countdown{gap:6px}
  .countdown div+div:before{left:-3px}
  .countdown strong{font-size:46px}
  .countdown span{font-size:8px;letter-spacing:.11em}
  .timeline-section{padding-top:82px;padding-bottom:82px}
  .timeline__line{left:87px}
  .timeline__item{grid-template-columns:66px 18px 1fr;gap:10px;min-height:124px}
  .timeline__item time{font-size:21px;text-align:left}
  .timeline__dot{width:9px;height:9px;margin-top:8px}
  .timeline__item h3{font-size:clamp(27px,7.5vw,34px);line-height:1.04}
  .timeline__item p{font-size:12px;line-height:1.7}
  .venue{height:82svh;min-height:620px}
  .venue .section-photo__image{object-position:50% center}
  .venue__shade{background:linear-gradient(0deg,rgba(13,15,13,.82),rgba(13,15,13,.08) 78%)}
  .venue__content{align-self:end;padding-bottom:68px;text-align:left;width:calc(100% - 40px)}
  .venue h2{font-size:clamp(50px,14vw,68px)}
  .dress-section{padding-bottom:68px}
  .palette{gap:9px}
  .palette span{width:48px;height:48px}
  .wish{font-size:14px}
  .rsvp-section{padding-top:82px;padding-bottom:74px}
  .guest-form{margin-top:46px}
  .final{height:84svh;min-height:650px}
  .final .section-photo__image{object-position:center 42%}
  .final h2{font-size:clamp(72px,20vw,96px)}
}

@media(max-width:560px){
  .intro__caption{top:max(26px,env(safe-area-inset-top))}
  .envelope-scene{width:100vw;height:48svh}
  .envelope{width:92vw}
  .envelope-branch{width:58%;opacity:.32}
  .seal-wrap{width:94px;height:94px}
  .intro__names{font-size:28px}
  .intro__footer{bottom:max(22px,calc(env(safe-area-inset-bottom) + 14px))}
  .content-narrow,.content-medium{width:calc(100% - 36px)}
  .story-photo{min-height:430px}
  .calendar>*{min-height:43px}
  .wedding-day i{font-size:50px}
  .countdown strong{font-size:40px}
  .timeline__line{left:80px}
  .timeline__item{grid-template-columns:60px 18px 1fr;gap:7px}
  .timeline__item h3{font-size:28px}
  .palette span{width:46px;height:46px}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal-group .reveal-item,.reveal-photo,.reveal-timeline,.timeline__item{opacity:1!important;transform:none!important}
  .timeline__line span{transform:scaleY(1)!important}
}

/* iOS: prevent zooming when focusing RSVP fields */
@media(max-width:900px){
  .field input,.field textarea{font-size:16px}
  .choice{min-height:44px;font-size:15px}
  .choice-group legend,.field{font-size:13px}
}


/* =========================================================
   2026-08-12 v2 — wide desktop layout + photographic envelope
   ========================================================= */

/* --- Remove the "narrow mobile column on desktop" effect --- */
@media (min-width: 901px){
  :root{
    --shell:100%;
    --text:820px;
  }

  html,body{background:#faf7f2}
  body{padding:0!important}
  .site{width:100%}
  .site-shell{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    box-shadow:none!important;
    overflow:hidden;
  }

  .content-narrow{width:min(820px,calc(100% - 96px))}
  .content-medium{width:min(960px,calc(100% - 96px))}
  .content-form{width:min(820px,calc(100% - 96px))}

  .text-section{
    padding-top:124px;
    padding-bottom:124px;
  }

  .text-section h2{
    font-size:clamp(58px,4.5vw,86px);
    line-height:.99;
  }

  .lead{font-size:16px;line-height:1.9}

  .hero{
    width:100%;
    height:min(980px,100svh);
    min-height:760px;
    border:0!important;
  }
  .hero__image{object-position:center 47%}
  .hero h1{font-size:clamp(104px,8vw,158px)}
  .hero__content{max-width:1000px;margin:auto}

  .story-photo{
    width:min(1440px,100%);
    height:min(820px,68vw);
    margin:0 auto;
  }
  .story-photo--portrait{
    width:min(1080px,100%);
    height:min(1080px,78vw);
  }

  .date-section,.timeline-section,.dress-section,.details-section,.rsvp-section{
    width:100%;
  }

  .calendar{max-width:780px;margin-left:auto;margin-right:auto}
  .calendar>*{min-height:58px;font-size:14px}
  .date-title{font-size:82px!important}
  .countdown-block{width:min(920px,calc(100% - 96px))}
  .countdown strong{font-size:58px}

  .timeline{width:min(860px,100%)}
  .timeline__item{grid-template-columns:96px 28px 1fr;min-height:132px}
  .timeline__line{left:121px}
  .timeline__item time{font-size:28px}
  .timeline__item h3{font-size:38px}
  .timeline__item p{font-size:14px;max-width:580px}

  .venue{
    width:100%;
    height:min(900px,88svh);
    min-height:720px;
    border:0!important;
  }
  .venue__content{width:min(900px,calc(100% - 96px))}
  .venue h2{font-size:clamp(70px,6vw,112px)}

  .palette span{width:64px;height:64px}

  .rsvp-section{padding-top:124px;padding-bottom:116px}
  .guest-form{max-width:820px;margin-left:auto;margin-right:auto}
  .field input{height:58px}
  .field textarea{min-height:160px}
  .choice{font-size:15px;min-height:42px}

  .final{
    width:100%;
    height:min(960px,92svh);
    min-height:760px;
    border:0!important;
  }
  .final h2{font-size:clamp(104px,8vw,156px)}
}

/* --- Photographic invitation intro --- */
.intro{
  background:#f3ede5;
}
.intro__paper{
  background-image:
    linear-gradient(rgba(249,246,241,.88),rgba(249,246,241,.88)),
    url('../images/paper-texture.webp');
  background-size:auto,760px 760px;
  opacity:.98;
}

.photo-envelope-scene{
  position:relative;
  z-index:4;
  display:grid;
  place-items:center;
  width:min(780px,92vw);
  height:min(72svh,780px);
  perspective:1600px;
}

.photo-envelope{
  position:relative;
  display:block;
  width:min(680px,72svh,88vw);
  aspect-ratio:1/1;
  padding:0;
  border:0;
  border-radius:2px;
  background:#efe7dc;
  overflow:hidden;
  cursor:pointer;
  transform:translateZ(0) rotateX(.5deg);
  box-shadow:
    0 44px 80px rgba(80,61,47,.16),
    0 12px 28px rgba(80,61,47,.10);
  transition:
    transform 1.05s cubic-bezier(.2,.75,.2,1),
    box-shadow 1.05s cubic-bezier(.2,.75,.2,1),
    filter .8s ease,
    opacity .8s ease;
}
.photo-envelope:hover{
  transform:translateY(-7px) scale(1.008);
  box-shadow:
    0 52px 95px rgba(80,61,47,.19),
    0 15px 30px rgba(80,61,47,.11);
}
.photo-envelope:focus-visible{
  outline:1px solid rgba(151,108,81,.72);
  outline-offset:10px;
}
.photo-envelope__image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  user-select:none;
  transform:scale(1.015);
  transition:transform 1.35s cubic-bezier(.2,.75,.2,1),filter 1s ease;
}
.photo-envelope__veil{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 49% 53%,transparent 0 16%,rgba(255,249,242,.02) 30%,rgba(72,53,40,.05) 100%),
    linear-gradient(180deg,rgba(255,255,255,.03),rgba(62,47,35,.04));
  pointer-events:none;
}
.photo-envelope__seal{
  position:absolute;
  z-index:5;
  left:49%;
  top:53.3%;
  width:15.5%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 9px 9px rgba(74,46,32,.24));
  transition:
    transform .7s cubic-bezier(.2,.75,.2,1),
    opacity .55s ease,
    filter .55s ease;
  pointer-events:none;
}
.photo-envelope__seal img{width:100%;height:100%;object-fit:contain}
.photo-envelope__glow{
  position:absolute;
  inset:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  pointer-events:none;
}

.intro-transition-card{
  position:absolute;
  z-index:20;
  left:50%;
  top:50%;
  width:min(620px,76vw);
  aspect-ratio:1.42/1;
  display:grid;
  place-items:center;
  background-color:#faf6ef;
  background-image:
    linear-gradient(rgba(255,255,255,.26),rgba(255,255,255,.26)),
    url('../images/paper-texture.webp');
  background-size:auto,620px 620px;
  box-shadow:0 32px 80px rgba(68,49,37,.15);
  opacity:0;
  transform:translate(-50%,-44%) scale(.42);
  transform-origin:center;
  pointer-events:none;
  transition:
    opacity .58s ease,
    transform 1.05s cubic-bezier(.15,.78,.18,1),
    filter .8s ease;
}
.intro-transition-card__monogram{
  font:400 54px "Cormorant Garamond",Georgia,serif;
  color:#6d5b4d;
  letter-spacing:.02em;
  opacity:.76;
}
.intro-transition-card__monogram i{color:#a87358;font-size:.72em;margin:0 .08em}

.intro.step-seal .photo-envelope__seal{
  transform:translate(-50%,-58%) scale(1.22) rotate(-7deg);
  opacity:.12;
  filter:drop-shadow(0 18px 13px rgba(74,46,32,.12)) blur(.2px);
}
.intro.step-photo .photo-envelope{
  transform:translateY(3px) scale(.985);
  filter:saturate(.90) brightness(1.025);
}
.intro.step-photo .photo-envelope__image{transform:scale(1.045)}
.intro.step-card .intro-transition-card{
  opacity:1;
  transform:translate(-50%,-50%) scale(1.02);
}
.intro.step-card .photo-envelope{opacity:.28;filter:blur(1px) brightness(1.04)}
.intro.step-exit .intro-transition-card{
  opacity:1;
  transform:translate(-50%,-50%) scale(3.6);
  filter:brightness(1.04);
}
.intro.step-exit .intro__caption,
.intro.step-exit .intro__footer{opacity:0;transform:translateY(8px)}

.intro__caption,.intro__footer{
  transition:opacity .6s ease,transform .6s ease;
}

@media(max-width:900px){
  .photo-envelope-scene{
    width:100vw;
    height:61svh;
    padding:0 18px;
  }
  .photo-envelope{
    width:min(92vw,56svh);
  }
  .intro__caption{top:max(24px,env(safe-area-inset-top))}
  .intro__footer{bottom:max(18px,calc(env(safe-area-inset-bottom) + 10px))}
  .photo-envelope__seal{width:16.5%}
  .intro-transition-card{width:84vw}
}

@media(max-width:560px){
  .photo-envelope-scene{height:58svh}
  .photo-envelope{width:min(93vw,54svh)}
  .intro__names{font-size:30px}
  .intro__date{font-size:9px}
  .intro__open{margin-top:17px}
  .intro-transition-card__monogram{font-size:46px}
}

/* =========================================================
   2026-08-19 v3 — desktop readability, full-width visuals,
   family RSVP and real venue
   ========================================================= */

body{
  font-weight:400;
  color:#453d35;
}
h1,h2,h3{font-weight:500}
p{color:#695f56;font-weight:400}
.eyebrow{font-weight:500;color:#8e654f}
.lead{color:#6b6259;font-weight:400}

.hero__date{
  white-space:nowrap;
  font-weight:500;
  letter-spacing:.24em;
  text-shadow:0 2px 12px rgba(0,0,0,.24);
}
.scroll-arrow{
  width:52px;
  height:52px;
  bottom:30px;
  background:rgba(30,25,21,.08);
  backdrop-filter:blur(2px);
}
.scroll-arrow svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.venue__address{
  margin:12px 0 26px;
  color:#fff;
  font-weight:500;
  font-size:16px;
  text-shadow:0 2px 12px rgba(0,0,0,.28);
}

/* Practical details instead of generic wishes */
.details-section .content-narrow{max-width:1080px}
.wish{
  max-width:900px;
  grid-template-columns:54px 1fr;
  gap:22px;
  margin-top:28px;
  padding-top:28px;
}
.wish__mark{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:24px;
  font-weight:500;
  color:#a8755b;
  line-height:1.2;
}
.wish p{font-size:17px;line-height:1.75;color:#625950}
.wish p strong{color:#4b433b;font-weight:500}

/* Family RSVP */
.family-grid{
  display:grid;
  grid-template-columns:190px 1fr;
  gap:22px;
  align-items:end;
  margin-bottom:8px;
}
.family-count-field input{text-align:center;font-size:18px;font-weight:500}
.children-choice{margin-top:6px}
.children-fields[hidden],#adultNamesField[hidden]{display:none!important}
.children-fields{animation:expandIn .55s var(--ease) both}

@media (min-width:901px){
  :root{--text:1060px}

  .content-narrow{width:min(1060px,calc(100% - 120px))}
  .content-medium{width:min(1180px,calc(100% - 120px))}
  .content-form{width:min(980px,calc(100% - 120px))}

  .text-section{
    padding-top:108px;
    padding-bottom:108px;
  }
  .text-section h2{
    font-size:clamp(64px,4.2vw,88px);
    line-height:1.02;
    margin-bottom:30px;
  }
  .eyebrow{font-size:11px;letter-spacing:.25em}
  .lead{
    max-width:860px;
    font-size:18px;
    line-height:1.78;
  }

  /* Visual sections should use the monitor, not sit in a narrow column */
  .story-photo,
  .story-photo--portrait{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    height:min(780px,60vw)!important;
  }
  .story-photo img,
  .story-photo--portrait img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .story-photo--portrait img{object-position:center 38%}

  .calendar{max-width:860px}
  .calendar>*{font-size:15px;font-weight:400}
  .calendar b{font-size:10px;font-weight:500}
  .countdown-block{width:min(1080px,calc(100% - 120px))}
  .countdown strong{font-size:64px;font-weight:500}
  .countdown span{font-weight:500;color:#87786d}

  .timeline{width:min(1040px,100%)}
  .timeline__item{grid-template-columns:110px 30px 1fr;min-height:138px}
  .timeline__line{left:140px}
  .timeline__item time{font-size:30px;font-weight:500}
  .timeline__item h3{font-size:42px;line-height:1.06}
  .timeline__item p{font-size:16px;line-height:1.65;color:#70665d}

  .venue{height:min(860px,78svh);min-height:680px}
  .venue__content{width:min(1100px,calc(100% - 120px))}
  .venue h2{font-size:clamp(76px,5.8vw,112px)}
  .venue__address{font-size:18px}

  .palette-label{font-size:11px;font-weight:500}
  .palette span{width:68px;height:68px}

  .details-section .content-narrow{width:min(1120px,calc(100% - 120px))}
  .details-section h2{max-width:1000px;margin-left:auto;margin-right:auto}

  .rsvp-section{padding-top:108px;padding-bottom:108px}
  .guest-form{max-width:980px}
  .field,.choice-group legend{font-size:14px;font-weight:500;color:#665d55}
  .field input,.field textarea{font-size:16px;font-weight:400;color:#473f38}
  .choice{font-size:17px;font-weight:400;min-height:46px;color:#5e554d}
  .field input{height:62px}
  .field textarea{min-height:170px}
  .submit-btn{height:62px;font-size:11px;font-weight:500}
}

@media(max-width:900px){
  .hero__date{font-size:12px;font-weight:500}
  .scroll-arrow{width:48px;height:48px;bottom:24px}
  .lead{font-weight:400;color:#6a6158}
  .timeline__item p{font-weight:400;color:#70665e}
  .venue__address{font-size:15px;margin-bottom:22px}
  .wish{grid-template-columns:38px 1fr;gap:14px}
  .wish__mark{font-size:20px}
  .wish p{font-size:15px;line-height:1.72}
  .family-grid{grid-template-columns:1fr;gap:0;margin-bottom:0}
  .family-count-field input{text-align:left}
}

/* =========================================================
   2026-08-20 v4 — fixes from desktop review
   intro composition, light labels, hero/final microcopy,
   sixth dusty-blue dress-code swatch
   ========================================================= */

/* ---------- Intro: keep captions outside the photo ---------- */
.intro{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  justify-items:center;
  align-items:center;
  gap:18px;
  padding:
    max(34px,env(safe-area-inset-top))
    28px
    max(28px,calc(env(safe-area-inset-bottom) + 18px));
}
.intro__caption{
  position:relative;
  top:auto;
  left:auto;
  right:auto;
  z-index:6;
  align-self:start;
  margin:0;
  color:#75685e;
  font-size:11px;
  font-weight:600;
  letter-spacing:.30em;
  line-height:1.25;
  text-align:center;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}
.photo-envelope-scene{
  align-self:center;
  width:min(760px,90vw);
  height:auto;
  min-height:0;
}
.photo-envelope{
  width:min(620px,60svh,84vw);
}
.intro__footer{
  position:relative;
  bottom:auto;
  left:auto;
  right:auto;
  z-index:6;
  align-self:end;
  margin:0;
  padding:0 0 2px;
  color:#5d5046;
  text-align:center;
}
.intro__names{
  margin:0 0 6px;
  font-size:34px;
  font-weight:500;
  line-height:1.05;
  color:#5b4e44;
}
.intro__names i{color:#a66f55}
.intro__date{
  color:#75685e;
  font-size:11px;
  font-weight:600;
  letter-spacing:.25em;
}
.intro__open{
  margin-top:13px;
  padding:8px 18px 2px;
  color:#665a51;
  font-size:10px;
  font-weight:600;
  letter-spacing:.20em;
}
.intro__open-line{
  width:54px;
  height:1px;
  background:#a97860;
  margin-top:10px;
}

/* ---------- Hero: circled microcopy must be clearly readable ---------- */
.hero .eyebrow--light{
  color:#f7eee7;
  font-size:12px;
  font-weight:700;
  letter-spacing:.30em;
  text-shadow:0 2px 14px rgba(0,0,0,.48);
  margin-bottom:20px;
}
.hero h1{
  line-height:.79;
  text-shadow:0 3px 20px rgba(0,0,0,.23);
}
.hero h1 i{
  color:#f0d4bd;
  font-size:.38em;
  line-height:1;
  margin:.14em 0 .11em;
  text-shadow:0 2px 14px rgba(0,0,0,.30);
}
.hero__date{
  margin-top:31px;
  color:#fff;
  font-size:14px;
  font-weight:700;
  letter-spacing:.28em;
  text-shadow:0 2px 14px rgba(0,0,0,.52);
}

/* ---------- Venue: light label above the title ---------- */
.venue .eyebrow--light{
  color:#fff5ed;
  font-size:12px;
  font-weight:700;
  letter-spacing:.29em;
  text-shadow:0 2px 14px rgba(0,0,0,.62);
  margin-bottom:22px;
}

/* ---------- Dress-code: six swatches including dusty blue ---------- */
.palette{
  flex-wrap:wrap;
  row-gap:13px;
}
.is-visible .palette span:nth-child(6){transition-delay:400ms}

/* ---------- Final screen: date and signature readable, not lost ---------- */
.final__hello{
  color:#fff7ef;
  font-size:16px;
  font-weight:600;
  letter-spacing:.18em;
  text-shadow:0 2px 14px rgba(0,0,0,.48);
}
.final h2 i{
  color:#f0d1b9;
  margin:.13em 0 .10em;
  text-shadow:0 2px 14px rgba(0,0,0,.32);
}
.final__date{
  margin-top:31px;
  color:#fff;
  font-size:14px;
  font-weight:700;
  letter-spacing:.24em;
  text-shadow:0 2px 14px rgba(0,0,0,.52);
}
.final__love{
  margin-top:28px;
  color:#fff4eb;
  font-size:11px;
  font-weight:600;
  letter-spacing:.22em;
  text-shadow:0 2px 14px rgba(0,0,0,.48);
}

@media (min-width:901px){
  .photo-envelope{width:min(620px,58svh,72vw)}
  .intro__caption{font-size:11px}
  .intro__names{font-size:36px}
  .intro__date{font-size:11px}
  .intro__open{font-size:10px}
}

@media (max-width:900px){
  .intro{
    gap:12px;
    padding:
      max(24px,env(safe-area-inset-top))
      16px
      max(18px,calc(env(safe-area-inset-bottom) + 10px));
  }
  .intro__caption{
    top:auto;
    font-size:9px;
    letter-spacing:.27em;
  }
  .photo-envelope-scene{
    width:100%;
    height:auto;
    padding:0;
  }
  .photo-envelope{width:min(90vw,55svh)}
  .intro__footer{
    bottom:auto;
    position:relative;
  }
  .intro__names{font-size:30px}
  .intro__date{font-size:10px}
  .intro__open{margin-top:10px;font-size:9px}

  .hero .eyebrow--light,
  .venue .eyebrow--light{
    font-size:10px;
    letter-spacing:.27em;
  }
  .hero h1 i{margin:.12em 0 .09em}
  .hero__date{font-size:12px;margin-top:26px}
  .final__date{font-size:12px;margin-top:26px}
  .final__love{font-size:10px;margin-top:24px}
}

@media (max-width:560px){
  .intro__caption{font-size:8.5px}
  .photo-envelope{width:min(92vw,52svh)}
  .intro__names{font-size:28px}
  .palette{gap:8px}
  .palette span{width:44px;height:44px}
}

/* =========================================================
   Privacy note + informational footer
   ========================================================= */
.privacy-note{
  margin:8px 0 22px;
  color:#786d64;
  font-size:13px;
  font-weight:500;
  line-height:1.65;
}
.site-legal{
  background:#f1e8dc;
  border-top:1px solid rgba(93,80,70,.12);
  color:#776b61;
  text-align:center;
}
.site-legal__inner{
  width:min(760px,calc(100% - 48px));
  margin:0 auto;
  padding:42px 0 max(42px,calc(env(safe-area-inset-bottom) + 26px));
}
.site-legal__monogram{
  margin-bottom:14px;
  color:#5b5047;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:28px;
  line-height:1;
}
.site-legal__monogram i{color:#b27a5d;font-style:italic}
.site-legal p{
  margin:0 auto 10px;
  max-width:680px;
  font-size:12px;
  font-weight:500;
  line-height:1.65;
}
.site-legal__privacy{color:#8b7f75}
.site-legal span{
  display:block;
  margin-top:18px;
  color:#9a8d83;
  font-size:9px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
}
@media (max-width:700px){
  .privacy-note{font-size:12px;line-height:1.6}
  .site-legal__inner{width:min(100% - 34px,680px);padding-top:34px}
  .site-legal p{font-size:11px}
}