:root{
  --sage:#74806a;
  --sage-dark:#58624f;
  --cream:#f5efe4;
  --paper:#fbf8f1;
  --brown:#7b5949;
  --gold:#b89b63;
  --ink:#383733;
  --night:#161715;
  --line:rgba(116,128,106,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:"Cormorant Garamond",Georgia,serif;font-size:18px}
img{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:"Italiana",serif;font-weight:400}
h2{font-size:clamp(2.7rem,6vw,5rem);line-height:1.02;color:var(--brown);margin-bottom:22px}
h3{font-size:1.75rem;color:var(--brown);margin-bottom:8px}
.hidden{position:absolute;left:-9999px}

.intro-gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--sage-dark);overflow:hidden;perspective:1800px;transition:opacity .7s ease .85s,visibility .7s ease .85s}
.intro-gate.open{opacity:0;visibility:hidden;pointer-events:none}
.gate-panel{position:absolute;top:0;bottom:0;width:50.2%;background:linear-gradient(135deg,#8e9984,#65705d);transition:transform 1.15s cubic-bezier(.65,.02,.18,1)}
.gate-left{left:0;transform-origin:left center;border-right:1px solid rgba(0,0,0,.14)}
.gate-right{right:0;transform-origin:right center;border-left:1px solid rgba(0,0,0,.14)}
.intro-gate.open .gate-left{transform:rotateY(-105deg)}
.intro-gate.open .gate-right{transform:rotateY(105deg)}
.gate-seal{position:relative;z-index:2;width:min(88vw,440px);min-height:150px;border:1px solid rgba(255,255,255,.45);border-radius:28px;background:linear-gradient(145deg,#e4e9c7,#bcc99a);display:grid;grid-template-columns:1fr 1.25fr 1fr;align-items:center;color:var(--brown);box-shadow:0 22px 55px rgba(24,27,22,.33);cursor:pointer}
.gate-seal img{width:100px;margin:auto}
.gate-seal span{font-family:"Italiana",serif;font-size:1.35rem}
.gate-seal small{position:absolute;bottom:3px;left:0;right:0;text-transform:uppercase;letter-spacing:.12em;font-size:.76rem}

.hero{min-height:100vh;position:relative;display:grid;place-items:center;text-align:center;background:url("assets/images/hero.jpg") center 35%/cover no-repeat;color:white}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(15,22,18,.36),rgba(15,22,18,.22) 45%,rgba(15,22,18,.52))}
.topnav{position:absolute;z-index:4;top:0;left:0;right:0;padding:22px 5vw;display:flex;align-items:center;justify-content:space-between}
.brand img{width:86px;filter:brightness(0) invert(1)}
.navlinks{display:flex;gap:24px}
.navlinks a{text-decoration:none;font-size:1rem}
.menu-toggle{display:none;background:none;border:1px solid rgba(255,255,255,.7);color:white;border-radius:999px;padding:8px 15px}
.hero-content{position:relative;z-index:2;max-width:900px;padding:30px}
.hero h1{font-size:clamp(4rem,12vw,8.5rem);line-height:.94;margin:.15em 0}
.hero h1 em{font-family:"Cormorant Garamond",serif;font-size:.65em;font-weight:400}
.hero-date{text-transform:uppercase;letter-spacing:.23em}
.hero-line{font-size:1.45rem;font-style:italic;margin:26px 0 34px}
.kicker{text-transform:uppercase;letter-spacing:.2em;font-size:.79rem;font-weight:600;color:var(--sage)}
.hero .kicker{color:white}
.scroll-cue{position:absolute;bottom:22px;z-index:2;text-transform:uppercase;letter-spacing:.2em;font-size:.72rem}

.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:999px;border:1px solid transparent;text-decoration:none;font-weight:600;letter-spacing:.03em;cursor:pointer;transition:transform .2s ease,background .2s ease}
.button:hover{transform:translateY(-2px)}
.button.light{border-color:white;color:white;background:rgba(255,255,255,.08)}
.button.primary{background:var(--sage-dark);color:white}
.button.whatsapp{border-color:var(--sage-dark);color:var(--sage-dark);background:transparent}
.full{width:100%}

.section{padding:100px 22px}
.container{width:min(1120px,100%);margin:auto}
.narrow{width:min(760px,100%);margin:auto}
.section-head{max-width:760px;margin-bottom:50px}
.story{background:var(--paper)}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.story-copy p{font-size:1.18rem;line-height:1.55}
.editorial-stack{display:grid;gap:24px}
.photo-card{margin:0;background:white;padding:10px;box-shadow:0 18px 50px rgba(40,44,37,.13)}
.photo-card img{width:100%;aspect-ratio:4/5;object-fit:cover}
.photo-card.wide img{aspect-ratio:16/10}
.tilt-left{transform:rotate(-2deg)}
.tilt-right{transform:rotate(2deg)}
.quote-band{margin-top:80px;padding:38px 22px;background:var(--sage);color:white;text-align:center;display:flex;justify-content:center;gap:60px;flex-wrap:wrap}
.quote-band p{font-size:1.45rem;font-style:italic;margin:0}

.proposal{background:linear-gradient(135deg,#eee4d3,#f8f3e9)}
.polaroid-scene{min-height:720px;position:relative}
.polaroid{position:absolute;width:min(33vw,330px);background:white;padding:12px 12px 38px;margin:0;box-shadow:0 22px 55px rgba(53,47,39,.18)}
.polaroid img{width:100%;aspect-ratio:4/5;object-fit:cover}
.polaroid figcaption{text-align:center;margin-top:12px;font-style:italic}
.p1{left:2%;top:60px;transform:rotate(-8deg)}
.p2{left:27%;top:10px;transform:rotate(5deg)}
.p3{right:17%;top:120px;transform:rotate(-3deg)}
.p4{right:0;top:330px;transform:rotate(7deg)}

.promise{background:var(--night);color:#eee}
.promise .kicker{color:#c8d0bd}
.promise h2{color:#f1ece2}
.promise-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.promise-gallery figure{margin:0;overflow:hidden}
.promise-gallery img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.03)}
.promise-gallery .feature{grid-column:1/-1;height:72vh}
.promise-gallery figure:not(.feature){height:430px}

.wedding{background:var(--paper)}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:50px 0 70px}
.countdown div{text-align:center;padding:24px 8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.countdown strong{display:block;font-family:"Italiana",serif;font-size:clamp(2rem,6vw,4rem);color:var(--brown);font-weight:400}
.countdown span{text-transform:uppercase;letter-spacing:.12em;font-size:.75rem}
.timeline{position:relative}
.timeline:before{content:"";position:absolute;left:105px;top:0;bottom:0;width:1px;background:var(--line)}
.timeline article{display:grid;grid-template-columns:90px 1fr;gap:40px;padding:30px 0;position:relative}
.timeline article:after{content:"";position:absolute;left:99px;top:42px;width:13px;height:13px;border-radius:50%;background:var(--sage);box-shadow:0 0 0 6px var(--paper)}
.timeline time{font-family:"Italiana",serif;color:var(--sage-dark)}
.timeline p{margin-bottom:6px}
.timeline a{color:var(--sage-dark)}
.timeline .birthday h3{color:var(--gold)}

.rsvp{background:linear-gradient(135deg,#e7decf,#f7f1e6)}
.rsvp-form{background:rgba(255,255,255,.76);padding:42px;border-radius:30px;box-shadow:0 20px 65px rgba(47,51,43,.14)}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{display:grid;gap:8px;margin-bottom:17px;font-weight:600}
input,select,textarea{width:100%;padding:14px 15px;border:1px solid rgba(116,128,106,.4);border-radius:14px;background:#fffdf8;color:var(--ink);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--sage-dark);box-shadow:0 0 0 3px rgba(116,128,106,.12)}
.rsvp-form .button{margin-top:8px}
.form-success{margin-top:20px;padding:22px;border-radius:18px;background:#edf1e7;text-align:center}

.guest-photos{background:var(--sage)}
.guest-photos h2,.guest-photos p{color:white}
.guest-photos .kicker{color:#dce4d3}
.photo-upload{display:grid;grid-template-columns:1.3fr .7fr;gap:50px;align-items:center}
.qr-box{background:white;padding:26px;border-radius:26px;text-align:center}
.qr-box img{width:250px;margin:auto}
.qr-box p{color:var(--ink);margin:14px 0 0}

.photo-fallback{font-size:.95rem;opacity:.85;margin-top:14px}
.photo-fallback a{text-decoration:underline}
.uploader{margin-top:60px;background:rgba(255,255,255,.9);padding:38px;border-radius:30px}
.uploader h3{margin-bottom:10px}
.uploader-hint{color:var(--ink);margin-bottom:24px}
.uploader-picker{display:inline-flex;align-items:center;min-height:52px;padding:0 24px;border:1px dashed var(--sage-dark);border-radius:999px;color:var(--sage-dark);cursor:pointer;font-weight:600;margin-bottom:22px}
.uploader-picker input{position:absolute;left:-9999px}
.upload-list{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px}
.upload-row{display:grid;grid-template-columns:1fr auto 130px 92px;gap:14px;align-items:center;font-size:.95rem}
.upload-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload-size{color:var(--sage-dark);font-size:.85rem}
.upload-bar{height:6px;border-radius:999px;background:rgba(116,128,106,.22);overflow:hidden}
.upload-bar-fill{display:block;height:100%;background:var(--sage-dark);transition:width .25s ease}
.upload-state{text-align:right;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--sage-dark)}
.upload-status{padding:14px 18px;border-radius:14px;background:var(--sage);color:var(--ink);margin-bottom:18px}
.upload-status[data-tone="error"]{background:#f6e6df;color:var(--brown)}
.upload-status[data-tone="success"]{background:var(--sage)}

.final-chapter{min-height:82vh;position:relative;display:grid;place-items:center;text-align:center;background:url("assets/images/hero.jpg") center/cover no-repeat;color:white}
.final-chapter .kicker {
  color: white;
}
.final-chapter h3{font-size:3rem;line-height:.94;margin:.15em 0; color: white;}
.final-chapter h3 em{font-family:"Cormorant Garamond",serif;font-size:.65em;font-weight:400}
.final-overlay{position:absolute;inset:0;background:rgba(18,25,20,.58)}
.final-content{position:relative;z-index:2;padding:30px}
.final-content h2{color:white}
.final-content p{font-size:1.35rem}
.final-content img{width:150px;margin:30px auto 0;filter:brightness(0) invert(1)}
footer{padding:32px 20px;background:var(--sage-dark);color:white;text-align:center}
footer p{margin:0}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:none}

@media(max-width:820px){
  body{font-size:17px}
  .navlinks{position:absolute;top:78px;right:20px;display:none;flex-direction:column;background:rgba(44,52,43,.94);padding:20px;border-radius:18px;text-align:right}
  .navlinks.open{display:flex}
  .menu-toggle{display:block}
  .story-grid,.photo-upload{grid-template-columns:1fr}
  .polaroid-scene{min-height:auto;display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .polaroid{position:relative!important;inset:auto!important;width:100%;transform:none!important}
  .promise-gallery{grid-template-columns:1fr}
  .promise-gallery .feature{grid-column:auto;height:58vh}
  .promise-gallery figure:not(.feature){height:420px}
  .countdown{grid-template-columns:1fr 1fr}
  .timeline:before{left:15px}
  .timeline article{grid-template-columns:1fr;padding-left:42px;gap:8px}
  .timeline article:after{left:9px}
  .field-grid{grid-template-columns:1fr}
  .rsvp-form{padding:28px 20px}
  .uploader{padding:26px 20px}
  .upload-row{grid-template-columns:1fr 78px;grid-template-areas:"name size" "bar state";gap:6px 12px}
  .upload-name{grid-area:name}
  .upload-size{grid-area:size;text-align:right}
  .upload-bar{grid-area:bar}
  .upload-state{grid-area:state}
}
@media(max-width:520px){
  .section{padding:76px 17px}
  .hero{background-position:58% 35%}
  .hero h1{font-size:3.9rem}
  .polaroid-scene{grid-template-columns:1fr}
  .promise-gallery figure:not(.feature){height:360px}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition-duration:.01ms!important}
}