:root{
    --ink:#263129;
    --cream:#f6f1e9;
    --paper:#fffdfa;
    --sage:#74806a;
    --gold:#b8955f;
    --rose:#cda99b;
    --serif:'Cormorant Garamond',serif;
    --sans:'Montserrat',sans-serif
}

*{
    box-sizing:border-box
}

html{
    scroll-behavior:smooth
}

body{
    margin:0;
    color:var(--ink);
    background:var(--paper);
    font-family:var(--sans);
    font-weight:300;
    overflow-x:hidden
}

a{
    color:inherit
}

h1,h2,h3,p{
    margin-top:0
}

h2{
    font:600 clamp(2.5rem,6vw,5.3rem)/.95 var(--serif);
    letter-spacing:-.03em;margin-bottom:1.2rem
}

.section{
    padding:120px max(6vw,24px)
}

.eyebrow{
    text-transform:uppercase;
    letter-spacing:.32em;
    font-size:.68rem;
    font-weight:600;
    color:#fff
}

.eyebrow.dark{
    color:var(--gold)
}

.lead{
    max-width:640px;
    margin:0 auto;
    font:400 1.35rem/1.6 var(--serif)
}

.page-loader{
    position:fixed;
    inset:0;
    z-index:9999;
    background:var(--cream);
    display:grid;
    place-items:center;
    transition:opacity .6s,visibility .6s
}

.page-loader.hidden{
    opacity:0;
    visibility:hidden
}

.loader-monogram{
    font:600 4rem var(--serif);
    animation:pulse 1.2s infinite
}

.loader-monogram span{
    color:var(--gold);
    font-style:italic
}

@keyframes pulse{
    50%{
        opacity:.35;
        transform:scale(.96)
    }
}

.site-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:50;
    height:84px;
    padding:0 5vw;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#fff;
    transition:.35s
}

.site-header.scrolled{
    height:68px;
    background:rgba(255,253,250,.94);
    backdrop-filter:blur(12px);
    color:var(--ink);
    box-shadow:0 1px 0 rgba(38,49,41,.1)
}

.brand{
    text-decoration:none;
    font:600 1.9rem var(--serif)
}

.brand i,.footer-monogram i{
    color:var(--gold);
    font-weight:400
}

.nav{
    display:flex;
    gap:2.1rem
}

.nav a{
    text-decoration:none;
    text-transform:uppercase;
    letter-spacing:.14em;
    font-size:.65rem;
    font-weight:500;
    position:relative
}

.nav a:after{
    content:'';
    position:absolute;
    left:0;
    right:100%;
    bottom:-8px;
    height:1px;
    background:currentColor;
    transition:.25s
}

.nav a:hover:after{
    right:0
}

.menu-toggle{
    display:none;
    background:none;
    border:0;
    width:42px;
    height:42px
}

.menu-toggle span{
    display:block;
    width:25px;
    height:1px;
    background:currentColor;
    margin:7px auto;
    transition:.25s
}

.hero{
    min-height:100svh;
    position:relative;
    display:grid;
    place-items:center;
    color:#fff;
    overflow:hidden
}

/*
.hero-photo{
    position:absolute;
    inset:0;
    background:url('../assets/hero.jpg') center/cover no-repeat,var(--sage);
    transform:scale(1.03);
    animation:heroZoom 14s ease-out forwards
}*/

.hero-photo{
    position:absolute;
    inset:0;
    background:url('../assets/hero.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 40% 20%;
    transform:scale(1.01);
    animation:heroZoom 14s ease-out forwards
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(20,27,23,.52),rgba(20,27,23,.16) 55%,rgba(20,27,23,.4)),linear-gradient(0deg,rgba(20,27,23,.35),transparent 50%)
}

@keyframes heroZoom{
    to{transform:scale(1.1)}
}

.hero-content{
    position:relative;
    text-align:center;
    padding:120px 24px
}

.hero h1{
    font:500 clamp(4.5rem,13vw,11rem)/.72 var(--serif);
    letter-spacing:-.06em;
    margin:1.7rem 0 2rem;
    text-shadow:0 2px 24px rgba(0,0,0,.18)
}

.hero h1 em{
    font-weight:400;
    color:#e0c79c
}

.hero-date{
    text-transform:uppercase;
    letter-spacing:.3em;
    font-size:.72rem;
    font-weight:500
}

.scroll-link{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    gap:13px;
    margin-top:42px;
    text-decoration:none;
    font-size:.65rem;
    text-transform:uppercase;
    letter-spacing:.18em
}

