/* ==========================================================
   TABLET
   <= 1024px
========================================================== */

@media (max-width:1024px){

    .hero-content{
        width:90%;
    }

    .hero-layer-mountains img{
        width:135%;
        max-width:none;
        left:50%;
        bottom:-90px;
        transform:translateX(-50%);
    }

    .hero-layer-lake img{
        width:120%;
        max-width:none;
        left:50%;
        bottom:-30px;
        transform:translateX(-50%);
    }

    .hero-layer-castle{

        background-size:100% auto;
        background-position:center bottom;

    }

    .hero-layer-flowers-left img{
        width:28%;
        max-width:none;
    }

    .hero-layer-flowers-right img{
        width:28%;
        max-width:none;
    }

}


/* ==========================================================
   MOBILE
   <= 768px
========================================================== */

@media (max-width:768px){

    .hero-content{
        width:92%;
    }

    .hero-content h1{
    font-size: clamp(5.2rem, 23vw, 7.8rem);
    }

    .hero-content h2{
        letter-spacing:4px;
    }

    .hero-layer-mountains img{
        width:190%;
        max-width:none;
        left:50%;
        bottom:-110px;
        transform:translateX(-50%);
    }

    .hero-layer-lake img{
        width:180%;
        max-width:none;
        left:50%;
        bottom:-60px;
        transform:translateX(-50%);
    }

    .hero-layer-castle{

        background-size:110% auto;
        background-position:center bottom;

    }

    .hero-layer-flowers-left img{
        width:40%;
        max-width:none;
    }

    .hero-layer-flowers-right img{
        width:40%;
        max-width:none;
    }

    #openInvitation{
        width:80%;
        max-width:420px;
    }

    .chapter{

        padding:80px 28px;

        min-height:auto;

    }

    .chapter-layout{

        display:flex;

        flex-direction:column;

        gap:56px;

        align-items:center;

    }

    .chapter-copy{

        width:100%;
        max-width:none;
        order:1;

    }

    .chapter-photo{

        width:100%;
        max-width:360px;
        order:2;

    }

    .chapter-photo img{

        width:100%;
        border-radius:24px;

    }

    .chapter-title{

        font-size:3.6rem;

        line-height:.95;

    }

    .chapter-number{

        font-size:.95rem;

        letter-spacing:.45rem;

    }

    .chapter-description{

        font-size:1.35rem;

        line-height:1.8;

        max-width:100%;

    }

.photo-back{

    transform:

        rotate(2deg)
        translate(10px,-10px);

}

.chapter-final{

    width:100%;

    padding-bottom:40px;

}

.chapter-quote{

    font-size:1.35rem;

    line-height:1.8;

}

.chapter-divider{

    margin:50px auto;

    width:100px;

}

.chapter-ending{

    font-size:1.2rem;

}

/*==================================================
EVENT
==================================================*/

#event{

    padding:100px 24px;

}

.event-intro{

    width:100%;

    max-width:700px;

    margin:0 auto 60px;

    text-align:center;

}

/*==================================================
EVENT LAYOUT
==================================================*/

#event{

    display:block;

    padding:100px 24px;

}

.event-grid{

    display:flex !important;

    flex-direction:column !important;

    gap:22px;

}

.event-card{

    width:100%;

    padding:34px 26px;

    min-height:auto;

}

.event-card.location{

    align-items:center;

    text-align:center;

}

.event-number{

    font-size:4rem;

}

.event-time{

    font-size:2.8rem;

}

.location h3{

    font-size:1.8rem;

}

.location p{

    margin-bottom:32px;

}

}

/*==================================================
DRESS CODE
==================================================*/

#dresscode{

    padding:100px 24px;

}

#dresscode .section-header{

    max-width:100%;

    margin:0 auto 50px;

}

.dress-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:24px;

    max-width:480px;

}

.dress-card{

    padding:42px 28px;

}

.dress-icon{

    height:110px;

    margin-bottom:20px;

}

.dress-icon img{

    width:105px;

}

.dress-title{

    font-size:.85rem;

    letter-spacing:6px;

}

.dress-card p{

    font-size:1.2rem;

    line-height:1.6;

}

.dress-footer{

    margin-top:60px;

}

/*==================================================
RSVP
==================================================*/

#rsvp{

    padding:100px 24px;

}

