@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap');

:root {
  color-scheme: light;
  --cream: #fff8f0;
  --paper: #fffefb;
  --blush: #fce5df;
  --ink: #49352f;
  --muted: #9a7770;
  --berry: #d85c61;
  --berry-deep: #b7434b;
  --cocoa: #795448;
  --honey: #f1c77b;
  --paper-line: #f0ded2;
  --muted-soft: #b3968d;
  --muted-deep: #80665f;
  --muted-line: #d8bdb2;
  --blush-line: #e8c8bd;
  --blush-rose: #e5a08f;
  --blush-surface: #f9eae3;
  --blush-glow: #fff0e9;
  --blush-core: #f9ddd4;
  --blush-deep: #f7d4cb;
  --bear-coat: #f7f0e7;
  --bear-inner: #eac9bd;
  --bear-eye: #513b34;
  --bear-cocoa: #a97860;
  --bear-shadow: #765043;
  --bear-muzzle: #d7ad92;
  --bear-rosy: #d98c7f;
  --bear-blush: #e9a39b;
  --bear-pink: #eaa39b;
  --bear-light: #fffaf3;
  --bear-caramel: #b9886d;
  --bear-ground: #bd8272;
  --cake-cherry-dark: #bb4c53;
  --cake-cherry: #e56b68;
  --cake-leaf: #72865a;
  --cake-top: #fff9f3;
  --cake-crust: #d98172;
  --cake-fill: #efb8a3;
  --cake-sugar: #fff8ee;
  --cake-icing: #f5ddd1;
  --cake-edge: #efcec0;
  --cake-rose: #e7a49a;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --radius-sm: 12px;
  --radius-panel: 24px;
  --radius-pill: 999px;
  --shadow-paper: 0 22px 60px rgba(121, 84, 72, .09), 0 3px 12px rgba(121, 84, 72, .045);
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', 'Trebuchet MS', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; overflow-x: clip; background: var(--cream); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
button, a { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--honey); outline-offset: 4px; }
::selection { color: var(--paper); background: var(--berry); }

.site-header { height: 88px; max-width: 1160px; margin: 0 auto; padding: 0 var(--space-6); display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--ink); text-decoration: none; font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -.035em; }
.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; background: var(--blush); border-radius: 50%; }
.brand-mark svg { width: 19px; fill: var(--berry); }
.site-header nav { display: flex; gap: var(--space-8); align-items: center; }
.site-header nav a { color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 600; transition: color 160ms ease-out; }
.site-header nav a:hover { color: var(--berry-deep); }
.nav-cta { border: 0; border-radius: var(--radius-pill); background: var(--paper); color: var(--ink); padding: 10px 16px; box-shadow: 0 2px 12px rgba(121,84,72,.07); font-size: 13px; font-weight: 700; cursor: pointer; transition: transform 160ms ease-out, background 160ms ease-out; }
.nav-cta:hover { transform: translateY(-2px); background: white; }
.nav-cta span { padding-left: var(--space-1); color: var(--berry); }

.section-wrap { width: min(100% - 48px, 1160px); margin-inline: auto; }
.hero { min-height: max(660px, min(760px, calc(100svh - 88px))); display: grid; grid-template-columns: .91fr 1.09fr; align-items: center; position: relative; padding-top: var(--space-8); padding-bottom: var(--space-20); }
.hero-copy { padding: 0 0 var(--space-8) 5.5%; position: relative; z-index: 1; animation: rise-in 650ms cubic-bezier(.2,.7,.25,1) both; }
.eyebrow { margin: 0 0 var(--space-4); color: var(--berry-deep); font-size: 12px; line-height: 1.4; letter-spacing: .12em; font-weight: 700; text-transform: uppercase; }
.eyebrow-dot { display: inline-block; width: 7px; height: 7px; margin-right: var(--space-2); border-radius: 50%; background: var(--berry); vertical-align: 1px; box-shadow: 0 0 0 4px rgba(216,92,97,.1); }
h1, h2, p { margin-top: 0; }
h1, h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.055em; }
.hero h1 { margin: 0; font-size: clamp(48px, 6.3vw, 82px); line-height: .99; }
h1 em, h2 em { color: var(--berry); font-weight: 600; }
.hero-intro { max-width: 440px; margin: var(--space-6) 0 var(--space-8); color: var(--muted); font-size: 17px; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border-radius: var(--radius-pill); padding: 0 var(--space-5); border: 1px solid transparent; cursor: pointer; text-decoration: none; font-size: 13px; font-weight: 700; transition: transform 160ms ease-out, box-shadow 160ms ease-out, background 160ms ease-out, color 160ms ease-out; }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(1px) scale(.98); }
.button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.button-primary { color: white; background: var(--berry); box-shadow: 0 8px 20px rgba(216,92,97,.2); }
.button-primary:hover { background: var(--berry-deep); box-shadow: 0 12px 24px rgba(216,92,97,.26); }
.button-quiet { min-height: 46px; padding-inline: var(--space-3); background: transparent; color: var(--cocoa); }
.button-quiet:hover { background: rgba(255,255,255,.7); }
.button-quiet svg { width: 17px; fill: none; stroke: var(--berry); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hug-count { min-width: 21px; height: 21px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--blush); color: var(--berry-deep); font-size: 11px; }
.tiny-note { margin: var(--space-5) 0 0; color: var(--muted-soft); font-size: 11px; letter-spacing: .025em; }
.tiny-sparkle { padding-right: var(--space-1); color: var(--honey); }

