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

html,
body {
    height: 100%;
    overflow: hidden;
    background: #d6ccc4
}

body {
    font-family: 'Cormorant Garamond', serif;
    display: flex;
    align-items: center;
    justify-content: center
}

#shell {
    position: relative;
    overflow: hidden
}

.pages {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-snap-stop: always;
    width: 100%;
    height: 100%
}

.page {
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.nav {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 100
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid #b07848;
    background: transparent;
    cursor: pointer;
    transition: background .3s
}

.dot.active {
    background: #b07848
}

/* PAGE 1 */
.p1 {
    background: #faf3ee
}

.p1-bg {
    position: absolute;
    inset: 0;
    background-color: #faf3ee;
    z-index: 0
}

.p1-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('template.gif');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat
}

.p1-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    text-align: center;
    padding: 0 8% 5%;
    top: 52%
}

.invited-arc {
    width: 88%;
    max-width: 300px;
    height: calc(var(--u) * 7);
    margin: 0 auto calc(var(--u) * 0.8)
}

.names {
    font-family: 'Alex Brush', cursive;
    font-size: calc(var(--u) * 5);
    color: #6b4220;
    line-height: 1.1;
    margin-bottom: calc(var(--u) * 1.2)
}

.divider {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-bottom: calc(var(--u) * 1)
}

.divider-line {
    width: 50px;
    height: 0.5px;
    background: #b07848
}

.divider-diamond {
    width: 6px;
    height: 6px;
    background: #b07848;
    transform: rotate(45deg)
}

.date-line {
    font-family: 'Cinzel', serif;
    font-size: calc(var(--u) * 1.4);
    letter-spacing: .18em;
    color: #5a3c18
}

.location-line {
    font-size: calc(var(--u) * 1.2);
    color: #7a5a30;
    letter-spacing: .08em;
    margin-top: calc(var(--u)*0.5);
    font-style: italic
}

/* PAGES 2–4 */
.p2,
.p3,
.p4 {
    background: #faf3ee
}

.page-inner {
    width: 100%;
    height: 100%;
    padding: calc(var(--u)*1.8) 8%;
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.section-header {
    text-align: center;
    margin-bottom: calc(var(--u)*1.4);
    flex-shrink: 0
}

.section-title {
    font-family: 'Alex Brush', cursive;
    font-size: calc(var(--u)*4);
    color: #6b4220
}

.section-sub {
    font-family: 'Cinzel', serif;
    font-size: calc(var(--u)*1.1);
    letter-spacing: .15em;
    color: #a07848;
    margin-top: 4px;
    font-weight: 600
}

.info-block {
    text-align: center;
    padding-bottom: calc(var(--u)*1.2);
    margin-bottom: calc(var(--u)*1.2);
    border-bottom: .5px solid #e0c9a8;
    flex-shrink: 0
}

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

.info-label {
    font-family: 'Cinzel', serif;
    font-size: calc(var(--u)*0.85);
    letter-spacing: .12em;
    color: #b07848;
    margin-bottom: calc(var(--u)*0.3);
    font-weight: 600
}

.info-title {
    font-size: calc(var(--u)*1.7);
    font-weight: 700;
    color: #3d2a10;
    margin-bottom: calc(var(--u)*0.3)
}

.info-text {
    font-size: calc(var(--u)*1.3);
    color: #7a5a30;
    line-height: 1.5;
    font-style: italic;
    font-weight: 600
}

.map-wrap {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e0c9a8;
    margin-top: calc(var(--u)*0.8);
    flex-shrink: 0
}

.map-wrap iframe {
    display: block;
    width: 100%;
    height: calc(var(--u)*13);
    border: none
}

/* COUNTDOWN */
.countdown-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: calc(var(--u) * 1.4)
}

.countdown-title {
    font-family: 'Alex Brush', cursive;
    font-size: calc(var(--u) * 4);
    color: #6b4220;
    text-align: center
}

.countdown-subtitle {
    font-family: 'Cinzel', serif;
    font-size: calc(var(--u) * 1.1);
    letter-spacing: .15em;
    color: #a07848;
    font-weight: 600;
    text-align: center;
    margin-top: calc(var(--u) * -1.2)
}

.countdown-grid {
    display: flex;
    gap: calc(var(--u) * 1.5);
    align-items: flex-start;
    justify-content: center
}

.countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--u) * 0.4)
}

.countdown-box {
    background: #fff8f2;
    border: 1px solid #e0c9a8;
    border-radius: calc(var(--u) * 0.8);
    width: calc(var(--u) * 8);
    height: calc(var(--u) * 8);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(176, 120, 72, 0.08)
}

.countdown-num {
    font-family: 'Cinzel', serif;
    font-size: calc(var(--u) * 3.8);
    font-weight: 600;
    color: #6b4220;
    line-height: 1
}

.countdown-label {
    font-family: 'Cinzel', serif;
    font-size: calc(var(--u) * 0.85);
    letter-spacing: .15em;
    color: #b07848;
    font-weight: 600;
    text-transform: uppercase
}

.countdown-sep {
    font-family: 'Cinzel', serif;
    font-size: calc(var(--u) * 3);
    color: #d4b896;
    line-height: 1;
    margin-top: calc(var(--u) * 2.5)
}

