/* =====================================================
   BUBU ♡ ANSH
   OUR COSYTALE
   COMPLETE STYLE SHEET
===================================================== */

/* =====================================================
   PRIVATE PASSWORD SCREEN
===================================================== */

body.password-locked {
    overflow: hidden;
}

body.password-locked > *:not(#password-screen) {
    display: none !important;
}

.password-screen {
    position: fixed;
    inset: 0;
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(255, 210, 220, 0.55),
            transparent 30%
        ),
        radial-gradient(
            circle at 80% 80%,
            rgba(255, 225, 210, 0.55),
            transparent 30%
        ),
        #fff8f7;

    z-index: 99999;
    overflow: hidden;
}

.password-card {
    position: relative;

    width: min(440px, 100%);

    padding: 52px 38px 42px;

    text-align: center;

    background:
        rgba(255, 255, 255, 0.88);

    border:
        1px solid
        rgba(85, 53, 58, 0.08);

    border-radius: 30px;

    box-shadow:
        0
        30px
        80px
        rgba(80, 40, 50, 0.15);

    backdrop-filter: blur(12px);

    z-index: 2;
}

.password-heart {
    font-size: 52px;

    line-height: 1;

    margin-bottom: 16px;

    color: #c87986;
}

.password-eyebrow {
    margin:
        0
        0
        14px;

    font-family: Arial, sans-serif;

    font-size: 11px;

    letter-spacing: 3px;

    font-weight: 700;

    color: #a56a74;
}

.password-card h1 {
    margin: 0;

    font-size:
        clamp(
            30px,
            6vw,
            44px
        );

    line-height: 1.15;

    color: #55353a;
}

.password-card h1 span {
    color: #c87986;
}

.password-message {
    margin:
        20px
        auto
        26px;

    max-width: 330px;

    line-height: 1.7;

    color: #795a60;
}

.password-input {
    width: 100%;

    box-sizing: border-box;

    padding:
        15px
        18px;

    border:
        1px solid
        rgba(85, 53, 58, 0.15);

    border-radius: 14px;

    background: #fffafa;

    color: #55353a;

    font-family: inherit;

    font-size: 15px;

    text-align: center;

    outline: none;

    transition: 0.25s ease;
}

.password-input:focus {
    border-color: #c87986;

    box-shadow:
        0
        0
        0
        4px
        rgba(200, 121, 134, 0.12);
}

.password-button {
    width: 100%;

    margin-top: 14px;

    padding:
        15px
        20px;

    border: none;

    border-radius: 14px;

    background: #55353a;

    color: white;

    font-family: inherit;

    font-size: 15px;

    cursor: pointer;

    transition: 0.25s ease;
}

.password-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0
        12px
        25px
        rgba(85, 53, 58, 0.18);
}

.password-error {
    display: none;

    margin:
        14px
        0
        0;

    font-size: 13px;

    color: #b45d6d;
}

.password-hint {
    margin:
        22px
        0
        0;

    font-size: 12px;

    color: #a18186;
}

.password-glow {
    position: absolute;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    filter: blur(60px);

    opacity: 0.45;
}

.password-glow-one {
    top: -100px;
    left: -80px;

    background:
        rgba(238, 166, 181, 0.5);
}

.password-glow-two {
    right: -100px;
    bottom: -100px;

    background:
        rgba(247, 205, 177, 0.5);
}


/* =====================================================
   OPENING SURPRISE
===================================================== */


/* =====================================================
   OPENING SURPRISE
===================================================== */

body.story-locked {
    overflow: hidden;
}

.opening-screen {
    position: fixed;
    inset: 0;
    z-index: 10000;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 20% 20%,
            #ffe1e7 0%,
            transparent 30%
        ),
        radial-gradient(
            circle at 80% 75%,
            #f5d7df 0%,
            transparent 32%
        ),
        #fff8f7;

    transition:
        opacity 0.9s ease,
        visibility 0.9s ease;
}

