@font-face{font-family:Cormorant;src:url("assets/fonts/cormorant-garamond.woff2") format("woff2");font-display:swap;font-weight:400 700}
@font-face{font-family:Pinyon;src:url("assets/fonts/pinyon-script.woff2") format("woff2");font-display:swap}
@font-face{font-family:Jost;src:url("assets/fonts/jost.woff2") format("woff2");font-display:swap;font-weight:300 600}
@font-face{font-family:"New Icon Script";src:url("assets/fonts/new-icon-script.otf") format("opentype");font-display:swap}

:root{
  --forest:#2c4a33;--forest-dark:#223b28;--sage:#a6bcaa;--sage-light:#e1eae0;
  --ivory:#f4efe4;--paper:#fbf9f3;--ink:#223b28;--muted:#3a5540;--line:#d8d4c6;
  --error:#9f2f2f;--shadow:0 24px 60px rgb(44 74 51 / .14);--focus:#b0712e;
  --content:68rem;--radius:2px;--gutter:clamp(1rem,4vw,2rem);--header-height:4.5rem;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5.5rem}
body{margin:0;overflow-x:hidden;background:var(--ivory);color:var(--ink);font-family:Cormorant,Georgia,serif;font-size:clamp(1.0625rem,1rem + .2vw,1.125rem);line-height:1.55;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
body.cover-open{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,textarea{font:inherit}
[hidden]{display:none!important}

:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.skip-link{position:fixed;left:1rem;top:1rem;z-index:1000;padding:.7rem 1rem;background:var(--paper);color:var(--forest-dark);transform:translateY(-180%)}
.skip-link:focus{transform:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.invitation-cover{display:none}
.js .invitation-cover{position:fixed;inset:0;z-index:100;display:grid;min-height:100dvh;place-content:center;justify-items:center;gap:.75rem;padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));background:var(--ivory);overflow:auto;text-align:center;transition:opacity .55s ease,visibility .55s ease}
.js .invitation-cover.is-leaving{opacity:0;visibility:hidden}
.cover-copy{position:relative;z-index:2}
.eyebrow{margin:0;font-family:Jost,Arial,sans-serif;font-size:.72rem;letter-spacing:.38em;text-transform:uppercase;color:#46664d}
.cover-names{margin:.2rem 0 0;font-family:Pinyon,cursive;font-size:clamp(2.8rem,11vw,4.4rem);line-height:1;color:var(--forest)}
.cover-names small,h1 small{font-size:.58em;font-weight:400}
.cover-date{margin:.75rem 0 0;font-family:Jost,Arial,sans-serif;font-size:.75rem;letter-spacing:.3em;color:var(--muted)}
.envelope-button{position:relative;width:min(92vw,30rem);min-height:clamp(12rem,64vw,22.5rem);border:0;padding:0 0 2.75rem;background:transparent;color:var(--forest-dark);cursor:pointer}
.envelope-stage{position:relative;display:block;width:100%;aspect-ratio:3/2}
.envelope-layer,.envelope{position:absolute;inset:0;width:100%}
.envelope-layer{transition:opacity .45s ease,transform .55s ease}
.envelope{filter:drop-shadow(0 20px 28px rgb(45 55 35 / .24))}
.envelope-open{opacity:0;transform:translateY(.35rem) scale(.98);transition:opacity .45s ease,transform .55s ease}
.invitation-cover.is-opening .envelope-closed-layer{opacity:0;transform:translateY(.25rem) scale(.98)}
.invitation-cover.is-opening .envelope-open{opacity:1;transform:none}
.seal{position:absolute;left:50%;top:44%;z-index:3;width:clamp(2.6rem,9vw,3.8rem);transform:translate(-50%,-50%);filter:drop-shadow(0 4px 7px rgb(58 42 6 / .35))}
.invitation-cover:not(.is-opening) .envelope-button:hover .envelope-closed-layer,.invitation-cover:not(.is-opening) .envelope-button:focus-visible .envelope-closed-layer{transform:scale(1.015)}
.envelope-button>.button-label{position:absolute;bottom:.25rem;left:50%;transform:translateX(-50%);font-family:Jost,Arial,sans-serif;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap}
.envelope-button:focus-visible{outline:none}
.envelope-button:focus-visible>.button-label{color:var(--focus);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.4rem}

.site-header{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;min-height:var(--header-height);padding:.6rem max(var(--gutter),calc((100% - var(--content))/2));background:rgb(244 239 228 / .92);border-bottom:1px solid rgb(44 74 51 / .12);backdrop-filter:blur(12px);transition:transform .3s ease;will-change:transform}
.site-header.is-hidden{transform:translateY(-100%)}
.brand{display:inline-flex;min-width:2.75rem;min-height:2.75rem;align-items:center;justify-content:center;text-decoration:none;font-family:"New Icon Script",Pinyon,cursive;font-size:1.65rem;line-height:1;color:var(--forest)}
.brand span{font-size:.55em;margin:0 .1em}
nav{display:flex;gap:clamp(.75rem,3vw,2rem)}
nav a{display:inline-flex;min-height:2.75rem;align-items:center;padding:.7rem .1rem;text-decoration:none;font-family:Jost,Arial,sans-serif;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;border-bottom:1px solid transparent}
nav a:hover{border-color:var(--forest)}

.hero{position:relative;min-height:calc(100svh - var(--header-height));display:grid;place-items:center;padding:clamp(2.5rem,7vw,6rem) var(--gutter);overflow:hidden}
.hero-foliage{position:absolute;left:50%;bottom:-5rem;width:min(62rem,110vw);max-width:none;transform:translateX(-50%);opacity:.35;pointer-events:none}
.invitation-card{position:relative;z-index:1;width:min(100%,36rem);padding:clamp(3rem,7vw,5rem) clamp(1.6rem,6vw,4rem);background:rgb(251 249 243 / .78);border:1px solid rgb(216 212 198 / .88);box-shadow:var(--shadow);text-align:center;backdrop-filter:blur(3px)}
.invitation-card::before{content:"";position:absolute;inset:.75rem;border:1px solid #e0dac8;pointer-events:none}
.monogram{margin:1rem 0 -.2rem;font-family:"New Icon Script",Pinyon,cursive;font-size:clamp(3.5rem,10vw,5.4rem);line-height:.85;color:var(--forest)}
h1{margin:0;font-family:Pinyon,cursive;font-size:clamp(2.5rem,8vw,4rem);font-weight:400;line-height:1.1;white-space:nowrap}
h1:focus{outline:none}
blockquote{margin:2.2rem auto 0;max-width:25rem;font-style:italic}
blockquote p{margin:0}
blockquote cite{display:block;margin-top:.5rem;font-family:Jost,Arial,sans-serif;font-size:.66rem;font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.wedding-date{display:flex;align-items:center;justify-content:center;gap:clamp(1rem,4vw,2rem);margin-top:2.4rem;font-family:Jost,Arial,sans-serif;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.date-center{display:flex;flex-direction:column;align-items:center;padding:.1rem 1rem;border-inline:1px solid var(--forest)}
.date-center>span{font-size:.68rem}
.wedding-date .date-center strong{padding:0;border:0;font-family:Cormorant,Georgia,serif;font-size:4.1rem;line-height:.82;color:var(--ink)}

.section{padding:clamp(3.5rem,8vw,6.5rem) max(var(--gutter),calc((100% - var(--content))/2));text-align:center}
.section-heading p{margin:0 0 -.7rem;font-family:Pinyon,cursive;font-size:clamp(2.5rem,6vw,3.5rem);line-height:1;color:var(--forest)}
.section-heading h2{margin:0;font-size:clamp(1.75rem,1.35rem + 3vw,3.25rem);font-weight:500;line-height:1.15;letter-spacing:clamp(.06em,.5vw,.12em);text-transform:uppercase}
.lead{max-width:34rem;margin:1.5rem auto 2.5rem;font-size:clamp(1.2rem,2.5vw,1.45rem);font-style:italic;line-height:1.6;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}
.button{display:inline-flex;min-height:2.9rem;align-items:center;justify-content:center;padding:.75rem 1.35rem;border:1.5px solid var(--forest);border-radius:var(--radius);background:transparent;color:var(--forest-dark);font-family:Jost,Arial,sans-serif;font-size:.76rem;font-weight:500;line-height:1.2;letter-spacing:.1em;text-decoration:none;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.button:hover{background:var(--sage-light);transform:translateY(-1px)}
.button-primary{background:var(--forest-dark);border-color:var(--forest-dark);color:var(--paper)}
.button-primary:hover{background:var(--forest);color:var(--paper)}

.prewedding-section{background:var(--forest);color:var(--paper)}
.prewedding-gallery{display:grid;grid-template-columns:repeat(3,1fr);align-items:start;gap:clamp(1rem,3vw,2rem);max-width:64rem;margin:2.5rem auto 0}
.prewedding-gallery figure{margin:0;transform:rotate(-2deg)}
.prewedding-gallery figure:nth-child(2){transform:rotate(2deg)}
.prewedding-gallery figure:nth-child(3){transform:rotate(-1deg)}
.prewedding-gallery figure:nth-child(4){margin-top:1.5rem;transform:rotate(1.5deg)}
.prewedding-gallery figcaption{margin-top:.7rem;font-style:italic;color:#d3e0d2}
.gallery-section{background:var(--ivory);color:var(--ink)}
.section-heading-light p{color:var(--sage)}
.lead-light{color:#d3e0d2}
.gallery-section .section-heading-light h2{color:var(--ink)}
.gallery-section .lead-light{color:var(--muted)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);align-items:start;gap:clamp(1rem,3vw,2rem);max-width:58rem;margin:0 auto}
.gallery figure{margin:0}
.gallery figure:nth-child(2){margin-top:2rem}
.prewedding-gallery img,.gallery img{width:100%;object-fit:cover}
.prewedding-gallery img{aspect-ratio:3/4}
.gallery img{aspect-ratio:3/4;border:.45rem solid var(--paper);box-shadow:0 18px 34px rgb(0 0 0 / .27)}
.gallery figcaption{margin-top:.65rem;font-size:1.1rem;font-style:italic;color:var(--muted)}

.location address{display:flex;flex-direction:column;margin:1.5rem auto .8rem;font-style:normal;font-size:1.2rem}
.location address strong{font-size:1.75rem}
.location>p{font-family:Jost,Arial,sans-serif;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.location .button{margin-top:1rem}

.rsvp-section{background:var(--forest)}
.rsvp-card{width:min(100%,35rem);margin:auto;padding:clamp(2rem,6vw,3.5rem);background:var(--paper);box-shadow:0 26px 54px rgb(20 40 25 / .22);text-align:left}
.rsvp-card .section-heading,.form-intro{text-align:center}
.form-intro{margin:1.25rem auto 2rem;max-width:25rem;color:var(--muted)}
form{display:grid;gap:1.4rem}
.field{display:grid;gap:.35rem}
label,legend{font-family:Jost,Arial,sans-serif;font-size:.8rem;font-weight:500;letter-spacing:.04em;color:var(--forest-dark)}
label span{font-weight:400;color:var(--muted)}
input,textarea{width:100%;min-height:3rem;padding:.7rem .85rem;border:1px solid #9eb0a1;border-radius:var(--radius);background:var(--ivory);color:var(--ink)}
textarea{resize:vertical}
input:hover,textarea:hover{border-color:var(--forest)}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--error)}
.hint{color:var(--muted);font-size:.82rem}
.error{min-height:1.1em;color:var(--error);font-family:Jost,Arial,sans-serif;font-size:.78rem}
fieldset{min-width:0;margin:0;padding:0;border:0}
legend{margin-bottom:.5rem}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}
.choice{position:relative;display:block;cursor:pointer}
.choice input{position:absolute;width:1px;height:1px;opacity:0}
.choice span{display:flex;min-height:3rem;align-items:center;justify-content:center;padding:.6rem;border:1px solid #9eb0a1;background:transparent;color:var(--muted);text-align:center;transition:background .2s,color .2s,border .2s}
.choice input:checked+span{border-color:var(--forest);background:var(--forest);color:var(--paper)}
.choice input:focus-visible+span{outline:3px solid var(--focus);outline-offset:3px}
.attendance-details{display:grid;gap:1.4rem}
.submit-button{width:100%;margin-top:.4rem}
.form-status{min-height:1.5em;margin:0;text-align:center;font-weight:600;color:var(--forest)}

.gifts-section{overflow:hidden}
.gifts{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;text-align:left}
.gift{display:flex;min-width:0;flex-direction:column;padding:1.6rem;background:var(--paper);border:1px solid var(--line);box-shadow:0 6px 18px rgb(70 80 55 / .05)}
.gift h3{margin:0;font-size:1.45rem;line-height:1.15}
.gift-image{width:100%;aspect-ratio:4/3;margin:0 0 1rem;border:1px solid var(--line);object-fit:cover;object-position:center}
.gift-image-portrait{object-position:center 22%}
.gift p{flex:1;margin:.55rem 0;color:var(--muted)}
.gift strong{margin:auto 0 1rem;padding-top:1rem;font-size:1.45rem;color:var(--forest)}

.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.5rem,2vw,1rem);max-width:35rem;margin:2rem auto 0}
.countdown>div{padding:1.1rem .35rem;background:var(--paper);border:1px solid var(--line)}
.countdown strong{display:block;font-size:clamp(2rem,7vw,3rem);line-height:1}
.countdown span{font-family:Jost,Arial,sans-serif;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--forest)}
.countdown-fallback,.event-finished{font-size:1.2rem;color:var(--muted)}

footer{position:relative;display:flex;flex-direction:column;align-items:center;padding:4rem 1.5rem;background:linear-gradient(#2c4a33,#23402b);color:#e3d8c6;text-align:center}
.footer-foliage{position:absolute;inset:0 auto auto 50%;width:min(38rem,80vw);height:100%;transform:translateX(-50%);object-fit:cover;opacity:.2;pointer-events:none}
.footer-mark{position:relative;font-family:"New Icon Script",Pinyon,cursive;font-size:3.9rem;line-height:.8;text-decoration:none}
footer p,footer time{position:relative}
footer p{margin:1rem 0 .4rem;font-size:1.4rem;font-style:italic}
footer time{font-family:Jost,Arial,sans-serif;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase}

.music-control{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));z-index:40;width:3rem;height:3rem;border:1px solid rgb(255 255 255 / .55);border-radius:50%;background:var(--forest-dark);color:var(--paper);box-shadow:0 5px 18px rgb(0 0 0 / .22);font-family:Jost,Arial,sans-serif;cursor:pointer}
.music-control:hover{background:var(--forest)}

@media (max-width:63.99rem){
  :root{--header-height:7.1rem}
  html{scroll-padding-top:8rem}
  .site-header{display:grid;grid-template-columns:1fr;justify-items:center;gap:.1rem;padding-block:.35rem .2rem}
  .site-header nav{width:100%;justify-content:center;gap:clamp(.8rem,4vw,1.75rem);overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none}
  .site-header nav::-webkit-scrollbar{display:none}
  .prewedding-gallery,.gallery{grid-template-columns:repeat(2,minmax(0,1fr));max-width:44rem}
  .prewedding-gallery figure:nth-child(3),.gallery figure:nth-child(3){grid-column:1/-1;width:calc(50% - .5rem);justify-self:center}
  .gallery figure:nth-child(2){margin-top:0}
  .gifts{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:39.99rem){
  :root{--header-height:6.75rem;--gutter:clamp(1rem,5vw,1.4rem)}
  .site-header{justify-items:stretch}
  .brand{justify-self:center}
  .site-header nav{justify-content:safe center;gap:1rem;padding-inline:.1rem}
  .site-header nav a{font-size:.67rem;letter-spacing:.08em}
  .hero-foliage{bottom:-2rem;width:150vw}
  .invitation-card{padding:2.75rem clamp(1.25rem,6vw,2rem)}
  .invitation-card::before{inset:.55rem}
  h1{font-size:clamp(2.4rem,13vw,3.35rem);white-space:normal}
  blockquote{margin-top:1.75rem}
  .wedding-date{gap:clamp(.5rem,3vw,.9rem);margin-top:2rem;font-size:.65rem;letter-spacing:.1em}
  .date-center{padding-inline:clamp(.55rem,3vw,.8rem)}
  .wedding-date .date-center strong{font-size:3.3rem}
  .actions{display:grid}.actions .button{width:100%}
  .prewedding-gallery,.gallery{grid-template-columns:1fr;max-width:26rem;gap:2rem}
  .prewedding-gallery figure,.prewedding-gallery figure:nth-child(2),.prewedding-gallery figure:nth-child(3),.gallery figure:nth-child(3){grid-column:auto;width:100%;transform:none}
  .gallery figure:nth-child(2){margin-top:0}
  .rsvp-section{padding-inline:max(.75rem,env(safe-area-inset-left))}
  .rsvp-card{padding:2rem clamp(1rem,5vw,1.5rem)}
  .gifts{grid-template-columns:1fr;max-width:27rem;margin-inline:auto}
  .gift{padding:clamp(1rem,5vw,1.4rem)}
  .choice-grid{grid-template-columns:1fr}
  .countdown{grid-template-columns:repeat(2,minmax(0,1fr));max-width:20rem;gap:.55rem}
  footer{padding-inline:var(--gutter)}
  footer time{max-width:18rem;letter-spacing:.14em}
}

@media (max-width:22rem){
  :root{--header-height:6.5rem}
  .site-header nav{gap:.7rem}
  .site-header nav a{font-size:.62rem;letter-spacing:.04em}
  .eyebrow{font-size:.64rem;letter-spacing:.25em}
  .cover-names{font-size:2.6rem}
  .wedding-date{font-size:.6rem;letter-spacing:.06em}
  .date-center{padding-inline:.45rem}
  .wedding-date .date-center strong{font-size:2.9rem}
  .location address{font-size:1.05rem}
  .location address strong{font-size:1.5rem}
  .button{padding-inline:1rem;letter-spacing:.07em}
}

@media (max-height:34rem) and (orientation:landscape){
  .js .invitation-cover{grid-template-columns:minmax(10rem,22rem) minmax(14rem,27rem);grid-template-rows:auto;place-content:center;gap:1.5rem;padding-block:.75rem}
  .cover-copy{justify-self:end}
  .envelope-button{width:min(48vw,27rem);min-height:0;padding-bottom:2.25rem}
  .envelope-button>.button-label{bottom:0}
  .site-header{position:relative}
  .hero{min-height:34rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}