* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Fira Sans', sans-serif;
    color: #393838;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }

/* Nav */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: rgba(235, 234, 229, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.nav__list {
    display: flex;
    justify-content: flex-end;
    gap: 3rem;
    list-style: none;
    padding: 1rem;
    max-width: 1400px;
    margin: 0 auto;
}

.nav__list a {
    font-size: 16px;
    color: #393838;
    transition: opacity .2s;
}

.nav__list a:hover { opacity: .6; }

.nav__toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.75rem 1rem;
    margin-left: auto;
}

.nav__toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #393838;
    margin: 5px 0;
    transition: all .3s;
}

.nav--open .nav__toggle span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.nav--open .nav__toggle span:nth-child(2) {
    opacity: 0;
}

.nav--open .nav__toggle span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Header */
.header {
    background: #ebeae5;
    padding-top: 64px;
}

.header__img-wrap {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 960 / 1280;
    max-height: 80vh;
    margin: 0 auto;
    overflow: hidden;
}

.header__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 50%;
    display: block;
}

@media (min-width: 1600px) {
    .header__bg-img {
        object-position: center calc(50% - 50px);
    }
}

@media (min-width: 2000px) {
    .header__bg-img {
        object-position: center calc(50% - 100px);
    }
}

.header__hero-split {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 40px;
    gap: 3rem;
}

.header__hero-heading {
    width: 60%;
    max-width: 480px;
}

.header__hero-split {
    position: relative;
}

@media (min-width: 769px) {
    .header__hero-split::before {
        content: '';
        position: absolute;
        top: 10%;
        bottom: 10%;
        left: 60%;
        width: 1px;
        background: rgba(0,0,0,0.1);
        transform: translateX(-50%);
    }
}

.header__title {
    font-family: 'Pacifico', cursive;
    font-size: 96px;
    font-weight: 400;
    color: #2d2a27;
    line-height: 1.1;
}

.header__hero-text {
    width: 30%;
}

.header__text {
    font-size: 1.2rem;
    color: #393838;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.header__link {
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    color: #2d2a27;
    border-bottom: 1px solid #2d2a27;
    padding-bottom: 2px;
}

.header__link:hover { opacity: .6; }

.header__invitation {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    display: flex;
    -moz-box-align: center;
    align-items: center;
    -moz-box-pack: justify;
    justify-content: space-between;
    column-gap: 122px;
    padding: 20px 40px;
}

.header__invitation-title {
    font-family: 'Pacifico', cursive;
    font-size: 32px;
    font-weight: 400;
    color: #2d2a27;
    line-height: 1.4;
    text-align: left;
}

.header__invitation-sign {
    font-size: 18px;
    color: #393838;
    text-align: right;
    white-space: nowrap;
    width: 286px;
}

/* Sections base */
.section { text-align: center; }

.section__inner {
    max-width: 1400px;
    margin: 0 auto;

}

.section__title {
    font-family: 'Pacifico', cursive;
    font-size: 42px;
    font-weight: 400;
    color: #393838;
    line-height: 1.2;
    margin-bottom: 2.5rem;
}

/* Story */
.story {
    background: #f9f9f9;
    padding: 20px 40px;
}

.story__inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
    padding: 20px 40px;
}