.opening-screen.opened {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.opening-content {
    position: relative;
    z-index: 3;

    padding: 30px;

    animation:
        openingAppear
        1.1s
        ease
        both;
}

.opening-eyebrow {
    font-family: Arial, sans-serif;

    font-size: 10px;
    letter-spacing: 4px;

    text-transform: uppercase;

    opacity: 0.55;

    margin-bottom: 18px;
}

.opening-heart {
    font-size: 58px;

    line-height: 1;

    margin-bottom: 15px;

    animation:
        openingHeartbeat
        1.8s
        ease-in-out
        infinite;
}

.opening-content h1 {
    font-size:
        clamp(
            48px,
            8vw,
            82px
        );

    font-weight: normal;

    line-height: 1;

    margin: 0;
}

.opening-content h1 span {
    font-size: 0.65em;
}

.opening-message {
    font-size: 18px;

    line-height: 1.8;

    opacity: 0.72;

    margin:
        25px
        0
        18px;
}

.opening-date {
    font-family: Arial, sans-serif;

    font-size: 11px;

    letter-spacing: 4px;

    opacity: 0.5;
}

.opening-button {
    border: none;

    margin-top: 32px;

    padding:
        16px
        30px;

    border-radius: 50px;

    background: #55353a;

    color: white;

    font-family: Arial, sans-serif;

    font-size: 13px;

    cursor: pointer;

    box-shadow:
        0
        12px
        35px
        rgba(
            60,
            30,
            35,
            0.16
        );

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.opening-button:hover {
    transform: translateY(-4px);

    box-shadow:
        0
        18px
        40px
        rgba(
            60,
            30,
            35,
            0.22
        );
}

.opening-hint {
    margin-top: 16px;

    font-size: 11px;

    opacity: 0.42;

    font-style: italic;
}

.opening-sticker {
    position: absolute;

    z-index: 2;

    object-fit: contain;

    filter:
        drop-shadow(
            0
            10px
            15px
            rgba(
                70,
                30,
                40,
                0.12
            )
        );

    animation:
        openingFloat
        4.5s
        ease-in-out
        infinite;
}

.opening-cosy {
    width: 190px;

    left: 7%;
    top: 13%;

    transform: rotate(-10deg);
}

.opening-bubu {
    width: 220px;

    right: 7%;
    bottom: 10%;

    transform: rotate(9deg);

    animation-delay: -1.2s;
}

.opening-glow {
    position: absolute;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    background:
        rgba(
            255,
            220,
            228,
            0.35
        );

    filter: blur(5px);
}

.opening-glow-one {
    top: -120px;
    left: -80px;
}

.opening-glow-two {
    right: -100px;
    bottom: -120px;
}

@keyframes openingAppear {

    from {
        opacity: 0;

        transform:
            translateY(18px)
            scale(0.98);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes openingHeartbeat {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.13);
    }
}

@keyframes openingFloat {

    0%,
    100% {
        margin-top: 0;
    }

    50% {
        margin-top: -12px;
    }
}


/* =====================================================
   BASIC RESET
===================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    background: #fff8f7;

    color: #3b292b;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    overflow-x: hidden;
}

img {
    max-width: 100%;

    display: block;
}

button,
a {
    font-family: inherit;
}

a {
    color: inherit;
}


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

.navbar {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        20px
        6%;

    background:
        rgba(
            255,
            248,
            247,
            0.72
        );

    backdrop-filter: blur(14px);

    border-bottom:
        1px solid
        rgba(
            80,
            40,
            50,
            0.06
        );
}

.logo {
    font-size: 18px;

    font-weight: bold;
}

.nav-links {
    display: flex;

    gap: 28px;
}

.nav-links a {
    text-decoration: none;

    font-family: Arial, sans-serif;

    font-size: 12px;

    opacity: 0.65;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.nav-links a:hover {
    opacity: 1;

    transform:
        translateY(-2px);
}


/* =====================================================
   COMMON SECTION
===================================================== */

.section {
    position: relative;

    padding:
        120px
        7%;
}

.section-heading {
    max-width: 850px;

    margin:
        0
        auto
        60px;

    text-align: center;
}

.eyebrow {
    font-family: Arial, sans-serif;

    font-size: 10px;

    letter-spacing: 4px;

    text-transform: uppercase;

    opacity: 0.48;

    margin-bottom: 15px;
}

.section-heading h2 {
    font-size:
        clamp(
            38px,
            6vw,
            64px
        );

    font-weight: normal;

    line-height: 1.15;
}

.section-heading h2 span {
    display: block;

    font-style: italic;
}

.section-description {
    margin-top: 18px;

    font-size: 16px;

    line-height: 1.7;

    opacity: 0.65;
}


/* =====================================================
   HERO
===================================================== */

.hero {
    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding:
        120px
        7%
        80px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 25%,
            #ffe2e8 0%,
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 70%,
            #f6d9e0 0%,
            transparent 30%
        ),
        #fff8f7;
}

.hero-content {
    position: relative;

    z-index: 3;

    max-width: 750px;
}

.small-heading {
    font-family: Arial, sans-serif;

    font-size: 10px;

    letter-spacing: 4px;

    opacity: 0.48;

    margin-bottom: 20px;
}

.hero h1 {
    font-size:
        clamp(
            55px,
            10vw,
            105px
        );

    font-weight: normal;

    line-height: 0.95;

    margin-bottom: 25px;
}

.hero h1 span {
    font-size: 0.7em;
}

.hero-subtitle {
    font-size: 19px;

    line-height: 1.8;

    opacity: 0.7;
}

.date-badge {
    display: inline-block;

    margin-top: 28px;

    padding:
        10px
        18px;

    border-radius: 50px;

    background:
        rgba(
            255,
            255,
            255,
            0.7
        );

    border:
        1px solid
        rgba(
            80,
            40,
            50,
            0.08
        );

    font-family: Arial, sans-serif;

    font-size: 11px;

    letter-spacing: 3px;
}

.hero-note {
    margin-top: 18px;

    font-size: 13px;

    opacity: 0.5;

    font-style: italic;
}

.main-button {
    display: inline-block;

    margin-top: 28px;

    padding:
        15px
        25px;

    border-radius: 50px;

    background: #55353a;

    color: white;

    text-decoration: none;

    font-family: Arial, sans-serif;

    font-size: 12px;

    box-shadow:
        0
        12px
        30px
        rgba(
            60,
            30,
            35,
            0.14
        );

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.main-button:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0
        18px
        40px
        rgba(
            60,
            30,
            35,
            0.2
        );
}

.hero-photo {
    position: absolute;
    width: 240px;
    height: 240px;
    object-fit: cover;
    border-radius: 50%;
    right: 8%;
    bottom: 9%;
    transform: rotate(6deg);
    border: 10px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 25px 65px rgba(80, 40, 50, 0.16);
    z-index: 2;
}



/* =====================================================
   GENERAL STICKERS
===================================================== */

.sticker {
    position: absolute;

    z-index: 5;

    object-fit: contain;

    pointer-events: none;

    filter:
        drop-shadow(
            0
            10px
            15px
            rgba(
                70,
                30,
                40,
                0.12
            )
        );
}

.hero-cosy {
    width: 150px;

    left: 7%;
    top: 23%;

    animation:
        stickerFloat
        4s
        ease-in-out
        infinite;
}

.hero-bubu {
    width: 180px;

    right: 7%;
    top: 18%;

    animation:
        stickerFloat
        4.5s
        ease-in-out
        infinite;

    animation-delay: -1.5s;
}

.story-sticker {
    position: absolute;

    width: 115px;

    right: -30px;
    top: -45px;

    transform: rotate(8deg);

    pointer-events: none;
}

.memories-sticker {
    width: 150px;

    right: 5%;
    top: 55px;

    transform: rotate(8deg);
}

.letter-sticker {
    width: 150px;

    right: -50px;
    top: -65px;

    transform: rotate(8deg);
}

.letter-corner-sticker {
    position: absolute;

    width: 130px;

    left: -45px;
    bottom: -40px;

    transform: rotate(-10deg);

    pointer-events: none;
}

.final-bubu {
    width: 180px;

    left: 6%;
    top: 15%;

    animation:
        stickerFloat
        4.5s
        ease-in-out
        infinite;
}

.final-cosy {
    width: 160px;

    right: 6%;
    bottom: 15%;

    animation:
        stickerFloat
        4s
        ease-in-out
        infinite;

    animation-delay: -1.2s;
}

@keyframes stickerFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-10px)
            rotate(2deg);
    }
}