.hero-art { min-width: 0; min-height: 500px; position: relative; display: grid; place-items: center; animation: rise-in 800ms 100ms cubic-bezier(.2,.7,.25,1) both; }
.art-sun { width: min(76%, 430px); aspect-ratio: 1; position: absolute; border-radius: 48% 52% 56% 44% / 49% 43% 57% 51%; background: radial-gradient(circle at 40% 35%, var(--blush-glow) 0, var(--blush-core) 65%, var(--blush-deep) 100%); transform: rotate(-8deg); }
.orbit { position: absolute; width: min(95%, 520px); aspect-ratio: 1; border: 1px dashed rgba(183,67,75,.16); border-radius: 50%; transform: rotate(-20deg) scaleY(.72); }
.orbit-two { width: min(82%, 455px); transform: rotate(43deg) scaleY(.77); border-color: rgba(241,199,123,.55); }
.bear-couple { width: min(100%, 560px); position: relative; z-index: 1; overflow: visible; filter: drop-shadow(0 12px 12px rgba(121,84,72,.08)); }
.bear-white, .bear-brown { transform-box: fill-box; transform-origin: center bottom; animation: bear-bob 4.5s ease-in-out infinite; }
.bear-brown { animation-delay: -1.2s; }
.floating-heart { width: 27px; position: absolute; z-index: 2; animation: float 4s ease-in-out infinite; }
.floating-heart svg { width: 100%; fill: var(--berry); }
.heart-one { top: 12%; right: 20%; transform: rotate(11deg); }
.heart-two { top: 31%; left: 10%; width: 18px; opacity: .6; animation-delay: -2s; }
.sparkle { position: absolute; z-index: 2; color: var(--honey); font-size: 25px; animation: sparkle 3.5s ease-in-out infinite; }
.sparkle-one { top: 16%; left: 23%; }
.sparkle-two { right: 10%; bottom: 30%; font-size: 18px; animation-delay: -1.6s; }
.art-note { position: absolute; z-index: 2; right: 4%; bottom: 15%; display: inline-flex; align-items: center; gap: 4px; padding: 9px 14px; border: 1px solid rgba(240,222,210,.85); border-radius: var(--radius-pill); background: rgba(255,254,251,.84); box-shadow: 0 6px 22px rgba(121,84,72,.08); color: var(--muted); font-family: var(--font-display); font-size: 12px; font-style: italic; transform: rotate(-5deg); }
.art-note svg { width: 12px; fill: var(--berry); }
.art-note span { color: var(--berry); }
.character-message { position: absolute; z-index: 3; top: 13%; right: 2%; display: grid; gap: 2px; padding: 10px 16px; border: 0; border-radius: 18px 18px 4px 18px; background: var(--paper); box-shadow: var(--shadow-paper); color: var(--cocoa); text-align: left; cursor: pointer; font-family: var(--font-display); font-size: 13px; transition: transform 160ms ease-out; }
.character-message:hover { transform: translateY(-3px) rotate(1deg); }
.message-tap { color: var(--muted-soft); font: 600 9px var(--font-body); letter-spacing: .07em; text-transform: uppercase; }
.scroll-cue { position: absolute; bottom: 35px; left: 50%; display: flex; align-items: center; gap: 10px; color: var(--muted-soft); font-size: 10px; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; transform: translateX(-50%); }
.scroll-cue span { width: 17px; height: 27px; position: relative; border: 1px solid var(--muted-line); border-radius: 12px; }
.scroll-cue span::after { content: ''; width: 3px; height: 5px; position: absolute; top: 5px; left: 6px; border-radius: 4px; background: var(--berry); animation: scroll-dot 1.6s ease-in-out infinite; }