.story__text-wrap {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.story__title {
    font-family: 'Pacifico', cursive;
    font-size: 54px;
    font-weight: 400;
    color: #393838;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.story__text {
    font-size: 18px;
    color: #393838;
    line-height: 1.8;
    margin-bottom: 3rem;
}

.story__cta-title {
    font-family: 'Pacifico', cursive;
    font-size: 32px;
    font-weight: 400;
    color: #393838;
    line-height: 1.3;
    margin-bottom: 1rem;
}

.story__cta-text {
    font-size: 18px;
    color: #393838;
    line-height: 1.8;
    margin-bottom: 2rem;
}

.story__btn {
    display: inline-block;
    font-size: 14px;
    color: #fff;
    background: #2d2a27;
    padding: 0.9rem 2.5rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    transition: background .3s;
}

.story__btn:hover { background: #555; }

.story__images {
    flex-shrink: 0;
    position: relative;
    width: 590px;
    height: 513px;
}

.story__figure {
    position: absolute;
    width: 295px;
    height: 457px;
}

.story__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story__figure--1 {
    bottom: 0;
    left: 25px;
    z-index: 2;
}

.story__figure--2 {
    top: 0;
    right: 0;
    z-index: 1;
}

/* Details */
.details {
    background: #ebeae5;
    padding: 80px 0px;
}

.details__grid {
    max-width: 1400px;
    width: 95%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 0;
}

.details__card {
    flex: 1;
    max-width: 380px;
    text-align: left;
    border-right: 1px solid rgba(0,0,0,0.08);
}

.details__card:last-child {
    border-right: none;
}

.details__title {
    font-family: 'Pacifico', cursive;
    font-size: 24px;
    font-weight: 400;
    color: #2d2a27;
    margin-bottom: 1rem;
    text-align: center;
}

.details__text {
    font-size: 18px;
    color: #575050;
    line-height: 1.6;
}

.details__article {
    padding: 0px 40px;
}

/* Agenda */
.agenda {
    background: linear-gradient(rgba(249, 249, 249, 0), rgba(249, 249, 249, 0)),
                url('../images/f07e8e386cab0f9d4a28600992831007.png') center/cover no-repeat;
    
    padding: 80px 20px;
}

.agenda .section__inner { max-width: 800px; }

.agenda__items {
    max-width: 500px;
    margin: 0 auto;
    text-align: left;
}

.agenda__item {
    padding: 0;
    margin-bottom: 1.5rem;
}

.agenda__item:not(:last-child) {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #ddd;
}

.agenda__time {
    font-family: 'Fira Sans', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: #2d2a27;
    display: block;
    margin-bottom: 0.25rem;
}

.agenda__event {
    font-size: 16px;
    color: #2d2a27;
    margin-bottom: 0.25rem;
}

.agenda__desc {
    font-size: 16px;
    color: #575050;
    line-height: 1.6;
}

/* Photo banner */
.photo-banner {
    background: linear-gradient(rgba(235, 234, 229, 0), rgba(235, 234, 229, 0)),
                url('https://hosting.renderforestsites.com/5699226/1176558/media/93268f6b2f6298905b37d2c5e68e1361.jpg') center/cover no-repeat;
    background-attachment: fixed;
    height: 600px;
}

/* Gallery */
.gallery {
    padding: 0;
}

.gallery__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    gap: 0;
}

.gallery__item {
    aspect-ratio: 1;
    overflow: hidden;
}

.gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Couple */
.couple {
    background: linear-gradient(rgba(235, 234, 229, 0), rgba(235, 234, 229, 0)),
                url('https://hosting.renderforestsites.com/5699226/1176558/media/59897320077fd71a488183b2a89ac7ba.png') center/cover no-repeat;
    padding: 80px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.couple .section__inner { 
    text-align: center; 
    border: 1px solid rgba(57, 56, 56, 0.3); 
    padding: 80px;
}

.lazy-img {
    display: block;
    margin: 0 auto;
}

.couple__names {
    font-family: 'Pacifico', cursive;
    font-size: 32px;
    font-weight: 400;
    color: #2d2a27;
    margin-bottom: 0.5rem;
}

.couple__date {
    font-size: 18px;
    color: #393838;
    margin-bottom: 0.5rem;
}

.couple__venue {
    display: inline;
    font-size: 18px;
    color: #393838;
    text-decoration: underline;
    text-decoration-color: #393838;
    text-underline-offset: 3px;
    line-height: 1.8;
}

.couple__venue:hover { opacity: .6; }

.couple__btn {
    display: inline-block;
    font-size: 14px;
    color: #fff;
    background: #2d2a27;
    padding: 0.85rem 2.5rem;
    margin-top: 40px;
    text-transform: uppercase;
    letter-spacing: .05em;
    transition: background .3s;
}

.couple__btn:hover { background: #555; }

/* RSVP */
.rsvp {
    background: linear-gradient(rgba(235, 234, 229, 0), rgba(235, 234, 229, 0)),
                url('https://hosting.renderforestsites.com/5699226/1176558/media/4090fe7780690fc24328a2f11974a057.jpg') center/cover no-repeat;
    background-attachment: fixed;
    padding: 80px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rsvp .section__title { color: #2d2a27; }

/* Footer */
.footer {
    background: #ebeae5;
    padding: 50px 2rem;
    text-align: center;
}

.footer__nav {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.footer__nav a {
    font-size: 16px;
    color: #393838;
}

.footer__nav a:hover { opacity: .6; }

.footer__date {
    font-size: 14px;
    color: #393838;
}

/* Responsive — Tablet landscape */
@media (max-width: 1024px) {
    .header__title { font-size: 72px; }
    .header__hero-split { gap: 2rem; }

    .story__title { font-size: 42px; }

    .section__title { font-size: 36px; }

    .couple { padding: 250px 0; }

    .photo-banner { height: 500px; }

    .header__invitation {
        flex-direction: column;
        align-items: flex-start;
        -moz-box-pack: start;
        justify-content: flex-start;
        row-gap: 20px;
    }

    .header__invitation-sign {width: 100%;}
}

/* Responsive — Tablet portrait */
@media (max-width: 900px) {
    .header__hero-split {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .header__hero-heading,
    .header__hero-text {
        width: 100%;
        max-width: 100%;
    }

    .header__hero-split::before { display: none; }

    .header__hero-split { gap: 1rem; }

    .story__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .story__images {
        width: 100%;
        height: auto;
        display: flex;
        gap: 1rem;
    }

    .story__figure {
        position: static;
        width: 50%;
        height: 350px;
    }

    .details__grid {
        flex-direction: column;
        align-items: center;
    }

    .details__card {
        max-width: 450px;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(0,0,0,0.08);
        padding-bottom: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .details__card:last-child {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .couple { padding: 200px 0; min-height: 400px; }

    .photo-banner { height: 400px; }

    /* Disable fixed bg on mobile for performance */
    .agenda, .photo-banner, .couple, .rsvp { background-attachment: scroll; }

    .header__img-wrap { max-height: 60vh; }
}

/* Responsive — Mobile */
@media (max-width: 768px) {
    .nav__toggle { display: block; }

    .nav__list {
        display: none;
        flex-direction: column;
        gap: 0;
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        background: rgba(235, 234, 229, 0.98);
        border-bottom: 1px solid rgba(0,0,0,0.06);
    }

    .nav__list li { border-top: 1px solid rgba(0,0,0,0.04); }

    .nav__list a {
        display: block;
        padding: 0.75rem 1rem;
    }

    .nav--open .nav__list { display: flex; }

    .header__title { font-size: 48px; }
    .header__hero-split { gap: 1.5rem; padding: 2rem 1.5rem 2rem; }
    .header__invitation-title { font-size: 24px; }

    .story__title { font-size: 32px; }
    .story__cta-title { font-size: 22px; }
    .story__figure { height: 300px; }

    .section__title { font-size: 28px; }

    .gallery__grid { grid-template-columns: repeat(2, 1fr); }

    .couple__names { font-size: 28px; }
    .couple { padding: 150px 0; min-height: 350px; }

    .footer__nav { gap: 1.5rem; flex-direction: column; }

    .header__img-wrap { max-height: 50vh; }
}

/* Responsive — Small mobile */
@media (max-width: 480px) {
    .header__title { font-size: 36px; }
    .header__text { font-size: 16px; }
    .header__hero-split { gap: 1rem; padding: 1.5rem 1rem 1.5rem; }
    .header__invitation-title { font-size: 20px; }
    .header__invitation { padding: 1.5rem 1rem 2rem; }

    .story__title { font-size: 28px; }
    .story__text { font-size: 16px; }
    .story__cta-title { font-size: 20px; }
    .story__cta-text { font-size: 16px; }
    .story__figure { height: 220px; }
    .story { padding: 60px 1rem; }

    .section__title { font-size: 24px; }

    .details__text { font-size: 16px; }
    .details { padding: 60px 1rem; }

    .agenda { padding: 60px 1rem; }

    .couple__names { font-size: 24px; }
    .couple__date { font-size: 16px; }
    .couple__venue { font-size: 16px; }
    .couple { padding: 120px 0; min-height: 300px; }

    .rsvp { padding: 60px 0; }

    .footer { padding: 40px 1rem; }
}

/* Modal */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0,0,0,0.5);
    align-items: center;
    justify-content: center;
    padding: 2rem;
    overflow-y: auto;
}

.modal-overlay--open {
    display: flex;
}

.modal {
    background: #fff;
    max-width: 600px;
    width: 100%;
    padding: 2.5rem 2rem;
    border-radius: 4px;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

.modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #575050;
    line-height: 1;
}

.modal__title {
    font-family: 'Pacifico', cursive;
    font-size: 28px;
    color: #2d2a27;
    margin-bottom: 0.5rem;
}

.modal__subtitle {
    font-size: 16px;
    color: #575050;
    margin-bottom: 2rem;
}

.guest-card {
    border: 1px solid #e0ddd8;
    padding: 1.5rem;
    margin-bottom: 1rem;
    border-radius: 4px;
}

.guest-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.guest-card__title {
    font-family: 'Pacifico', cursive;
    font-size: 18px;
    color: #2d2a27;
}

.guest-card__remove {
    background: none;
    border: none;
    font-size: 22px;
    color: #bbb8b3;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    transition: color .2s;
}

.guest-card__remove:hover {
    color: #c0392b;
}

.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    font-size: 14px;
    color: #575050;
    margin-bottom: 0.4rem;
}

.form-input {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid #d0cdc8;
    border-radius: 4px;
    font-size: 15px;
    font-family: 'Fira Sans', sans-serif;
    color: #393838;
    background: #fafaf8;
}

.form-input:focus {
    outline: none;
    border-color: #2d2a27;
}

.radio-group {
    display: flex;
    gap: 1.5rem;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-size: 15px;
    color: #393838;
}

.radio-label input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: #2d2a27;
}

.modal__add-guest {
    display: block;
    width: 100%;
    padding: 0.7rem;
    background: none;
    border: 1px dashed #bbb8b3;
    border-radius: 4px;
    font-size: 15px;
    font-family: 'Fira Sans', sans-serif;
    color: #575050;
    cursor: pointer;
    margin-bottom: 1.5rem;
    transition: border-color .2s, color .2s;
}

.modal__add-guest:hover {
    border-color: #2d2a27;
    color: #2d2a27;
}

.modal__submit {
    display: block;
    width: 100%;
    padding: 0.85rem;
    background: #2d2a27;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-family: 'Fira Sans', sans-serif;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .1em;
    transition: background .3s;
}

.modal__submit:hover {
    background: #555;
}

.modal__submit:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.modal__success {
    display: none;
    text-align: center;
    padding: 3rem 0;
    font-size: 20px;
    color: #2d2a27;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
    .agenda, .photo-banner, .couple, .rsvp { background-attachment: scroll; }
}