/* =====================================================
   ANNIVERSARY WISH
===================================================== */

.anniversary-wish-section {
    padding:
        110px
        6%;

    display: flex;

    justify-content: center;

    text-align: center;

    background:
        radial-gradient(
            circle at 50% 40%,
            #ffe7eb 0%,
            transparent 45%
        );
}

.anniversary-wish-card {
    max-width: 720px;

    padding:
        65px
        45px;

    background:
        rgba(
            255,
            255,
            255,
            0.62
        );

    border:
        1px solid
        rgba(
            120,
            70,
            80,
            0.08
        );

    border-radius: 30px;

    box-shadow:
        0
        20px
        60px
        rgba(
            80,
            40,
            50,
            0.08
        );
}

.anniversary-heart {
    font-size: 45px;

    margin:
        15px
        0
        20px;

    animation:
        openingHeartbeat
        1.8s
        ease-in-out
        infinite;
}

.anniversary-wish-card h2 {
    font-size:
        clamp(
            35px,
            6vw,
            58px
        );

    font-weight: normal;

    line-height: 1.2;

    margin-bottom: 25px;
}

.anniversary-wish-card h2 span {
    display: block;
}

.anniversary-wish-card > p:not(.eyebrow) {
    font-size: 17px;

    line-height: 1.8;

    opacity: 0.72;
}

