@charset "UTF-8";

:root {
  color-scheme: light;
  --cream: #fff8f4;
  --paper: #fffdfb;
  --rose: #df9aab;
  --rose-deep: #ae6c83;
  --blush: #f7e5e9;
  --lavender: #eee6f4;
  --lilac: #806b91;
  --plum: #503e5d;
  --ink: #51424e;
  --muted: #897d87;
  --line: rgba(119, 89, 110, .15);
  --shadow: 0 24px 70px rgba(113, 77, 106, .12);
  --serif: "Bodoni MT", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --sans: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  --hand: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  --ease: cubic-bezier(.21,.67,.24,1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.65; overflow-x: hidden; }
body.intro-active { overflow: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #9b79a8; outline-offset: 4px; }
a { color: inherit; }
::selection { background: #efd1dc; color: var(--plum); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.opening { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; overflow: hidden; padding: 24px; opacity: 1; visibility: visible; transition: opacity .85s var(--ease), visibility .85s; }
.opening.leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.opening__wash { position: absolute; inset: -15%; background: radial-gradient(ellipse at 20% 20%, rgba(255,255,255,.88), transparent 36%), radial-gradient(ellipse at 82% 24%, rgba(230,214,244,.8), transparent 36%), radial-gradient(ellipse at 70% 86%, rgba(255,208,195,.72), transparent 38%), linear-gradient(135deg, #f8e8ed 0%, #f6e8f2 46%, #fff2e7 100%); animation: wash-breathe 12s ease-in-out infinite alternate; }
.opening__garden { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.opening__particle { position: absolute; display: block; color: rgba(152,111,148,.68); text-shadow: 0 0 14px rgba(255,255,255,.95); animation: drift var(--duration, 12s) ease-in-out var(--delay, 0s) infinite alternate; will-change: transform; }
.opening__card { position: relative; width: min(100%, 520px); padding: clamp(38px, 7vw, 66px) clamp(28px, 7vw, 64px) 42px; text-align: center; border: 1px solid rgba(255,255,255,.79); border-radius: 35px 35px 35px 12px; background: rgba(255,253,252,.68); box-shadow: 0 26px 100px rgba(110,83,125,.16), inset 0 1px 0 rgba(255,255,255,.85); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); animation: card-arrive .9s var(--ease) both; }
.opening__card::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(181,137,163,.15); border-radius: 27px 27px 27px 8px; pointer-events: none; }
.opening__stamp { width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto 18px; color: var(--rose-deep); font-size: 25px; background: rgba(255,255,255,.8); border: 1px solid rgba(178,131,152,.2); border-radius: 50%; box-shadow: 0 8px 25px rgba(170,114,139,.15); }
.eyebrow { margin: 0 0 12px; color: var(--rose-deep); font-size: .66rem; font-weight: 700; letter-spacing: .2em; line-height: 1.4; text-transform: uppercase; }
.opening__card h1 { margin: 0; color: var(--plum); font-family: var(--serif); font-size: clamp(2.45rem, 7vw, 4.1rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.04; }
.opening__line { max-width: 310px; margin: 19px auto 28px; color: #766676; font-family: var(--serif); font-size: clamp(1.1rem, 2.6vw, 1.35rem); line-height: 1.5; }
.button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 13px 23px; border: 0; border-radius: 999px; cursor: pointer; font-size: .86rem; font-weight: 650; letter-spacing: .01em; text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s ease, background .25s ease; }
.button:hover { transform: translateY(-3px); }
.button:active { transform: translateY(0) scale(.98); }
.button--primary { color: white; background: linear-gradient(115deg, #b6798d, #8c7296); box-shadow: 0 12px 27px rgba(143,103,135,.25); }
.button--primary:hover { box-shadow: 0 15px 36px rgba(143,103,135,.34); }
.button--light { color: var(--plum); background: rgba(255,255,255,.92); box-shadow: 0 9px 26px rgba(61,40,71,.13); }
.button--light:hover { background: white; box-shadow: 0 13px 32px rgba(61,40,71,.2); }
.opening__button { min-width: 212px; animation: button-pulse 3.2s ease-in-out 1.2s infinite; }
.button__arrow { font-size: 1.15rem; transition: transform .2s ease; }
.opening__button:hover .button__arrow { transform: translateX(4px); }
.opening__signature { margin: 23px 0 0; color: #9a8997; font-family: var(--hand); font-size: .78rem; transform: rotate(-2deg); }
.opening__corner { position: absolute; color: rgba(160,116,153,.58); font-size: clamp(2rem, 6vw, 4rem); animation: bob 5s ease-in-out infinite; }
.opening__corner--left { left: 8%; bottom: 11%; }
.opening__corner--right { right: 9%; top: 13%; animation-delay: -2.2s; }

.experience { opacity: 1; transition: opacity .6s ease; }
.experience[aria-hidden="true"] { pointer-events: none; }
.topbar { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; width: min(100% - 64px, 1200px); min-height: 88px; margin: 0 auto; border-bottom: 1px solid rgba(119,89,110,.09); }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--plum); text-decoration: none; }
.brand__mark { display: grid; width: 37px; height: 37px; place-items: center; color: var(--rose-deep); font-size: 22px; background: #f6e7ec; border-radius: 50% 50% 50% 12px; transform: rotate(-7deg); }
.brand__mark span { transform: rotate(7deg); }
.brand__words { display: grid; line-height: 1.2; }
.brand__small { color: #a08c9a; font-family: var(--hand); font-size: .65rem; transform: rotate(-1deg); }
.brand__words strong { margin-top: 3px; font-family: var(--serif); font-size: 1.18rem; font-weight: 500; }
.topbar__nav { display: flex; align-items: center; gap: clamp(17px, 2.5vw, 34px); }
.topbar__nav a, .topbar__date { color: #837483; font-size: .74rem; text-decoration: none; transition: color .2s ease; }
.topbar__nav a:hover { color: var(--rose-deep); }
.topbar__date { letter-spacing: .16em; text-transform: uppercase; }
.section-wrap { width: min(100% - 64px, 1100px); margin-inline: auto; }
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(350px, .95fr); align-items: center; gap: clamp(35px, 7vw, 100px); min-height: 665px; padding-top: 57px; padding-bottom: 112px; }
.hero__copy { position: relative; z-index: 1; max-width: 560px; padding-left: clamp(0px, 3vw, 38px); }
.eyebrow--line { display: flex; align-items: center; gap: 11px; }
.eyebrow--line::before { content: ""; width: 25px; height: 1px; background: currentColor; }
.hero__title { max-width: 560px; margin: 20px 0 9px; color: var(--plum); font-family: var(--serif); font-size: clamp(3.6rem, 7.7vw, 6.2rem); font-weight: 500; letter-spacing: -.065em; line-height: .94; }
.hero__date { margin: 0 0 23px; color: var(--rose-deep); font-family: var(--hand); font-size: 1.1rem; transform: rotate(-1.2deg); transform-origin: left; }
.hero__message { max-width: 390px; margin: 0; color: #736673; font-family: var(--serif); font-size: clamp(1.22rem, 2.1vw, 1.55rem); line-height: 1.55; }
.hero__signoff { margin: 18px 0 25px; color: #90798c; font-family: var(--hand); font-size: .95rem; }
.text-link { display: inline-flex; align-items: center; gap: 12px; padding-bottom: 5px; color: var(--rose-deep); border-bottom: 1px solid rgba(174,108,131,.35); font-size: .75rem; font-weight: 650; text-decoration: none; letter-spacing: .04em; transition: gap .2s ease; }
.text-link:hover { gap: 17px; }
.hero-art { position: relative; display: grid; min-height: 430px; place-items: center; isolation: isolate; }
.hero-art__orbit { position: absolute; z-index: -1; display: block; width: 370px; height: 370px; border: 1px solid rgba(191,151,178,.23); border-radius: 50%; }
.hero-art__orbit--one { transform: rotate(-27deg) scaleX(1.13); }
.hero-art__orbit--two { width: 320px; height: 390px; border-color: rgba(212,166,170,.24); transform: rotate(31deg) scaleX(1.12); }
.cake-card { position: relative; display: flex; width: min(100%, 350px); min-height: 370px; flex-direction: column; align-items: center; justify-content: center; padding: 27px 22px 23px; border: 1px solid rgba(255,255,255,.95); border-radius: 190px 190px 22px 22px; background: linear-gradient(155deg, rgba(255,255,255,.88), rgba(250,235,237,.83)); box-shadow: 0 30px 80px rgba(139,99,135,.13), inset 0 1px 0 white; transform: rotate(2deg); }
.cake-card::before { position: absolute; z-index: -1; inset: 9px; border: 1px solid rgba(185,146,169,.15); border-radius: inherit; content: ""; }
.cake-card__top { margin-top: 7px; color: #a88a9e; font-size: .6rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.cake-drawing { width: min(100%, 286px); margin-top: 7px; overflow: visible; }
.cake-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; }
.cake-line--plate { stroke: #c993a2; stroke-width: 3; }
.cake-line--cake { fill: #f1c7cf; stroke: #bc8293; }
.cake-line--icing { stroke: #fff9f4; stroke-width: 7; }
.cake-line--candle { stroke: #9181a1; stroke-width: 5; }
.cake-line--flower { fill: #f6d9d9; stroke: #cc9aa4; stroke-width: 2; }
.cake-flame { fill: #e8ba78; stroke: #d79c70; stroke-width: 1.5; transform-origin: 158px 80px; animation: candle-flicker 1.5s ease-in-out infinite alternate; }
.cake-card__note { margin-top: -7px; color: #856e88; font-family: var(--hand); font-size: 1.05rem; transform: rotate(-3deg); }
.hero-art__spark, .hero-art__petal { position: absolute; color: #b78ba8; animation: bob 5s ease-in-out infinite; }
.hero-art__spark--one { top: 14%; right: 12%; font-size: 29px; }
.hero-art__spark--two { top: 29%; left: 5%; color: #d6a78e; font-size: 24px; animation-delay: -1.6s; }
.hero-art__petal--one { top: 13%; left: 25%; font-size: 18px; color: #d198a7; }
.hero-art__petal--two { right: 2%; bottom: 17%; font-size: 19px; color: #d6a184; animation-delay: -2.5s; }
.hero-art__petal--three { left: 4%; bottom: 20%; font-size: 23px; color: #ab94bd; animation-delay: -1s; }
.hero__bottom-note { position: absolute; bottom: 40px; left: 50%; display: flex; align-items: center; gap: 10px; color: #ac9ba7; font-family: var(--hand); font-size: .76rem; transform: translateX(-50%); white-space: nowrap; }
.hero__bottom-note span:first-child { color: var(--rose-deep); }

.note-section { position: relative; padding-top: 109px; padding-bottom: 140px; }
.section-heading { position: relative; max-width: 600px; margin: 0 auto 43px; text-align: center; }
.section-heading h2 { margin: 0; color: var(--plum); font-family: var(--serif); font-size: clamp(2.35rem, 5vw, 3.8rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.12; }
.heading-flower { position: absolute; top: 3px; right: 3%; color: #d7a5af; font-size: 27px; transform: rotate(13deg); }
.letter-card { position: relative; width: min(100%, 740px); margin: 0 auto; padding: clamp(34px, 7vw, 68px) clamp(29px, 8vw, 86px) clamp(36px, 7vw, 66px); overflow: hidden; border: 1px solid rgba(181,146,159,.18); border-radius: 4px 24px 4px 23px; background: linear-gradient(146deg, rgba(255,255,255,.98), rgba(255,250,245,.98)); box-shadow: var(--shadow); transform: rotate(-.7deg); }
.letter-card::before { position: absolute; inset: 14px; border: 1px solid rgba(193,157,173,.16); content: ""; pointer-events: none; }
.letter-card__tape { position: absolute; top: 0; left: 50%; width: 126px; height: 24px; background: rgba(235,205,195,.6); transform: translate(-50%,-8px) rotate(-2deg); }
.letter-card__seal { position: absolute; top: 25px; right: 32px; display: grid; width: 39px; height: 39px; place-items: center; color: #a96e83; border: 1px solid rgba(169,110,131,.3); border-radius: 50%; font-size: 18px; }
.letter-card__to, .letter-card__signoff { position: relative; z-index: 1; color: #98738a; font-family: var(--hand); font-size: 1.12rem; }
.letter-card__to { margin: 0 0 17px; }
.letter-card__body { position: relative; z-index: 1; color: #695c68; font-family: var(--serif); font-size: clamp(1.05rem, 2.1vw, 1.27rem); line-height: 1.8; }
.letter-card__body p { margin: 0 0 18px; }
.letter-card__body p:last-child { margin-bottom: 0; }
.letter-card__signoff { margin: 25px 0 0; text-align: right; }
.letter-card__doodle { position: absolute; z-index: 1; color: rgba(191,139,158,.4); font-size: 26px; }
.letter-card__doodle--one { bottom: 23px; left: 29px; transform: rotate(-13deg); }
.letter-card__doodle--two { right: 44px; bottom: 66px; color: rgba(157,137,174,.5); }
.tiny-aside { margin: 25px auto 0; color: #a394a0; font-family: var(--hand); font-size: .76rem; text-align: center; }

.friendship-section { padding-top: 67px; padding-bottom: 142px; }
.section-heading--wide { display: flex; max-width: none; align-items: end; justify-content: space-between; gap: 38px; margin-bottom: 38px; text-align: left; }
.section-heading--wide h2 { max-width: 570px; }
.section-heading__aside { max-width: 255px; margin: 0 0 6px; color: #887985; font-family: var(--serif); font-size: 1.12rem; line-height: 1.55; }
.memory-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.memory-card { display: flex; min-height: 235px; flex-direction: column; align-items: flex-start; gap: 17px; padding: 26px 30px; border: 1px solid rgba(178,139,166,.16); border-radius: 18px 4px 18px 4px; background: linear-gradient(138deg, #fffdfb 0%, #f9eff1 100%); box-shadow: 0 11px 35px rgba(117,84,113,.075); transition: transform .35s var(--ease), box-shadow .35s ease; }
.memory-card:nth-child(2) { background: linear-gradient(138deg, #fffdfb 0%, #f3eef7 100%); }
.memory-card:nth-child(3) { background: linear-gradient(138deg, #fffdfb 0%, #fbf0e7 100%); }
.memory-card:nth-child(4) { background: linear-gradient(138deg, #fffdfb 0%, #eff3ec 100%); }
.memory-card:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(117,84,113,.12); }
.memory-card__index { color: #aa8c9e; font-size: .62rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.memory-card__prompt { max-width: 390px; margin: 0; color: var(--plum); font-family: var(--serif); font-size: clamp(1.4rem, 2.5vw, 1.9rem); line-height: 1.2; }
.memory-card__answer { margin: auto 0 0; color: #786878; font-family: var(--hand); font-size: clamp(1.06rem, 1.8vw, 1.27rem); line-height: 1.55; }

.kindness-section { position: relative; display: grid; width: min(100% - 64px, 1120px); min-height: 415px; place-items: center; margin: 0 auto 144px; padding: 69px 25px; overflow: hidden; border: 1px solid rgba(255,255,255,.4); border-radius: 130px 18px 130px 18px; background: radial-gradient(circle at 18% 15%, rgba(255,255,255,.2), transparent 34%), linear-gradient(120deg, #896f91, #a77d91 51%, #bc8d90); box-shadow: 0 28px 70px rgba(116,81,119,.2); color: #fff; }
.kindness-section::before, .kindness-section::after { position: absolute; width: 270px; height: 270px; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; content: ""; }
.kindness-section::before { top: -174px; left: -42px; }
.kindness-section::after { right: -122px; bottom: -190px; width: 390px; height: 390px; }
.kindness__inner { position: relative; z-index: 1; max-width: 650px; text-align: center; }
.kindness__inner .eyebrow { color: rgba(255,255,255,.78); }
.kindness__inner h2 { margin: 0; color: white; font-family: var(--serif); font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.13; }
.kindness__hint { margin: 10px 0 19px; color: rgba(255,255,255,.78); font-family: var(--hand); font-size: .9rem; }
.compliment-result { display: grid; min-height: 79px; place-items: center; padding: 11px 10px 18px; color: #fffaf4; font-family: var(--serif); font-size: clamp(1.25rem, 3vw, 1.82rem); line-height: 1.35; transition: opacity .2s ease, transform .2s ease; }
.compliment-result.is-changing { opacity: 0; transform: translateY(7px); }
.kindness__footnote { display: block; margin-top: 15px; color: rgba(255,255,255,.63); font-family: var(--hand); font-size: .72rem; }
.kindness-stamp { position: absolute; top: 30px; left: 48px; display: grid; width: 45px; height: 45px; place-items: center; color: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.4); border-radius: 50%; font-size: 22px; }
.kindness__spark { position: absolute; color: rgba(255,255,255,.65); }
.kindness__spark--one { top: 57px; right: 12%; font-size: 31px; }
.kindness__spark--two { right: 18%; bottom: 53px; font-size: 34px; }

.wishes-section { padding-top: 30px; padding-bottom: 138px; }
.section-heading--center { text-align: center; }
.section-heading__sub { margin: 12px 0 0; color: #8f818d; font-family: var(--serif); font-size: 1.05rem; }
.wishes-list { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; align-items: stretch; }
.wish-card { position: relative; display: flex; min-height: 158px; flex-direction: column; align-items: center; justify-content: center; padding: 23px 16px; border: 1px solid rgba(168,132,158,.15); border-radius: 50% 50% 20px 20px / 34% 34% 20px 20px; background: linear-gradient(160deg, #fff, #f8edf0); box-shadow: 0 11px 28px rgba(129,91,120,.06); text-align: center; transition: transform .35s var(--ease), box-shadow .35s ease; }
.wish-card:nth-child(3n+2) { background: linear-gradient(160deg, #fff, #f2edf6); border-radius: 20px 50% 20px 50%; }
.wish-card:nth-child(3n) { background: linear-gradient(160deg, #fff, #fbf1e9); }
.wish-card:hover { transform: translateY(-7px) rotate(-1deg); box-shadow: 0 18px 35px rgba(129,91,120,.12); }
.wish-card__icon { margin-bottom: 10px; color: #c2859a; font-size: 17px; }
.wish-card__text { color: #69596b; font-family: var(--serif); font-size: 1.15rem; line-height: 1.25; }

.game-section { padding-top: 31px; padding-bottom: 151px; }
.gift-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 19px; align-items: start; }
.gift-card { min-width: 0; text-align: center; }
.gift-button { position: relative; display: grid; width: 100%; min-height: 175px; place-items: center; padding: 20px 10px 14px; overflow: hidden; color: var(--plum); border: 1px solid rgba(171,130,159,.17); border-radius: 16px 4px 16px 4px; background: linear-gradient(145deg, #fff, #f6eaf0); box-shadow: 0 12px 28px rgba(116,84,114,.075); cursor: pointer; transition: transform .28s var(--ease), box-shadow .28s ease; }
.gift-card:nth-child(2) .gift-button { background: linear-gradient(145deg, #fff, #f1edf7); }
.gift-card:nth-child(3) .gift-button { background: linear-gradient(145deg, #fff, #fbefe5); }
.gift-card:nth-child(4) .gift-button { background: linear-gradient(145deg, #fff, #eef2e8); }
.gift-button:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 17px 32px rgba(116,84,114,.13); }
.gift-illustration { position: relative; display: block; width: 82px; height: 70px; margin-bottom: 11px; transition: transform .5s cubic-bezier(.18,.7,.2,1.2); }
.gift-illustration__box { position: absolute; left: 9px; bottom: 2px; width: 64px; height: 43px; border: 2px solid rgba(150,102,127,.48); border-radius: 5px 5px 9px 9px; background: rgba(226,165,183,.54); }
.gift-illustration__lid { position: absolute; z-index: 1; left: 4px; bottom: 42px; width: 74px; height: 13px; border: 2px solid rgba(150,102,127,.52); border-radius: 5px; background: #d9a4b3; transform-origin: 8px 12px; transition: transform .55s cubic-bezier(.18,.7,.2,1.2), bottom .55s ease; }
.gift-illustration__ribbon { position: absolute; z-index: 2; left: 36px; bottom: 2px; width: 10px; height: 53px; background: rgba(255,255,255,.75); }
.gift-illustration__bow { position: absolute; z-index: 2; top: 1px; left: 25px; color: #936f91; font-size: 25px; transform: rotate(-8deg); }
.gift-card.is-open .gift-illustration { transform: translateY(-5px); }
.gift-card.is-open .gift-illustration__lid { bottom: 58px; transform: rotate(-24deg) translateY(-4px); }
.gift-card.is-open .gift-illustration__bow { transform: rotate(-23deg) translate(-6px,-7px); }
.gift-button__label { color: #7d6c7d; font-size: .72rem; font-weight: 650; letter-spacing: .03em; }
.gift-message { display: block; min-height: 60px; margin: 14px 3px 0; color: #806d80; font-family: var(--serif); font-size: 1.05rem; line-height: 1.35; animation: reveal-up .45s var(--ease) both; }
.gift-message[hidden] { display: none; }
.game-caption { margin: 22px 0 0; color: #a08e9c; font-family: var(--hand); font-size: .77rem; text-align: center; }

.gallery-section { padding-top: 40px; padding-bottom: 154px; }
.polaroid-gallery { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(14px, 2.3vw, 28px); align-items: start; padding: 17px 3px 15px; }
.polaroid { position: relative; padding: 10px 10px 16px; border: 1px solid rgba(142,111,131,.1); background: #fffefa; box-shadow: 0 15px 32px rgba(93,68,91,.12); transform: rotate(var(--rotation, 0deg)); transition: transform .38s var(--ease), box-shadow .38s ease; }
.polaroid:nth-child(even) { margin-top: 35px; }
.polaroid:hover { z-index: 2; box-shadow: 0 23px 43px rgba(93,68,91,.2); transform: translateY(-8px) rotate(0deg) scale(1.025); }
.polaroid__photo { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: #f0e7ec; }
.polaroid__caption { display: block; min-height: 46px; padding: 12px 2px 0; color: #776678; font-family: var(--hand); font-size: clamp(.67rem, 1.2vw, .82rem); line-height: 1.4; text-align: center; }
.gallery-footnote { margin: 18px 0 0; color: #a08f9a; font-family: var(--hand); font-size: .76rem; text-align: center; }

.secret-section { padding-top: 0; padding-bottom: 144px; }
.secret-card { position: relative; display: flex; min-height: 370px; flex-direction: column; align-items: center; justify-content: center; padding: 54px 25px; overflow: hidden; border: 1px solid rgba(255,255,255,.93); border-radius: 13px 88px 13px 88px; background: radial-gradient(ellipse at 48% 110%, rgba(228,198,212,.45), transparent 43%), linear-gradient(140deg, #f1eaf4, #fbf0ed 60%, #fff7ef); box-shadow: var(--shadow); text-align: center; }
.secret-card::before { position: absolute; inset: 12px; border: 1px solid rgba(162,132,163,.18); border-radius: 7px 78px 7px 78px; content: ""; pointer-events: none; }
.secret-card__moon { position: absolute; top: 27px; right: 10%; color: #a190b0; font-size: 37px; transform: rotate(-28deg); }
.secret-card h2 { margin: 0 0 9px; color: var(--plum); font-family: var(--serif); font-size: clamp(2.1rem, 5vw, 3.7rem); font-weight: 500; }
.secret-card__hint { margin: 0 0 22px; color: #897a89; font-family: var(--hand); font-size: .9rem; }
.secret-card__star { position: absolute; color: #b28cab; }
.secret-card__star--one { left: 11%; bottom: 20%; font-size: 27px; }
.secret-card__star--two { right: 16%; bottom: 17%; color: #cf9e8e; font-size: 21px; }

.finale { position: relative; display: grid; min-height: 720px; place-items: center; padding: 110px 25px 125px; overflow: hidden; color: #fff; background: radial-gradient(ellipse at 50% 110%, rgba(197,143,165,.48), transparent 52%), radial-gradient(ellipse at 6% 4%, rgba(160,139,182,.5), transparent 38%), linear-gradient(145deg, #493b59 0%, #66516d 47%, #775968 100%); }
.finale::before { position: absolute; inset: 15px; border: 1px solid rgba(255,255,255,.15); border-radius: 3px 100px 3px 100px; content: ""; pointer-events: none; }
.finale__confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.finale__content { position: relative; z-index: 2; max-width: 900px; text-align: center; }
.eyebrow--light { color: rgba(255,255,255,.65); }
.finale__content h2 { max-width: 900px; margin: 15px 0 10px; color: #fff8f4; font-family: var(--serif); font-size: clamp(3rem, 8.7vw, 7.1rem); font-weight: 500; letter-spacing: -.065em; line-height: .98; text-shadow: 0 5px 35px rgba(28,19,36,.16); }
.finale__date { margin: 14px 0 20px; color: #f0c8d1; font-family: var(--hand); font-size: 1.17rem; letter-spacing: .2em; }
.finale__rule { display: flex; align-items: center; justify-content: center; gap: 11px; width: 172px; margin: 22px auto; color: #e4b5c2; }
.finale__rule::before, .finale__rule::after { flex: 1; height: 1px; background: rgba(255,255,255,.25); content: ""; }
.finale__rule i { font-size: .84rem; font-style: normal; }
.finale__credit { margin: 0 0 28px; color: rgba(255,255,255,.86); font-family: var(--hand); font-size: 1.08rem; }
.finale__replay { min-width: 205px; }
.finale__footer { margin: 38px 0 0; color: rgba(255,255,255,.52); font-size: .7rem; letter-spacing: .06em; }
.hero__confetti { position: absolute; z-index: 3; inset: 0; overflow: hidden; pointer-events: none; }
.confetti-piece { position: absolute; top: -22px; display: block; width: var(--w, 7px); height: var(--h, 11px); border-radius: 2px; background: var(--color, #f3c5d2); opacity: .92; animation: confetti-fall var(--duration, 3.6s) cubic-bezier(.23,.61,.35,1) var(--delay, 0s) forwards; }
.confetti-piece--spark { width: auto; height: auto; color: var(--color, #f3c5d2); background: transparent; font-size: 15px; }
.finale__balloons { position: absolute; right: 11%; bottom: 14%; display: flex; gap: 10px; transform: rotate(-12deg); }
.finale__balloons span { position: relative; display: grid; width: 54px; height: 71px; place-items: center; color: rgba(255,255,255,.88); border: 1px solid rgba(255,255,255,.45); border-radius: 52% 48% 48% 52%; background: linear-gradient(140deg, rgba(255,255,255,.19), rgba(242,194,211,.24)); box-shadow: inset -8px -7px 15px rgba(43,30,53,.09); font-size: 23px; animation: balloon-sway 4s ease-in-out infinite alternate; }
.finale__balloons span::after { position: absolute; top: 100%; left: 50%; width: 1px; height: 87px; background: rgba(255,255,255,.33); content: ""; }
.finale__balloons span:nth-child(2) { margin-top: 26px; background: linear-gradient(140deg, rgba(246,213,185,.32), rgba(255,255,255,.1)); animation-delay: -.9s; }
.finale__balloons span:nth-child(3) { margin-top: -8px; animation-delay: -1.7s; }
.finale__balloons span:nth-child(4) { margin-top: 21px; background: linear-gradient(140deg, rgba(201,190,230,.38), rgba(255,255,255,.1)); animation-delay: -2.4s; }
.firework { position: absolute; z-index: 1; display: grid; width: 115px; height: 115px; place-items: center; color: rgba(250,216,207,.84); border: 1px dotted rgba(255,255,255,.3); border-radius: 50%; font-size: 28px; animation: firework 3.8s ease-out infinite; }
.firework--one { top: 16%; left: 11%; }
.firework--two { top: 13%; right: 17%; color: rgba(233,209,243,.8); animation-delay: -1.9s; }
.site-footer { display: flex; width: min(100% - 64px, 1100px); justify-content: space-between; gap: 20px; margin: 0 auto; padding: 23px 0 26px; color: #9a8e98; font-size: .68rem; }
.site-footer a { color: #a87d91; text-decoration: none; }

.music-dock { position: fixed; z-index: 30; right: 23px; bottom: 22px; display: flex; align-items: center; gap: 11px; padding: 8px 12px 8px 8px; border: 1px solid rgba(255,255,255,.8); border-radius: 999px; background: rgba(255,253,252,.85); box-shadow: 0 8px 28px rgba(86,63,89,.16); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: opacity .25s ease, transform .25s ease; }
.intro-active .music-dock { opacity: 0; pointer-events: none; transform: translateY(9px); }
.music-dock__toggle { display: inline-flex; align-items: center; gap: 8px; padding: 0; color: #705a73; border: 0; background: transparent; cursor: pointer; font-size: .7rem; font-weight: 650; }
.music-dock__icon { display: grid; width: 29px; height: 29px; place-items: center; color: white; border-radius: 50%; background: #9d7b9c; font-size: 15px; }
.music-dock.is-playing .music-dock__icon { animation: music-pulse 1.5s ease-in-out infinite; }
.music-dock__volume { display: flex; align-items: center; }
.music-dock__volume input { width: 62px; height: 4px; accent-color: #aa7c91; cursor: pointer; }

.secret-modal[hidden] { display: none; }
.secret-modal { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; padding: 24px; }
.secret-modal__backdrop { position: absolute; inset: 0; background: rgba(49,37,58,.68); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); animation: fade-in .35s ease both; }
.secret-modal__paper { position: relative; width: min(100%, 670px); max-height: min(86vh, 850px); padding: clamp(34px, 7vw, 65px) clamp(27px, 8vw, 76px); overflow: auto; border: 1px solid rgba(255,255,255,.9); border-radius: 5px 32px 5px 32px; background: radial-gradient(ellipse at 100% 0%, #f3e8f2, transparent 40%), linear-gradient(145deg, #fffefa, #fff6f2); box-shadow: 0 28px 100px rgba(32,22,38,.3); animation: letter-arrive .6s var(--ease) both; }
.secret-modal__paper::before { position: absolute; inset: 12px; border: 1px solid rgba(183,144,167,.18); content: ""; pointer-events: none; }
.secret-modal__close { position: absolute; z-index: 2; top: 13px; right: 19px; width: 40px; height: 40px; color: #806d81; border: 0; border-radius: 50%; background: rgba(255,255,255,.8); cursor: pointer; font-size: 1.7rem; line-height: 1; }
.secret-modal__stamp { display: grid; width: 42px; height: 42px; place-items: center; margin: 0 0 20px; color: #a96f84; border: 1px solid rgba(169,111,132,.3); border-radius: 50%; font-size: 20px; }
.secret-modal__paper h2 { margin: 0 0 18px; color: var(--plum); font-family: var(--serif); font-size: clamp(2.1rem, 5vw, 3.25rem); font-weight: 500; }
.secret-modal__body { color: #6b5e6a; font-family: var(--serif); font-size: clamp(1.05rem, 2vw, 1.2rem); line-height: 1.75; }
.secret-modal__body p { margin: 0 0 14px; }
.secret-modal__signoff { margin: 23px 0 0; color: #9c7188; font-family: var(--hand); text-align: right; }
.secret-modal__doodle { position: absolute; bottom: 19px; left: 24px; color: rgba(183,130,156,.5); font-size: 25px; transform: rotate(-12deg); }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.wish-card.reveal, .gift-card.reveal, .polaroid.reveal, .memory-card.reveal { transition-delay: var(--delay, 0ms); }

@keyframes wash-breathe { to { transform: scale(1.04) rotate(1.2deg); } }
@keyframes drift { 0% { transform: translate3d(0,0,0) rotate(-8deg); opacity: .4; } 100% { transform: translate3d(10px,-19px,0) rotate(13deg); opacity: .95; } }
@keyframes card-arrive { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes button-pulse { 0%,100% { box-shadow: 0 12px 27px rgba(143,103,135,.25); } 50% { box-shadow: 0 12px 34px rgba(143,103,135,.38), 0 0 0 8px rgba(255,255,255,.26); } }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-10px) rotate(6deg); } }
@keyframes candle-flicker { from { transform: rotate(-4deg) scale(.97); opacity: .86; } to { transform: rotate(4deg) scale(1.05); opacity: 1; } }
@keyframes reveal-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes confetti-fall { 0% { transform: translate3d(0,-8vh,0) rotate(0deg); opacity: 0; } 9% { opacity: .95; } 100% { transform: translate3d(var(--drift, 20px),110vh,0) rotate(var(--spin, 680deg)); opacity: 0; } }
@keyframes balloon-sway { from { transform: rotate(-7deg) translateY(1px); } to { transform: rotate(7deg) translateY(-9px); } }
@keyframes firework { 0% { opacity: 0; transform: scale(.35); box-shadow: 0 0 0 0 rgba(255,255,255,0); } 23% { opacity: .8; transform: scale(1); box-shadow: 0 0 0 14px rgba(255,255,255,.07), 0 0 0 35px rgba(255,255,255,.035); } 55%,100% { opacity: 0; transform: scale(1.2); box-shadow: 0 0 0 36px rgba(255,255,255,0), 0 0 0 72px rgba(255,255,255,0); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes letter-arrive { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes music-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(157,123,156,.38); } 50% { box-shadow: 0 0 0 7px rgba(157,123,156,0); } }

@media (max-width: 900px) {
  .topbar { width: min(100% - 42px, 760px); }
  .section-wrap { width: min(100% - 42px, 760px); }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(280px, .85fr); gap: 20px; min-height: 610px; }
  .hero-art { min-height: 365px; }
  .cake-card { width: min(100%, 300px); min-height: 330px; }
  .hero-art__orbit { width: 310px; height: 310px; }
  .hero-art__orbit--two { width: 272px; height: 332px; }
  .wishes-list { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .polaroid-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px 28px; padding-inline: 20px; }
  .polaroid { max-width: 290px; justify-self: center; }
  .polaroid:nth-child(even) { margin-top: 26px; }
  .polaroid__caption { font-size: .83rem; }
  .gift-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 17px; }
  .gift-button { min-height: 157px; }
}
@media (max-width: 680px) {
  body { font-size: 15px; }
  html { scroll-padding-top: 66px; }
  .topbar { width: calc(100% - 34px); min-height: 69px; }
  .brand__mark { width: 33px; height: 33px; font-size: 20px; }
  .brand__words strong { font-size: 1.03rem; }
  .topbar__nav { display: none; }
  .topbar__date { font-size: .59rem; letter-spacing: .12em; }
  .section-wrap { width: calc(100% - 38px); }
  .hero { display: flex; min-height: auto; flex-direction: column; align-items: stretch; gap: 11px; padding-top: 71px; padding-bottom: 99px; }
  .hero__copy { padding: 0 4px; }
  .hero__title { max-width: 500px; margin-top: 17px; font-size: clamp(3.6rem, 15vw, 5.3rem); }
  .hero__message { max-width: 440px; }
  .hero-art { min-height: 360px; margin: 3px 0 0; }
  .cake-card { width: min(76vw, 292px); min-height: 315px; }
  .hero-art__orbit { width: min(78vw, 320px); height: min(78vw, 320px); }
  .hero-art__orbit--two { width: min(68vw, 280px); height: min(90vw, 348px); }
  .hero__bottom-note { bottom: 37px; width: 100%; justify-content: center; font-size: .7rem; }
  .note-section { padding-top: 72px; padding-bottom: 88px; }
  .section-heading { margin-bottom: 30px; }
  .section-heading h2 { font-size: clamp(2.3rem, 10vw, 3.2rem); }
  .heading-flower { right: 0; font-size: 20px; }
  .letter-card { padding: 43px 27px 37px; transform: rotate(-.3deg); }
  .letter-card::before { inset: 9px; }
  .letter-card__seal { top: 23px; right: 24px; width: 33px; height: 33px; font-size: 15px; }
  .letter-card__body { font-size: 1.08rem; line-height: 1.72; }
  .letter-card__doodle--one { bottom: 13px; left: 19px; }
  .letter-card__doodle--two { right: 29px; bottom: 53px; }
  .friendship-section { padding-top: 40px; padding-bottom: 91px; }
  .section-heading--wide { display: block; margin-bottom: 27px; }
  .section-heading__aside { max-width: 460px; margin: 13px 0 0; font-size: 1rem; }
  .memory-grid { grid-template-columns: 1fr; gap: 13px; }
  .memory-card { min-height: 190px; gap: 13px; padding: 23px; }
  .memory-card__prompt { font-size: 1.48rem; }
  .memory-card__answer { font-size: 1.06rem; }
  .kindness-section { width: calc(100% - 30px); min-height: 390px; margin-bottom: 91px; padding: 64px 22px; border-radius: 80px 14px 80px 14px; }
  .kindness-stamp { top: 18px; left: 22px; width: 37px; height: 37px; font-size: 18px; }
  .kindness__inner h2 { font-size: clamp(2.15rem, 9vw, 3rem); }
  .kindness__spark--one { top: 30px; right: 13%; font-size: 23px; }
  .kindness__spark--two { right: 7%; bottom: 33px; font-size: 26px; }
  .wishes-section { padding-bottom: 91px; }
  .wishes-list { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; }
  .wish-card { min-height: 133px; padding: 19px 12px; }
  .wish-card__text { font-size: 1.05rem; }
  .game-section { padding-bottom: 94px; }
  .gift-grid { gap: 12px; }
  .gift-button { min-height: 145px; padding-inline: 8px; }
  .gift-message { font-size: .98rem; }
  .gallery-section { padding-top: 7px; padding-bottom: 95px; }
  .polaroid-gallery { gap: 13px; padding-inline: 2px; }
  .polaroid { padding: 7px 7px 12px; }
  .polaroid:nth-child(even) { margin-top: 20px; }
  .polaroid__caption { min-height: 45px; padding-top: 9px; font-size: .68rem; }
  .secret-section { padding-bottom: 91px; }
  .secret-card { min-height: 340px; padding: 52px 24px; border-radius: 12px 56px 12px 56px; }
  .secret-card::before { inset: 9px; border-radius: 6px 47px 6px 47px; }
  .secret-card__moon { top: 22px; right: 9%; font-size: 29px; }
  .finale { min-height: 650px; padding: 95px 22px 116px; }
  .finale::before { inset: 9px; border-radius: 3px 58px 3px 58px; }
  .finale__content h2 { font-size: clamp(3rem, 13.5vw, 5.3rem); }
  .finale__balloons { right: 4%; bottom: 9%; transform: scale(.7) rotate(-12deg); transform-origin: bottom right; }
  .firework { width: 75px; height: 75px; }
  .firework--one { top: 12%; left: 6%; }
  .firework--two { top: 9%; right: 8%; }
  .site-footer { width: calc(100% - 38px); padding-bottom: 77px; font-size: .62rem; }
  .music-dock { right: 50%; bottom: 11px; transform: translateX(50%); }
  .music-dock:hover { transform: translateX(50%) translateY(-2px); }
  .secret-modal { padding: 14px; }
  .secret-modal__paper { max-height: 91vh; padding: 47px 27px 39px; }
}
@media (max-width: 380px) {
  .opening__card { padding-inline: 23px; }
  .topbar__date { max-width: 89px; text-align: right; }
  .hero__title { font-size: 3.3rem; }
  .wishes-list { gap: 8px; }
  .wish-card { min-height: 120px; }
  .wish-card__text { font-size: .98rem; }
  .polaroid-gallery { gap: 9px; }
  .polaroid { padding: 6px 6px 10px; }
  .polaroid__caption { font-size: .62rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}