.scroll-link span{
    height:48px;
    width:1px;
    background:#fff;
    animation:scrollLine 1.8s infinite
}

@keyframes scrollLine{
    0%{
        transform:scaleY(0);
        transform-origin:top
    }
    45%{
        transform:scaleY(1);
        transform-origin:top
    }
    55%{
        transform:scaleY(1);
        transform-origin:bottom
    }
    100%{
        transform:scaleY(0);
        transform-origin:bottom
    }
}

.hero-side{
    position:absolute;
    right:30px;
    bottom:50%;
    transform:translate(50%,50%) rotate(90deg);
    font-size:.62rem;text-transform:uppercase;
    letter-spacing:.2em
}

.save-date{
    text-align:center;
    background:var(--cream)
}

.ornament{
    font-size:1.6rem;
    color:var(--gold);
    margin-bottom:1.4rem
}

.save-date h2{
    font-size:clamp(3.2rem,8vw,7rem)
}

.countdown{
    max-width:760px;
    margin:55px auto 0;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid rgba(38,49,41,.18);
    padding-top:28px
}

.countdown div{
    border-right:1px solid rgba(38,49,41,.18)
}

.countdown div:last-child{
    border:0
}

.countdown strong{display:block;font:500 clamp(2rem,5vw,4.5rem) var(--serif)}.countdown span{text-transform:uppercase;letter-spacing:.18em;font-size:.58rem}
.section-heading{max-width:820px;margin:0 auto 65px;text-align:center}.couple-grid{max-width:1180px;margin:auto;display:grid;grid-template-columns:1fr 150px 1fr;align-items:center;gap:28px}

.portrait-card{
    position:relative
}

.portrait{
    height:600px;
    /*background-position:center;*/
    background-position: 40% 20%;
    background-size:cover
}

.bride-photo{
    background-image:url('../assets/bride.jpeg');
    background-color:#d8cabc
}

.groom-photo{
    background-image:url('../assets/groom.jpeg');
    background-color:#bcc4b8
}

.portrait-copy{
    width:83%;
    margin:-86px auto 0;
    position:relative;
    background:var(--paper);
    padding:34px;
    text-align:center;
    box-shadow:0 18px 55px rgba(38,49,41,.08)
}

.portrait-copy span{
    text-transform:uppercase;
    letter-spacing:.2em;
    font-size:.58rem;
    color:var(--gold)
}

.portrait-copy h3{
    font:600 3.2rem var(--serif);
    margin:.35rem 0
}

.portrait-copy p{
    font:400 1.08rem/1.55 var(--serif);
    margin:0
}

.couple-mark{
    text-align:center;
    font:500 4rem var(--serif)
}

.couple-mark span{
    display:block;
    color:var(--gold);
    font-style:italic
}

.quote-band{
    min-height:620px;
    background:url('assets/quote.jpg') center/cover fixed,var(--sage);
    position:relative;
    color:#fff;
    display:grid;
    place-items:center;
    text-align:center;
    padding:80px 24px
}

.quote-band:before{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(27,36,30,.56)
}

.quote-band>div{
    position:relative;
    max-width:920px
}

.quote-band>div>span{
    font:8rem/.6 var(--serif);
    color:#d8c294
}

.quote-band blockquote{
    font:400 clamp(2.2rem,5vw,4.2rem)/1.13 var(--serif);
    margin:20px 0
}

.quote-band p{
    text-transform:uppercase;
    letter-spacing:.23em;
    font-size:.62rem
}

.story{
    background:#fff
}

.timeline{
    max-width:950px;
    margin:auto;
    position:relative
}

.timeline:before{
    content:'';
    position:absolute;
    left:140px;
    top:0;
    bottom:0;
    width:1px;
    background:rgba(38,49,41,.15)
}

