/*
Theme Name: Kelvin & Jessica Wedding
Description: A classic, responsive wedding invitation theme with an envelope-opening intro, invitation, RSVP and program outline.
Version: 3.3
Text Domain: kj
*/
:root{--rust:#88341a;--copper:#ba5b2f;--tan:#c28e5c;--cocoa:#492316;--white:#fff;--serif:'Cormorant Garamond',Georgia,serif;--script:'Pinyon Script','Snell Roundhand',cursive}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:500 1.2rem/1.75 var(--serif);color:var(--cocoa);background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
a{color:inherit}img,video,iframe{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--tan);outline-offset:3px}
h1,h2,h3{font-weight:500;line-height:1.1}
.script{font-family:var(--script);font-weight:400}
/* header: solid cocoa bar that sits above the hero */
.hd{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:.8rem clamp(1rem,4vw,3rem);color:var(--white);background:linear-gradient(180deg,#5c2c1c,var(--cocoa));border-bottom:1px solid #c28e5c59;box-shadow:0 4px 18px #49231633;transition:padding .35s,box-shadow .35s}
.hd.on{padding-block:.5rem;box-shadow:0 8px 26px #49231666}
.scrollbar{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:linear-gradient(90deg,var(--copper),#e6c29a);transform:scaleX(var(--p,0));transform-origin:left}
.brand{font:400 clamp(1.9rem,4vw,2.5rem)/1 var(--script);text-decoration:none;color:#f3dcc4}
.nav ul{display:flex;gap:clamp(1rem,3vw,2.4rem);list-style:none}
.nav a{text-decoration:none;font-size:1.1rem;letter-spacing:.06em;position:relative;padding:.3rem 0;color:#fff;transition:color .3s}
.nav a:hover{color:#e6c29a}
.nav a:after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--tan);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.nav a:hover:after,.nav .current-menu-item a:after,.nav a[aria-current]:after{transform:scaleX(1)}
.burger{display:none;background:none;border:0;width:2.6rem;height:2.6rem;cursor:pointer;color:inherit}
.burger i{display:block;height:2px;margin:6px 8px;background:currentColor;transition:transform .3s,opacity .3s}
.open .burger i:nth-child(1){transform:translateY(8px) rotate(45deg)}.open .burger i:nth-child(2){opacity:0}.open .burger i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media(max-width:760px){.burger{display:block}.nav{position:fixed;inset:0 0 0 auto;width:min(78vw,320px);background:var(--cocoa);border-left:1px solid #c28e5c59;padding:5rem 2rem;transform:translateX(100%);transition:transform .45s cubic-bezier(.7,0,.2,1)}.open .nav{transform:none}.nav ul{flex-direction:column;gap:1.4rem;font-size:1.3rem}.burger{z-index:2}}
/* hero: sits directly below the menu bar */
.hero{position:relative;height:calc(100svh - var(--hh,4.6rem) - 6rem);min-height:360px;color:var(--white);overflow:hidden;background:#efe6da}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%}
@keyframes in{to{opacity:1;transform:none}}
.btns{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.4rem}
.cta{background:#f6ede2;border-bottom:1px solid #c28e5c55;padding:1.2rem 1rem}
.cta .btns{margin-top:0}
.cta .btn{background:none;color:var(--cocoa);border-color:var(--cocoa);-webkit-backdrop-filter:none;backdrop-filter:none}
.cta .btn:hover{background:var(--cocoa);color:var(--white)}
.cta .btn.fill{background:var(--copper);border-color:var(--copper);color:var(--white)}
.cta .btn.fill:hover{background:var(--cocoa);border-color:var(--cocoa)}
.cta .btns>*{opacity:0;transform:translateY(12px);animation:in .9s .4s forwards}.cta .btns>*+*{animation-delay:.6s}
.btn{position:relative;overflow:hidden;display:inline-block;padding:.75rem 2rem;border:1px solid var(--white);color:var(--white);text-decoration:none;letter-spacing:.08em;background:#49231666;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);font:inherit;cursor:pointer;transition:background .3s,color .3s,transform .18s,box-shadow .3s}
.btn:hover{background:var(--white);color:var(--cocoa);transform:translateY(-2px);box-shadow:0 8px 20px #49231655}
.btn:active{transform:translateY(1px) scale(.95);box-shadow:0 1px 4px #49231655}
.btn.fill{background:var(--copper);border-color:var(--copper)}.btn.fill:hover{background:var(--cocoa);color:var(--white);border-color:var(--cocoa)}
.btn.busy{pointer-events:none;opacity:.85}.btn.busy span:after{content:"";display:inline-block;width:.8em;height:.8em;margin-left:.6em;border:2px solid #fff6;border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-.05em}
@keyframes spin{to{transform:rotate(360deg)}}
.rip{position:absolute;border-radius:50%;background:#ffffff66;transform:scale(0);animation:rip .6s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(1);opacity:0}}
.sound{position:absolute;z-index:3;right:1rem;top:1rem;width:2.8rem;height:2.8rem;border-radius:50%;border:1px solid #fff9;background:#49231699;color:#fff;cursor:pointer;font-size:1.1rem;transition:transform .2s,background .3s}
.sound:hover{transform:scale(1.1);background:var(--copper)}.sound:active{transform:scale(.9)}
/* sections */
.sec{padding:clamp(4rem,10vw,8rem) 1.4rem;text-align:center}
.wrap h2,.wide h2{margin-bottom:1.4rem}
.sec.dark{background:var(--cocoa);color:var(--white)}.sec.rust{background:var(--rust);color:var(--white)}
.wrap{max-width:760px;margin:0 auto}.wide{max-width:1100px;margin:0 auto}
.sec h2{font:400 clamp(2.8rem,8vw,5rem)/1.05 var(--script);color:var(--copper);margin-bottom:1.4rem}
.dark h2,.rust h2{color:var(--tan)}
.sec h3{font:400 clamp(2.4rem,6vw,3.6rem)/1.1 var(--script);color:var(--copper);margin-bottom:1rem}
.sec p{margin-bottom:1rem}
.orn{width:120px;height:1px;background:var(--tan);margin:2rem auto;position:relative}.orn:after{content:"";position:absolute;left:50%;top:-4px;width:9px;height:9px;background:var(--copper);transform:translateX(-50%) rotate(45deg)}
.date{font-size:clamp(1.8rem,5vw,3rem);letter-spacing:.05em;line-height:1.3}.date small{display:block;font-size:1.1rem;font-style:italic;color:var(--tan)}
.cd{display:flex;justify-content:center;gap:clamp(.6rem,2vw,1.4rem);margin-top:2rem}
.cd div{position:relative;overflow:hidden;min-width:4.4rem;padding:1rem .4rem;border:1px solid var(--tan);border-radius:50% 50% 8px 8px/38% 38% 8px 8px;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .3s,border-color .3s,background .3s}
.cd div:hover{transform:translateY(-5px);border-color:var(--copper);box-shadow:0 10px 24px #ba5b2f33;background:#ba5b2f0d}
.cd div:active{transform:translateY(1px) scale(.93);box-shadow:none}
.cd div.pop{animation:pop .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(1)}35%{transform:scale(.9)}70%{transform:scale(1.1)}100%{transform:scale(1)}}
.cd b{display:block;font:500 2.2rem/1 var(--serif);font-variant-numeric:tabular-nums}.cd b.tick{animation:tick .45s cubic-bezier(.2,.8,.2,1)}
@keyframes tick{from{transform:translateY(-55%);opacity:0}to{transform:none;opacity:1}}
.cd span{font-size:.9rem;letter-spacing:.1em}
.cd div:last-child:after{content:"";position:absolute;left:50%;bottom:7px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--copper);animation:beat 1s infinite}
@keyframes beat{0%,100%{transform:scale(.6);opacity:.4}50%{transform:scale(1.4);opacity:1}}
.pal{display:flex;justify-content:center;align-items:center;gap:clamp(.6rem,3vw,1.6rem);width:min(560px,100%);margin:1.5rem auto 1rem;background:none}
.pal .dot{width:22%;height:auto;display:block;filter:drop-shadow(0 6px 14px #0000004d)}
.js .pal .dot{opacity:0;transform:scale(.2) translateY(24px)}
.js .rv.in .pal .dot{animation:dotpop .9s calc(.5s + var(--d)*.45s) cubic-bezier(.2,.9,.3,1.25) forwards}
@keyframes dotpop{0%{opacity:0;transform:scale(.2) translateY(24px)}60%{opacity:1}100%{opacity:1;transform:none}}
.tel{font-size:1.8rem;color:var(--copper);text-decoration:none;display:inline-block;margin:.2rem .8rem}.dark .tel,.rust .tel{color:var(--white)}
/* timeline (scroll-driven) */
.tl{list-style:none;position:relative;margin:2.5rem auto 0;text-align:left}
.tl:before,.tl-fill{content:"";position:absolute;left:8.5rem;top:0;bottom:0;width:2px;background:#c28e5c40}
.tl-fill{background:linear-gradient(var(--copper),var(--rust));transform:scaleY(var(--tp,0));transform-origin:top;display:block}
.tl li{display:grid;grid-template-columns:6.4rem 1fr;gap:4.2rem;padding:1.2rem 0;position:relative}
.tl li:after{content:"";position:absolute;left:calc(8.5rem - 7px);top:1.8rem;width:14px;height:14px;background:var(--white);border:2px solid var(--tan);border-radius:50%;transition:background .4s,border-color .4s,transform .5s cubic-bezier(.3,1.6,.5,1),box-shadow .4s}
.tl time{white-space:nowrap;text-align:right;color:var(--tan);font-size:1.3rem;transition:color .4s}
.tl li>div{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.tl h4{font:600 1.35rem/1.3 var(--serif)}.tl p{font-size:1.05rem;margin:0;opacity:.85}
.js .tl li{opacity:.3;transition:opacity .6s}.js .tl li>div{transform:translateX(18px)}
.js .tl li.act{opacity:1}.js .tl li.act>div{transform:none}
.tl li.act:after{background:var(--copper);border-color:var(--copper);transform:scale(1.25);box-shadow:0 0 0 5px #ba5b2f26}
.tl li.act time{color:var(--copper)}
.prog-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(2rem,6vw,5rem);align-items:start;text-align:center}
.prog-grid .prog-img{position:sticky;top:calc(var(--hh,4.6rem) + 2rem)}
.prog-t .tl{max-width:640px}
@media(max-width:860px){.prog-grid{grid-template-columns:1fr}.prog-grid .prog-img{position:relative;top:0;max-width:340px;margin:0 auto 1rem}}
@media(max-width:520px){.tl:before,.tl-fill{left:6rem}.tl li{grid-template-columns:4.4rem 1fr;gap:3.2rem}.tl li:after{left:calc(6rem - 7px)}.tl time{font-size:1.1rem}}
/* photo frames */
.arch{overflow:hidden;margin:0;border-radius:999px 999px 14px 14px;border:1px solid #c28e5c80;box-shadow:0 18px 50px #49231633;aspect-ratio:4/5;background:#e9ddd0;position:relative}
.arch:before{content:"";position:absolute;inset:9px;border:1px solid #fff9;border-radius:999px 999px 8px 8px;z-index:2;pointer-events:none}
.arch img{width:100%;height:130%;object-fit:cover;will-change:transform}
.arch img.warm{filter:sepia(.18) saturate(.95)}
.prog-img{aspect-ratio:2/3}
.split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.split.rev{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.split .arch{max-width:420px;width:100%;justify-self:center}
@media(max-width:860px){.split,.split.rev{grid-template-columns:1fr}.split.rev .arch{order:-1}.split .arch{max-width:320px}}
.js .arch.rv{opacity:1;transform:none;clip-path:inset(18% 12% 18% 12% round 999px);transition:clip-path 1.3s cubic-bezier(.2,.7,.2,1)}
.js .arch.rv.in{clip-path:inset(0 round 999px 999px 14px 14px)}
/* words reveal (fade + rise, no clipping so script flourishes stay whole) */
.sec h2[data-words],.sec h3[data-words]{line-height:1.3;padding:.12em .1em .18em;overflow:visible}
.w{display:inline-block;padding:0 .06em;overflow:visible}
.w>i{display:inline-block;font-style:normal;opacity:0;transform:translateY(.4em);transition:opacity .8s calc(var(--i)*70ms),transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--i)*70ms)}
.in .w>i,.w.in>i{opacity:1;transform:none}
.split-t h2,.split-t h3{font-size:clamp(2.6rem,5.2vw,4.3rem)}
/* rsvp */
form.rsvp{display:grid;gap:1rem;max-width:520px;margin:2rem auto;text-align:left}
.rsvp input,.rsvp select,.rsvp textarea{width:100%;padding:.8rem 1rem;font:inherit;border:1px solid var(--tan);background:#fff;color:var(--cocoa);border-radius:4px;transition:border-color .3s,box-shadow .3s,transform .25s}
.rsvp input:focus,.rsvp select:focus,.rsvp textarea:focus{outline:0;border-color:#fff;box-shadow:0 0 0 3px #e6c29a88;transform:translateY(-1px)}
.rsvp input:not(.hp):not(:placeholder-shown):valid,.rsvp textarea:not(:placeholder-shown){border-color:#3fa66a;box-shadow:0 0 0 3px #3fa66a55}
.rsvp .hp{position:absolute;left:-9999px}
.ok{background:var(--copper);color:#fff;padding:1rem;max-width:520px;margin:1rem auto}
.map{margin-top:2.5rem;border:6px solid var(--white);box-shadow:0 10px 40px #0005}.map iframe{width:100%;height:min(420px,70vw);border:0}
.ft{background:var(--cocoa);color:var(--white);text-align:center;padding:3rem 1rem}.ft .script{font-size:2.6rem;color:var(--tan)}
.pg{padding-top:0}
/* motion */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s,transform .9s cubic-bezier(.2,.7,.2,1)}.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.js .rv,.cta .btns>*,.js .tl li{opacity:1;transform:none}.js .tl li>div,.w>i{opacity:1;transform:none}.js .arch.rv{clip-path:none}.arch img{height:100%}.js .pal .dot{opacity:1;transform:none}}

.rsvp-img{max-width:300px;width:100%;aspect-ratio:2/3;margin:0 auto 2.5rem}