:root {
    --bg: #fbf7f2;
    --ink: #60473d;
    --ink-soft: #6f5b50;
    --accent: #e39a97;
    --olive: #bdbd92;
    --olive-strong: #b2b584;
    --peach: #efc7b0;
    --surface: rgba(253, 249, 244, 0.92);
    --shadow: rgba(196, 167, 149, 0.26);
    --font-serif: "Cormorant Garamond", serif;
    --font-sans: "Nunito Sans", sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background: #fbf7f2;
}

body {
    min-height: 100svh;
    overflow-x: hidden;
    font-family: var(--font-sans);
    color: var(--ink);
    background:
        radial-gradient(circle at 18% 16%, rgba(241, 213, 199, 0.54), transparent 18%),
        radial-gradient(circle at 81% 16%, rgba(255, 255, 255, 0.86), transparent 22%),
        radial-gradient(circle at 50% 78%, rgba(251, 229, 221, 0.58), transparent 22%),
        linear-gradient(180deg, #fbf7f3 0%, #f9f3ee 100%);
}

img {
    display: block;
    max-width: 100%;
}

.page-glow {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 22%, rgba(244, 221, 210, 0.48), transparent 18%),
        radial-gradient(circle at 84% 34%, rgba(255, 255, 255, 0.7), transparent 20%),
        radial-gradient(circle at 50% 76%, rgba(250, 230, 223, 0.42), transparent 24%);
    filter: blur(34px);
}

.page {
    position: relative;
    z-index: 1;
    min-height: 100svh;
    overflow: hidden;
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.hero,
.copy-block,
.photo-card,
.date-mark {
    position: relative;
    z-index: 2;
}

.hero {
    width: min(972px, calc(100% - 80px));
    min-height: 100svh;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(320px, 0.88fr) minmax(370px, 0.95fr);
    align-items: center;
    gap: clamp(14px, 2vw, 24px);
    padding: 92px 0 180px;
}

.copy-block {
    max-width: 404px;
}

.heart-icon {
    width: 42px;
    margin-bottom: 24px;
}

.headline {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(4.2rem, 5.3vw, 5.1rem);
    line-height: 0.94;
    letter-spacing: -0.048em;
    text-wrap: balance;
}

.headline span {
    display: block;
}

.name-row {
    display: inline-flex;
    align-items: flex-end;
    gap: 10px;
    margin-top: 10px;
}

.name {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: clamp(4.7rem, 6vw, 5.6rem);
    line-height: 0.82;
    letter-spacing: -0.06em;
    color: var(--accent);
}

.rays-icon {
    width: 52px;
    margin-bottom: 12px;
}

.divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 28px 0 24px;
}

.divider span {
    flex: 1;
    height: 1.5px;
    background: rgba(175, 175, 131, 0.88);
}

.divider img {
    width: 29px;
}

.message {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 28px;
    color: var(--ink-soft);
    font-size: 1.18rem;
    font-weight: 700;
}

.message-heart {
    width: 15px;
}

.signature-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 13px 24px 14px;
    border-radius: 999px;
    background: linear-gradient(180deg, #c8cba1 0%, #b5b883 100%);
    color: rgba(255, 255, 255, 0.98);
    font-size: 1rem;
    font-weight: 600;
    box-shadow: 0 14px 28px rgba(181, 181, 141, 0.24);
}

.signature-pill img {
    width: 18px;
    filter: brightness(0) invert(1) saturate(0) opacity(0.92);
}