.timeline-item{display:grid;grid-template-columns:140px 1fr;gap:54px;padding:0 0 65px}.year{font:600 2rem var(--serif);color:var(--gold);position:relative}.year:after{content:'';position:absolute;right:-5px;top:12px;width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 8px #fff}.timeline-item h3{font:600 2rem var(--serif);margin-bottom:10px}.timeline-item p{line-height:1.8;max-width:650px}.events{background:var(--cream)}

.event-grid{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px
}

.event-card{
    position:relative;
    background:var(--paper);
    padding:55px 36px;
    text-align:center;
    min-height:440px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:1px solid transparent
}

.event-card.featured{
    background:var(--ink);
    color:#fff;
    transform:translateY(-20px)
}

.event-number{
    position:absolute;
    top:22px;
    left:24px;
    font:500 1.1rem var(--serif);
    color:var(--gold)
}

.event-icon{
    font-size:2.5rem;
    color:var(--gold)
}

.event-time{
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:.66rem;
    margin:22px 0 8px
}

.event-card h3{
    font:600 2.2rem var(--serif);
    margin-bottom:18px
}

.event-card p{
    line-height:1.7
}

.event-card p span{
    font-size:.82rem;
    opacity:.7
}

.event-card a{
    margin-top:18px;
    text-transform:uppercase;
    letter-spacing:.15em;
    font-size:.6rem;
    text-underline-offset:6px
}

.dress-code{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:7vw;
    align-items:center
}

.dress-photo{
    min-height:650px;
    background:url('../assets/dresscode.png') center/cover,var(--rose);
    background-position: 40% 20%;
}

.dress-copy{
    max-width:570px
}

.dress-copy p{
    line-height:1.8
}

.palette{
    display:flex;
    gap:13px;
    margin-top:35px
}

.palette span{
    width:52px;
    height:52px;
    border-radius:50%;
    border:6px solid #fff;
    box-shadow:0 0 0 1px rgba(0,0,0,.1)
}

.palette span:nth-child(1){
    background:#b7694d
}

.palette span:nth-child(2){
    background:#d7c3a1
}

.palette span:nth-child(3){
    background:#98a68d
}

.palette span:nth-child(4){
    background:#d9b5ac
}

.palette span:nth-child(5){
    background:#6a5142
}

.gallery{
    background:var(--cream)
}

.gallery-grid{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    grid-auto-rows:250px;
    gap:16px
}

.gallery-item{
    border:0;
    cursor:zoom-in;
    background-position:center;
    background-size:cover;
    transition:.35s
}

.gallery-item:hover{
    transform:scale(.985);
    filter:brightness(.85)
}

.gallery-item.tall{
    grid-row:span 2
}

.gallery-item.wide{
    grid-column:span 2
}

.g1{
    background-image:url('../assets/gallery-1.jpg');
    background-color:#bfc5bb;
    background-position: 40% 20%;
}

.g2{
    background-image:url('../assets/gallery-2.jpeg');
    background-color:#b99f91;
    background-position: 40% 20%;
}

.g3{
    background-image:url('../assets/gallery-3.jpeg');
    background-color:#d8cbbd
}

.g4{
    background-image:url('../assets/gallery-4.jpeg');
    background-color:#859280
}

.g5{
    background-image:url('../assets/gallery-5.png');
    background-color:#c0a18f;
    background-position: 40% 20%;
}

.g6{
    background-image:url('../assets/gallery-6.png');
    background-color:#c0a18f;
    background-position: 40% 20%;
}

.photo-note{
    text-align:center;
    margin:30px 0 0;
    font-size:.78rem;
    opacity:.65
}

.photo-note code{
    font-size:.75rem
}

.rsvp{
    background:var(--ink);
    color:#fff;
    padding:120px max(6vw,24px)
}

.rsvp-inner{
    max-width:1180px;
    margin:auto;
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:9vw;
    align-items:start
}

.rsvp-copy h2{
    font-size:clamp(3.8rem,7vw,6.5rem)
}

.rsvp-copy>p{
    line-height:1.8
}

.contact-mini{
    margin-top:50px;
    padding-top:25px;
    border-top:1px solid rgba(255,255,255,.18)
}

.contact-mini span{
    display:block;
    text-transform:uppercase;
    letter-spacing:.2em;
    font-size:.55rem;
    margin-bottom:8px
}

.contact-mini a{
    font:500 1.6rem var(--serif)
}

.rsvp-form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px 20px
}

.rsvp-form label{
    font-size:.62rem;
    text-transform:uppercase;
    letter-spacing:.14em
}

.rsvp-form label:nth-child(5){
    grid-column:1/-1
}

.rsvp-form input,.rsvp-form select,.rsvp-form textarea{
    width:100%;
    margin-top:10px;
    padding:14px 0;
    background:transparent;
    color:#fff;
    border:0;
    border-bottom:1px solid rgba(255,255,255,.35);
    font:300 .9rem var(--sans);
    outline:none
}

.rsvp-form select option{
    color:#222
}

.rsvp-form textarea{
    resize:vertical
}

.primary-btn,.outline-btn{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    min-height:52px;
    padding:0 28px;
    text-transform:uppercase;
    letter-spacing:.17em;
    font:600 .62rem var(--sans);
    cursor:pointer
}

.primary-btn{
    grid-column:1/-1;
    border:0;
    background:var(--gold);
    color:#fff
}