.wish-highlight {
    margin-top: 30px !important;

    font-size: 20px !important;

    font-style: italic;

    opacity: 0.9 !important;
}

.wish-signature {
    margin-top: 30px;

    font-size: 16px;

    font-style: italic;
}


/* =====================================================
   OUR STORY
===================================================== */

.story-section {
    background: #fff8f7;
}

.story-card {
    max-width: 1050px;

    margin: auto;

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    background:
        rgba(
            255,
            255,
            255,
            0.7
        );

    border-radius: 30px;

    overflow: visible;

    box-shadow:
        0
        20px
        60px
        rgba(
            70,
            35,
            45,
            0.08
        );
}

.story-image {
    min-height: 550px;

    padding: 18px;
}

.story-image img {
    width: 100%;

    height: 100%;

    min-height: 510px;

    object-fit: cover;

    border-radius: 22px;
}

.story-text {
    position: relative;

    padding:
        65px
        55px;

    font-size: 17px;

    line-height: 2;
}

.story-text p {
    margin-bottom: 24px;
}

.story-text strong {
    font-weight: bold;
}

.quote {
    margin:
        30px
        0;

    padding:
        25px
        30px;

    border-left:
        3px
        solid
        #c995a1;

    background:
        rgba(
            255,
            232,
            237,
            0.45
        );

    font-style: italic;

    font-size: 18px;

    line-height: 1.7;
}


/* =====================================================
   TIMELINE
===================================================== */

.timeline-section {
    background: #fdf0f2;
}

.timeline {
    max-width: 850px;

    margin: auto;

    position: relative;
}

.timeline::before {
    content: "";

    position: absolute;

    left: 22px;

    top: 0;
    bottom: 0;

    width: 1px;

    background:
        rgba(
            100,
            55,
            65,
            0.18
        );
}

.timeline-item {
    position: relative;

    display: grid;

    grid-template-columns:
        45px
        1fr;

    gap: 25px;

    margin-bottom: 60px;
}

.timeline-dot {
    width: 45px;
    height: 45px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #fff8f7;

    border:
        1px
        solid
        rgba(
            100,
            55,
            65,
            0.12
        );

    font-size: 17px;

    position: relative;

    z-index: 2;
}

.timeline-content {
    background:
        rgba(
            255,
            255,
            255,
            0.72
        );

    padding:
        30px;

    border-radius: 22px;

    box-shadow:
        0
        12px
        35px
        rgba(
            70,
            35,
            45,
            0.05
        );
}

.timeline-date {
    font-family: Arial, sans-serif;

    font-size: 9px;

    letter-spacing: 3px;

    opacity: 0.48;
}

.timeline-content h3 {
    font-size: 28px;

    font-weight: normal;

    margin:
        10px
        0
        15px;
}

.timeline-content p {
    font-size: 15px;

    line-height: 1.8;

    opacity: 0.72;

    margin-bottom: 14px;
}

.timeline-content img {
    width: 100%;

    max-height: 430px;

    object-fit: cover;

    border-radius: 16px;

    margin-top: 20px;

    cursor: pointer;

    transition:
        transform 0.4s ease;
}

.timeline-content img:hover {
    transform: scale(1.02);
}

.timeline-item.special .timeline-content {
    background:
        rgba(
            255,
            235,
            239,
            0.8
        );
}


/* =====================================================
   MEMORIES — SCRAPBOOK / POLAROID
===================================================== */

.memories-section {
    background: #fff8f7;

    overflow: hidden;
}


/* Main scrapbook area */

.memory-gallery {
    max-width: 1100px;

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        repeat(
            12,
            1fr
        );

    grid-auto-rows: 75px;

    gap: 22px;

    padding:
        20px
        20px
        35px;
}


/* Every photo becomes a Polaroid */