#rsvp .rsvp-card{

    padding:2rem 1.5rem;

    border-radius:24px;

}

#rsvp .attendance-options{

    grid-template-columns:1fr;

    gap:18px;

}

#rsvp .choice-content{

    min-height:130px;

    padding:1.5rem;

}

#rsvp .choice-content strong{

    font-size:1.2rem;

}

#rsvp .choice-content small{

    font-size:.95rem;

}

#rsvp .rsvp-submit{

    padding:1rem;

}

/*==================================================
FOOTER
==================================================*/

#footer{

    padding:90px 24px 100px;

}

#footer .footer-title{

    font-size:clamp(2.2rem,10vw,3rem);

    margin:24px 0 28px;

}

#footer .footer-copy{

    font-size:1.2rem;

    line-height:1.8;

    margin-bottom:48px;

}

#footer .footer-event{

    flex-direction:column;

    gap:.6rem;

    letter-spacing:.12em;

}

#footer .footer-dot{

    display:none;

}

#footer .footer-brand{

    width:100%;

    max-width:320px;

    padding:1rem;

}

#footer .footer-quote{

    font-size:1.15rem;

    line-height:1.7;

}

/*==================================================
STORY NAVIGATION
==================================================*/

.story-progress{

    right:16px;

    gap:14px;

}

.story-progress::before{

    top:-16px;

    bottom:-16px;

}

.story-nav-item{

    width:46px;

    height:46px;

}

.story-nav-item img{

    width:20px;

    height:20px;

}

.story-menu{

    right:60px;

    width:220px;

    padding:14px;

}

.story-menu button{

    gap:14px;

    padding:12px;

}

.story-menu span{

    width:24px;

}


/* ==========================================================
   SMALL MOBILE
   <= 480px
========================================================== */

@media (max-width:480px){

    .hero-content{
        width:94%;
    }

    .hero-content h1{
    font-size: clamp(5.2rem, 23vw, 7.8rem);
    }

    .hero-content h2{
        font-size:1rem;
        letter-spacing:3px;
    }

    .hero-layer-mountains img{
        width:240%;
        max-width:none;
        left:50%;
        bottom:-150px;
        transform:translateX(-50%);
    }

    .hero-layer-lake img{
        width:220%;
        max-width:none;
        left:50%;
        bottom:-80px;
        transform:translateX(-50%);
    }

    .hero-layer-castle{

        background-size:130% auto;
        background-position:center bottom;

    }

    .hero-layer-flowers-left img{
        width:46%;
        max-width:none;
    }

    .hero-layer-flowers-right img{
        width:46%;
        max-width:none;
    }

    #openInvitation{
        width:85%;
    }

.photo-frame{

    transform:none;

}

.photo-back{

    display:none;

}

}

/*==================================================
SMALL MOBILE NAVIGATION
==================================================*/

.story-progress{

    right:12px;

    gap:12px;

}

.story-nav-item{

    width:42px;

    height:42px;

}

.story-nav-item img{

    width:18px;

    height:18px;

}

.story-menu{

    right:54px;

    width:200px;

}

/* ==========================================================
   IPHONE PRO / PRO MAX
   <= 430px
========================================================== */

@media (max-width:430px){

    .chapter{

        padding:90px 24px;

    }

    .chapter-title{

        font-size:3.3rem;

        line-height:1;

    }

    .chapter-description{

        font-size:1.25rem;

    }

    .event-card{

        padding:32px 24px;

    }

    .dress-card{

        padding:36px 24px;

    }

    #rsvp .rsvp-card{

        padding:1.75rem;

    }

}

/* ==========================================================
   IPHONE SE / MINI
   <= 375px
========================================================== */

@media (max-width:375px){

    .chapter{

        padding:80px 20px;

    }

    .chapter-title{

        font-size:2.9rem;

    }

    .chapter-description{

        font-size:1.15rem;

    }

    .event-number{

        font-size:3.4rem;

    }

    .event-time{

        font-size:2.2rem;

    }

    .dress-card{

        padding:32px 20px;

    }

    .dress-icon img{

        width:90px;

    }

    #rsvp .rsvp-card{

        padding:1.5rem 1.25rem;

    }

    #rsvp input,
    #rsvp select,
    #rsvp textarea{

        padding:.9rem 1rem;

    }

    #footer{

        padding:80px 20px 90px;

    }

}