.letter-section { padding-top: var(--space-24); padding-bottom: 132px; }
.section-label { display: flex; align-items: center; gap: var(--space-3); color: var(--muted-soft); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.section-label span { color: var(--berry); }
.letter-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; align-items: center; padding: var(--space-12) 4% 0; }
.letter-heading h2, .wish-copy h2, .reasons-head h2, .final-note h2 { margin: 0; font-size: clamp(38px, 4.5vw, 60px); line-height: 1.08; }
.letter-heading .eyebrow { margin-top: var(--space-6); }
.keepsake { position: relative; }
.letter-preview { min-height: 330px; padding: 48px; border: 1px solid var(--paper-line); border-radius: var(--radius-panel); background: var(--paper); box-shadow: var(--shadow-paper); transform: rotate(1.2deg); }
.letter-stamp { width: 54px; height: 54px; position: absolute; top: 27px; right: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--blush); }
.letter-stamp svg { width: 28px; fill: none; stroke: var(--berry); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.handwritten { margin: 0 0 var(--space-4); color: var(--berry-deep); font-family: var(--font-display); font-size: 20px; font-style: italic; }
.letter-preview > p:not(.handwritten) { max-width: 420px; color: var(--muted); font-size: 14px; line-height: 1.85; }
.text-link { margin-top: var(--space-2); padding: 0; border: 0; background: transparent; color: var(--berry-deep); cursor: pointer; font-size: 12px; font-weight: 700; }
.text-link span { display: inline-block; padding-left: 3px; transition: transform 160ms ease-out; }
.text-link:hover span { transform: translate(2px,-2px); }
.letter-sign { position: absolute; right: 38px; bottom: 25px; color: var(--muted-soft); font-family: var(--font-display); font-size: 12px; font-style: italic; }

.wish-section { position: relative; overflow: hidden; background: var(--blush-surface); }
.wish-section::before, .wish-section::after { content: ''; width: 360px; aspect-ratio: 1; position: absolute; border: 1px solid rgba(216,92,97,.09); border-radius: 50%; }
.wish-section::before { top: -225px; right: -95px; }
.wish-section::after { bottom: -270px; left: -140px; width: 440px; }
.wish-inner { min-height: 560px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-12); padding-block: 88px; position: relative; z-index: 1; }
.wish-copy { padding-left: 5%; }
.wish-copy .eyebrow { margin-top: var(--space-10); }
.wish-copy > p:not(.eyebrow, .wish-feedback) { max-width: 390px; margin: var(--space-5) 0 var(--space-6); color: var(--muted); }
.button-outline { background: transparent; border-color: var(--blush-line); color: var(--cocoa); }
.button-outline:hover { border-color: var(--berry); background: var(--paper); }
.wish-feedback { min-height: 26px; margin: var(--space-4) 0 0; color: var(--berry-deep); font-family: var(--font-display); font-size: 15px; font-style: italic; }
.cake-scene { width: 370px; height: 335px; justify-self: center; position: relative; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 62px; }
.cake-plate { width: 320px; height: 28px; position: absolute; bottom: 45px; border: 1px solid var(--cake-edge); border-radius: 50%; background: var(--cake-top); box-shadow: 0 8px 16px rgba(121,84,72,.08); }
.cake-body { width: 230px; height: 112px; position: relative; z-index: 1; border-radius: 15px 15px 25px 25px; background: linear-gradient(180deg, var(--cake-crust) 0 25%, var(--cake-fill) 25% 35%, var(--cake-crust) 35% 100%); box-shadow: inset 0 -10px 0 rgba(121,84,72,.07), 0 13px 18px rgba(121,84,72,.12); }
.cake-top { width: 250px; height: 43px; position: absolute; z-index: 2; bottom: 151px; display: flex; align-items: center; justify-content: space-evenly; border-radius: 50%; background: var(--cake-sugar); box-shadow: inset 0 -5px 0 var(--cake-icing); }
.cake-top span { width: 9px; height: 9px; border-radius: 50%; background: var(--berry); }
.cake-top span:nth-child(2n) { background: var(--honey); }
.icing-drips { position: absolute; inset: 18px 10px auto; display: flex; justify-content: space-around; }
.icing-drips i { width: 14px; height: 24px; border-radius: 0 0 9px 9px; background: var(--cake-sugar); }
.icing-drips i:nth-child(2n) { height: 17px; }
.candles { position: absolute; z-index: 2; bottom: 170px; left: 50%; display: flex; gap: 41px; transform: translateX(-50%); }
.candle { width: 12px; height: 49px; position: relative; border-radius: 5px 5px 2px 2px; background: repeating-linear-gradient(135deg, var(--cake-sugar) 0 5px, var(--cake-rose) 5px 9px); }
.candle i { width: 13px; height: 18px; position: absolute; bottom: calc(100% + 4px); left: 0; border-radius: 70% 30% 65% 35%; background: var(--honey); box-shadow: 0 0 0 5px rgba(241,199,123,.15), 0 0 19px rgba(241,199,123,.42); transform: rotate(45deg); transform-origin: bottom center; animation: flame 850ms ease-in-out infinite alternate; }
.candle:nth-child(2) i { animation-delay: -300ms; }
.candle:nth-child(3) i { animation-delay: -600ms; }
.cake-cherry { width: 19px; height: 19px; position: absolute; z-index: 3; bottom: 182px; border: 4px solid var(--cake-cherry-dark); border-radius: 50%; background: var(--cake-cherry); box-shadow: inset -3px -3px 0 rgba(121,54,54,.14); }
.cake-cherry::before { content: ''; width: 14px; height: 13px; position: absolute; bottom: 10px; left: 7px; border-top: 2px solid var(--cake-leaf); border-radius: 50%; transform: rotate(-42deg); }
.cake-caption { position: absolute; bottom: 4px; color: var(--muted-soft); font-family: var(--font-display); font-size: 12px; font-style: italic; letter-spacing: .03em; }
.cake-spark { position: absolute; color: var(--honey); font-size: 25px; }
.cake-spark-a { top: 40px; left: 46px; }
.cake-spark-b { top: 84px; right: 24px; font-size: 18px; }
.cake-scene.blown .candle i { opacity: 0; transform: translateY(-10px) scale(.2); transition: opacity 200ms ease-out, transform 200ms ease-out; }
.cake-scene.blown .cake-body { animation: cake-wiggle 500ms ease-out; }