.memory-item {
    position: relative;

    padding: 10px;

    background: #fffdfb;

    border-radius: 3px;

    box-shadow:
        0
        12px
        30px
        rgba(
            60,
            30,
            35,
            0.12
        );

    cursor: pointer;

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        z-index 0.2s ease;

    z-index: 1;
}


/* Photo itself */

.memory-item img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    border-radius: 2px;

    transition:
        transform 0.5s ease;
}


/* Handmade rotations */

.memory-item:nth-child(1) {
    grid-column: 1 / span 4;
    grid-row: 1 / span 5;

    transform: rotate(-3deg);
}

.memory-item:nth-child(2) {
    grid-column: 5 / span 4;
    grid-row: 1 / span 6;

    transform: rotate(2deg);
}

.memory-item:nth-child(3) {
    grid-column: 9 / span 4;
    grid-row: 1 / span 5;

    transform: rotate(-2deg);
}

.memory-item:nth-child(4) {
    grid-column: 2 / span 4;
    grid-row: 6 / span 5;

    transform: rotate(2.5deg);
}

.memory-item:nth-child(5) {
    grid-column: 6 / span 4;
    grid-row: 7 / span 6;

    transform: rotate(-2deg);
}

.memory-item:nth-child(6) {
    grid-column: 10 / span 3;
    grid-row: 6 / span 5;

    transform: rotate(3deg);
}

.memory-item:nth-child(7) {
    grid-column: 1 / span 4;
    grid-row: 11 / span 6;

    transform: rotate(-2deg);
}

.memory-item:nth-child(8) {
    grid-column: 5 / span 4;
    grid-row: 13 / span 5;

    transform: rotate(2deg);
}

.memory-item:nth-child(9) {
    grid-column: 9 / span 4;
    grid-row: 11 / span 6;

    transform: rotate(-2.5deg);
}

.memory-item:nth-child(10) {
    grid-column: 2 / span 4;
    grid-row: 18 / span 5;

    transform: rotate(2deg);
}

.memory-item:nth-child(11) {
    grid-column: 6 / span 4;
    grid-row: 18 / span 6;

    transform: rotate(-2.5deg);
}

.memory-item:nth-child(12) {
    grid-column: 10 / span 3;
    grid-row: 17 / span 6;

    transform: rotate(3deg);
}


/* Hover */

.memory-item:hover {
    transform:
        rotate(0deg)
        translateY(-10px)
        scale(1.04);

    box-shadow:
        0
        22px
        45px
        rgba(
            60,
            30,
            35,
            0.18
        );

    z-index: 20;
}

.memory-item:hover img {
    transform: scale(1.03);
}


/* Tiny tape effect */

.memory-item::before {
    content: "";

    position: absolute;

    width: 58px;
    height: 18px;

    top: -9px;
    left: 50%;

    transform:
        translateX(-50%)
        rotate(-2deg);

    background:
        rgba(
            255,
            239,
            214,
            0.72
        );

    z-index: 5;

    opacity: 0.8;
}


/* Some tapes angled differently */

.memory-item:nth-child(2)::before,
.memory-item:nth-child(7)::before,
.memory-item:nth-child(10)::before {
    transform:
        translateX(-50%)
        rotate(4deg);
}

.memory-item:nth-child(4)::before,
.memory-item:nth-child(9)::before {
    transform:
        translateX(-50%)
        rotate(-5deg);
}


/* Note under gallery */

.gallery-note {
    text-align: center;

    margin-top: 25px;

    font-size: 14px;

    font-style: italic;

    opacity: 0.5;
}


/* =====================================================
   SONG
===================================================== */

.song-section {
    background: #fdf0f2;

    display: flex;

    justify-content: center;

    text-align: center;
}

.song-card {
    width: 100%;

    max-width: 650px;

    padding:
        60px
        40px;

    background:
        rgba(
            255,
            255,
            255,
            0.72
        );

    border-radius: 30px;

    box-shadow:
        0
        20px
        55px
        rgba(
            70,
            35,
            45,
            0.07
        );
}

.music-heart {
    width: 65px;
    height: 65px;

    margin:
        0
        auto
        25px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #ffe2e8;

    font-size: 25px;
}

.song-card h2 {
    font-size: 48px;

    font-weight: normal;

    margin-bottom: 18px;
}

.song-message {
    font-size: 16px;

    line-height: 1.8;

    opacity: 0.65;

    margin-bottom: 30px;
}

