:root{
  color-scheme:light;--paper:#f6f8f2;--paper-deep:#e5ede0;--outside:#e2ebdf;
  --ink:#243c31;--muted:#4c6658;--line:#b9cbbd;--green:#23523f;
  --serif:"Cormorant Garamond",Georgia,serif;--script:"Great Vibes","Cormorant Garamond",Georgia,serif;--sans:"Be Vietnam Pro","Segoe UI",sans-serif;--width:570px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--outside);color:var(--ink);font:400 17px/1.5 var(--serif)}
img{display:block;max-width:100%}
a{color:inherit;text-underline-offset:4px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid #2f7558;outline-offset:4px}
[hidden]{display:none!important}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-weight:500}
.skip{position:fixed;top:1rem;left:1rem;transform:translateY(-200%);z-index:10;background:var(--paper);padding:.5rem 1rem}
.skip:focus{transform:none}
.invitation{width:min(100%,var(--width));margin-inline:auto;background:var(--paper);box-shadow:0 0 56px #23443324;overflow:clip}
.caps{font:500 .68rem/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase}
.signature{text-wrap:balance;font:400 clamp(2rem,8vw,3.1rem)/1.2 var(--script)}
.side-mark{display:none}
.cover{position:relative;overflow:hidden;display:grid;align-content:end;isolation:isolate;min-height:530px;height:clamp(530px,83svh,840px);color:#f6faf1;background:#1f4738;text-align:center}
.cover-photo,.cover::after{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.cover-photo{object-fit:cover;object-position:center top;transform-origin:50% 0}
.cover::after{content:"";background:linear-gradient(180deg,#16312666 0%,transparent 22%,transparent 58%,#132f247f 74%,#10291eea 100%)}
.cover-frame{position:absolute;inset:15px;border:1px solid #f3faeb80;pointer-events:none}
.cover-kicker{position:absolute;inset:35px 15px auto;font-size:.67rem;text-shadow:0 1px 6px #122e24}
.cover-copy{padding:0 12px 28px}
.cover h1{display:flex;justify-content:center;align-items:baseline;gap:.12em;font:400 clamp(1.8rem,9.05vw,3.9rem)/1.25 var(--script);text-shadow:0 2px 22px #0e271eb5}
.cover-name{white-space:nowrap}.cover-amp{font-size:.82em;color:#dceccf}
.cover-copy>.caps{margin-top:6px;letter-spacing:.21em}
.cover-date{display:block;margin-top:5px;color:#e2efd8;letter-spacing:.2em}
.cover-link{display:inline-grid;justify-items:center;align-content:center;gap:5px;min-width:85px;min-height:44px;margin-top:12px;color:#f5faef;text-decoration:none;font:400 .77rem/1.1 var(--sans)}
.cover-link i{width:8px;height:8px;border:solid currentColor;border-width:0 1px 1px 0;transform:rotate(45deg)}
.cover-link:hover span{text-decoration:underline}
.opening{padding:31px 17px 10px;text-align:center}
.lead{font-size:clamp(1.14rem,4.2vw,1.36rem);line-height:1.36;color:var(--muted)}
.envelope{width:min(78%,330px);aspect-ratio:1.05;position:relative;margin:35px auto 0;isolation:isolate;--raised:12%}
.envelope-back{position:absolute;inset:0;background:linear-gradient(146deg,#386854,#1c4133 55%);clip-path:polygon(50% 0,100% 40%,100% 100%,0 100%,0 40%);z-index:1}
.envelope-back::after{content:"";position:absolute;inset:4px;background:linear-gradient(166deg,#66988042,#132f244d);clip-path:polygon(50% 0,100% 40%,100% 100%,0 100%,0 40%)}
.envelope-card-slot{position:absolute;inset:0;overflow:hidden;z-index:2}
.count-card{position:absolute;inset:var(--raised) 9% 8%;padding:12% 4% 4%;color:#294737;background:repeating-linear-gradient(105deg,#477b540a 0 1px,transparent 1px 4px),linear-gradient(150deg,#f3f7e9,#dcead8);box-shadow:0 4px 13px #102e2163;z-index:2;transition:transform .9s cubic-bezier(.2,.75,.25,1)}
.count-card::before{content:"";position:absolute;inset:6px;border:1px solid #6c9d7751;pointer-events:none}
.count-card .caps{font-family:var(--serif);font-style:italic;font-size:clamp(.84rem,4vw,1.18rem);letter-spacing:0;text-transform:none}
.count{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:6px 0 5px}
.count span+span{border-inline-start:1px solid #67957855}
.count b,.count small{display:block}
.count b{font-size:clamp(1.34rem,5.9vw,2.05rem);font-variant-numeric:tabular-nums;font-weight:500;line-height:1}
.count small{font:400 .59rem/1.45 var(--sans);margin-top:4px}
.count-note{font:500 .61rem/1.4 var(--sans);margin-top:8px}
.envelope-front{position:absolute;inset:40% 0 0;z-index:3;background:linear-gradient(144deg,#34644e,#153a2c);clip-path:polygon(0 0,50% 57%,100% 0,100% 100%,0 100%);filter:drop-shadow(0 1px 1px #122e24)}
.envelope-front::before,.envelope-front::after{content:"";position:absolute;inset:0}
.envelope-front::before{clip-path:polygon(0 0,61% 62%,0 100%);background:linear-gradient(55deg,#15372b,#41735a 80%)}
.envelope-front::after{clip-path:polygon(50% 51%,100% 100%,0 100%);background:linear-gradient(#3a6a52,#254d3b 68%);border-bottom:1px solid #84ac8d60}
.sprig{position:absolute;width:54%;height:auto;pointer-events:none}
.sprig-top{right:-22%;top:-9%;transform:rotate(28deg)}
.sprig-bottom{left:-21%;bottom:-10%;transform:rotate(211deg) scale(.88)}
.wax{position:absolute;z-index:4;width:19%;height:auto;top:66%;left:40.5%;filter:drop-shadow(0 2px 2px #102e218c)}
.ceremony{padding:27px clamp(25px,8%,54px) 22px;text-align:center}
.ring-divider{display:flex;align-items:center;gap:11px;color:#527b64;margin:9px auto 26px}
.ring-divider::before,.ring-divider::after{content:"";height:1px;background:var(--line);flex:1}
.invite-text{font-size:1.26rem;line-height:1.3}
.ceremony-line{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:start;border-top:1px solid var(--line);margin:31px auto 0;padding-top:12px;text-align:left}
.ceremony-line h2{font-size:clamp(1.18rem,4.6vw,1.65rem);text-transform:uppercase;line-height:1.25}
.event-date{text-align:right;padding-top:4px}
.event-date time{display:block;font:600 clamp(1.5rem,5.4vw,1.85rem)/1.2 var(--serif);letter-spacing:.015em}
.event-date span{display:block;color:var(--muted);margin-top:4px;font:400 1.1rem/1.35 var(--serif)}
.venue{border:1px solid #719580;border-radius:16px;padding:15px 12px 14px;margin:22px auto 0;max-width:355px;box-shadow:0 5px 0 -3px #668f7694;background:#ffffff29}
.venue h3{font-size:clamp(1.3rem,5.2vw,1.66rem);line-height:1.15;margin:5px 0}
.venue p:not(.caps){color:var(--muted)}
.pill{display:inline-flex;justify-content:center;align-items:center;min-height:44px;min-width:125px;border:1px solid var(--green);border-radius:999px;padding:9px 18px;background:var(--green);color:#f6faf1;font:500 .77rem/1.2 var(--sans);text-decoration:none;transition:background .18s,color .18s}
.pill:hover{background:#3a6a52}
.pill.small{margin-top:8px}
.couple{padding:21px clamp(20px,7%,44px) 35px}
.couple-stack{position:relative;max-width:465px;aspect-ratio:1.05;margin:auto}
.polaroid{position:absolute;width:48%;padding:2.1% 2.1% 6.1%;background:#fcfdf9;box-shadow:0 7px 20px #23443340;transition:transform .8s cubic-bezier(.2,.75,.25,1)}
.polaroid img{width:100%;height:auto;aspect-ratio:1.02;object-fit:cover}
.groom{top:3%;right:2%;transform:rotate(9deg);z-index:2}
.groom img{object-position:50% 38%}
.bride{left:3%;bottom:1%;transform:rotate(-11deg);z-index:2}
.bride img{object-position:50% 28%}
.name{position:absolute;text-align:center;z-index:3}
.name span{display:block;font-size:clamp(1.2rem,4.6vw,1.6rem);font-style:italic;color:var(--muted);line-height:1.1}
.name h2{text-transform:uppercase;font-size:clamp(1.35rem,5.2vw,2.1rem);line-height:1.14}
.name-groom{left:4%;top:12%;width:41%}
.name-bride{right:0;bottom:13%;width:48%}
.couple-sprig{position:absolute;width:44%;height:auto;left:23%;top:21%;transform:rotate(-61deg);z-index:1}
.record{position:absolute;z-index:4;top:41%;left:39%;width:22%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;color:#eaf2e0;transform:rotate(-14deg);background:repeating-radial-gradient(circle,#182b24 0 2px,#40594a 2.6px 3px,#1c3128 4.5px 6px);box-shadow:0 4px 12px #172e23a0;border:1px solid #4a6a57}
.record>span{display:grid;grid-auto-flow:column;place-content:center;align-items:center;width:45%;aspect-ratio:1;border-radius:50%;font:italic 500 clamp(.7rem,3.5vw,1.05rem)/1 var(--serif);background:#44755a;border:2px double #bdd4b4}
.record span span{font-size:.6em;margin-inline:.03em}
.film{position:relative}
.film-window{overflow:hidden;container-type:inline-size;border-block:2px solid #244836;background:#315542}
.film-track{display:flex;width:max-content}
.film-reel{position:relative;display:flex;flex:none;gap:4px;padding:12px 4px 12px 0}
.film-reel::before,.film-reel::after{content:"";position:absolute;left:0;right:0;height:5px;background:repeating-linear-gradient(90deg,transparent 0 4px,#dcead7 4px 9px,transparent 9px 12px)}
.film-reel::before{top:3px}.film-reel::after{bottom:3px}
.film-reel img{width:clamp(60px,calc(20vw - 4px),110px);width:calc(20cqw - 4px);height:auto;aspect-ratio:1.06;object-fit:cover}
.film[data-ready]+.letter{padding-top:0}
@media(prefers-reduced-motion:reduce){.film[data-ready]+.letter{padding-top:35px}}
.letter{padding:35px clamp(18px,6%,40px)}
.letter-paper{padding:25px clamp(21px,6%,39px);border:1px solid #a3bdab;border-radius:22px;background:radial-gradient(ellipse at 100% 2%,#83ab812b,transparent 58%),#fbfdf8}
.letter-label{text-align:center;color:var(--muted)}
.letter h2{font-size:clamp(1.75rem,7vw,2.55rem);line-height:1.1;font-style:italic;margin:9px 0 15px;text-align:center}
.letter-paper>p:not(.letter-label,.letter-close){font-size:1.2rem;line-height:1.36;margin-bottom:12px}
.letter-close{display:grid;justify-items:center;gap:4px;margin-top:23px;text-align:center}
.letter-close .signature{font-size:clamp(1.72rem,6.3vw,2.28rem)}
.album{background:#e8f0e4;padding:22px 0 0}
.album-head{display:flex;justify-content:space-between;align-items:end;gap:9px;padding:0 clamp(17px,6%,32px) 13px}
.album h2,.rsvp h2{font-size:clamp(1.9rem,7vw,2.75rem);line-height:1.12}
.album-head .caps{color:var(--muted);margin-bottom:4px}
.folio{font:500 .68rem/1.2 var(--sans);color:var(--muted);white-space:nowrap;padding-bottom:5px}
.album-grid{display:grid;grid-template-columns:minmax(0,1fr) 19%;gap:4px;background:#edf3e9}
.album-main{position:relative;overflow:hidden;background:#243c32;min-height:0}
.album-main img{height:100%;width:100%;position:absolute;inset:0;object-fit:cover;object-position:center 40%}
.expand{position:absolute;bottom:10px;left:12px;background:#17382cde;color:#f5faef;padding:6px 8px;font-size:.58rem;letter-spacing:.14em}
.album-thumbs{display:grid;gap:4px}
.album-thumbs button{position:relative;border:0;background:#496d5a;padding:0;min-width:44px;min-height:44px;aspect-ratio:1.19}
.album-thumbs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%}
.album-thumbs [aria-pressed=true]::after{content:"";position:absolute;inset:2px;border:2px solid #f0f8e8;box-shadow:0 0 0 1px var(--green)}
.album-main:focus-visible,.album-thumbs button:focus-visible{outline-offset:-4px;outline-color:#e3f1d9;z-index:1}
.rsvp{padding:35px clamp(23px,8%,48px) 28px;text-align:center}
.rsvp h2{margin:5px 0 7px;font:400 clamp(2.4rem,9vw,3.4rem)/1.2 var(--script)}
.rsvp>p:not(.caps){font:400 1.24rem/1.45 var(--serif);color:var(--muted)}
.rsvp form{margin:22px auto 0;display:grid;gap:7px;text-align:left;font:400 1.18rem/1.4 var(--serif);max-width:390px}
.rsvp label,.rsvp legend{font-weight:500}
.rsvp label>span{font-weight:400;color:var(--muted)}
.rsvp form>input,.rsvp textarea,.rsvp select{min-height:44px;background:#fcfefb;border:1px solid #8ca997;border-radius:13px;padding:9px 12px;width:100%;font:400 1.18rem/1.4 var(--serif)}
.rsvp textarea{resize:vertical}
.rsvp fieldset{margin:6px 0 0;border:0;padding:0}
.rsvp fieldset label{display:flex;align-items:center;gap:8px;min-height:44px;font-weight:400}
.rsvp input[type=radio]{width:1rem;height:1rem;margin:0;accent-color:var(--green)}
#guest-count-field{display:grid;gap:7px;margin-bottom:5px}
.rsvp .pill{margin-top:7px;width:100%}
.form-note,#rsvp-status{font:400 1rem/1.4 var(--serif);text-align:center;color:var(--muted)}
#rsvp-status:not(:empty){padding:8px 4px;background:var(--paper-deep);border-radius:8px;color:var(--ink)}
.closing{border-top:1px solid #78998238;text-align:center;padding:23px 16px 24px;background:linear-gradient(var(--paper),#e7f0e4)}
.closing-art{position:relative;height:182px;max-width:276px;margin:0 auto 12px;isolation:isolate}
.closing-ring{position:absolute;inset:13px 32% 0 10%;border:7px double #68937a;border-radius:51% 49% 48% 52%;box-shadow:inset 0 1px 7px #416b5347,0 2px 5px #416b534a;transform:rotate(-19deg)}
.closing-sprig{position:absolute;width:145px;left:2px;top:7px;transform:rotate(223deg)}
.closing-print{position:absolute;width:34%;height:61%;object-fit:cover;border:5px solid #f7fbf2;border-bottom-width:12px;box-shadow:0 4px 12px #24473559}
.print-one{top:4px;right:18%;transform:rotate(-11deg)}
.print-two{bottom:5px;right:9%;transform:rotate(13deg)}
.closing .signature{margin:5px 0}
.top-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:400 .78rem/1.3 var(--sans)}
.music{position:fixed;z-index:5;bottom:max(14px,env(safe-area-inset-bottom));right:max(14px,calc((100vw - var(--width))/2 + 14px));width:46px;height:46px;border-radius:50%;border:1px solid #729780;background:#f0f7ec;color:var(--green);font:1.25rem/1 var(--sans);box-shadow:0 3px 14px #24473532}
.music[aria-pressed=true]{background:var(--green);color:#f5faef}
dialog{background:#1b382d;color:#fff5e6;border:1px solid #749780;border-radius:16px;width:min(95vw,720px);max-height:94dvh;padding:7px 12px 10px}
dialog::backdrop{background:#11251de0}
.lightbox-toolbar,.lightbox-nav{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lightbox-toolbar p{font:400 .81rem/1.35 var(--sans)}
dialog button{background:transparent;border:1px solid #a3c4ac96;border-radius:50%;color:inherit;min-width:44px;min-height:44px;font:1.2rem/1 var(--sans)}
#lightbox-photo{width:100%;height:min(69dvh,660px);object-fit:contain;margin:7px 0;background:#122a22}
@media(min-width:850px){
  body{background:radial-gradient(ellipse at 25% 30%,#edf3e9 0,transparent 66%),var(--outside)}
  .side-mark{display:flex;align-items:center;gap:12px;position:fixed;left:max(26px,calc((100vw - 840px)/2));top:50%;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);font:500 .67rem/1.2 var(--sans);letter-spacing:.23em;color:#4c6858}
  .side-mark span{width:1px;height:31px;background:#86a390}
}
@media(max-width:374px){
  .opening{padding-inline:12px}
  .envelope{width:83%}
  .count-card{padding-top:10%}
  .album-grid{grid-template-columns:minmax(0,1fr) 21%}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}