:root{--olive:#20271f;--olive-2:#293329;--paper:#ede9df;--ink:#282d25;--muted:#666c61;--gold:#b69b6e;--line:#c9c2b3;--serif:'Bodoni Moda','Didot',serif;--script:'Pinyon Script','Snell Roundhand',cursive}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:var(--serif);background:var(--olive);-webkit-font-smoothing:antialiased}body.sealed{overflow:hidden}button,a{font:inherit}button{cursor:pointer}a{color:inherit}a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:6px}p,h1,h2,h3{margin:0}img{display:block;max-width:100%}[hidden]{display:none!important}.section-inner{width:min(100% - 96px,1320px);margin:auto}.small-heading{font-size:13px;letter-spacing:.15em;text-transform:uppercase;font-weight:600}.paper-section{background-color:var(--paper);background-image:linear-gradient(rgba(237,233,223,.82),rgba(237,233,223,.82)),url('assets/paper-texture.jpg');background-size:auto,640px 640px}.paper-section h2,.ceremony h2,.countdown-section h2{font-weight:400;font-size:clamp(54px,6.4vw,106px);letter-spacing:-.06em;line-height:1.05}.paper-section h2 em,.ceremony h2 em,.countdown-section h2 em,.footer em{font-family:var(--script);font-weight:400;font-style:normal;letter-spacing:-.02em}
/* Opening object */
.opening{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:var(--olive);color:var(--paper);transition:opacity .65s ease .85s,visibility 0s 1.55s}.opening.opened{opacity:0;visibility:hidden;pointer-events:none}.opening__surround{text-align:center;width:min(100%,660px);padding:24px}.opening__overline{font-size:13px;letter-spacing:.25em;text-transform:uppercase;color:#d2c8af}.opening__date{color:#b6b8a6;font-size:14px;margin-top:26px;letter-spacing:.06em}.envelope{position:relative;margin:34px auto 30px;width:min(78vw,390px);aspect-ratio:1.38;filter:drop-shadow(0 25px 24px rgba(0,0,0,.3));perspective:1000px}.envelope__paper{position:absolute;inset:0;background:linear-gradient(135deg,#e8e1d2,#f5f0e5 45%,#d5c9b5);box-shadow:inset 0 0 0 1px rgba(79,68,46,.14)}.envelope__paper:after{content:'';position:absolute;inset:0;background:url('assets/paper-texture.jpg') center/cover;mix-blend-mode:multiply;opacity:.17}.envelope__flap{position:absolute;inset:0;z-index:3;clip-path:polygon(0 0,100% 0,50% 58%);background:linear-gradient(160deg,#f8f4e9 5%,#d6cab7 98%);transform-origin:top center;transition:transform .8s cubic-bezier(.2,.75,.25,1)}.envelope__letter{position:absolute;left:6%;right:6%;bottom:4%;height:83%;z-index:2;display:grid;place-items:center;color:var(--ink);background:#f5f1e7 url('assets/paper-texture.jpg') center/cover;box-shadow:0 3px 12px rgba(0,0,0,.14);transition:transform .85s cubic-bezier(.2,.75,.25,1) .22s}.envelope__letter span{font-family:var(--script);font-size:clamp(30px,8vw,48px);line-height:.9}.envelope__letter i{font-family:var(--serif);font-size:.5em;font-weight:400}.envelope__seal{position:absolute;z-index:4;top:48%;left:50%;width:80px;height:80px;transform:translate(-50%,-50%);border-radius:48% 52% 46% 54%/51% 45% 55% 49%;background:radial-gradient(circle at 35% 27%,#c3a772,#866843 78%);border:5px double rgba(67,48,26,.32);box-shadow:0 5px 9px rgba(55,37,19,.28),inset 0 2px 4px #e8ca8d;color:#3f3527;display:flex;align-items:center;justify-content:center;font-size:25px;transition:transform .45s,opacity .45s}.envelope__seal span{font-family:var(--script);font-size:22px;margin:0 1px}.opening.opened .envelope__seal{transform:translate(-50%,-100%) rotate(-15deg) scale(.8);opacity:0}.opening.opened .envelope__flap{transform:rotateX(178deg);z-index:1}.opening.opened .envelope__letter{transform:translateY(-48%)}.open-button{border:1px solid var(--gold);background:none;color:#f1eadc;padding:15px 27px;font-size:15px;transition:background .25s,color .25s}.open-button:hover{background:var(--gold);color:var(--olive)}.open-button span{padding-left:20px}
/* Hero */
.hero{position:relative;height:100svh;min-height:650px;overflow:hidden;color:#eee8dc;background:#151b14}.hero__photo{position:absolute;inset:0 0 0 42%;background:url('assets/floral-still-life.jpg') center 58%/cover no-repeat;animation:hero-photo 2.2s ease-out both}.hero__wash{position:absolute;inset:0;background:linear-gradient(90deg,#20271f 10%,rgba(32,39,31,.9) 29%,rgba(32,39,31,.08) 74%),linear-gradient(0deg,rgba(14,18,14,.62),transparent 42%)}.hero__top{position:absolute;z-index:2;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:32px 4.6%;border-bottom:1px solid rgba(236,229,209,.28);font-size:15px;letter-spacing:.05em}.hero__top span:first-child{font-size:20px}.hero__content{position:absolute;z-index:2;left:7.7%;top:49%;transform:translateY(-50%);width:min(720px,70%)}.hero__intro{color:#c3b79b;font-size:clamp(14px,1.45vw,19px);margin-bottom:30px}.hero h1{font-weight:400;font-size:clamp(66px,8.5vw,146px);line-height:.94;letter-spacing:-.08em}.hero h1 em{font-family:var(--script);font-weight:400;color:#d7bd8b;letter-spacing:0;font-size:.76em;font-style:normal}.hero__invitation{font-size:clamp(15px,1.35vw,20px);margin-top:42px;max-width:330px;line-height:1.5}.hero__scroll{position:absolute;z-index:2;bottom:45px;left:7.7%;text-decoration:none;border-bottom:1px solid rgba(238,232,220,.55);padding-bottom:12px;font-size:14px}.hero__scroll span{margin-left:60px}.hero__side{position:absolute;z-index:2;right:30px;top:50%;writing-mode:vertical-rl;transform:translateY(-50%);font-size:13px;letter-spacing:.16em;color:#e6ddc9}@keyframes hero-photo{from{transform:scale(1.07);opacity:.75}to{transform:scale(1);opacity:1}}
/* Paper invitation */
.invitation{padding:130px 0 145px}.invitation__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:10%;align-items:start}.invitation__left .small-heading{margin-bottom:86px}.cross{font-size:29px;color:#9d875f;margin-bottom:28px}.invitation h2{margin-bottom:56px}.invitation__verse{max-width:425px;font-size:clamp(20px,2vw,29px);font-style:italic;line-height:1.55}.verse-ref{font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-top:19px;color:var(--muted)}.invitation__right{border-left:1px solid var(--line);padding-left:11%;padding-top:38px}.date-mark{display:flex;align-items:center;gap:22px;border-bottom:1px solid var(--line);padding-bottom:25px}.date-mark strong{font-size:clamp(110px,12vw,195px);font-weight:400;letter-spacing:-.1em;line-height:.8}.date-mark span{font-size:15px;line-height:1.5}.date-mark span:first-child{writing-mode:vertical-rl;transform:rotate(180deg)}.invitation__copy{font-size:clamp(22px,2.2vw,33px);line-height:1.45;max-width:470px;margin:55px 0}.fine-rule{height:1px;background:var(--line)}.invitation__detail{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)}.invitation__detail span:first-child{width:110px;font-size:13px;letter-spacing:.04em}.invitation__detail strong{font-size:25px;font-weight:400}.invitation__detail span:last-child:not(:first-child){font-size:16px}
/* Ceremony */
.ceremony{position:relative;background:var(--olive-2);color:#eee7d9;padding:145px 0 100px;overflow:hidden}.ceremony__grid{display:grid;grid-template-columns:1fr 1fr;gap:10%}.ceremony .small-heading{color:#c4aa7d;margin-bottom:52px}.ceremony h2{position:sticky;top:80px}.ceremony h2 em{color:#d5ba88}.ceremony__body{border-top:1px solid rgba(233,223,199,.35)}.timeline-item{display:grid;grid-template-columns:130px 1fr;gap:20px;padding:36px 0;border-bottom:1px solid rgba(233,223,199,.35)}.timeline-item__time{font-size:18px;color:#d5ba88}.timeline-item__time small{display:block;font-size:13px;margin-top:6px}.timeline-item h3{font-size:26px;font-weight:400;line-height:1.25}.timeline-item p{margin-top:9px;color:#bdc1b4;font-size:15px}.ceremony__line{width:min(100% - 96px,1320px);margin:140px auto 0;border-top:1px solid rgba(233,223,199,.4);padding-top:22px;color:#d5ba88;font-family:var(--script);font-size:44px;text-align:center}
/* Location */
.location{padding:145px 0}.location__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:10%;align-items:center}.location .small-heading{margin-bottom:52px}.location h2{margin-bottom:45px}.location__lead>p:not(.small-heading){font-size:20px;line-height:1.7}.text-link{display:inline-flex;gap:70px;text-decoration:none;border-bottom:1px solid var(--ink);padding:15px 0;margin-top:34px;font-size:16px}.location__map{padding:14px;background:#e5dfd2;box-shadow:0 20px 45px rgba(65,57,44,.15);transform:rotate(1.3deg)}.location__map iframe{border:0;width:100%;height:470px;display:block;filter:grayscale(1) sepia(.24)}.location__map p{font-size:13px;padding:18px 9px 5px;color:var(--muted)}
/* Countdown & RSVP */
.countdown-section{background:#1a211a;color:#ece7dc;text-align:center;padding:125px 0 115px}.countdown-section .small-heading{color:#c4aa7d;margin-bottom:35px}.countdown-section h2 em{color:#d5ba88}.countdown{display:flex;justify-content:center;gap:0;max-width:850px;margin:60px auto}.countdown>div{width:25%;border-right:1px solid rgba(232,220,195,.28);display:flex;flex-direction:column}.countdown>div:last-child{border:0}.countdown strong{font-size:clamp(45px,7vw,94px);font-weight:400;line-height:1.1;font-variant-numeric:tabular-nums}.countdown span{color:#bdc1b4;font-size:14px;margin-top:10px}.calendar-actions{display:flex;justify-content:center;gap:40px;flex-wrap:wrap}.calendar-actions a,.calendar-actions button{color:#e8ddc7;background:none;border:0;border-bottom:1px solid #a58c65;text-decoration:none;padding:11px 0;font-size:15px}.calendar-actions span{margin-left:20px}.footer{background:var(--olive);color:#eee8dd;text-align:center;padding:85px 0 0}.footer p{font-size:18px;margin-bottom:24px}.footer strong{display:block;font-size:clamp(42px,6vw,74px);font-weight:400;letter-spacing:-.05em}.footer em{color:#d2b783}.footer span{display:block;font-size:15px;line-height:1.9;margin:22px 0 65px;color:#d6d4c8}.footer span span{display:inline;margin:0}.tibeb{height:16px;background:repeating-linear-gradient(90deg,transparent 0 9px,#b69b6e 9px 10px,transparent 10px 19px),repeating-linear-gradient(135deg,transparent 0 10px,rgba(182,155,110,.6) 10px 11px,transparent 11px 20px);border-top:1px solid #b69b6e;border-bottom:1px solid #b69b6e;margin:0 calc((min(100vw - 96px,1320px) - 100vw)/2)}
@media(max-width:800px){.section-inner{width:min(100% - 42px,620px)}.hero{min-height:690px}.hero__photo{inset:0;background-position:48% 58%;opacity:.76}.hero__wash{background:linear-gradient(0deg,rgba(22,28,22,.93) 0%,rgba(22,28,22,.58) 48%,rgba(22,28,22,.08) 100%)}.hero__top{padding:24px 21px}.hero__content{left:6%;top:auto;bottom:18%;transform:none;width:88%}.hero h1{font-size:clamp(59px,13vw,100px)}.hero__intro{margin-bottom:18px}.hero__invitation{margin-top:25px}.hero__scroll{left:6%;bottom:32px}.hero__side{display:none}.invitation,.ceremony,.location{padding:88px 0}.invitation__grid,.ceremony__grid,.location__grid{grid-template-columns:1fr;gap:60px}.invitation__left .small-heading{margin-bottom:54px}.invitation h2{margin-bottom:36px}.invitation__right{border-left:0;border-top:1px solid var(--line);padding:45px 0 0}.date-mark strong{font-size:clamp(130px,30vw,190px)}.invitation__copy{margin:40px 0}.ceremony .small-heading,.location .small-heading{margin-bottom:35px}.ceremony__line{width:min(100% - 42px,620px);margin-top:75px}.location__map iframe{height:340px}.countdown-section{padding:90px 0}.tibeb{margin:0 -21px}}
@media(max-width:460px){.small-heading{font-size:11px}.paper-section h2,.ceremony h2,.countdown-section h2{font-size:clamp(50px,14vw,66px)}.timeline-item{grid-template-columns:88px 1fr;gap:10px}.timeline-item__time{font-size:15px}.timeline-item h3{font-size:21px}.timeline-item p{font-size:13px}.countdown strong{font-size:clamp(40px,12vw,55px)}.countdown span{font-size:11px}.countdown{margin:45px auto}.calendar-actions{gap:12px;flex-direction:column;align-items:center}.hero__top{font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}.opening.opened{visibility:hidden}.hero__photo{opacity:1}}
/* Burgundy edition */
:root{--olive:#2b171e;--olive-2:#3b2029;--ink:#30252a;--muted:#6e6262;--gold:#bd9b70}
.hero{background:#1c1419}.hero__photo{filter:sepia(.08) saturate(.82)}.hero__wash{background:linear-gradient(90deg,#2b171e 10%,rgba(43,23,30,.94) 30%,rgba(43,23,30,.18) 74%),linear-gradient(0deg,rgba(29,12,18,.6),transparent 42%)}
.countdown-section{background:#23151b}
@media(max-width:800px){.hero__wash{background:linear-gradient(0deg,rgba(43,23,30,.97) 0%,rgba(43,23,30,.69) 47%,rgba(43,23,30,.12) 100%)}}
/* Envelope face: the invitation card stays inside until the seal is opened. */
.envelope__paper{background:linear-gradient(145deg,#f7f1e5,#d6c8b4)}
.envelope__paper::before{content:'';position:absolute;inset:0;clip-path:polygon(0 0,50% 57%,0 100%,100% 100%,50% 57%,100% 0);background:linear-gradient(135deg,#e7dece,#f5efe3 55%,#ded3c2);filter:drop-shadow(0 -2px 2px rgba(79,59,42,.25))}
.envelope__letter{opacity:0;transition:transform .85s cubic-bezier(.2,.75,.25,1) .22s,opacity .2s ease .4s}
.opening.opened .envelope__letter{opacity:1}
/* A quiet pressed-paper texture gives the burgundy surfaces some depth. */
.opening,.ceremony,.countdown-section,.footer{
  background-color:#2b171e;
  background-image:linear-gradient(rgba(43,23,30,.89),rgba(43,23,30,.89)),url('assets/paper-texture.jpg');
  background-size:auto,720px 720px;
}
.ceremony{background-color:#3b2029;background-image:linear-gradient(rgba(59,32,41,.9),rgba(59,32,41,.9)),url('assets/paper-texture.jpg')}
.countdown-section{background-color:#23151b;background-image:linear-gradient(rgba(35,21,27,.91),rgba(35,21,27,.91)),url('assets/paper-texture.jpg')}
.opening__surround{position:relative}
.opening__surround::before{content:'';position:absolute;inset:0;border:1px solid rgba(189,155,112,.23);pointer-events:none}
/* The seal releases, the letter lifts, and the envelope becomes a curtain. */
.opening{transition:none;clip-path:inset(0)}
.opening.opened{opacity:1;visibility:visible;animation:opening-reveal .75s cubic-bezier(.76,0,.24,1) 1.52s both}
@keyframes opening-reveal{to{clip-path:inset(0 0 100% 0)}}
.envelope__flap{transition:transform .72s cubic-bezier(.22,.7,.18,1) .24s}
.opening.opened .envelope__flap{transform:rotateX(178deg)}
.envelope__letter{transition:transform .86s cubic-bezier(.2,.78,.2,1) .55s,opacity .16s ease .5s}
.opening.opened .envelope__letter{transform:translateY(-72%) scale(1.04)}
.opening.opened .envelope__seal{transform:translate(-50%,-55%) rotate(-18deg) scale(.72);transition-duration:.32s;opacity:0}
.opening.opened .open-button,.opening.opened .opening__date,.opening.opened .opening__overline{opacity:0;transition:opacity .3s ease}
/* The date card has only confirmed invitation information. */
.invitation__copy{margin-bottom:0}
/* One continuous timeline thread, drawn as the page scrolls. */
.ceremony__body{position:relative;border-top:0;--thread-progress:0}
.timeline-track{position:absolute;left:9px;top:12px;bottom:12px;width:1px;background:rgba(213,186,136,.27);pointer-events:none}
.timeline-track span{display:block;width:100%;height:100%;background:#d5ba88;transform:scaleY(var(--thread-progress));transform-origin:top;box-shadow:0 0 10px rgba(213,186,136,.5)}
.timeline-item{position:relative;grid-template-columns:22px 122px 1fr;gap:22px;min-height:142px;border-bottom:1px solid rgba(233,223,199,.18);opacity:.42;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.timeline-item:first-of-type{border-top:1px solid rgba(233,223,199,.18)}
.timeline-item.is-visible{opacity:1;transform:none}
.timeline-node{position:relative;grid-column:1;align-self:start;width:11px;height:11px;margin:8px 0 0 4px;border:1px solid #d5ba88;border-radius:50%;background:#3b2029;z-index:1;transition:background .55s ease,box-shadow .55s ease,transform .55s ease}
.timeline-item.is-lit .timeline-node{background:#d5ba88;box-shadow:0 0 0 4px rgba(213,186,136,.12),0 0 18px rgba(213,186,136,.6);transform:scale(1.1)}
.timeline-item__time{grid-column:2}.timeline-item>div{grid-column:3}
@media(max-width:800px){.opening__surround::before{inset:0 9px}.ceremony__body{margin-top:6px}}
@media(max-width:460px){.timeline-item{grid-template-columns:18px 81px 1fr;gap:10px;padding:30px 0;min-height:133px}.timeline-track{left:8px}.timeline-node{margin-left:3px}.timeline-item__time{font-size:14px}.timeline-item__time small{font-size:11px}.timeline-item h3{font-size:20px}}
@media(prefers-reduced-motion:reduce){.opening.opened{animation:none;clip-path:inset(0 0 100% 0)}.timeline-item{opacity:1;transform:none}.timeline-track span{transform:scaleY(1)}.timeline-node{background:#d5ba88}}
.hero::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:url('assets/paper-texture.jpg') center/620px 620px;mix-blend-mode:soft-light;opacity:.075}
.opening,.ceremony,.countdown-section,.footer{background-size:auto,cover;background-repeat:no-repeat}
.hero::before{background-size:cover;background-repeat:no-repeat}