.song-card audio {
    width: 100%;
}


/* =====================================================
   LOVE LETTER
===================================================== */

.letter-section {
    background: #fff8f7;

    padding:
        130px
        7%;
}

.letter-wrapper {
    max-width: 850px;

    margin: auto;

    position: relative;
}

.letter-top {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 25px;

    margin-bottom: 15px;

    font-family: Arial, sans-serif;

    font-size: 10px;

    letter-spacing: 4px;

    opacity: 0.5;
}

.letter-paper {
    position: relative;

    background: #fffdfb;

    padding:
        75px
        70px;

    border-radius: 5px;

    box-shadow:
        0
        20px
        70px
        rgba(
            70,
            35,
            45,
            0.1
        );

    line-height: 2;

    font-size: 16px;
}

.letter-paper::before {
    content: "";

    position: absolute;

    inset: 15px;

    border:
        1px
        solid
        rgba(
            120,
            70,
            80,
            0.08
        );

    pointer-events: none;
}

.letter-date {
    font-family: Arial, sans-serif;

    font-size: 10px;

    letter-spacing: 3px;

    opacity: 0.45;

    margin-bottom: 25px;
}

.letter-paper h2 {
    font-size: 38px;

    font-weight: normal;

    margin-bottom: 25px;
}

.letter-paper p {
    margin-bottom: 22px;
}

.letter-paper strong {
    font-weight: bold;
}

.letter-ending {
    text-align: right;

    font-style: italic;

    font-size: 18px;

    margin-top: 35px;
}

.anniversary-letter-wish {
    padding:
        25px
        0;

    text-align: center;

    font-size: 18px;

    line-height: 1.9;

    font-style: italic;
}


/* =====================================================
   COUNTER
===================================================== */

.counter-section {
    padding:
        100px
        6%;

    text-align: center;

    background: #fdf0f2;
}

.counter-section h2 {
    font-size: 35px;

    font-weight: normal;

    margin-bottom: 35px;
}

.counter {
    max-width: 700px;

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap: 15px;
}

.counter-box {
    padding:
        25px
        15px;

    background:
        rgba(
            255,
            255,
            255,
            0.7
        );

    border-radius: 18px;
}

.counter-box span {
    display: block;

    font-size: 35px;

    margin-bottom: 8px;
}

.counter-box small {
    font-family: Arial, sans-serif;

    font-size: 9px;

    letter-spacing: 2px;

    opacity: 0.5;
}


/* =====================================================
   FINAL SECTION
===================================================== */

.final-section {
    position: relative;

    min-height: 90vh;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding:
        100px
        7%;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 50%,
            #ffe4ea 0%,
            transparent 48%
        ),
        #fff8f7;
}

.final-content {
    position: relative;

    z-index: 4;

    max-width: 750px;
}

.final-content h2 {
    font-size:
        clamp(
            42px,
            7vw,
            72px
        );

    font-weight: normal;

    line-height: 1.15;
}

.big-heart {
    font-size: 70px;

    margin:
        25px
        0;

    animation:
        openingHeartbeat
        1.8s
        ease-in-out
        infinite;
}

.final-content h3 {
    font-size: 24px;

    font-weight: normal;

    margin-bottom: 12px;
}

.final-content > p:not(.eyebrow):not(.forever):not(.final-wish) {
    opacity: 0.6;
}

.forever {
    margin-top: 30px;

    font-size: 22px;

    font-style: italic;
}

.final-wish {
    max-width: 600px;

    margin:
        25px
        auto;

    line-height: 1.9;

    opacity: 0.78;
}

.heart-button {
    margin-top: 30px;

    padding:
        15px
        25px;

    border: none;

    border-radius: 50px;

    background: #55353a;

    color: white;

    font-family: Arial, sans-serif;

    font-size: 12px;

    cursor: pointer;

    box-shadow:
        0
        12px
        30px
        rgba(
            60,
            30,
            35,
            0.14
        );

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.heart-button:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0
        18px
        40px
        rgba(
            60,
            30,
            35,
            0.2
        );
}


/* =====================================================
   LIGHTBOX
===================================================== */

