:root {
    color-scheme: light;
    --plum: #32111f;
    --plum-light: #54243a;
    --rose: #d58a88;
    --gold: #e9bd70;
    --paper: #fff8ed;
    --ink: #32111f;
    --muted: #765e62;
    --serif: "Playfair Display", Georgia, serif;
    --sans: "DM Sans", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); }
button, a { font: inherit; }
a { color: inherit; }

.fireworks { position: fixed; z-index: 5; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero {
    min-height: min(850px, 100svh);
    height: max(740px, 100svh);
    max-height: 980px;
    position: relative;
    overflow: hidden;
    padding: 0 clamp(24px, 7.5vw, 120px);
    color: var(--paper);
    background-color: var(--plum);
    background-image: radial-gradient(ellipse at 83% 47%, rgba(131, 53, 75, .48), transparent 44%), radial-gradient(circle at 18% 85%, rgba(143, 74, 52, .18), transparent 28%);
}
.hero::before { content: ""; position: absolute; inset: 0; opacity: .12; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.23'/%3E%3C/svg%3E"); }
.topbar, .hero-content, .hero-footer { position: relative; z-index: 1; }
.topbar { height: 94px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 248, 237, .17); }
.signature { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-size: 11px; font-weight: 700; letter-spacing: 1.8px; }
.signature-mark { color: var(--gold); font-size: 25px; }
.replay-button { border: 1px solid rgba(255, 248, 237, .4); border-radius: 99px; padding: 10px 16px; color: var(--paper); background: transparent; font-size: 12px; cursor: pointer; transition: color .2s, background .2s, border-color .2s; }
.replay-button span { color: var(--gold); margin-right: 5px; }
.replay-button:hover, .replay-button:focus-visible { color: var(--plum); background: var(--gold); border-color: var(--gold); }
.replay-button:hover span, .replay-button:focus-visible span { color: var(--plum); }
.hero-content { min-height: calc(100% - 144px); max-width: 1260px; margin: 0 auto; display: grid; grid-template-columns: 1fr .92fr; align-items: center; gap: clamp(30px, 8vw, 120px); padding: 38px 0 54px; }
.hero-copy { padding: 15px 0 20px; animation: rise-in .85s both; }
.eyebrow { margin: 0 0 24px; font-size: 10px; font-weight: 700; letter-spacing: 2.6px; }
.hero-copy .eyebrow { display: flex; align-items: center; gap: 10px; color: #f0c986; }
.hero-copy .eyebrow span { width: 22px; height: 1px; background: var(--gold); }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 26px; font: 600 clamp(64px, 8.6vw, 124px)/.91 var(--serif); letter-spacing: 0; }
h1 em, h2 em { color: var(--gold); font-weight: 500; }
.hero-message { max-width: 435px; margin-bottom: 30px; color: #e2cfd1; font-size: 15px; line-height: 1.85; }
.wish-link { display: inline-flex; align-items: center; gap: 18px; text-decoration: none; font-size: 12px; font-weight: 600; }
.wish-link span { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(255, 248, 237, .38); border-radius: 50%; color: var(--gold); }
.hero-portrait-wrap { position: relative; width: min(100%, 460px); justify-self: center; aspect-ratio: .78; max-height: 620px; animation: portrait-in 1s .15s both; }
.portrait-halo { position: absolute; inset: 7% 4% 5% 11%; border: 1px solid rgba(233, 189, 112, .7); border-radius: 48% 48% 2px 2px; transform: rotate(5deg); }
.hero-portrait { position: absolute; inset: 0 7% 8% 0; width: 93%; height: 92%; object-fit: cover; object-position: 54% 39%; border-radius: 48% 48% 2px 2px; filter: saturate(.88); box-shadow: 0 30px 70px rgba(0, 0, 0, .28); }
.portrait-caption { position: absolute; z-index: 2; right: 0; bottom: 4%; display: grid; gap: 4px; padding: 16px 21px; background: var(--gold); color: var(--plum); transform: rotate(-3deg); box-shadow: 0 7px 22px rgba(0, 0, 0, .18); }
.portrait-caption span { font-size: 8px; font-weight: 700; letter-spacing: 1.8px; }
.portrait-caption strong { font: 600 17px var(--serif); }
.portrait-sparkle { position: absolute; z-index: 2; color: var(--gold); }
.sparkle-one { top: 6%; right: 2%; font-size: 34px; }
.sparkle-two { left: -7%; top: 38%; font-size: 24px; color: #e89b8f; }
.hero-footer { position: absolute; bottom: 28px; left: clamp(24px, 7.5vw, 120px); right: clamp(24px, 7.5vw, 120px); display: flex; justify-content: space-between; color: rgba(255, 248, 237, .58); font-size: 9px; font-weight: 600; letter-spacing: 1.8px; }

.message-section { position: relative; overflow: hidden; padding: 130px 24px 120px; text-align: center; background: var(--paper); }
.message-section::before, .message-section::after { position: absolute; color: #edd8b4; font: 200px/.8 var(--serif); opacity: .55; }
.message-section::before { content: "✳"; left: 5%; top: 18%; transform: rotate(-15deg); }
.message-section::after { content: "✳"; right: 5%; bottom: 12%; font-size: 145px; transform: rotate(20deg); }
.message-ornament { margin-bottom: 21px; color: #bb756f; font-size: 29px; }
.dark-eyebrow { margin-bottom: 21px; color: #9a655d; }
.message-section h2, .gallery-heading h2 { margin-bottom: 23px; font: 500 clamp(39px, 5.6vw, 69px)/1.12 var(--serif); }
.message-section h2 em, .gallery-heading h2 em { color: #a94f55; }
.message-copy { max-width: 590px; margin: 0 auto; color: var(--muted); font-size: 14px; line-height: 1.9; }
.message-signoff { margin: 27px 0 0; font: 500 20px var(--serif); }
.message-signoff span { color: #b34f58; font: 16px var(--sans); }

.cake-section { min-height: 470px; padding: 76px clamp(24px, 10vw, 150px); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 50px; overflow: hidden; color: var(--paper); background: #723b43; }
.cake-copy { max-width: 460px; justify-self: end; }
.cake-copy .eyebrow { color: #f1c982; }
.cake-copy h2 { margin: 0 0 16px; font: 500 clamp(43px, 5vw, 62px)/1.05 var(--serif); }
.cake-copy h2 em { color: #f1c982; }
.cake-copy > p:not(.eyebrow):not(.cake-wish) { max-width: 370px; margin-bottom: 24px; color: #f0dfe0; font-size: 13px; line-height: 1.8; }
.wish-button { padding: 12px 20px; border: 1px solid var(--gold); color: var(--plum); background: var(--gold); font-size: 12px; font-weight: 700; cursor: pointer; transition: transform .2s, background .2s; }
.wish-button span { margin-right: 7px; font-size: 16px; }
.wish-button:hover, .wish-button:focus-visible { transform: translateY(-2px); background: #f5d79e; }
.cake-wish { max-width: 350px; margin: 19px 0 0; color: #fff0d0; font: 500 18px/1.5 var(--serif); animation: rise-in .5s both; }
.cake-wish[hidden] { display: none; }
.cake-wish span { color: #edaaa0; font: 13px var(--sans); }
.cake { position: relative; justify-self: center; width: min(100%, 380px); height: 335px; border: 0; background: transparent; cursor: pointer; filter: drop-shadow(0 22px 18px rgba(37, 10, 23, .2)); transition: transform .25s; }
.cake:hover { transform: translateY(-5px); }
.cake:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
.cake-layer, .cake-top, .cake-filling, .cake-plate { position: absolute; display: block; left: 50%; transform: translateX(-50%); }
.cake-layer { width: 245px; height: 78px; border: 2px solid rgba(126, 48, 61, .2); background: repeating-linear-gradient(90deg, #d38175 0 22px, #df9280 22px 44px); }
.cake-layer-top { top: 157px; border-radius: 12px 12px 7px 7px; }
.cake-layer-bottom { top: 238px; width: 285px; height: 76px; border-radius: 7px 7px 14px 14px; background: repeating-linear-gradient(90deg, #b75e65 0 25px, #c97070 25px 50px); }
.cake-filling { top: 224px; width: 281px; height: 14px; background: #f7d894; }
.cake-top { z-index: 2; top: 145px; width: 250px; height: 28px; border-radius: 50%; background: #fff0d0; box-shadow: inset 0 -4px 0 rgba(211, 129, 117, .2); }
.icing-drip { position: absolute; top: 13px; width: 15px; height: 22px; border-radius: 0 0 9px 9px; background: #fff0d0; }
.drip-one { left: 34px; height: 28px; }.drip-two { left: 124px; height: 17px; }.drip-three { right: 38px; height: 25px; }
.cake-plate { top: 311px; width: 330px; height: 17px; border: 3px solid #f0c982; border-radius: 50%; background: #f4e0c3; }
.candles { position: absolute; z-index: 3; top: 73px; left: 50%; display: flex; align-items: end; gap: 18px; height: 84px; transform: translateX(-50%); }
.candle { position: relative; display: block; width: 13px; height: 66px; border-radius: 4px 4px 2px 2px; background: repeating-linear-gradient(135deg, #fff0d0 0 6px, #e98b79 6px 12px); }
.candle:nth-child(even) { height: 54px; }
.candle i { position: absolute; left: 50%; top: -15px; width: 10px; height: 15px; border-radius: 60% 40% 55% 45%; background: #ffe09a; box-shadow: 0 0 16px 5px rgba(255, 205, 110, .55); transform: translateX(-50%) rotate(3deg); animation: flame-dance .7s ease-in-out infinite alternate; }
.cake.is-blown .candle i { opacity: 0; transform: translate(-50%, 8px) scale(.2); transition: opacity .3s, transform .3s; }
.cake-hint { position: absolute; top: 40px; left: 50%; color: rgba(255, 248, 237, .72); font-size: 8px; font-weight: 700; letter-spacing: 2px; transform: translateX(-50%); }
.cake-spark { position: absolute; color: var(--gold); }
.cake-spark-one { top: 109px; left: 7%; font-size: 31px; }.cake-spark-two { top: 186px; right: 5%; color: #eda29b; font-size: 25px; }
.cake.is-blown .cake-hint { color: var(--gold); }

.gallery-section { padding: 92px clamp(24px, 7.5vw, 120px) 115px; background: #f4e9dc; }
.gallery-heading { max-width: 1260px; margin: 0 auto 42px; display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.gallery-heading .eyebrow { margin-bottom: 14px; }
.gallery-heading h2 { margin: 0; font-size: clamp(34px, 4.7vw, 56px); }
.gallery-count { padding-bottom: 9px; color: #9a655d; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; white-space: nowrap; }
.photo-grid { max-width: 1260px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr .95fr 1fr; grid-template-rows: 240px 260px; gap: 18px; }
.photo { position: relative; min-width: 0; min-height: 0; margin: 0; overflow: hidden; background: #ddc9bb; }
.photo img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .55s cubic-bezier(.2, .65, .3, 1); }
.photo:hover img { transform: scale(1.045); }
.photo::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(28, 12, 17, .7)); pointer-events: none; }
.photo figcaption { position: absolute; z-index: 1; bottom: 16px; left: 18px; right: 12px; display: flex; gap: 11px; align-items: center; color: #fff8ed; font: 500 15px var(--serif); }
.photo figcaption span { color: var(--gold); font: 700 9px var(--sans); }
.photo-tall { grid-row: span 2; }
.photo-tall img { object-position: 51% 40%; }
.photo-wide { grid-column: span 2; }
.photo-wide img { object-position: 50% 38%; }
.photo-short img { object-position: center 34%; }
.photo-landscape { grid-column: span 2; }
.photo-landscape img { object-position: 50% 54%; }
.photo-last { display: none; }
.footer { min-height: 190px; padding: 47px 24px 34px; display: grid; justify-items: center; align-content: center; gap: 8px; background: var(--plum); color: var(--paper); text-align: center; }
.footer-star { color: var(--gold); font-size: 25px; }
.footer p { margin: 0 0 9px; font: 500 24px var(--serif); }
.footer a { color: rgba(255, 248, 237, .62); font-size: 9px; font-weight: 700; letter-spacing: 1.6px; text-decoration: none; }

@keyframes rise-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes portrait-in { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes flame-dance { from { transform: translateX(-50%) rotate(-6deg) scale(.94); } to { transform: translateX(-50%) rotate(7deg) scale(1.06); } }

@media (min-width: 1450px) {
    .hero-content { gap: 130px; }
    .hero-portrait-wrap { width: 490px; }
}
@media (max-width: 760px) {
    .hero { height: auto; min-height: 0; max-height: none; padding: 0 22px 65px; }
    .topbar { height: 72px; }
    .signature { font-size: 9px; letter-spacing: 1.3px; gap: 8px; }
    .signature-mark { font-size: 21px; }
    .replay-button { padding: 9px 12px; font-size: 10px; }
    .hero-content { min-height: 0; grid-template-columns: 1fr; gap: 38px; padding: 55px 0 30px; }
    .hero-copy { padding: 0; }
    .hero-copy .eyebrow { margin-bottom: 19px; font-size: 8px; letter-spacing: 1.8px; }
    h1 { margin-bottom: 20px; font-size: clamp(67px, 16vw, 94px); }
    .hero-message { max-width: 420px; font-size: 13px; line-height: 1.75; }
    .hero-portrait-wrap { width: min(78%, 370px); max-height: 450px; }
    .hero-footer { bottom: 22px; left: 22px; right: 22px; font-size: 7px; letter-spacing: 1px; }
    .message-section { padding: 92px 26px 88px; }
    .message-section::before { left: -30px; top: 16%; font-size: 125px; }
    .message-section::after { right: -25px; bottom: 10%; font-size: 100px; }
    .message-copy { font-size: 13px; }
    .cake-section { min-height: 0; padding: 70px 24px 55px; grid-template-columns: 1fr; gap: 15px; text-align: center; }
    .cake-copy { justify-self: center; }
    .cake-copy > p:not(.eyebrow):not(.cake-wish), .cake-wish { margin-left: auto; margin-right: auto; }
    .cake { width: min(100%, 360px); transform: scale(.92); transform-origin: top center; margin-bottom: -22px; }
    .cake:hover { transform: scale(.92) translateY(-5px); }
    .gallery-section { padding: 70px 20px 78px; }
    .gallery-heading { margin-bottom: 26px; align-items: end; gap: 10px; }
    .gallery-heading .eyebrow { font-size: 8px; letter-spacing: 1.7px; }
    .gallery-heading h2 { font-size: clamp(32px, 8vw, 44px); }
    .gallery-count { font-size: 8px; letter-spacing: 1px; }
    .photo-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 230px 190px 220px; gap: 10px; }
    .photo-tall { grid-row: span 2; }
    .photo-wide { grid-column: auto; }
    .photo-short { grid-column: auto; }
    .photo-landscape { grid-column: span 2; }
    .photo-last { display: block; grid-column: span 2; height: 210px; }
    .photo figcaption { left: 11px; bottom: 12px; gap: 7px; font-size: 12px; }
    .footer { min-height: 165px; }
    .footer p { font-size: 21px; }
}
@media (max-width: 390px) {
    .hero-footer span:first-child { max-width: 125px; }
    .hero-portrait-wrap { width: 85%; }
    .photo-grid { grid-template-rows: 195px 165px 195px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}