.reasons-section { padding-top: 124px; padding-bottom: 128px; }
.reasons-head { display: flex; justify-content: space-between; align-items: end; gap: var(--space-8); padding: var(--space-8) 0 var(--space-10); }
.reasons-head h2 { font-size: clamp(36px, 4.2vw, 54px); }
.reasons-head .button { flex: none; }
.reasons-list { border-top: 1px solid var(--paper-line); }
.reason-item { min-height: 92px; display: grid; grid-template-columns: 55px 42px 1fr auto; align-items: center; gap: var(--space-4); border-bottom: 1px solid var(--paper-line); transition: padding 200ms ease-out, background 200ms ease-out; }
.reason-item:hover { padding-inline: var(--space-3); background: rgba(255,255,255,.42); }
.reason-number, .reason-tail { color: var(--muted-soft); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.reason-mark { width: 32px; display: grid; place-items: center; color: var(--honey); font-size: 24px; }
.reason-mark svg { width: 22px; fill: var(--berry); }
.mark-flower { color: var(--blush-rose); }
.reason-item p { margin: 0; color: var(--cocoa); font-family: var(--font-display); font-size: 17px; }
.reason-extra { min-height: 27px; margin: var(--space-4) 0 0; color: var(--berry-deep); text-align: right; font-family: var(--font-display); font-size: 14px; font-style: italic; }

.final-note { padding-top: 32px; padding-bottom: 132px; text-align: center; }
.final-art { width: 155px; height: 140px; margin: 0 auto var(--space-5); display: grid; place-items: center; border-radius: 50%; background: var(--blush); }
.final-art svg { width: 150px; overflow: visible; }
.final-note .eyebrow { margin-bottom: var(--space-4); }
.final-note h2 { font-size: clamp(34px, 4.5vw, 58px); }
.final-copy { max-width: 560px; margin: var(--space-5) auto var(--space-6); color: var(--muted); font-size: 14px; }
.final-button { min-height: 47px; }
.final-signature { margin: var(--space-8) 0 0; color: var(--cocoa); font-family: var(--font-display); font-size: 14px; font-style: italic; }
.final-signature span { color: var(--berry); }
.site-footer { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 16px max(24px, calc((100% - 1112px) / 2)); border-top: 1px solid var(--paper-line); color: var(--muted-soft); font-size: 10px; letter-spacing: .04em; }
.footer-center { display: inline-flex; align-items: center; gap: 7px; color: var(--cocoa); font-family: var(--font-display); font-size: 12px; font-style: italic; }
.footer-center svg { width: 14px; fill: var(--berry); }

.love-dialog { width: min(600px, calc(100% - 32px)); max-height: min(88svh, 820px); overflow: auto; padding: 0; border: 0; border-radius: 26px; background: transparent; color: var(--ink); box-shadow: 0 30px 100px rgba(73,53,47,.24); }
.love-dialog::backdrop { background: rgba(73,53,47,.42); backdrop-filter: blur(5px); }
.dialog-paper { min-height: 500px; position: relative; padding: 58px 64px 48px; border: 1px solid var(--paper-line); border-radius: 26px; background: var(--paper); background-image: repeating-linear-gradient(transparent 0 38px, rgba(240,222,210,.34) 39px 40px); animation: dialog-in 260ms cubic-bezier(.2,.7,.25,1) both; }
.dialog-close { width: 38px; height: 38px; position: absolute; top: 18px; right: 18px; display: grid; place-items: center; border: 1px solid var(--paper-line); border-radius: 50%; background: var(--paper); color: var(--muted); cursor: pointer; transition: transform 160ms ease-out, color 160ms ease-out; }
.dialog-close svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.dialog-close:hover { color: var(--berry); transform: rotate(90deg); }
.dialog-seal { width: 45px; height: 45px; display: grid; place-items: center; margin-bottom: var(--space-5); border-radius: 50%; background: var(--blush); }
.dialog-seal svg { width: 23px; fill: var(--berry); }
.dialog-paper .eyebrow { margin-bottom: var(--space-2); }
.dialog-paper h2 { margin: 0 0 var(--space-6); font-size: 43px; line-height: 1.08; }
.dialog-body p { margin: 0 0 var(--space-4); color: var(--muted-deep); font-size: 14px; line-height: 1.85; }
.dialog-sign { margin: var(--space-6) 0 0; color: var(--berry-deep); font-family: var(--font-display); font-size: 16px; font-style: italic; }
.dialog-sign svg { width: 14px; vertical-align: -2px; fill: var(--berry); }
.heart-burst { position: fixed; z-index: 10; inset: 0; pointer-events: none; overflow: hidden; }
.burst-heart { width: 18px; height: 18px; position: absolute; fill: var(--berry); animation: burst-up 1.05s cubic-bezier(.2,.65,.25,1) forwards; }
.burst-heart:nth-child(3n) { fill: #eaa39b; }
.burst-heart:nth-child(3n + 1) { fill: var(--honey); }

@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bear-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(-.7deg); } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes sparkle { 0%, 100% { opacity: .58; transform: scale(.85) rotate(0); } 50% { opacity: 1; transform: scale(1.12) rotate(20deg); } }
@keyframes scroll-dot { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(10px); } }
@keyframes flame { from { transform: rotate(38deg) scale(.88); } to { transform: rotate(52deg) scale(1.05); } }
@keyframes cake-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-2deg); } 75% { transform: rotate(2deg); } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes burst-up { 0% { opacity: 0; transform: translate(0,0) scale(.3) rotate(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(var(--turn)); } }

@media (max-width: 900px) {
  .hero { grid-template-columns: .95fr 1.05fr; }
  .hero-copy { padding-left: 0; }
  .hero h1 { font-size: clamp(44px, 7vw, 68px); }
  .hero-art { min-height: 440px; }
  .letter-layout { gap: 5%; padding-inline: 0; }
  .letter-preview { padding: 40px 32px; }
  .wish-copy { padding-left: 0; }
  .cake-scene { transform: scale(.9); }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 68px; }
  .site-header { height: 72px; padding-inline: var(--space-5); }
  .site-header nav { gap: var(--space-3); }
  .site-header nav a { display: none; }
  .nav-cta { padding: 9px 13px; }
  .section-wrap { width: min(100% - 40px, 520px); }
  .hero { min-height: auto; grid-template-columns: 1fr; padding-top: 68px; padding-bottom: 90px; }
  .hero-copy { padding: 0; }
  .hero h1 { font-size: clamp(38px, 11vw, 46px); }
  .hero-intro { max-width: 450px; margin-top: var(--space-5); font-size: 15px; }
  .hero-art { min-width: 0; min-height: 380px; margin-top: var(--space-4); overflow: clip; }
  .bear-couple { width: min(100%, 440px); }
  .art-sun { width: min(80%, 355px); }
  .orbit { width: min(100%, 440px); }
  .orbit-two { width: min(88%, 390px); }
  .character-message { top: 2%; right: 0; }
  .heart-one { top: 4%; right: 21%; }
  .heart-two { top: 24%; left: 2%; }
  .art-note { right: 0; bottom: 10%; }
  .scroll-cue { bottom: 26px; }
  .letter-section { padding-top: 74px; padding-bottom: 88px; }
  .letter-layout { grid-template-columns: 1fr; gap: var(--space-8); padding-top: var(--space-8); }
  .letter-heading h2, .wish-copy h2, .reasons-head h2 { font-size: clamp(39px, 10vw, 52px); }
  .letter-heading .eyebrow { margin-top: var(--space-4); }
  .letter-preview { min-height: 310px; padding: 38px 28px 54px; transform: rotate(.5deg); }
  .letter-stamp { top: 18px; right: 18px; width: 44px; height: 44px; }
  .wish-inner { grid-template-columns: 1fr; gap: var(--space-4); padding-block: 72px 58px; }
  .wish-copy .eyebrow { margin-top: var(--space-6); }
  .cake-scene { width: 100%; max-width: 360px; justify-self: center; margin-top: 0; transform: scale(.86); transform-origin: center top; margin-bottom: -42px; }
  .reasons-section { padding-top: 82px; padding-bottom: 82px; }
  .reasons-head { align-items: start; flex-direction: column; gap: var(--space-5); padding: var(--space-6) 0 var(--space-8); }
  .reason-item { min-height: 88px; grid-template-columns: 30px 30px 1fr; gap: var(--space-2); padding-block: var(--space-3); }
  .reason-item p { font-size: 15px; line-height: 1.5; }
  .reason-tail { display: none; }
  .reason-number { font-size: 9px; }
  .reason-mark { width: 26px; font-size: 20px; }
  .final-note { padding-top: 16px; padding-bottom: 90px; }
  .final-note h2 { font-size: clamp(34px, 9vw, 48px); }
  .final-copy { font-size: 13px; }
  .site-footer { padding: 18px 20px; flex-wrap: wrap; justify-content: center; text-align: center; }
  .site-footer > span:first-child { display: none; }
  .site-footer > span:last-child { width: 100%; }
  .dialog-paper { min-height: auto; padding: 52px 28px 36px; }
  .dialog-paper h2 { font-size: 37px; }
  .dialog-body p { font-size: 13px; }
}
@media (max-width: 380px) {
  .hero-actions { align-items: stretch; flex-direction: column; }
  .button { width: 100%; }
  .hero-art { min-height: 320px; }
  .cake-scene { transform: scale(.76); margin-bottom: -72px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* Little Love Arcade */
.games-section{padding-top:105px;padding-bottom:110px}.games-intro{text-align:center;max-width:680px;margin:0 auto 42px}.games-intro h2{font-size:clamp(38px,5vw,64px);line-height:1.12;letter-spacing:-.045em;margin:14px 0}.games-intro h2 em{color:#e66b9d}.games-intro>p:last-child{line-height:1.8;color:#816578}.games-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.game-card{background:#fffafc;border:2px solid #f7d4e3;border-radius:30px;padding:28px;box-shadow:0 12px 32px #d885a21a;text-align:center;min-width:0;transition:transform .2s}.game-card:hover{transform:translateY(-3px)}.game-sticker{font-size:43px;display:block;filter:drop-shadow(0 5px 4px #f4b9ce);animation:game-bob 3s ease-in-out infinite}.game-card h3{font-size:25px;color:#a34470;margin:12px 0 5px}.game-card>p{font-size:14px;color:#856d79;line-height:1.6}.game-btn{margin-top:15px;border:0;border-radius:999px;padding:13px 22px;background:#ee8db2;color:#fff;font:inherit;font-weight:700;cursor:pointer;box-shadow:0 5px 0 #d66d98;transition:transform .15s}.game-btn:hover{transform:translateY(-2px)}.game-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #d66d98}.game-btn:focus-visible,.heart-target:focus-visible,.memory-tile:focus-visible,.quiz-choice:focus-visible{outline:3px solid #a34470;outline-offset:3px}.game-status{min-height:24px;font-weight:700;color:#b64e7e!important}.catch-area{height:210px;position:relative;overflow:hidden;border:2px dashed #f3b8cf;border-radius:22px;background:radial-gradient(circle at 40% 25%,#fff 0%,#ffedf4 80%);margin:17px 0 10px}.catch-placeholder{position:absolute;inset:0;display:grid;place-items:center;color:#b97794;font-size:14px;padding:20px}.heart-target{position:absolute;border:0;background:none;font-size:32px;cursor:pointer;animation:heart-drop 3.8s linear forwards;touch-action:manipulation}.memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:17px auto;max-width:330px}.memory-tile{aspect-ratio:1;border:2px solid #f1bfd2;border-radius:14px;background:#fbdbe8;font-size:27px;cursor:pointer;transition:background .2s,transform .2s}.memory-tile.revealed,.memory-tile.matched{background:#fff}.memory-tile.matched{border-color:#d48db2}.quiz-panel{min-height:175px;margin-top:16px}.quiz-question{font-weight:700;color:#a34470;margin-bottom:13px}.quiz-choices{display:grid;gap:8px}.quiz-choice{border:1px solid #eeb8ce;border-radius:13px;background:#fff;padding:10px;color:#935675;font:inherit;cursor:pointer}.quiz-choice:hover{background:#ffe4ef}.hug-stage{height:150px;display:flex;align-items:center;justify-content:center;gap:20px;background:#fff0f6;border-radius:22px;margin:18px 0}.hug-bear{font-size:60px;transition:transform .35s}.hug-heart{font-size:30px;animation:game-bob 1.6s infinite}.hug-stage.hugging .hug-left{transform:translateX(22px) rotate(12deg)}.hug-stage.hugging .hug-right{transform:translateX(-22px) rotate(-12deg)}.game-reward{text-align:center;max-width:650px;margin:28px auto 0;padding:18px 25px;background:#ffe7f0;border:1px solid #f1bcd2;border-radius:22px;color:#a34470;font-weight:600;line-height:1.6}@keyframes heart-drop{from{transform:translateY(-50px) rotate(-15deg)}to{transform:translateY(260px) rotate(20deg)}}@keyframes game-bob{50%{transform:translateY(-7px)}}@media(max-width:720px){.games-grid{grid-template-columns:1fr}.games-section{padding-top:70px;padding-bottom:75px}.game-card{padding:22px}.games-intro h2{font-size:39px}.site-header nav a[href="#games"]{display:none}}@media(prefers-reduced-motion:reduce){.heart-target{animation-duration:8s}}

/* Interactive anniversary story */
.timeline-love{max-width:1050px;margin:5rem auto;padding:3.5rem 1.5rem;text-align:center;background:linear-gradient(155deg,#fff7fa,#ffe5ef);border:2px solid #ffd0e0;border-radius:32px;box-shadow:0 14px 45px #e99ab42a}
.timeline-love h2{font-size:clamp(2rem,5vw,3.2rem);color:#bb557f;margin:.5rem 0}.story-dates{color:#b45b81;font-weight:700}.story-intro{max-width:650px;margin:1.2rem auto 2rem;line-height:1.8}.story-envelopes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.story-envelope{border:2px solid #ffc1d7;border-radius:22px;background:#fff;color:#a94872;padding:1.3rem .6rem;display:flex;align-items:center;flex-direction:column;gap:.45rem;cursor:pointer;transition:transform .2s,background .2s;font:inherit}.story-envelope span{font-size:2.5rem}.story-envelope strong{font-size:.95rem}.story-envelope small{font-size:.75rem}.story-envelope:hover,.story-envelope:focus-visible{transform:translateY(-6px);background:#fff0f6}.story-envelope[aria-expanded="true"]{background:#ffe0ed;border-color:#e78eb3}.story-message{background:white;border:1px dashed #e5a2bd;border-radius:20px;max-width:700px;margin:1.7rem auto 0;padding:1.3rem;min-height:5rem;line-height:1.8;color:#934968}@media(max-width:650px){.story-envelopes{grid-template-columns:repeat(2,minmax(0,1fr))}.timeline-love{margin:3rem 1rem;padding:2rem 1rem}}

/* Responsive hardening: phones, tablets, and desktop */
html { scroll-padding-top: 20px; }
img, svg, video { max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
.game-card, .story-envelope, .letter-preview, .hero-copy { min-width: 0; }
.game-card, .story-message, .story-envelope { overflow-wrap: anywhere; }
@media (max-width: 1024px) {
  .games-grid { gap: 16px; }
  .game-card { padding: clamp(16px, 2.5vw, 28px); }
  .story-envelopes { gap: 12px; }
}
@media (max-width: 760px) {
  .games-grid { grid-template-columns: 1fr; }
  .games-section { padding-top: 64px; padding-bottom: 72px; }
  .games-intro h2 { font-size: clamp(30px, 8vw, 44px); }
  .game-card { width: 100%; box-sizing: border-box; }
  .game-btn, .quiz-choice, .story-envelope, .memory-tile { min-height: 44px; touch-action: manipulation; }
  .timeline-love { margin-inline: 12px; }
  .story-envelopes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-envelope { padding: 14px 8px; }
  .love-dialog { max-height: 90dvh; }
}
@media (max-width: 380px) {
  .games-section, .timeline-love { min-width: 0; }
  .game-card { padding: 16px 12px; border-radius: 20px; }
  .memory-grid { gap: 6px; }
  .memory-tile { font-size: 22px; }
  .hug-bear { font-size: 44px; }
  .hug-stage { gap: 10px; }
  .story-envelopes { gap: 8px; }
  .story-envelope strong { font-size: .82rem; }
  .story-envelope small { font-size: .7rem; }
  .story-envelope span { font-size: 2rem; }
}
@media (hover: none) {
  .game-card:hover, .story-envelope:hover, .game-btn:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .game-sticker, .hug-heart { animation: none; }
  .hug-bear, .game-card, .story-envelope { transition: none; }
}

/* Kawaii sticker hero art */
.bear-couple { height:auto; object-fit:contain; animation: sticker-float 4s ease-in-out infinite; }
@keyframes sticker-float { 0%,100% {transform:translateY(0)} 50% {transform:translateY(-9px)} }
@media (prefers-reduced-motion:reduce){.bear-couple{animation:none}}

/* Original Bubu & Dudu sticker assets supplied by site owner */
.bear-couple{width:min(100%,500px);border-radius:35%;filter:drop-shadow(0 16px 20px #dc8ca94d)}
.birthday-sticker{position:absolute;z-index:4;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 14px #c9719230);pointer-events:none}
.cake-scene:has(.birthday-sticker) .cake-plate,.cake-scene:has(.birthday-sticker) .cake-top,.cake-scene:has(.birthday-sticker) .cake-body,.cake-scene:has(.birthday-sticker) .candles,.cake-scene:has(.birthday-sticker) .cake-cherry{opacity:0;pointer-events:none}
.game-sticker-image{display:block;margin:0 auto;width:110px;height:90px;object-fit:contain;animation:game-bob 3s ease-in-out infinite}
.hug-sticker{height:135px;max-width:95%;object-fit:contain;transition:transform .35s ease;filter:drop-shadow(0 6px 8px #b8789a35)}
.hug-stage.hugging .hug-sticker{transform:scale(1.16) rotate(-4deg)}
.final-sticker{width:min(100%,240px);height:auto;object-fit:contain;filter:drop-shadow(0 10px 14px #d787a93a)}
@media(max-width:480px){.birthday-sticker{max-width:100%}.game-sticker-image{width:94px;height:78px}.hug-sticker{height:120px}}
@media(prefers-reduced-motion:reduce){.game-sticker-image{animation:none}.hug-sticker{transition:none}}