.lightbox {
    position: fixed;

    inset: 0;

    z-index: 5000;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

    background:
        rgba(
            30,
            15,
            20,
            0.88
        );

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.lightbox.active {
    opacity: 1;

    visibility: visible;
}

.lightbox img {
    max-width: 90vw;

    max-height: 85vh;

    object-fit: contain;

    border-radius: 10px;

    box-shadow:
        0
        20px
        70px
        rgba(
            0,
            0,
            0,
            0.3
        );
}

.close-lightbox {
    position: absolute;

    top: 25px;
    right: 30px;

    width: 45px;
    height: 45px;

    border: none;

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            0.12
        );

    color: white;

    font-size: 30px;

    cursor: pointer;
}


/* =====================================================
   FLOATING HEARTS
===================================================== */

.floating-heart {
    position: fixed;

    bottom: -30px;

    z-index: 3000;

    pointer-events: none;

    opacity: 0.5;

    animation:
        heartFloat
        7s
        linear
        forwards;
}

@keyframes heartFloat {

    from {
        transform:
            translateY(0)
            rotate(0deg);

        opacity: 0;
    }

    15% {
        opacity: 0.5;
    }

    to {
        transform:
            translateY(-110vh)
            rotate(25deg);

        opacity: 0;
    }
}


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

footer {
    padding:
        45px
        20px;

    text-align: center;

    background: #3b292b;

    color: #fff8f7;
}

