@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Manrope:wght@300;400;500&display=swap");
:root{--paper:#f8f5ed;--olive:#424c34;--muted:#717761;--line:#d8dacb;--light:#e9ebdf}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--olive);font-family:Arial,sans-serif;font-size:16px;line-height:1.7}a{color:inherit}button,input,select,textarea{font:inherit}button,a,select,input,textarea{touch-action:manipulation}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #a97947;outline-offset:4px}header{max-width:1240px;margin:auto;padding:25px 5%;display:flex;align-items:center;justify-content:space-between}.monogram{text-decoration:none;font:26px Georgia,serif}.monogram i{font-size:18px;color:#8b937c}nav{display:flex;gap:30px;font-size:13px}nav a{text-decoration:none}.hero{position:relative;isolation:isolate;min-height:700px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:70px 20px}.arch{position:absolute;z-index:-1;inset:15px max(18px,calc((100% - 660px)/2));border:1px solid #cbd1bd;border-radius:50% 50% 8px 8px;background:radial-gradient(ellipse at 50% 0%,#e9eddf88,transparent 70%)}.arch span{position:absolute;top:4%;left:48%;font-size:26px;color:#8f9b7d}.eyebrow{font-size:11px;letter-spacing:.22em;font-weight:600;margin:0 0 25px}h1,h2,h3{font-family:Georgia,'Times New Roman',serif;font-weight:400;line-height:1.1}h1{font-size:clamp(52px,7vw,96px);margin:20px 0}h1 em{display:inline-block;font-size:.65em;color:#8c977b;font-weight:400}h2{font-size:clamp(36px,4vw,53px);margin:0 0 28px}h3{font-size:27px;margin:20px 0 14px}.date{letter-spacing:.3em;font-size:18px}.intro{font-family:Georgia,serif;font-size:21px;margin:25px 0 34px}.button{border:1px solid var(--olive);display:inline-flex;justify-content:space-between;align-items:center;gap:45px;padding:15px 28px;background:var(--olive);color:var(--paper);text-decoration:none;cursor:pointer;font-size:14px}.button:hover{background:#586347}.venue-tag{font-size:10px;letter-spacing:.22em;margin-top:32px}section:not(.hero){max-width:1120px;margin:auto;padding:100px 45px}.letter{text-align:center}.letter p:not(.eyebrow){font-size:18px}.signature{font:italic 24px Georgia,serif;margin-top:35px}.split{display:grid;grid-template-columns:1fr 1fr;gap:85px;align-items:center}.landscape{height:490px;border-radius:220px 220px 3px 3px;background:linear-gradient(#dce1ce 0%,#eeead7 50%,#a9b39a 51%,#879c86 65%,#d5dfd2 66%,#aabfb0 100%);position:relative;overflow:hidden}.sun{width:95px;height:95px;border-radius:50%;background:#f9f2d6;position:absolute;top:90px;right:70px}.lake{position:absolute;inset:65% -30% -10%;border-radius:50%;border-top:2px solid #eff2dc;background:repeating-linear-gradient(175deg,transparent 0 24px,#ffffff22 25px 26px)}.landscape span{position:absolute;bottom:32px;color:#fff;left:0;right:0;text-align:center;font:italic 22px Georgia,serif}.small,small{font-size:13px;color:var(--muted)}.text-link{display:inline-block;margin:15px 20px 0 0;text-underline-offset:6px;font-size:13px}.day{text-align:center;border-top:1px solid var(--line);border-bottom:0}.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:55px}.timeline span{font:italic 22px Georgia,serif;color:#919b7f}.timeline p{font-size:14px}.swatches{display:flex;gap:12px;margin:28px 0}.swatches span{width:45px;height:45px;border-radius:50%;border:1px solid #d3d5c5;background:#efeadb}.swatches span:nth-child(2){background:#c9bda7}.swatches span:nth-child(3){background:#a3ad91}.swatches span:nth-child(4){background:#596449}.details{align-items:start}.rsvp{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;background:var(--light);border-radius:5px}.demo{border-top:1px solid #c8ceba;margin-top:50px;padding-top:20px}.demo label{font-size:12px}.demo small{display:block;margin-top:10px}label{display:block;font-size:14px;margin:18px 0}input:not([type=checkbox]),select,textarea{width:100%;padding:12px;border:1px solid #b9c1ab;background:#fbfaf5;color:var(--olive);border-radius:2px;margin-top:7px}textarea{resize:vertical}fieldset{margin:0 0 28px;border:1px solid #b9c1ab;padding:20px}legend{font:24px Georgia,serif;padding:0 8px}.checks{display:flex;flex-wrap:wrap;gap:6px 18px}.checks label{margin:4px 0}input[type=checkbox]{accent-color:var(--olive);width:16px;height:16px;vertical-align:middle}.subguest{margin-top:24px}footer{text-align:center;padding:70px 20px}footer span{font:32px Georgia,serif}footer p{font-size:11px;letter-spacing:.12em}[hidden]{display:none!important}@media(max-width:700px){header{padding:20px}nav{gap:16px;font-size:12px}.hero{min-height:650px}h1 em{display:block;margin:12px}section:not(.hero){padding:65px 24px}.split,.rsvp{grid-template-columns:1fr;gap:40px}.letter p,.letter h2,.letter .signature{text-wrap:pretty}.landscape{height:370px}.timeline{grid-template-columns:1fr 1fr;gap:25px}.rsvp{margin:0 12px!important}.eyebrow{font-size:10px}.demo{margin-top:25px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Refined botanical stationery */
:root{--paper:#faf8f1;--olive:#46503c;--muted:#747763;--line:#dedccf;--light:#eeeee4}body{font-family:'Manrope',Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.9;background-image:radial-gradient(#b3aa9018 .65px,transparent .65px);background-size:5px 5px}header{padding:26px 6%;max-width:1440px}.monogram{font-family:'Cormorant Garamond',Georgia,serif;font-size:28px}nav{font-size:10px;letter-spacing:.1em;gap:34px}.hero{min-height:780px;padding:95px 20px 80px;overflow:hidden}.arch{inset:35px max(32px,calc((100% - 740px)/2)) 48px;border-radius:48% 48% 0 0;border-color:#c8cbb87a;background:transparent}.arch:after{content:'';position:absolute;inset:9px;border:1px solid #c8cbb83d;border-radius:inherit}.hero:before,.hero:after{content:'';position:absolute;z-index:-1;background:url('botanical.svg') center/contain no-repeat;width:260px;height:480px;opacity:.66;pointer-events:none;bottom:5px;left:calc(50% - 550px);transform:rotate(-12deg)}.hero:after{left:auto;right:calc(50% - 550px);transform:scaleX(-1) rotate(-12deg)}.eyebrow{font-size:9px;font-weight:500;letter-spacing:.25em;color:#727861;margin-bottom:28px}h1,h2,h3,legend{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300}h1{font-size:clamp(70px,8.5vw,118px);line-height:.92;letter-spacing:-.035em;margin:28px 0 25px}h1 em{display:block;font-weight:300;font-size:.44em;line-height:1.15;margin:10px 0;color:#8b9278}h2{font-size:clamp(42px,4.5vw,64px);line-height:1.03;letter-spacing:-.025em}h3{font-size:32px}.date{font-size:12px;letter-spacing:.35em;margin:20px 0 0}.intro{font-family:'Cormorant Garamond',Georgia,serif;font-size:23px;font-style:italic;font-weight:300;line-height:1.5;margin:27px 0}.button{background:transparent;color:var(--olive);border-color:#9ba18d;padding:13px 26px;min-height:48px;font-size:11px;letter-spacing:.08em;transition:background .25s,color .25s}.button:hover{background:var(--olive);color:var(--paper)}.venue-tag{font-size:8px;letter-spacing:.25em;margin-top:25px}section:not(.hero){padding:115px 52px;max-width:1140px}.letter{position:relative}.letter p:not(.eyebrow){font-family:'Cormorant Garamond',Georgia,serif;font-size:25px;line-height:1.6;font-weight:300}.signature{font-family:'Cormorant Garamond',Georgia,serif;font-size:25px;color:#80886c}.split{gap:95px}.landscape{height:510px;border-radius:48% 48% 0 0;outline:1px solid #c9cdbb;outline-offset:12px;filter:saturate(.55);background:linear-gradient(175deg,#e2e4d9 0%,#ede8d8 48%,#c2c9b6 49%,#a7b79e 61%,#c9d6cb 62%,#b6c9be 100%)}.sun{background:#fbf4dcaa;width:70px;height:70px}.landscape span{font-family:'Cormorant Garamond',Georgia,serif;font-size:25px;color:#394d40;background:#faf8f1b8;bottom:30px;padding:9px}.small,small{font-size:12px;line-height:1.8}.text-link{font-size:11px;text-decoration-thickness:1px;text-underline-offset:8px}.day{border-color:var(--line)}.timeline{gap:0;margin-top:65px}.timeline article{padding:0 18px;border-right:1px solid var(--line)}.timeline article:last-child{border:0}.timeline span{font-family:'Cormorant Garamond',Georgia,serif;font-size:32px;font-weight:300}.timeline p{font-size:12px}.details{gap:100px}.swatches{gap:16px;margin:35px 0}.swatches span{width:43px;height:55px;border-radius:50% 50% 3px 3px;outline:1px solid #d9d8ca;outline-offset:4px}.rsvp{border-radius:0;background:#eeeee4a8;border-top:1px solid var(--line);border-bottom:1px solid var(--line);gap:85px}.demo{border-color:var(--line)}label{font-size:12px}input:not([type=checkbox]),select,textarea{border:0;border-bottom:1px solid #b8beaa;background:#fafaf48a;padding:12px 10px;border-radius:0;font-size:14px}fieldset{border:0;border-top:1px solid #b8beaa;padding:24px 0 0}legend{font-size:30px;padding:0 14px 0 0}.checks label{font-size:12px}.rsvp .button{background:var(--olive);color:var(--paper)}footer{padding:90px 20px}footer span{font:italic 44px 'Cormorant Garamond',Georgia,serif}footer p{font-size:9px;color:var(--muted);letter-spacing:.13em}@keyframes arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.hero h1,.hero .intro{animation:arrive 1.2s ease-out both}.hero .intro{animation-delay:.15s}@media(max-width:700px){header{padding:19px 24px}nav{gap:18px;font-size:9px}.hero{min-height:735px;padding:100px 25px 75px}.hero:before{width:150px;height:340px;left:-65px;bottom:5px;opacity:.4}.hero:after{width:150px;height:340px;right:-65px;bottom:5px;opacity:.4}.arch{inset:25px 26px 40px}.hero h1{font-size:82px}.hero .eyebrow{font-size:8px;letter-spacing:.18em}.intro{font-size:22px}section:not(.hero){padding:78px 28px}.split,.rsvp{gap:50px}.landscape{height:400px;margin:12px}.letter p:not(.eyebrow){font-size:23px}.timeline{row-gap:38px}.timeline article:nth-child(2){border:0}.timeline article{padding:0 10px}.timeline h3{font-size:29px}.rsvp{margin:0 16px!important}.preview{font-size:9px}.details h2{font-size:46px}footer{padding:65px 20px}}@media(prefers-reduced-motion:reduce){.hero h1,.hero .intro{animation:none}.button{transition:none}}
/* Selected name lettering: refined classical italic. */
.hero h1{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:300;letter-spacing:-.025em}
/* Sculptural ivory calla lilies. */
.hero:before,.hero:after{opacity:.85;transform:rotate(-5deg)}
.hero:after{transform:scaleX(-1) rotate(-5deg)}
@media(max-width:700px){.hero:before,.hero:after{opacity:.55}}

/* Envelope opening screen. */
.envelope-screen{position:fixed;inset:0;z-index:100;background:var(--paper,#faf8f1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:36px;padding:20px;transition:opacity .8s ease}
.envelope-screen.open{opacity:0;pointer-events:none;transition-delay:1.45s}
body.env-locked{overflow:hidden}
.envelope{position:relative;width:min(340px,86vw);aspect-ratio:34/23;cursor:pointer;perspective:1000px;outline-offset:10px}
.env-back{position:absolute;inset:0;border-radius:10px;background:#b09677;box-shadow:0 26px 60px -18px rgba(96,76,48,.42)}
.env-card{position:absolute;left:5%;right:5%;top:6%;bottom:6%;z-index:2;background:#fcfbf5;border-radius:6px;box-shadow:0 2px 14px rgba(70,80,60,.16);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:14px;transition:transform .75s cubic-bezier(.25,.8,.3,1) .55s}
.env-card strong{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:clamp(22px,7vw,28px);letter-spacing:-.01em;color:#46503c}
.env-card em{font-style:italic;color:#8b9278}
.env-card span{font-size:9px;letter-spacing:.3em;color:#81876f}
.env-front{position:absolute;inset:0;z-index:3;border-radius:10px;background:#cdb593;-webkit-clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%);clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%)}
.env-flap{position:absolute;left:0;right:0;top:0;height:56%;z-index:4;background:#c2a881;-webkit-clip-path:polygon(0 0,100% 0,50% 100%);clip-path:polygon(0 0,100% 0,50% 100%);border-radius:10px 10px 0 0;transform-origin:top center;transition:transform .6s ease,z-index 0s .3s}
.env-seal{position:absolute;left:50%;top:54%;z-index:5;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:#46503c;color:#f4f2e8;display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-size:15px;font-style:italic;box-shadow:0 4px 14px rgba(70,80,60,.4),inset 0 0 0 3px rgba(244,242,232,.25);transition:transform .35s ease,opacity .35s ease}
.envelope.open{cursor:default}
.envelope.open .env-flap{z-index:1}
.envelope.open .env-seal{opacity:0;transform:translate(-50%,-50%) scale(1.3)}
.envelope.open .env-card{transform:translateY(-92%)}
.env-hint{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#8a8f79;animation:hint-pulse 2.4s ease-in-out infinite}
@keyframes hint-pulse{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.env-hint{animation:none!important}}

/* Calendar, dress code, wishes. */
.calendar{text-align:center}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px 8px;max-width:400px;margin:45px auto 0;font-size:13px;color:var(--olive)}
.cal-grid span{font-size:9px;letter-spacing:.15em;color:#a0a58f;padding:4px 0}
.cal-grid b{font-weight:400;padding:7px 0;font-family:'Cormorant Garamond',Georgia,serif;font-size:17px}
.cal-grid i{padding:7px 0}
.cal-grid .today{position:relative;color:#f8f6ec;background:#46503c;border-radius:50%;box-shadow:0 0 0 5px var(--paper),0 0 0 6px #c6cab3}
.cal-note{margin-top:34px;font-size:10px;letter-spacing:.28em;color:#81876f}
.details .swatches span{border-radius:50%;height:52px;width:52px}
.wishes{text-align:center}
.wishes p:not(.eyebrow):not(.small){font-family:'Cormorant Garamond',Georgia,serif;font-size:23px;font-weight:300;line-height:1.65}
.wishes .wishes-lottery{margin-top:26px}
.wishes .small{color:#81876f}

/* Couple photo in arch frame. */
.hero-photo{margin:6px 0 34px;padding:9px;border:1px solid #c8cbb8a0;border-radius:190px 190px 12px 12px}
.hero-photo img{display:block;width:min(300px,70vw);aspect-ratio:3/4;object-fit:cover;border-radius:180px 180px 6px 6px}
@media(max-width:700px){.hero-photo img{width:min(240px,72vw)}}

/* Envelope opening: card zooms out to reveal the invitation. */
.envelope.open{animation:env-drop .8s ease 1.35s forwards}
.envelope.open .env-flap{filter:brightness(.96)}
.envelope.open .env-card{transform:none;transition:none;animation:card-out 1.9s cubic-bezier(.3,.7,.35,1) .55s backwards}
.envelope-screen.open{transition-delay:2.05s}
@keyframes card-out{0%{transform:translateY(0) scale(1)}32%{transform:translateY(-92%) scale(1)}52%{transform:translateY(-92%) scale(1.05);opacity:1}100%{transform:translateY(-24%) scale(3.4);opacity:0}}
@keyframes env-drop{to{transform:translateY(36px);opacity:0}}

/* Reduced motion: gentle fade instead of the opening animation. */
@keyframes card-out-soft{0%{transform:translateY(0);opacity:1}45%{transform:translateY(-97%);opacity:1}100%{transform:translateY(-97%);opacity:0}}

/* Big hero photo with names on the sky. */
.hero .arch{display:none}
.hero-photo{position:relative;width:min(560px,88vw);margin:18px 0 36px;padding:10px;border:1px solid #c8cbb8a0;border-radius:290px 290px 16px 16px}
.hero-photo img{width:100%;aspect-ratio:3/4;border-radius:280px 280px 10px 10px}
.hero-photo figcaption{position:absolute;top:0;left:0;right:0;padding-top:9%;text-align:center;pointer-events:none}
.hero-photo h1{margin:0;color:#f7f4ea;font-size:clamp(52px,7vw,88px);text-shadow:0 2px 24px rgba(46,42,66,.5)}
.hero-photo h1 em{color:#eae6d5}
.hero-photo .date{margin-top:6px;color:#f2efe3;font-size:13px;text-shadow:0 1px 14px rgba(46,42,66,.45)}
.hero-photo.broken{padding:0;border:0}
.hero-photo.broken img{display:none}
.hero-photo.broken figcaption{position:static;padding-top:0}
.hero-photo.broken h1{color:var(--olive);text-shadow:none;font-size:clamp(70px,8.5vw,118px)}
.hero-photo.broken .date{color:var(--olive);text-shadow:none}

/* Hero photo fine-tuning: keep names and date on the sky. */
.hero-photo figcaption{padding-top:6%}
.hero-photo h1{font-size:clamp(48px,6.4vw,78px)}
.hero-photo .date{font-size:14px;letter-spacing:.32em;text-shadow:0 1px 6px rgba(30,26,50,.75),0 0 18px rgba(30,26,50,.5)}

/* Natural envelope opening, physics-like phases. */
.envelope{transition:transform .3s ease}
.envelope:hover{transform:translateY(-5px)}
.env-flap{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.env-flap i{position:absolute;inset:0;-webkit-clip-path:polygon(0 0,100% 0,50% 100%);clip-path:polygon(0 0,100% 0,50% 100%);background:#e2d5b8;border-radius:10px 10px 0 0;transform:rotateX(180deg);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.envelope.open .env-seal{animation:seal-pop .55s ease forwards}
.envelope.open .env-flap{animation:flap-open .75s cubic-bezier(.45,.9,.4,1) .2s forwards}
.envelope.open .env-card{animation:card-out 2.3s cubic-bezier(.33,.72,.3,1) .8s backwards}
.envelope.open{animation:env-drop .7s cubic-bezier(.5,0,.8,.4) 2s forwards}
.envelope-screen.open{transition-delay:2.6s}
@keyframes seal-pop{0%{transform:translate(-50%,-50%) scale(1);opacity:1}30%{transform:translate(-50%,-50%) scale(1.18);opacity:1}100%{transform:translate(-50%,-50%) scale(.85);opacity:0}}
@keyframes flap-open{0%{transform:rotateX(0)}55%{transform:rotateX(-150deg)}100%{transform:rotateX(-178deg)}}
@keyframes card-out{0%{transform:translateY(0) rotate(0) scale(1);opacity:1;box-shadow:0 2px 14px rgba(70,80,60,.16)}28%{transform:translateY(-97%) rotate(-2deg) scale(1);opacity:1;box-shadow:0 14px 34px rgba(70,80,60,.25)}42%{transform:translateY(-97%) rotate(0) scale(1.04);opacity:1;box-shadow:0 18px 44px rgba(70,80,60,.28)}78%{opacity:1}100%{transform:translateY(-20%) rotate(0) scale(3.6);opacity:0;box-shadow:0 18px 44px rgba(70,80,60,.28)}}
@keyframes env-drop{to{transform:translateY(60px) scale(.96);opacity:0}}


/* Raise botanicals to flank the hero photo. */
.hero:before,.hero:after{bottom:auto;top:50%;margin-top:-240px}

/* Mobile hero: keep names on the sky, peek botanicals beside the arch. */
@media(max-width:700px){
.hero-photo figcaption{padding-top:4%}
.hero-photo h1{font-size:11.5vw}
.hero:before{left:calc(50% - 58vw);top:100px;margin-top:0;opacity:.5}
.hero:after{left:auto;right:calc(50% - 58vw);top:100px;margin-top:0;opacity:.5}
}

/* Reduced motion: keep the opening, skip only the camera zoom. */
@media (prefers-reduced-motion:reduce){.envelope:hover{transform:none}.envelope.open .env-card{animation-name:card-out-soft!important}}

.envelope-screen.open .env-hint{opacity:0;transition:opacity .35s ease}

/* Back to text-only hero: restore arch and low botanicals. */
.hero .arch{display:block}
.hero:before,.hero:after{top:auto;bottom:5px;margin-top:0}
@media(max-width:700px){.hero:before{left:calc(50% - 550px);top:auto;bottom:5px}.hero:after{left:auto;right:calc(50% - 550px);top:auto;bottom:5px}}

/* Card comes in front of the envelope during zoom; envelope leaves earlier. */
@keyframes card-out{0%{transform:translateY(0) rotate(0) scale(1);opacity:1;z-index:2;box-shadow:0 2px 14px rgba(70,80,60,.16)}28%{transform:translateY(-97%) rotate(-2deg) scale(1);opacity:1;z-index:2;box-shadow:0 14px 34px rgba(70,80,60,.25)}42%{transform:translateY(-97%) rotate(0) scale(1.04);opacity:1;z-index:6;box-shadow:0 18px 44px rgba(70,80,60,.28)}78%{opacity:1;z-index:6}100%{transform:translateY(-20%) rotate(0) scale(3.4);opacity:0;z-index:6;box-shadow:0 18px 44px rgba(70,80,60,.28)}}
@keyframes card-out-soft{0%{transform:translateY(0);opacity:1;z-index:2}40%{transform:translateY(-97%);opacity:1;z-index:2}55%{transform:translateY(-97%);opacity:1;z-index:6}100%{transform:translateY(-97%);opacity:0;z-index:6}}
.envelope.open{animation:env-drop .7s cubic-bezier(.5,0,.8,.4) 1.7s forwards}

/* Stacked names on the envelope card, matching the hero. */
.env-card strong{font-size:clamp(26px,8vw,36px);line-height:1.02;font-weight:300}
.env-card strong em{display:block;font-size:.5em;margin:6px 0;font-style:italic;font-weight:300}

/* One continuous reveal: card stays visible and the overlay fade carries it into the page. */
@keyframes card-out{0%{transform:translateY(0) rotate(0) scale(1);opacity:1;z-index:2;box-shadow:0 2px 14px rgba(70,80,60,.16)}28%{transform:translateY(-97%) rotate(-2deg) scale(1);opacity:1;z-index:2;box-shadow:0 14px 34px rgba(70,80,60,.25)}42%{transform:translateY(-97%) rotate(0) scale(1.04);opacity:1;z-index:6;box-shadow:0 18px 44px rgba(70,80,60,.28)}100%{transform:translateY(-20%) rotate(0) scale(3.4);opacity:1;z-index:6;box-shadow:0 18px 44px rgba(70,80,60,.28)}}
@keyframes card-out-soft{0%{transform:translateY(0);opacity:1;z-index:2}40%{transform:translateY(-97%);opacity:1;z-index:2}55%{transform:translateY(-97%);opacity:1;z-index:6}100%{transform:translateY(-97%);opacity:1;z-index:6}}
.envelope-screen.open{transition-delay:2.3s;transition-duration:.9s}

/* Extra sprigs peeking at the arch top corners. */
.sprig{position:absolute;z-index:-1;width:150px;opacity:.6;pointer-events:none;top:70px;left:calc(50% - 335px);transform:rotate(24deg)}
.sprig.right{left:auto;right:calc(50% - 335px);transform:scaleX(-1) rotate(24deg)}
@media(max-width:700px){.sprig{width:105px;top:110px;left:calc(50% - 47vw)}.sprig.right{left:auto;right:calc(50% - 47vw)}}

/* Sprigs join the calla bouquets at the base instead. */
.sprig{top:auto;bottom:25px;left:calc(50% - 515px);width:130px;transform:rotate(-16deg);opacity:.55}
.sprig.right{left:auto;right:calc(50% - 515px);transform:scaleX(-1) rotate(-16deg)}
@media(max-width:700px){.sprig{display:none}}

/* Tighter hero on phones: less empty space on top. */
@media(max-width:700px){.hero{min-height:0;justify-content:flex-start;padding:56px 20px 70px}.hero .eyebrow{margin-bottom:18px}}

/* Countdown and closing line. */
.countdown{margin-top:55px}
.cd-grid{display:flex;gap:clamp(24px,6vw,48px);justify-content:center;margin-top:22px}
.cd-grid b{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;font-size:clamp(34px,6vw,46px);line-height:1;font-variant-numeric:tabular-nums}
.cd-grid span{display:block;margin-top:8px;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:#a0a58f}
.see-you{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:19px;color:#80886c;margin-top:18px}

/* Full-screen envelope: four olive flaps meet at a gold wax seal. */
.envelope-screen{background:transparent;transition:none}
.envelope-screen.open{opacity:1;transition:none}
.flap{position:absolute;inset:0;background:linear-gradient(160deg,#4c5641,#3e4835)}
.flap-left{z-index:1;-webkit-clip-path:polygon(0 0,50.4% 50%,0 100%);clip-path:polygon(0 0,50.4% 50%,0 100%)}
.flap-right{z-index:1;-webkit-clip-path:polygon(100% 0,100% 100%,50.4% 50%);clip-path:polygon(100% 0,100% 100%,50.4% 50%)}
.flap-bottom{z-index:2;-webkit-clip-path:polygon(0 100%,50.4% 50%,100% 100%);clip-path:polygon(0 100%,50.4% 50%,100% 100%);background:linear-gradient(200deg,#47513c,#39422f)}
.flap-top{z-index:3;-webkit-clip-path:polygon(0 0,100% 0,50.4% 50%);clip-path:polygon(0 0,100% 0,50.4% 50%);background:linear-gradient(180deg,#505a44,#424c38);filter:drop-shadow(0 12px 20px rgba(20,26,16,.45))}
.envelope-screen.open .flap{transition:transform 1.05s cubic-bezier(.65,0,.25,1) .3s}
.envelope-screen.open .flap-top{transform:translateY(-104%)}
.envelope-screen.open .flap-bottom{transform:translateY(104%)}
.envelope-screen.open .flap-left{transform:translateX(-104%)}
.envelope-screen.open .flap-right{transform:translateX(104%)}
.flap-title{position:absolute;top:15%;left:0;right:0;margin:0;text-align:center;color:#f3f0e4;font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(28px,4.6vw,46px);font-weight:300;line-height:1.25}
.flap-title em{font-style:italic}
.wax{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;width:96px;height:96px;cursor:pointer;transition:transform .35s ease,opacity .35s ease;filter:drop-shadow(0 5px 12px rgba(20,26,16,.5))}
.wax svg{display:block;width:100%;height:100%}
.wax span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-top:8px;font-family:Georgia,serif;font-style:italic;font-size:14px;color:#5d4718}
.wax:hover{transform:translate(-50%,-50%) scale(1.06)}
.envelope-screen.open .wax{opacity:0;transform:translate(-50%,-50%) scale(1.3)}
.env-hint{position:absolute;bottom:calc(6% + env(safe-area-inset-bottom, 0px));left:14px;right:14px;margin:0;text-align:center;color:#c9ceba;line-height:1.45;white-space:normal}
@media(max-width:600px){.env-hint{bottom:calc(28px + env(safe-area-inset-bottom, 0px));font-size:9px;letter-spacing:.14em;padding:0 10px}}
@media (prefers-reduced-motion:reduce){.envelope-screen.open .flap{transition:opacity .6s ease .25s,transform 0s}.envelope-screen.open .flap{opacity:0;transform:none}}

/* Bigger realistic wax heart. */
.wax{width:128px;height:128px}

.wax{width:150px;height:150px}

/* Photoreal wax seal image. */
.wax{width:170px;height:170px}
.wax img{display:block;width:100%;height:100%;object-fit:contain}

/* Real flap overlap shadows; flaps slide open for everyone. */
.flap-top{filter:drop-shadow(0 16px 24px rgba(18,24,14,.5))}
.flap-bottom{filter:drop-shadow(0 -12px 20px rgba(18,24,14,.35))}
@media (prefers-reduced-motion:reduce){.envelope-screen.open .flap{opacity:1;transition:transform 1.05s cubic-bezier(.65,0,.25,1) .3s}.envelope-screen.open .flap-top{transform:translateY(-104%)}.envelope-screen.open .flap-bottom{transform:translateY(104%)}.envelope-screen.open .flap-left{transform:translateX(-104%)}.envelope-screen.open .flap-right{transform:translateX(104%)}}

/* Match the reference: bigger seal, flap vignette, calligraphy title. */
.envelope-screen:after{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 32%,rgba(15,20,12,.38) 100%);transition:opacity .5s ease .3s}
.envelope-screen.open:after{opacity:0}
.flap-title{font-family:'Marck Script',Georgia,serif;font-size:clamp(38px,5.6vw,64px);line-height:1.15}
.wax{width:210px;height:210px}
@media(max-width:700px){.wax{width:150px;height:150px}.flap-title{font-size:clamp(34px,9vw,48px)}}

/* Paper-like envelope: dark seam grooves, grain texture, deeper shadows. */
.envelope-screen{background:#262d1b}
.flap{inset:-12px;background-blend-mode:overlay}
.flap-left{transform:translateX(-10px);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"),linear-gradient(150deg,#5f6749,#4a5339)}
.flap-right{transform:translateX(10px);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"),linear-gradient(210deg,#5f6749,#4a5339)}
.flap-bottom{transform:translateY(10px);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"),linear-gradient(200deg,#5a6247,#454e37)}
.flap-top{transform:translateY(-10px);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"),linear-gradient(180deg,#697150,#545c41);filter:drop-shadow(0 20px 30px rgba(12,16,9,.6))}

/* Flap-on-flap overlap: paper meets paper, soft shadow only. */
.envelope-screen{background:#4a5339}
.flap-left,.flap-right,.flap-bottom,.flap-top{transform:none}
.flap-top{filter:drop-shadow(0 12px 22px rgba(18,24,14,.4))}
.flap-bottom{filter:drop-shadow(0 -6px 14px rgba(18,24,14,.18))}

/* Top flap tip reaches below center and lies over the bottom flap. */
.flap-top{-webkit-clip-path:polygon(0 0,100% 0,50% 55.5%);clip-path:polygon(0 0,100% 0,50% 55.5%);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"),linear-gradient(180deg,#6d7553,#59614a);filter:drop-shadow(0 16px 26px rgba(18,24,14,.45))}
.flap-bottom{-webkit-clip-path:polygon(0 100%,50% 49.5%,100% 100%);clip-path:polygon(0 100%,50% 49.5%,100% 100%)}
.wax{top:51%}

/* Flap title in site serif. */
.flap-title{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:300;font-size:clamp(36px,4.8vw,56px);top:17%}

/* Day timeline: dotted track, numbered nodes, labels alternating, running heart. */
.timeline{position:relative;grid-template-columns:repeat(4,1fr);gap:0;margin-top:70px}
.timeline article.tl-item{display:grid;grid-template-rows:158px 0 158px;justify-items:center;align-items:center;text-align:center;padding:0 16px;border:0;position:relative}
.tl-item:before{content:'';position:absolute;top:158px;left:0;right:0;border-top:2px dashed #cdd2c0}
.tl-item:first-child:before{left:12%}
.tl-item:last-child:before{right:12%}
.tl-card{max-width:230px}
.tl-item.up .tl-card{grid-row:1;align-self:end;padding-bottom:26px}
.tl-item.down .tl-card{grid-row:3;align-self:start;padding-top:26px}
.timeline .tl-node{grid-row:2;position:relative;z-index:2;width:46px;height:46px;border-radius:50%;border:1px solid #b8beaa;background:var(--paper);display:flex;align-items:center;justify-content:center;font:italic 17px Georgia,serif;color:#8b937c}
.tl-card h3{font-size:25px;margin:0 0 5px}
.tl-card p{font-size:12px;line-height:1.7;color:var(--muted);margin:0}
.timeline .tl-heart{position:absolute;top:145px;left:0;z-index:3;color:#5f6326;animation:tl-run 17s ease-in-out infinite alternate}
.tl-heart svg{display:block;width:27px;height:27px;fill:currentColor;transform-origin:center center;animation:tl-beat 2.3s ease-in-out infinite}
@keyframes tl-run{from{left:0}to{left:calc(100% - 27px)}}
@keyframes tl-beat{0%,100%{transform:scale(1)}14%{transform:scale(1.22)}28%{transform:scale(1)}42%{transform:scale(1.13)}56%{transform:scale(1)}}

/* Timeline on phones: vertical dotted track, heart runs downward. */
@media(max-width:700px){
  .timeline{grid-template-columns:1fr;margin-top:55px}
  .timeline article.tl-item{grid-template-rows:none;grid-template-columns:56px 1fr;justify-items:start;align-items:center;text-align:left;padding:10px 0;min-height:110px}
  .tl-item:before{display:none}
  .tl-item:first-child:before,.tl-item:last-child:before{display:none}
  .timeline:before{content:'';position:absolute;left:27px;top:16px;bottom:16px;border-left:2px dashed #cdd2c0}
  .tl-item.up .tl-card,.tl-item.down .tl-card{grid-row:1;grid-column:2;align-self:center;padding:0 0 0 14px}
  .timeline .tl-node{grid-row:1;grid-column:1}
  .timeline .tl-heart{top:0;left:14px;animation:tl-run-v 17s ease-in-out infinite alternate}
  .tl-card h3{font-size:26px}
}
@keyframes tl-run-v{from{top:0}to{top:calc(100% - 27px)}}
/* Soften the running heart instead of removing it. */
@media(prefers-reduced-motion:reduce){
  .timeline .tl-heart{animation-duration:55s}
  .tl-heart svg{animation-duration:7s}
}

/* Heart follows the scroll: no autonomous run or pulse. */
.timeline .tl-heart{animation:none}
.tl-heart svg{animation:none}

/* Vertical timeline: the track runs downward, the heart rides it with the scroll. */
.timeline{grid-template-columns:1fr;max-width:560px;margin:65px auto 0;gap:0}
.timeline:before{display:none}
.timeline article.tl-item{display:grid;grid-template-columns:64px 1fr;grid-template-rows:none;justify-items:start;align-items:start;text-align:left;padding:0 0 50px;min-height:0;border:0}
.tl-item:before{display:none}
.tl-item:after{content:'';position:absolute;left:31px;top:23px;height:100%;border-left:2px dashed #cdd2c0}
.tl-item:last-of-type:after{display:none}
.timeline .tl-node{grid-row:1;grid-column:1}
.tl-card{max-width:340px;padding-top:7px}
.tl-card h3{font-size:27px}
.tl-card p{font-size:13px}
.timeline .tl-heart{left:18.5px;top:9.5px}

/* Winding timeline path (reference-style): heart rides the curve with the scroll. */
.timeline{display:block;position:relative;height:1500px;max-width:640px;margin:60px auto 0}
.timeline .tl-path{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}
.tl-path path{fill:none;stroke:#5f6326;stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.timeline article.tl-item{position:absolute;display:block;padding:0;border:0;margin:0;z-index:2;text-align:left}
.tl-item:before,.tl-item:after{display:none}
.timeline article.tl-item:nth-of-type(1){left:0;top:11%;width:62%;text-align:right}
.timeline article.tl-item:nth-of-type(2){left:36%;top:31%;width:64%;text-align:left}
.timeline article.tl-item:nth-of-type(3){left:0;top:49.5%;width:64%;text-align:right}
.timeline article.tl-item:nth-of-type(4){left:44%;top:63%;width:56%;text-align:left;padding-left:10px}
.timeline article.tl-item:nth-of-type(5){left:0;top:85%;width:64%;text-align:right}
.tl-card{max-width:none;padding:0}
.tl-card h3{font-size:31px;font-style:italic;margin:0 0 4px}
.tl-card p{font-size:12.5px}
.timeline .tl-heart{left:0;top:0;transform:translate3d(0,0,0) translate(-50%,-50%);will-change:transform;animation:none}
.tl-heart svg{width:30px;height:30px;animation:none}
@media(max-width:700px){
  .timeline{max-width:none;margin:46px 3% 0}
  .tl-card h3{font-size:27px}
  .timeline article.tl-item:nth-of-type(1){top:10%}
  .timeline article.tl-item:nth-of-type(2){top:30%}
  .timeline article.tl-item:nth-of-type(3){top:47%}
  .timeline article.tl-item:nth-of-type(4){top:64.5%}
  .timeline article.tl-item:nth-of-type(5){top:85%}
}
/* Asymmetric editorial invitation, June 2027. */
.hero.editorial-hero{min-height:790px;max-width:1600px;margin:auto;padding:75px max(7%,calc((100% - 1160px)/2)) 65px;display:block;text-align:left;overflow:hidden;isolation:isolate}
.editorial-hero:before,.editorial-hero:after{display:none!important}
.hero-copy{position:relative;z-index:2;width:650px;max-width:68%}
.editorial-hero .eyebrow{margin:0 0 48px;font-size:9px;letter-spacing:.24em}
.editorial-hero h1{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:300;font-size:clamp(100px,10.5vw,150px);line-height:.86;letter-spacing:-.04em;margin:0 0 45px;position:relative;padding-bottom:8px;animation:none}
.name-mark,.name-polina{display:block}.name-polina{margin-left:105px;margin-top:3px}
.editorial-hero h1 em{font-size:48px;line-height:1;margin:0 0 0 60px;font-weight:300;color:#8d967c}
.hero-meta{display:flex;align-items:center;gap:20px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 30px}.hero-meta>span:nth-child(2){color:#9da58c}
.editorial-hero .intro{font-size:25px;line-height:1.55;margin:0 0 45px;animation:none}
.hero-details{display:inline-flex;align-items:center;gap:45px;text-decoration:none;border-bottom:1px solid #b8beaa;padding:12px 0;font-size:11px;letter-spacing:.08em}.hero-details span{font-size:22px}.hero-details:hover{border-color:var(--olive)}
.hero-calla{position:absolute;width:440px;height:845px;object-fit:contain;right:-55px;top:8px;z-index:1;pointer-events:none;transform:rotate(10deg)}
.hero-side-note{position:absolute;right:30px;top:70px;writing-mode:vertical-rl;font-size:8px;letter-spacing:.25em;color:#818a71}
@media(min-width:1450px){.hero-calla{right:30px;width:500px;height:920px;top:-25px}}
@media(max-width:900px){.hero.editorial-hero{padding:65px 7% 55px;min-height:730px}.hero-copy{max-width:77%}.editorial-hero h1{font-size:108px}.name-polina{margin-left:55px}.hero-calla{right:-145px;width:390px;opacity:.8}.hero-meta{gap:12px;font-size:9px}.hero-side-note{display:none}}
@media(max-width:600px){.hero.editorial-hero{padding:48px 25px 55px;min-height:670px}.hero-copy{width:100%;max-width:100%}.editorial-hero .eyebrow{font-size:8px;letter-spacing:.15em;margin-bottom:48px}.editorial-hero h1{font-size:clamp(78px,20vw,110px);margin-bottom:38px;width:85%}.name-polina{margin-left:30px}.editorial-hero h1 em{font-size:34px;margin-left:25px;line-height:1.2}.hero-meta{gap:10px;font-size:8px;letter-spacing:.09em;flex-wrap:wrap;max-width:85%}.editorial-hero .intro{font-size:21px;max-width:82%;margin-bottom:30px}.hero-calla{width:240px;height:520px;right:-137px;top:125px;opacity:.6;transform:rotate(5deg)}.hero-details{font-size:10px;gap:25px}}
/* Phone-first hero: reserve a visible floral column beside the names. */
@media(max-width:600px){
 .hero.editorial-hero{min-height:700px;padding:42px 22px 45px}
 .editorial-hero .eyebrow{max-width:100%;font-size:8px;margin-bottom:46px}
 .editorial-hero h1{font-size:clamp(70px,18vw,100px);width:78%;margin-bottom:43px}
 .name-polina{margin-left:14px}
 .editorial-hero h1 em{margin-left:22px}
 .hero-calla{width:170px;height:360px;right:-26px;top:102px;opacity:.9;transform:rotate(6deg);object-fit:contain;z-index:1}
 .hero-copy{z-index:2}
 .hero-meta{max-width:100%;font-size:9px;gap:12px}
 .editorial-hero .intro{max-width:100%;font-size:21px;margin-bottom:28px}
}
@media(max-width:360px){.hero-calla{width:145px;height:330px;right:-25px;top:100px}.editorial-hero h1{font-size:67px}.hero-meta{font-size:8px;gap:9px}}
@media(max-width:600px){.hero-calla{height:280px;width:155px;top:92px;right:-25px}}
@media(max-width:360px){.hero-calla{height:270px;width:140px;top:92px;right:-24px}}

/* Travel distances under the place info. */
.distances{display:flex;flex-wrap:wrap;gap:2px 22px;margin-top:12px}
.distances span{white-space:nowrap}

/* Venue photo in the place section (replace place.jpg to swap the picture). */
.landscape{filter:saturate(.95)}
.landscape img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% 58%}

/* Organic pebble crop instead of the arch (tweak via .landscape border-radius). */
.landscape{border-radius:47% 53% 42% 58% / 55% 43% 57% 45%}
@media(max-width:700px){
  #place .landscape{height:260px;border-radius:24px;aspect-ratio:auto}
  #place .landscape img{object-position:center 62%}
  #place h2{white-space:nowrap;font-size:clamp(32px,8vw,40px)}
  #place h2 br{display:none}
}

/* Draft schedule times above each timeline title. */
.timeline .tl-time{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-size:19px;letter-spacing:.16em;color:#8b9278;margin-bottom:2px}
.tl-time + h3{margin-top:4px}

/* Dress-code palette: single ordered set lives at the end of the file. */

/* Phone: hero hugs its content — no empty field before the letter. */
@media(max-width:600px){
  .hero.editorial-hero{min-height:0;padding:46px 22px 34px}
  .editorial-hero .eyebrow{margin-bottom:30px}
  .editorial-hero h1{margin-bottom:36px}
  section.letter{padding-top:60px}
}




/* Save-the-date calendar in the airy editorial style. */
.calendar h2{font-size:clamp(46px,8vw,64px);line-height:1.05;margin:14px 0 0}
.cal-grid{max-width:480px;gap:12px 8px;font-size:14px;margin-top:52px}
.cal-grid span{font-size:9px;letter-spacing:.2em;padding:4px 0}
.cal-grid b{font-size:21px;padding:6px 0;color:#5f674f;font-variant-numeric:oldstyle-nums}
.cal-grid .today{width:42px;height:42px;line-height:42px;text-align:center;margin:-4px auto;border-radius:50%;color:#f8f6ec;background:#46503c;box-shadow:0 0 0 5px var(--paper),0 0 0 6px #c9cdb6}
.cal-note{margin-top:40px;font-size:10px;letter-spacing:.3em;color:#8d9179}
.countdown{margin-top:64px}
.cd-grid b{font-size:clamp(40px,7vw,56px)}

/* Pulsing heart pinned to the wedding date. */
.cal-grid .today{position:relative}
.cal-heart{position:absolute;top:-7px;right:-9px;width:15px;height:14px;pointer-events:none;animation:heart-beat 1.3s ease-in-out infinite;filter:drop-shadow(0 1px 2px rgba(70,80,60,.25))}
.cal-heart path{fill:#bd7a5e}
@keyframes heart-beat{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.18);opacity:1}}
@media (prefers-reduced-motion:reduce){.cal-heart{animation:heart-beat-soft 2.6s ease-in-out infinite}@keyframes heart-beat-soft{0%,100%{opacity:.6}50%{opacity:1}}}

/* The date is circled by a beating hand-drawn heart (no badge). */
.cal-grid .today{background:none;box-shadow:none;color:#46503c;width:42px;height:42px;line-height:42px}
.cal-heart{left:50%;top:50%;right:auto;width:52px;height:47px;transform:translate(-50%,-52%) rotate(-4deg);animation:heart-enclose 1.3s ease-in-out infinite;filter:none}
.cal-heart path{fill:none;stroke:#bd7a5e;stroke-width:2.4;stroke-linecap:round}
@keyframes heart-enclose{0%,100%{transform:translate(-50%,-52%) rotate(-4deg) scale(1);opacity:.92}50%{transform:translate(-50%,-52%) rotate(-4deg) scale(1.07);opacity:1}}

/* Nudge the heart so the oldstyle numerals sit optically centered. */
.cal-heart{width:54px;height:49px;transform:translate(-50%,-45%) rotate(-4deg)}
@keyframes heart-enclose{0%,100%{transform:translate(-50%,-45%) rotate(-4deg) scale(1);opacity:.92}50%{transform:translate(-50%,-45%) rotate(-4deg) scale(1.07);opacity:1}}

/* Date digits drawn inside the heart svg for exact optical centering. */
.cal-heart{width:72px;height:66px}
.cal-heart text{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:19px;text-anchor:middle;dominant-baseline:central;fill:#46503c;font-variant-numeric:oldstyle-nums}
.cal-heart path{stroke-width:2.5}

/* Align the heart with the number row. */
.cal-heart{transform:translate(-50%,calc(-45% + 9px)) rotate(-4deg)}
@keyframes heart-enclose{0%,100%{transform:translate(-50%,calc(-45% + 9px)) rotate(-4deg) scale(1);opacity:.92}50%{transform:translate(-50%,calc(-45% + 9px)) rotate(-4deg) scale(1.07);opacity:1}}
/* Place editorial — photo left, text right; image larger with soft asymmetric rounding; mobile photo first */
.place-editorial{max-width:1220px;margin:0 auto;padding:72px 6% 40px}
.place-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,0.92fr);gap:56px 64px;align-items:start}
.place-media{position:relative;overflow:hidden;border-radius:28px 18px 36px 20px;height:560px;background:transparent}
.place-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 58%;filter:saturate(.98)}
.place-copy{padding-top:10px}
.place-title{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;font-size:clamp(44px,5vw,62px);line-height:.9;letter-spacing:-.03em;margin:10px 0 18px}
.place-name{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:300;font-size:26px;color:#6b735f;margin:0 0 22px}
.place-lead{font-size:16px;line-height:1.75;margin:0 0 28px}
.place-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0 0 22px}
.place-card{padding-top:12px;border-top:1px solid var(--line,#dedccf)}
.place-card-line{display:block;height:1px;background:var(--line,#dedccf);margin-bottom:12px}
.place-card-kicker{font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:#8a8f78}
.place-card h4{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:18px;margin:8px 0 6px}
.place-card p{font-size:13px;line-height:1.65;color:var(--muted,#747763);margin:0}
.place-meta{margin-top:8px}
.place-actions{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:18px}
.place-actions .text-link{display:inline-flex;align-items:center;min-height:44px;padding:8px 0;border-bottom:1px solid #c2c6b3;text-decoration:none;font-size:13px;letter-spacing:.02em}
.place-actions .text-link:hover{border-color:var(--olive,#46503c)}
@media(max-width:900px){.place-grid{grid-template-columns:1fr;gap:28px}.place-media{height:420px}.place-title{font-size:clamp(40px,8vw,52px)}}
@media(max-width:700px){
  #place.place-editorial{padding:40px 5% 34px}
  .place-media{height:320px;border-radius:20px 14px 24px 16px;order:-1}
  .place-title{font-size:clamp(36px,9vw,48px);line-height:.88}
  .place-name{font-size:22px}
  .place-lead{font-size:17px;line-height:1.7}
  .place-cards{grid-template-columns:1fr 1fr;gap:14px}
  .place-card h4{font-size:17px}
  .place-card p{font-size:14px}
  .place-actions .text-link{font-size:15px;min-height:48px}
}
/* delicate reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{transition:none;opacity:1;transform:none}}
@media(max-width:700px){#place .place-title{white-space:normal}#place .place-title br{display:block}}

/* Place gallery — swipeable */
.place-gallery{position:relative}
.pg-viewport{overflow:hidden;border-radius:28px 18px 36px 20px;height:560px}
.pg-track{display:flex;width:100%;height:100%;transition:transform .5s cubic-bezier(.25,.8,.3,1);will-change:transform}
.pg-track img{flex:0 0 100%;height:100%;width:100%;object-fit:cover;object-position:60% 58%;filter:saturate(.97);display:block}
.pg-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid #ffffffcc;background:#faf8f1ee;color:var(--olive);display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.12);transition:background .2s, transform .2s}
.pg-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.pg-prev{left:12px}.pg-next{right:12px}
.pg-dots{display:none}
@media(max-width:900px){.pg-viewport{height:420px}}
@media(max-width:700px){.pg-viewport{height:300px;border-radius:20px 14px 24px 16px}.pg-arrow{width:34px;height:34px;font-size:18px}.pg-prev{left:8px}.pg-next{right:8px}}

/* Keep gallery slides in the horizontal track. */
.pg-track img{position:relative;inset:auto;}


/* Minimal gallery arrows: icon only, no circular background. */
.pg-arrow{width:38px;height:38px;border:0;background:transparent;color:#fff;box-shadow:none;text-shadow:0 1px 5px rgba(0,0,0,.55);font-size:30px;font-weight:300}
.pg-arrow:hover{background:transparent;box-shadow:none;transform:translateY(-50%) scale(1.12)}


/* Guest palette — 10 tones, grouped by colour family (light → dark inside each). */
.swatches{display:grid;grid-template-columns:repeat(5,52px);gap:14px;justify-content:start}
.swatches span:nth-child(1){background:#f1e7d4}
.swatches span:nth-child(2){background:#e3d0ae}
.swatches span:nth-child(3){background:#d9b7ac}
.swatches span:nth-child(4){background:#aebdce}
.swatches span:nth-child(5){background:#9aafc2}
.swatches span:nth-child(6){background:#c9d6c3}
.swatches span:nth-child(7){background:#9aa87e}
.swatches span:nth-child(8){background:#6d7f5d}
.swatches span:nth-child(9){background:#4e5b3c}
.swatches span:nth-child(10){background:#a17c5e}
.lookbook{margin-top:22px;border-top:1px solid var(--line);padding-top:14px}
.lookbook summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.08em}
.lookbook summary::-webkit-details-marker{display:none}
.lookbook summary span{font-size:16px}
.lk-group{grid-column:1/-1;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#8a8f78;margin:6px 0 0;padding-bottom:6px;border-bottom:1px solid #efeee5}
.lk-group:first-of-type{margin-top:14px}
.lookbook-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.lk-hero{margin:16px 0 0;border:1px solid #e8e6db;border-radius:12px;overflow:hidden;background:#fcfbf7}
.lk-hero img{display:block;width:100%;height:auto;max-height:72vh;object-fit:cover;object-position:center top}
.lk-hero figcaption{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8a8f78;padding:9px 14px 11px;border-top:1px solid #efeee5}
.lookbook-card{border:1px solid #e8e6db;border-radius:12px;padding:12px 14px;background:#fcfbf7}
.lookbook-card.full{grid-column:1/-1}
.lk-kicker{font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:#8a8f78}
.lookbook-card h4{font-family:'Cormorant Garamond',serif;font-size:17px;margin:6px 0 6px}
.lk-swatches{display:flex;gap:6px;margin:6px 0}
.lk-swatches i{width:18px;height:18px;border-radius:50%;border:1px solid #e8e6db;display:inline-block}
.lookbook-card p{font-size:12px;line-height:1.6;color:var(--muted);margin:0}
@media(max-width:700px){.lookbook-grid{grid-template-columns:1fr}}

/* Paper invitation cover — mobile first. */
body:has(.paper-hero){background-image:none}
body:has(.paper-hero) header{background:transparent;position:relative;z-index:3}
.paper-hero{background:#f8f5ed}
.hero.paper-hero{min-height:780px;padding:72px 9% 50px;max-width:none}
.hero.paper-hero::before{display:block!important;content:'';position:absolute;inset:0;width:auto;height:auto;background:url('paper-texture.png') repeat;opacity:.16;z-index:-1;transform:none;pointer-events:none}
.paper-hero .hero-copy{max-width:700px;width:72%;z-index:2}
.paper-hero .eyebrow{margin-bottom:42px;letter-spacing:.34em}
.paper-hero h1{font-size:clamp(100px,12vw,170px);line-height:.87;margin-bottom:48px;width:auto}
.paper-hero .name-mark{display:block;margin:0}
.paper-hero h1 em{display:block;font-size:.34em;margin:0 0 0 24%;line-height:1.1}
.paper-hero .name-polina{display:block;margin-left:12%}
/* Имена и амперсанд — в цвета бегущего сердца из таймлайна (шалфей #7a8a5c). */
.paper-hero .name-mark,.paper-hero .name-polina{color:#5f6326}
.editorial-hero.paper-hero h1 em{color:#5f6326}
.paper-hero .hero-meta{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:0 0 26px;max-width:none}
.paper-hero .hero-meta time{font:italic 32px 'Cormorant Garamond',Georgia,serif;letter-spacing:.08em}
.paper-hero .hero-location{font-size:10px;letter-spacing:.23em}
.paper-hero .intro{font-size:26px;max-width:none;margin:0 0 50px}
.paper-hero .hero-details{border:0;border-bottom:1px solid #b8beaa;font-size:10px;letter-spacing:.16em;gap:24px;min-height:44px}
.paper-hero .hero-calla{position:absolute;top:0;right:-5%;width:47%;height:100%;object-fit:contain;opacity:1;transform:none;z-index:1;pointer-events:none}
.paper-hero .hero-side-note{display:none}
@media(max-width:700px){
 body:has(.paper-hero) header{padding:18px 24px;min-height:68px}
 /* На телефоне прячем быстрые ссылки: гость читает приглашение по порядку
    и не перепрыгивает сразу к анкете. EN-переключатель оставляем. */
 body:has(.paper-hero) header nav{gap:14px}
 body:has(.paper-hero) header nav a{display:none}
 .hero.paper-hero{padding:66px 24px 28px;min-height:calc(100svh - 68px);overflow:hidden}
 .paper-hero .hero-copy{width:100%;max-width:none}
 .paper-hero .eyebrow{font-size:8px;margin-bottom:36px;letter-spacing:.25em}
 .paper-hero h1{font-size:clamp(76px,22vw,105px);line-height:.9;margin-bottom:42px;width:90%}
 .paper-hero h1 em{font-size:32px;margin-left:30%;line-height:1.05}
 .paper-hero .name-polina{margin-left:12%}
 .paper-hero .hero-calla{width:220px;height:620px;right:-90px;top:10px;max-width:none;object-fit:contain;opacity:1}
 .paper-hero .hero-meta{gap:8px;margin-bottom:26px}
 .paper-hero .hero-meta time{font-size:27px}
 .paper-hero .hero-location{font-size:8px;letter-spacing:.2em}
 .paper-hero .intro{font-size:22px;max-width:90%;margin-bottom:32px}
 .paper-hero .hero-details{font-size:9px;letter-spacing:.1em;margin-top:44px}
}
@media(max-height:740px) and (max-width:700px){.hero.paper-hero{padding-top:30px}.paper-hero .eyebrow{margin-bottom:26px}.paper-hero h1{margin-bottom:28px}.paper-hero .intro{margin-bottom:22px}}
@media(prefers-reduced-motion:no-preference){.paper-hero .hero-copy{animation:arrive .9s ease both}.paper-hero .hero-calla{animation:arrive 1.2s ease both}}
@media(max-width:700px){.paper-hero .hero-calla{right:-52px;top:-70px;width:205px;height:650px}}
/* Bring the full flower into view and let its leaf meet the name composition. */
@media(max-width:700px){.paper-hero .hero-calla{right:-28px;top:-72px;width:200px;height:650px}}
@media(max-width:700px){.paper-hero .hero-calla{top:-116px}}
/* Mirror the calla without affecting its entrance animation. */
.paper-hero .hero-calla{scale:-1 1}
/* Match the paper-and-calla concept. */
.hero.paper-hero{background-image:url('img/paper-cotton.png');background-size:620px auto}
.hero.paper-hero::before{display:none!important}
.paper-hero h1 em{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:300;font-size:.58em;line-height:.9;color:var(--olive);margin-left:38%}
.paper-hero .hero-calla{scale:1;filter:drop-shadow(-5px 7px 9px rgba(87,75,40,.12))}
@media(max-width:700px){.paper-hero h1 em{font-size:52px;line-height:.85;margin-left:39%}.paper-hero .hero-calla{width:174px;height:640px;right:-8px;top:-32px;object-fit:fill}}
/* Plain beige cover; keep the complete calla inside the screen. */
.hero.paper-hero{background:#f8f5ed}
.paper-hero .hero-calla{object-fit:contain;top:20px;right:0;width:34%;height:85%}
@media(max-width:700px){.paper-hero .hero-calla{top:18px;right:4px;width:140px;height:570px;object-fit:contain}.paper-hero .intro{max-width:100%}}
/* Restore the tall, slender calla composition with the flower below the top edge. */
@media(max-width:700px){.paper-hero .hero-calla{top:14px;right:4px;width:160px;height:620px;object-fit:fill}}
/* Restore the exact tall calla placement selected in the reference screenshot. */
@media(max-width:700px){.paper-hero .hero-calla{width:174px;height:640px;right:-8px;top:-32px;object-fit:fill}}
/* Lower the selected tall flower enough to reveal its complete bloom. */
@media(max-width:700px){.paper-hero .hero-calla{top:18px}}
/* Center the invitation prompt and its downward arrow. */

@media(min-width:701px){}
/* Tilt around the bloom so the lower leaf clears the invitation text. */
@media(max-width:700px){.paper-hero .hero-calla{rotate:-7deg;transform-origin:70% 12%}}
.flap-title span{display:block}
.flap-title small{display:block;margin-top:16px;font-family:'Manrope',Arial,sans-serif;font-style:normal;font-weight:400;font-size:9px;line-height:1.6;letter-spacing:.25em;color:inherit}
@media(max-width:700px){.flap-title{font-size:clamp(32px,8.5vw,44px)}.flap-title small{font-size:8px;letter-spacing:.18em;margin-top:12px}}
/* Keep the tilted stem inside the viewport. */
@media(max-width:700px){.paper-hero .hero-calla{right:28px;rotate:-3deg;transform-origin:70% 12%}}
@media(max-width:700px){.paper-hero .intro{max-width:78%}}
/* Make outfit examples visibly expandable and comfortable to tap. */
.lookbook{border-top:0;padding-top:0;margin-top:24px}
.lookbook summary{min-height:54px;padding:14px 18px;border:1px solid #a6ae98;border-radius:3px;background:#e9ebdf80;color:var(--olive);font-size:12px;letter-spacing:.04em;gap:18px;transition:background .2s,border-color .2s}
.lookbook summary:hover{background:#e2e6d6;border-color:var(--olive)}
.lookbook summary span{font-size:0;flex:none}
.lookbook summary span::after{content:'⌄';display:block;font-size:22px;line-height:1;transition:rotate .2s}
.lookbook[open] summary span::after{rotate:180deg}
@media(prefers-reduced-motion:reduce){.lookbook summary,.lookbook summary span::after{transition:none}}
/* Geometric chevron, independent of font baseline. */
.lookbook summary span{display:flex;align-items:center;justify-content:center;width:18px;height:18px}
.lookbook summary span::after{content:'';width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg);font-size:0;line-height:0;rotate:none;transition:transform .2s}
.lookbook[open] summary span::after{rotate:none;transform:translateY(2px) rotate(225deg)}
/* Supporting sections: clear, touch-friendly wedding details. */
.pg-counter{text-align:center;font-size:11px;letter-spacing:.2em;color:var(--muted);margin:14px 0 0;font-variant-numeric:tabular-nums}
/* Круглые стрелки поверх фото убраны: свайп на телефоне, стрелки клавиш на десктопе. */
.pg-counter{margin:14px 0 0}
.pg-arrow{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:0;border-radius:0;background:transparent;
  color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5);
  font-size:26px;line-height:1;opacity:.28;
  transition:opacity .25s ease,transform .25s ease;
  -webkit-tap-highlight-color:transparent;user-select:none;
}
.pg-arrow:hover,.pg-arrow:focus-visible{opacity:.9}
.pg-prev:hover,.pg-prev:focus-visible{transform:translateY(-50%) translateX(-3px)}
.pg-next:hover,.pg-next:focus-visible{transform:translateY(-50%) translateX(3px)}
@media(hover:none){.pg-arrow{opacity:.5}}

.next-day{background:#e8ecdf;padding:36px 30px;border-radius:4px}
.next-day-section{padding-top:72px!important;padding-bottom:36px!important}
.next-day-section .next-day{max-width:760px;margin:0 auto}
.next-day-section + .details{padding-top:48px}
@media(min-width:901px){.details>div{max-width:760px;margin:0 auto}}
.rsvp form label{display:block;margin-bottom:26px;font-size:14px;line-height:1.6}
.rsvp input:not([type=checkbox]),.rsvp select,.rsvp textarea{display:block;width:100%;margin-top:10px;min-height:50px;font-size:16px;padding:13px 12px}
.rsvp fieldset{margin:0 0 32px;padding-top:24px}
.rsvp .checks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 28px}
.rsvp .checks label:last-child:nth-child(odd){grid-column:1/-1}
.rsvp .checks label{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #c7ccba;border-radius:3px;min-height:48px;margin:0;font-size:13px;cursor:pointer}
.rsvp .checks label:has(input:checked){background:#dce3cf;border-color:#7a8966}
.rsvp input[type=checkbox]{width:18px;height:18px;accent-color:var(--olive);flex-shrink:0}
.rsvp .button{min-height:54px;justify-content:space-between;font-size:13px}
/* Переключатель языка в шапке */
/* Переключатель языка выглядит как остальные пункты меню. */
/* Переключатель языка: постоянная линия, прижатая к тексту
   (text-decoration рисуется у букв, а не по низу 44px зоны нажатия). */
.lang-toggle{border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
/* Responsive palette: let the swatches shrink instead of overflowing narrow screens. */
.swatches span{max-width:100%;height:auto;aspect-ratio:1}
@media(max-width:760px){
  .swatches{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px 10px}
}
@media(max-width:420px){
  .swatches{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px 8px}
}
@media(max-width:340px){
  .swatches{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 8px}
}
/* Mobile ergonomics: readable tap targets and no overscroll pull. */
@media(max-width:700px){
  nav a,.lang-toggle{min-height:44px;display:inline-flex;align-items:center;font-size:11px}
}

body{overflow-x:clip}
.pg-arrow{background:rgba(250,248,241,.82);color:#46503c;min-width:44px;min-height:44px}

.wedding-finale{text-align:center;padding:90px 24px 70px}
.wedding-finale .finale-title{font:italic 64px/1.1 'Cormorant Garamond',Georgia,serif;letter-spacing:-.02em;color:var(--olive);margin:0 0 28px}
.wedding-finale span{font-size:30px}
.wedding-finale .finale-date{margin-top:18px;font-size:11px;letter-spacing:.2em}
.wedding-finale .countdown{margin-top:54px}
.wedding-finale .cd-grid{margin-top:20px}
.wedding-finale .cd-grid span{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:#a0a58f}
.wedding-finale .cd-grid b{font-weight:300}
@media(max-width:700px){
 .next-day-section{padding-top:48px!important;padding-bottom:24px!important}
 .next-day-section + .details{padding-top:36px}
 .next-day{padding:30px 24px}
 .rsvp .button{width:100%}
 .rsvp .checks{grid-template-columns:1fr}
 .wedding-finale .finale-title{font-size:58px}
}
/* Bring the welcome, calendar, next-day note and wishes into a smoother scroll rhythm. */
@media(min-width:701px){
  section.letter{padding-bottom:72px}
  section.calendar{padding-top:80px}
  section.details{padding-bottom:76px}
  section.wishes{padding-top:76px}
}
@media(max-width:700px){
  section.letter{padding-bottom:44px}
  section.letter{padding-left:20px;padding-right:20px}
  .letter p:not(.eyebrow){font-size:20px;line-height:1.42;margin-top:12px;margin-bottom:12px}
  .letter h2{margin-bottom:14px}
  .letter .signature{font-size:22px;margin-top:20px}
  section.calendar{padding-top:56px}
  section.details{padding-bottom:54px}
  section.wishes{padding-top:56px}
}
/* Quiet stationery envelope, embossed champagne wax. */
.envelope-screen{background:#646c4e}
.envelope-screen .flap{background-blend-mode:soft-light,normal}
.envelope-screen:not(.open)::after{background:radial-gradient(ellipse at 50% 42%,transparent 40%,rgba(26,34,19,.18) 100%)}
.envelope-screen .wax{width:104px;height:104px;border-radius:47% 53% 49% 51% / 52% 45% 55% 48%;background:radial-gradient(ellipse at 35% 28%,#ded0aa 0%,#c6b58c 45%,#ae976d 76%,#c5af80 100%);border:1px solid #cdbc95;box-shadow:inset 2px 3px 5px #eee0bb99,inset -2px -3px 5px #85724b66,0 8px 15px #20271540;filter:none;cursor:pointer}
.wax::before{content:'';position:absolute;inset:10px;border:1px solid #a38d6577;border-radius:50%;box-shadow:0 1px 1px #f4e5bf88,inset 0 1px 2px #8c784c44;pointer-events:none}
.wax .seal-monogram{position:absolute;inset:0;padding:0;display:flex;gap:5px;align-items:center;justify-content:center;font:italic 27px 'Cormorant Garamond',Georgia,serif;color:#88754f;text-shadow:0 1px 0 #eadab4;pointer-events:none}
.seal-monogram i{font-size:19px;font-weight:300}
.envelope-screen .flap-title{color:#f4efdf;font-size:clamp(36px,5vw,60px);text-shadow:0 1px 1px #28302022}
.flap-title small{font-size:9px;letter-spacing:.25em;opacity:.8}
.envelope-screen .env-hint{font-size:9px;letter-spacing:.14em;color:#e5e7d7;opacity:.85;text-transform:none}
.wax:focus-visible{outline:2px solid #faf5e6;outline-offset:8px}
@media(max-width:700px){.envelope-screen .flap-title{font-size:36px}.envelope-screen .wax{width:96px;height:96px}}
/* Restore the selected golden heart seal. */
.envelope-screen .wax{width:210px;height:210px;border:0;border-radius:0;background:transparent;box-shadow:none;filter:drop-shadow(0 5px 12px rgba(20,26,16,.5))}
.envelope-screen .wax::before{display:none}
@media(max-width:700px){.envelope-screen .wax{width:150px;height:150px}}
/* Opening sequence: lift seal, fold flap, draw out the invitation. */
.envelope-screen{perspective:1200px;overflow:hidden}
.opening-card{position:absolute;inset:18% 8% 8%;z-index:0;background:#f8f5ed;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;box-shadow:0 10px 50px #20291640;opacity:0;transform:translateY(18%);border-radius:3px;pointer-events:none}
.opening-card>span{font:italic clamp(34px,6vw,64px) 'Cormorant Garamond',Georgia,serif;color:var(--olive)}
.opening-card>small{font:11px 'Manrope',Arial,sans-serif;letter-spacing:.22em;color:var(--olive)}
.envelope-screen.open{animation:envelope-exit .4s ease 1.65s forwards}
.envelope-screen.open .wax{animation:seal-lift .35s ease forwards;transition:none}
.envelope-screen.open .flap-top{transform-origin:center top;animation:flap-fold .65s ease .18s forwards;transition:none}
.envelope-screen.open .flap-left,.envelope-screen.open .flap-right,.envelope-screen.open .flap-bottom{transform:none;transition:none;animation:envelope-drop .65s cubic-bezier(.4,0,.2,1) 1s forwards}
.envelope-screen.open .opening-card{animation:card-rise 1.1s cubic-bezier(.25,.7,.2,1) .45s forwards}
.envelope-screen.open::after{opacity:0;transition:opacity .3s}
@keyframes seal-lift{to{opacity:0;transform:translate(-50%,-65%) scale(1.12) rotate(-8deg)}}
@keyframes flap-fold{to{transform:rotateX(165deg);opacity:0}}
@keyframes envelope-drop{to{transform:translateY(105%);opacity:0}}
@keyframes card-rise{0%{opacity:0;transform:translateY(18%)}35%{opacity:1;transform:translateY(-10%)}100%{opacity:1;transform:translateY(-12%) scale(1.25)}}
@keyframes envelope-exit{to{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){.envelope-screen.open{animation:envelope-exit .2s forwards}.envelope-screen.open .flap,.envelope-screen.open .wax,.envelope-screen.open .opening-card{animation:none!important}.envelope-screen.open .opening-card{display:none}}
/* Reveal the real page beneath the envelope instead of an intermediate card. */
.envelope-screen{background:transparent}
.envelope-screen.open .flap-top{animation:flap-fold .7s ease .18s forwards}
.envelope-screen.open .flap-left,.envelope-screen.open .flap-right,.envelope-screen.open .flap-bottom{animation:envelope-drop .9s cubic-bezier(.4,0,.2,1) .55s forwards}
.envelope-screen.open{animation:envelope-exit .3s ease 1.5s forwards}
body.env-locked:has(.envelope-screen.open) header,body.env-locked:has(.envelope-screen.open) main{animation:page-unveil 1.2s cubic-bezier(.2,.7,.3,1) .25s both;transform-origin:50% 0}
@keyframes page-unveil{from{transform:translateY(65px) scale(.94)}to{transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){body.env-locked:has(.envelope-screen.open) header,body.env-locked:has(.envelope-screen.open) main{animation:none}}
/* Peel the wax seal away before unfolding the envelope. */
.envelope-screen.open .wax{transform-origin:50% 85%;animation:seal-peel .85s cubic-bezier(.25,.6,.3,1) forwards}
@keyframes seal-peel{
 0%{opacity:1;transform:translate(-50%,-50%) rotate(0deg) scale(1)}
 22%{opacity:1;transform:translate(-50%,-53%) rotate(-7deg) rotateX(18deg) scale(1.06)}
 52%{opacity:1;transform:translate(-42%,-69%) rotate(-16deg) rotateY(-24deg) scale(1.13)}
 100%{opacity:0;transform:translate(30%,-135%) rotate(25deg) rotateY(-40deg) scale(1.1)}
}
.envelope-screen.open .flap-top{animation-delay:.65s}
.envelope-screen.open .flap-left,.envelope-screen.open .flap-right,.envelope-screen.open .flap-bottom{animation-delay:1s}
.envelope-screen.open{animation-delay:1.9s}
@media(prefers-reduced-motion:reduce){.envelope-screen.open{animation-delay:0s}}
/* Hold flaps closed throughout the seal-removal delay. */
.envelope-screen.open .flap-top,.envelope-screen.open .flap-left,.envelope-screen.open .flap-right,.envelope-screen.open .flap-bottom{animation-fill-mode:both}
@keyframes flap-fold{from{transform:rotateX(0);opacity:1}to{transform:rotateX(165deg);opacity:0}}
@keyframes envelope-drop{from{transform:translateY(0);opacity:1}to{transform:translateY(105%);opacity:0}}
body.env-locked:has(.envelope-screen.open) header,body.env-locked:has(.envelope-screen.open) main{animation-delay:.7s}
@media(prefers-reduced-motion:reduce){body.env-locked:has(.envelope-screen.open) header,body.env-locked:has(.envelope-screen.open) main{animation:none}}

/* Keep the shadow stable while the seal rotates. */
.envelope-screen.open .wax{filter:drop-shadow(0 8px 10px rgba(20,26,16,.35));backface-visibility:hidden;will-change:transform,opacity}
/* Avoid a hover-to-animation jump and native touch flash. */
.envelope-screen .wax,.envelope-screen .wax:hover{transform:translate(-50%,-50%);transition:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;outline-offset:8px}
.envelope-screen .wax img{pointer-events:none;-webkit-user-drag:none;user-select:none}
.envelope-screen.open .wax{filter:drop-shadow(0 5px 12px rgba(20,26,16,.5))}
/* No lighting overlay change on press. */
.envelope-screen::after,.envelope-screen:not(.open)::after,.envelope-screen.open::after{display:none!important}
/* Tactile olive paper: fine fibers over matte, softly shaded folds. */
.envelope-screen .flap{background-image:url('img/paper-cotton.png'),linear-gradient(145deg,#737b58,#626b4b);background-size:480px 480px,100% 100%;background-repeat:repeat,no-repeat;background-blend-mode:multiply;}
.envelope-screen .flap-top{background-image:url('img/paper-cotton.png'),linear-gradient(180deg,#818867 0%,#747d59 70%,#68724e 100%);filter:drop-shadow(0 3px 4px rgba(28,35,18,.18))}
.envelope-screen .flap-left{background-image:url('img/paper-cotton.png'),linear-gradient(110deg,#737b56,#626c49);background-position:0 0,0 0}
.envelope-screen .flap-right{background-image:url('img/paper-cotton.png'),linear-gradient(250deg,#737c57,#626c49);background-position:130px 90px,0 0}
.envelope-screen .flap-bottom{background-image:url('img/paper-cotton.png'),linear-gradient(180deg,#707a54,#5c6745);background-position:70px 180px,0 0}
/* Layered paper depth, illuminated from the upper left. */
.envelope-screen .flap-top{filter:drop-shadow(3px 10px 7px rgba(24,32,15,.42))}
.envelope-screen .flap-bottom{filter:drop-shadow(-2px -5px 5px rgba(24,32,15,.27))}
.envelope-screen .flap-top::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,249,216,.14),transparent 42%,rgba(22,32,13,.13));clip-path:inherit}
.envelope-screen .flap-left::after,.envelope-screen .flap-right::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,rgba(248,242,208,.1),transparent 40%,rgba(25,35,16,.14))}
.envelope-screen .flap-bottom::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(20,30,12,.15),transparent 65%,rgba(246,240,208,.08))}
/* Independent shadow layer avoids clipping the flap's cast shadow. */
.flap-depth{position:absolute;inset:0;z-index:2;pointer-events:none;filter:blur(8px);transform:translate(3px,13px);background:rgba(23,31,13,.46);clip-path:polygon(0 0,100% 0,50% 55.5%)}
.envelope-screen .flap-top{box-shadow:inset 0 1px 0 rgba(255,248,212,.28)}
.envelope-screen.open .flap-depth{animation:fold-shadow-away .5s ease .65s both}
@keyframes fold-shadow-away{from{opacity:1}to{opacity:0;transform:translate(0,0)}}
@media(prefers-reduced-motion:reduce){.envelope-screen.open .flap-depth{display:none}}
/* Close subpixel seams between folded paper panels. */
.envelope-screen:not(.open) .flap-left,.envelope-screen:not(.open) .flap-right{transform:none}
.envelope-screen .flap-bottom{-webkit-clip-path:polygon(-1% 101%,50% 49%,101% 101%);clip-path:polygon(-1% 101%,50% 49%,101% 101%)}
/* Финальные переопределения стрелок галереи: тонкий глиф, без круга и подложки. */
.pg-arrow{
  width:34px !important;height:34px !important;min-width:0 !important;min-height:0 !important;
  background:transparent !important;border:0 !important;border-radius:0 !important;
  box-shadow:none !important;opacity:.3;color:#fff;
  font-size:26px !important;display:flex !important;
  align-items:center;justify-content:center;
}
.pg-arrow:hover,.pg-arrow:focus-visible{background:transparent !important;opacity:.85;box-shadow:none !important}
@media(hover:none){.pg-arrow{opacity:.55}}
/* Безопасные зоны iPhone с Dynamic Island: шапка ниже выреза,
   футер и подпись конверта — выше домашней полоски. */
:root{--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px)}
body{padding-top:var(--safe-t);padding-bottom:var(--safe-b)}
@media(max-width:700px){
  header{padding-top:calc(19px + var(--safe-t))}
  .hero{padding-top:calc(100px + var(--safe-t))}
}
@media(min-width:701px){
  header{padding-top:calc(26px + var(--safe-t))}
}
.envelope-screen .env-hint{bottom:calc(28px + var(--safe-b))}
.wedding-finale{padding-bottom:calc(70px + var(--safe-b))}
/* Линия таймлайна не должна проходить по тексту.
   По геометрии SVG-пути (viewBox 0 0 400 1600, 5 точек):
   1 -> линия 76..86%  2 -> 22..26%  3 -> 72..78%  4 -> 32..35%  5 -> 72..82%.
   Карточки сдвинуты так, чтобы остаться по другую сторону линии. */
@media(max-width:900px){
  .timeline article.tl-item:nth-of-type(1){left:0;width:52%;text-align:right}
  .timeline article.tl-item:nth-of-type(2){left:40%;width:60%;padding-left:10px}
  .timeline article.tl-item:nth-of-type(3){left:0;width:50%;text-align:right}
  .timeline article.tl-item:nth-of-type(4){left:60%;width:40%;padding-left:10px}
  .timeline article.tl-item:nth-of-type(5){left:0;width:52%;text-align:right}
}
@media(max-width:340px){
  .timeline article.tl-item:nth-of-type(1){top:6%}
}
@media(min-width:901px){
  .timeline article.tl-item:nth-of-type(1){left:0;width:62%;text-align:right}
  .timeline article.tl-item:nth-of-type(2){left:40%;width:60%}
  .timeline article.tl-item:nth-of-type(3){left:0;width:64%;text-align:right}
  .timeline article.tl-item:nth-of-type(4){left:60%;width:40%}
  .timeline article.tl-item:nth-of-type(5){left:0;width:64%;text-align:right}
}
/* botanical.svg и paper-texture.png удалены из проекта — гасим ссылки на них,
   иначе браузер получает 404 при каждом визите. */
.hero:before,.hero:after{background-image:none!important}
.hero.paper-hero::before{background-image:none!important;display:none!important}
/* Расстояния: дорога рядом, перелёт отдельно. Разделитель — узкий flex-элемент. */
.distances{gap:2px 18px;align-items:center}
@media(max-width:560px){
  .distances{gap:2px 12px}
  }
/* Расстояния: дорога рядом, перелёт отдельно. Две группы в ряд, между ними тонкая линия. */
.distances{display:flex;flex-wrap:wrap;align-items:center;gap:8px 26px;margin-top:12px;max-width:none;width:100%;justify-content:flex-start}
@media(min-width:960px){.distances{flex-wrap:nowrap}.distances .dist-group{flex-wrap:nowrap}}
.distances .dist-group{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px}
.distances .dist-group + .dist-group{position:relative;padding-left:20px}
.distances .dist-group + .dist-group::before{
  content:'';position:absolute;left:0;top:50%;width:1px;height:11px;
  background:var(--line);transform:translateY(-50%);
}
@media(max-width:560px){
  .distances{gap:6px 14px}
  .distances .dist-group{gap:4px 14px}
  .distances .dist-group + .dist-group{padding-left:0}
  .distances .dist-group + .dist-group::before{display:none}
}
/* Вертикальный ритм: таймлайн занимал фиксированные 1500px на 4 события —
   отсюда длинные пустые паузы при прокрутке. Высота считается от числа точек. */
.timeline{--tl-events:5;height:calc(var(--tl-events) * 250px + 60px)}
@media(max-width:700px){.timeline{--tl-events:5;height:calc(var(--tl-events) * 230px + 40px)}}



/* Мелкие подписи: +1px, чтобы не рассыпались на телефоне. */
@media(max-width:700px){
  nav a,.lang-toggle{font-size:12px}
  .eyebrow{font-size:10px}
  .calendar .small,.cal-note{font-size:11px}
}
/* Подписи навигации: перебиваем более поздние правила nav a{font-size} */
@media(max-width:700px){nav a,.lang-toggle{font-size:12px !important}
.eyebrow{font-size:10px !important}}
/* Область нажатия шире самой надписи — вид не меняем. */
.hero-details::before{content:'';position:absolute;inset:-12px -18px}
.hero-details{position:relative}
/* Тонкая линия под надписью — по ширине текста, не во всю колонку. */
.paper-hero .hero-details:hover{border-color:var(--olive)}