.primary-btn:disabled{
    opacity:.55
}

.form-status{
    grid-column:1/-1;
    margin:0;
    font-size:.78rem;
    line-height:1.5
}

.form-status.success{
    color:#bfe0be
}

.form-status.error{
    color:#ffb3ad
}

.form-status.info{
    color:#efd8ae
}

.gift{
    background:url('assets/gift.jpg') center/cover,var(--cream);
    position:relative
}

.gift:before{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(246,241,233,.76)
}

.gift-card{
    position:relative;
    max-width:700px;
    margin:auto;
    text-align:center;
    background:rgba(255,253,250,.9);
    padding:45px 55px;
    backdrop-filter:blur(8px)
}

.gift-card .eyebrow {
    position: relative;
    z-index: 2;

    margin: 0 0 15px;
}

.gift-card p{
    line-height:1.8
}

.gift-illustration {
    width: 230px;
    height: 190px;

    margin: 25px auto 30px;

    overflow: hidden;
}

.gift-illustration img {
     display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center 43%;

    transform: scale(1.12);
    
}

.gift-text {
   max-width: 700px;
    margin: 0 auto;

    text-align: center;
    line-height: 1.8;
}

.outline-btn{
    margin-top:20px;
    border:1px solid var(--ink);
    text-decoration:none
}

.lightbox{
    position:fixed;
    inset:0;
    z-index:100;
    background:rgba(10,14,11,.94);
    display:grid;
    place-items:center;
    opacity:0;
    visibility:hidden;
    transition:.3s
}

.lightbox.open{
    opacity:1;
    visibility:visible
}

.lightbox button{
    position:absolute;
    top:20px;
    right:30px;
    background:none;
    border:0;
    color:#fff;
    font-size:3rem;
    cursor:pointer
}

.lightbox-image{
    width:min(86vw,1000px);
    height:min(80vh,760px);
    background:center/contain no-repeat
}

footer{
    background:#172019;
    color:#fff;
    text-align:center;
    padding:70px 24px
}

.footer-monogram{
    font:600 3rem var(--serif)
}

footer p{
    font:400 1.2rem var(--serif);margin:12px 0 24px
}

footer>a{
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:.58rem
}

.footer-copyright {
    width: 100%;
    margin-top: 45px;
    padding-top: 18px;

    border-top: 1px solid rgba(255, 255, 255, 0.12);

    color: rgba(255, 255, 255, 0.45);
    text-align: center;

    font-size: 10px;
    font-family: sans-serif;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .85s ease,transform .85s ease
}

.reveal.visible{
    opacity:1;
    transform:none
}

@media(max-width:900px){.section{padding:85px 22px}.site-header{height:68px;padding:0 20px}.menu-toggle{display:block;color:inherit}.nav{position:fixed;inset:68px 0 auto;background:rgba(255,253,250,.98);color:var(--ink);padding:40px 24px;display:flex;flex-direction:column;align-items:center;gap:28px;transform:translateY(-130%);transition:.35s}.nav.open{transform:none}.hero-side{display:none}.couple-grid{grid-template-columns:1fr;gap:50px}.couple-mark{display:none}.portrait{height:520px}.event-grid{grid-template-columns:1fr;max-width:560px}.event-card.featured{transform:none}.dress-code{grid-template-columns:1fr}.dress-photo{min-height:500px}.rsvp-inner{grid-template-columns:1fr}.gallery-grid{grid-auto-rows:190px}.quote-band{background-attachment:scroll}}

@media(max-width:600px){h2{font-size:3rem}.hero h1{font-size:4.7rem;line-height:.82}.hero h1 span{display:block}.hero h1 em{display:block;font-size:.55em;margin:.1em}.hero-date{line-height:1.8}.countdown{grid-template-columns:repeat(2,1fr);gap:24px 0}.countdown div:nth-child(2){border:0}.portrait{height:430px}.portrait-copy{width:92%;padding:27px 20px}.timeline:before{left:22px}.timeline-item{grid-template-columns:45px 1fr;gap:24px}.year{writing-mode:vertical-rl;font-size:1.25rem}.year:after{right:auto;left:17px;top:0}.gallery-grid{grid-template-columns:1fr 1fr;grid-auto-rows:170px}.gallery-item.wide{grid-column:span 2}.rsvp-form{grid-template-columns:1fr}.rsvp-form label,.rsvp-form label:nth-child(5),.primary-btn,.form-status{grid-column:1}.gift-card{padding:55px 24px}.palette span{width:43px;height:43px}}