.photo-card {
    justify-self: center;
    width: min(100%, 466px);
    aspect-ratio: 0.84;
    padding: 8px;
    border-radius: 34px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow:
        0 22px 48px var(--shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.main-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 27px;
}

.sticker {
    position: absolute;
    z-index: 3;
}

.sticker-top {
    top: -18px;
    right: -12px;
    width: 92px;
}

.sticker-bottom {
    left: -24px;
    bottom: -24px;
    width: 144px;
}

.sparkle {
    position: absolute;
    z-index: 1;
    opacity: 0.92;
}

.sparkle-a {
    left: 34%;
    top: 328px;
    width: 18px;
}

.sparkle-b {
    right: 11.5%;
    top: 598px;
    width: 20px;
}

.sparkle-c {
    left: 6.8%;
    bottom: 194px;
    width: 18px;
}

.sparkle-d {
    right: 28.5%;
    bottom: 92px;
    width: 20px;
}

.sparkle-e {
    left: 14%;
    top: 118px;
    width: 22px;
}

.sparkle-f {
    right: 16%;
    top: 164px;
    width: 18px;
}

.sparkle-g {
    left: 26%;
    bottom: 292px;
    width: 16px;
}

.sparkle-h {
    right: 6.6%;
    bottom: 236px;
    width: 18px;
}

.confetti-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.confetti-piece {
    position: absolute;
    top: -2%;
    left: 0;
    width: calc(var(--size, 14) * 1px);
    opacity: var(--opacity, 0.74);
    transform: translate3d(0, -10vh, 0) rotate(0deg);
    animation: confetti-fall linear infinite;
    animation-duration: calc(var(--duration, 18) * 1s);
    animation-delay: calc(var(--delay, 0) * 1s);
}

@keyframes confetti-fall {
    from {
        transform: translate3d(0, -10vh, 0) rotate(0deg);
    }

    to {
        transform: translate3d(calc(var(--drift, 0) * 1px), 112vh, 0) rotate(calc(var(--spin, 160) * 1deg));
    }
}

.date-mark {
    position: absolute;
    left: clamp(26px, 5vw, 64px);
    bottom: 26px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #c7a080;
    font-size: 1rem;
    font-weight: 700;
}

.date-mark img {
    width: 25px;
}

.wave-canvas {
    position: absolute;
    inset: auto 0 0;
    width: 100%;
    height: 188px;
    z-index: 0;
}

@media (max-width: 920px) {
    .hero {
        width: min(338px, calc(100% - 40px));
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 12px;
        padding: 40px 0 70px;
        text-align: center;
    }

    .copy-block {
        max-width: 100%;
    }

    .heart-icon {
        width: 20px;
        margin: 0 auto 8px;
    }

    .headline {
        font-size: 1.92rem;
        line-height: 0.98;
    }

    .name-row {
        justify-content: center;
        gap: 8px;
        margin-top: 4px;
    }

    .name {
        font-size: 2.58rem;
    }

    .rays-icon {
        width: 26px;
        margin-bottom: 5px;
    }

    .divider {
        margin: 12px 0 12px;
        gap: 12px;
    }

    .divider img {
        width: 18px;
    }

    .message {
        justify-content: center;
        gap: 8px;
        margin-bottom: 12px;
        font-size: 0.8rem;
    }

    .message-heart {
        width: 11px;
    }

    .signature-pill {
        padding: 10px 18px 11px;
        font-size: 0.78rem;
        font-weight: 600;
    }

    .signature-pill img {
        width: 14px;
    }

    .photo-card {
        justify-self: center;
        width: min(100%, 228px);
        padding: 5px;
        border-radius: 24px;
    }

    .main-photo {
        border-radius: 19px;
    }

    .sticker-top {
        width: 50px;
        top: -10px;
        right: -6px;
    }

    .sticker-bottom {
        left: -10px;
        bottom: -10px;
        width: 82px;
    }

    .sparkle-a {
        left: auto;
        right: 12%;
        top: 174px;
        width: 12px;
    }

    .sparkle-b {
        right: 7%;
        top: 406px;
        width: 12px;
    }

    .sparkle-c {
        left: 7%;
        bottom: 108px;
        width: 12px;
    }

    .sparkle-d {
        right: 15%;
        bottom: 64px;
        width: 12px;
    }

    .sparkle-e {
        left: 14%;
        top: 72px;
        width: 16px;
    }

    .sparkle-f {
        right: 11%;
        top: 112px;
        width: 12px;
    }

    .sparkle-g {
        left: 18%;
        bottom: 158px;
        width: 12px;
    }

    .sparkle-h {
        right: 10%;
        bottom: 122px;
        width: 12px;
    }

    .date-mark {
        left: 50%;
        bottom: 10px;
        transform: translateX(-50%);
        gap: 8px;
        font-size: 0.72rem;
    }

    .date-mark img {
        width: 16px;
    }

    .wave-canvas {
        height: 84px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .confetti-piece {
        animation: none;
        opacity: 0.45;
    }

    .page-glow {
        filter: blur(20px);
    }
}