footer p {
    font-size: 13px;

    opacity: 0.65;

    margin-bottom: 8px;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 750px) {


    /* -----------------------------
       OPENING
    ----------------------------- */

    .opening-cosy {
        width: 105px;

        left: 1%;

        top: 11%;
    }

    .opening-bubu {
        width: 125px;

        right: 1%;

        bottom: 9%;
    }

    .opening-content {
        padding: 24px;
    }

    .opening-content h1 {
        font-size:
            clamp(
                43px,
                13vw,
                65px
            );
    }

    .opening-message {
        font-size: 16px;
    }

    .opening-button {
        padding:
            15px
            24px;
    }


    /* -----------------------------
       NAVIGATION
    ----------------------------- */

    .navbar {
        padding:
            16px
            5%;
    }

    .logo {
        font-size: 15px;
    }

    .nav-links {
        gap: 12px;
    }

    .nav-links a {
        font-size: 9px;
    }


    /* -----------------------------
       HERO
    ----------------------------- */

    .hero {
        padding:
            120px
            5%
            70px;
    }

    .hero h1 {
        font-size:
            clamp(
                48px,
                15vw,
                72px
            );
    }

    .hero-subtitle {
        font-size: 16px;
    }

    .hero-photo {
    width: 160px;
    height: 160px;
    right: 3%;
    bottom: 4%;
    border-width: 7px;
}

    .hero-cosy {
        width: 95px;

        left: 2%;
        top: 20%;
    }

    .hero-bubu {
        width: 110px;

        right: 1%;
        top: 17%;
    }


    /* -----------------------------
       SECTIONS
    ----------------------------- */

    .section {
        padding:
            80px
            5%;
    }

    .section-heading {
        margin-bottom: 40px;
    }

    .section-heading h2 {
        font-size: 38px;
    }


    /* -----------------------------
       ANNIVERSARY WISH
    ----------------------------- */

    .anniversary-wish-section {
        padding:
            70px
            5%;
    }

    .anniversary-wish-card {
        padding:
            45px
            25px;
    }

    .anniversary-wish-card h2 {
        font-size: 38px;
    }

    .anniversary-wish-card h2 span {
        display: inline;
    }

    .anniversary-wish-card > p:not(.eyebrow) {
        font-size: 15px;
    }

    .wish-highlight {
        font-size: 17px !important;
    }


    /* -----------------------------
       STORY
    ----------------------------- */

    .story-card {
        grid-template-columns: 1fr;

        border-radius: 22px;
    }

    .story-image {
        min-height: auto;

        padding: 12px;
    }

    .story-image img {
        min-height: 350px;

        height: 350px;
    }

    .story-text {
        padding:
            45px
            25px;

        font-size: 16px;

        line-height: 1.9;
    }

    .story-sticker {
        width: 85px;

        right: -10px;
        top: -35px;
    }


    /* -----------------------------
       TIMELINE
    ----------------------------- */

    .timeline::before {
        left: 18px;
    }

    .timeline-item {
        grid-template-columns:
            38px
            1fr;

        gap: 15px;
    }

    .timeline-dot {
        width: 38px;
        height: 38px;

        font-size: 14px;
    }

    .timeline-content {
        padding: 22px;

        border-radius: 18px;
    }

    .timeline-content h3 {
        font-size: 23px;
    }

    .timeline-content p {
        font-size: 14px;
    }


    /* -----------------------------
       SCRAPBOOK MEMORIES
    ----------------------------- */

    .memories-section {
        padding-left: 3%;
        padding-right: 3%;
    }

    .memory-gallery {
        display: grid;

        grid-template-columns:
            repeat(
                6,
                1fr
            );

        grid-auto-rows: 55px;

        gap: 14px;

        padding:
            15px
            8px
            25px;
    }


    .memory-item:nth-child(1) {
        grid-column: 1 / span 3;
        grid-row: 1 / span 5;
    }

    .memory-item:nth-child(2) {
        grid-column: 4 / span 3;
        grid-row: 1 / span 6;
    }

    .memory-item:nth-child(3) {
        grid-column: 1 / span 3;
        grid-row: 6 / span 6;
    }

    .memory-item:nth-child(4) {
        grid-column: 4 / span 3;
        grid-row: 7 / span 5;
    }

    .memory-item:nth-child(5) {
        grid-column: 1 / span 3;
        grid-row: 13 / span 6;
    }

    .memory-item:nth-child(6) {
        grid-column: 4 / span 3;
        grid-row: 13 / span 5;
    }

    .memory-item:nth-child(7) {
        grid-column: 4 / span 3;
        grid-row: 18 / span 6;
    }

    .memory-item:nth-child(8) {
        grid-column: 1 / span 3;
        grid-row: 19 / span 5;
    }

    .memory-item:nth-child(9) {
        grid-column: 1 / span 3;
        grid-row: 25 / span 6;
    }

    .memory-item:nth-child(10) {
        grid-column: 4 / span 3;
        grid-row: 25 / span 5;
    }

    .memory-item:nth-child(11) {
        grid-column: 4 / span 3;
        grid-row: 30 / span 6;
    }

    .memory-item:nth-child(12) {
        grid-column: 1 / span 3;
        grid-row: 31 / span 5;
    }

    .memory-item {
        padding: 7px;
    }

    .memory-item::before {
        width: 42px;
        height: 13px;

        top: -6px;
    }

    .memories-sticker {
        width: 90px;

        right: 2%;
        top: 35px;
    }


    /* -----------------------------
       SONG
    ----------------------------- */

    .song-card {
        padding:
            45px
            22px;
    }

    .song-card h2 {
        font-size: 40px;
    }

    .song-message {
        font-size: 14px;
    }


    /* -----------------------------
       LETTER
    ----------------------------- */

    .letter-section {
        padding:
            90px
            5%;
    }

    .letter-paper {
        padding:
            55px
            25px;

        font-size: 15px;

        line-height: 1.9;
    }

    .letter-paper h2 {
        font-size: 32px;
    }

    .letter-paper::before {
        inset: 8px;
    }

    .letter-sticker {
        width: 90px;

        right: -20px;
        top: -45px;
    }

    .letter-corner-sticker {
        width: 85px;

        left: -20px;
        bottom: -25px;
    }

    .anniversary-letter-wish {
        font-size: 16px;

        padding:
            20px
            0;
    }


    /* -----------------------------
       COUNTER
    ----------------------------- */

    .counter-section {
        padding:
            80px
            5%;
    }

    .counter-section h2 {
        font-size: 28px;
    }

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

        gap: 10px;
    }

    .counter-box {
        padding:
            20px
            10px;
    }

    .counter-box span {
        font-size: 28px;
    }


    /* -----------------------------
       FINAL
    ----------------------------- */

    .final-section {
        min-height: 100vh;

        padding:
            90px
            5%;
    }

    .final-content h2 {
        font-size: 43px;
    }

    .final-content h3 {
        font-size: 20px;
    }

    .big-heart {
        font-size: 58px;
    }

    .final-bubu {
        width: 105px;

        left: 0;
        top: 12%;
    }

    .final-cosy {
        width: 100px;

        right: 0;
        bottom: 10%;
    }

    .final-wish {
        font-size: 14px;
    }


    /* -----------------------------
       LIGHTBOX
    ----------------------------- */

    .lightbox {
        padding: 15px;
    }

    .lightbox img {
        max-width: 94vw;

        max-height: 80vh;
    }

    .close-lightbox {
        top: 15px;
        right: 15px;
    }


    /* -----------------------------
       FOOTER
    ----------------------------- */

    footer {
        padding:
            35px
            20px;
    }

}