.countdown-done {
    font-family: 'Alex Brush', cursive;
    font-size: calc(var(--u) * 3);
    color: #9b6a3a;
    text-align: center
}

/* PHOTO CAROUSEL */
.carousel-wrap {
    position: relative;
    flex-shrink: 0
}

.carousel-ring {
    width: calc(var(--u) * 16);
    height: calc(var(--u) * 16);
    border-radius: 50%;
    border: 1.5px solid #e0c9a8;
    overflow: hidden;
    box-shadow: 0 2px 20px rgba(176, 120, 72, 0.15);
    position: relative;
    cursor: pointer;
}

.carousel-ring img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.carousel-ring img.active {
    opacity: 1
}

/* tap zones */
.carousel-prev,
.carousel-next {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    z-index: 10;
    cursor: pointer;
}

.carousel-prev {
    left: 0
}

.carousel-next {
    right: 0
}

/* dots */
.carousel-dots {
    display: flex;
    gap: calc(var(--u) * 0.7);
    justify-content: center;
    margin-top: calc(var(--u) * 0.8)
}

.cdot {
    width: calc(var(--u) * 0.8);
    height: calc(var(--u) * 0.8);
    border-radius: 50%;
    background: #e0c9a8;
    transition: background .3s, transform .3s;
    cursor: pointer
}

.cdot.active {
    background: #b07848;
    transform: scale(1.25)
}

/* RSVP */
.rsvp-intro {
    font-size: calc(var(--u)*1.7);
    color: #7a5a30;
    text-align: center;
    line-height: 1.6;
    margin-bottom: calc(var(--u)*1.6);
    font-style: italic;
    font-weight: 600;
    flex-shrink: 0
}

.form-group {
    margin-bottom: calc(var(--u)*1);
    flex-shrink: 0
}

.form-label {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: calc(var(--u)*1.05);
    letter-spacing: .15em;
    color: #b07848;
    margin-bottom: calc(var(--u)*0.35);
    font-weight: 600
}

.form-input,
.form-select {
    width: 100%;
    padding: calc(var(--u)*0.8) 12px;
    border: .5px solid #d4b896;
    border-radius: 8px;
    background: #fffaf6;
    font-family: 'Cormorant Garamond', serif;
    font-size: calc(var(--u)*1.4);
    color: #3d2a10;
    outline: none;
    transition: border-color .2s
}

.form-input:focus,
.form-select:focus {
    border-color: #b07848
}

.radio-group {
    display: flex;
    gap: 8px
}

.radio-opt {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: calc(var(--u)*0.7) 8px;
    border: .5px solid #d4b896;
    border-radius: 8px;
    cursor: pointer;
    background: #fffaf6;
    font-size: calc(var(--u)*1.3);
    color: #5a3c18;
    transition: all .2s
}

.radio-opt input {
    display: none
}

.radio-opt.selected {
    background: #f5e9d8;
    border-color: #b07848;
    color: #3d2a10
}

.btn-submit {
    width: 100%;
    padding: calc(var(--u)*1);
    background: #b07848;
    border: none;
    border-radius: 8px;
    font-family: 'Cinzel', serif;
    font-size: calc(var(--u)*1);
    letter-spacing: .2em;
    color: #fff;
    cursor: pointer;
    margin-top: calc(var(--u)*1.2);
    transition: background .2s;
    flex-shrink: 0
}

.btn-submit:hover {
    background: #8f5e35
}

.success-msg {
    text-align: center;
    padding: 8% 20px;
    display: none
}

@media (max-width: 500px) {
    .countdown-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: calc(var(--u) * 1.2)
    }

    .countdown-sep {
        display: none
    }

    .countdown-title {
        font-size: calc(var(--u)*5.5)
    }

    .countdown-subtitle {
        font-size: calc(var(--u)*1.3)
    }

    .countdown-num {
        font-size: calc(var(--u)*3.5)
    }

    .countdown-label {
        font-size: calc(var(--u)*1)
    }

    .section-title {
        font-size: calc(var(--u)*5.5)
    }

    .info-label {
        font-size: calc(var(--u)*1.1)
    }

    .info-title {
        font-size: calc(var(--u)*2.2)
    }

    .info-text {
        font-size: calc(var(--u)*1.8)
    }

    .rsvp-intro {
        font-size: calc(var(--u)*1.9)
    }

    .form-label {
        font-size: calc(var(--u)*1.2)
    }

    .form-input,
    .form-select {
        font-size: calc(var(--u)*1.8)
    }

    .radio-opt {
        font-size: calc(var(--u)*1.7)
    }

    .btn-submit {
        font-size: calc(var(--u)*1.3)
    }

    .names {
        font-size: calc(var(--u)*6)
    }

    .date-line {
        font-size: calc(var(--u)*1.8)
    }

    .location-line {
        font-size: calc(var(--u)*1.6)
    }
}

@media print {

    html,
    body {
        overflow: visible;
        height: auto;
        background: #faf3ee
    }

    #shell {
        width: 932px !important;
        height: 1305px !important
    }

    .pages {
        overflow: visible;
        height: auto;
        display: block
    }

    .page {
        height: 1305px;
        page-break-after: always
    }

    .nav {
        display: none
    }
}