:root {
  --wine: #4b0f22;
  --wine-deep: #2a0713;
  --wine-soft: #6f1d35;
  --rose: #e1aaa5;
  --cream: #fff7ed;
  --cream-soft: #eadfd3;
  --line: rgba(255, 247, 237, 0.18);
  --glass: rgba(255, 255, 255, 0.065);
  --sans-cn: "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--wine); color: var(--cream); font-family: var(--sans-cn); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
main { min-height: 100vh; overflow: hidden; }

.nav { position: relative; z-index: 10; width: min(1240px, calc(100% - 80px)); height: 96px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { font: 600 1.7rem/1 Georgia, serif; letter-spacing: -.06em; }
.navLinks { display: flex; align-items: center; gap: 38px; font-size: .9rem; font-weight: 500; }
.navLinks a { color: var(--cream-soft); transition: color .25s ease, border-color .25s ease; }
.navLinks a:hover { color: #fff; }
.navContact { border: 1px solid rgba(255,247,237,.38); border-radius: 999px; padding: 11px 19px; }

.hero { width: min(1240px, calc(100% - 80px)); min-height: 700px; margin: 0 auto; display: grid; grid-template-columns: 1.18fr .82fr; align-items: center; gap: 72px; padding: 70px 0 94px; }
.heroCopy { position: relative; z-index: 2; animation: reveal .75s ease both; }
.eyebrow, .footerEyebrow { display: flex; align-items: center; gap: 11px; margin: 0 0 28px; color: var(--rose); font: 600 .75rem/1.4 var(--sans-cn); letter-spacing: .15em; text-transform: uppercase; }
.eyebrow span { width: 24px; height: 1px; background: var(--rose); }
h1, .section h2, footer h2 { font-family: var(--sans-cn); font-weight: 700; letter-spacing: -.055em; }
h1 { margin: 0; font-size: clamp(4rem, 7vw, 6.9rem); line-height: .98; }
h1 span { color: var(--rose); }
.lede { max-width: 650px; margin: 34px 0 0; color: var(--cream-soft); font-size: 1.08rem; line-height: 2; font-weight: 400; }
.heroActions { display: flex; align-items: center; gap: 28px; margin-top: 38px; }
.heroActions a { color: var(--cream-soft); font-size: .94rem; font-weight: 600; }
.heroActions .primaryAction { display: inline-flex; gap: 9px; border-radius: 999px; background: var(--cream); color: var(--wine-deep); padding: 15px 23px; transition: transform .25s ease, background .25s ease; }
.heroActions .primaryAction:hover { transform: translateY(-2px); background: #fff; }

.portraitCard { position: relative; aspect-ratio: .8; min-height: 500px; overflow: hidden; border: 1px solid var(--line); border-radius: 240px 240px 24px 24px; background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.025)); box-shadow: 0 35px 90px rgba(28,2,11,.28); animation: reveal .9s .1s ease both; }
.portraitCard::after { content: ""; pointer-events: none; position: absolute; inset: 22px; border: 1px solid rgba(255,247,237,.12); border-radius: inherit; }
.portraitImage { position: absolute; z-index: 2; width: 82%; height: 82%; left: 9%; top: 4%; object-fit: contain; filter: drop-shadow(0 28px 30px rgba(42,7,19,.42)); cursor: grab; touch-action: none; user-select: none; transition: filter .25s ease; }
.portraitImage:active { cursor: grabbing; filter: drop-shadow(0 34px 36px rgba(42,7,19,.52)); }
.portraitImage:focus-visible { outline: 2px solid var(--cream); outline-offset: 6px; border-radius: 50%; }
.orb { position: absolute; border-radius: 50%; filter: blur(2px); }
.orbOne { width: 340px; height: 340px; right: -80px; top: -25px; background: rgba(225,170,165,.2); }
.orbTwo { width: 290px; height: 290px; left: -90px; bottom: 45px; background: rgba(255,247,237,.08); }
.dragHint { position: absolute; z-index: 4; left: 50%; bottom: 30px; transform: translateX(-50%); white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; background: rgba(42,7,19,.7); backdrop-filter: blur(10px); padding: 9px 14px; color: var(--cream-soft); font-size: .74rem; letter-spacing: .04em; }
.dragHint span { color: var(--rose); margin-right: 5px; }

.section { width: min(1240px, calc(100% - 80px)); margin: 0 auto; padding: 116px 0; border-top: 1px solid var(--line); }
.sectionLabel { margin-bottom: 62px; color: var(--rose); font-size: .78rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.section h2, footer h2 { margin: 0; font-size: clamp(2.65rem, 4.5vw, 4.5rem); line-height: 1.12; }
.aboutGrid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 90px; }
.aboutText > p { margin: 4px 0 42px; color: var(--cream-soft); line-height: 2; font-size: 1.05rem; }
.identityCards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.identityCards article { display: flex; flex-direction: column; justify-content: space-between; min-height: 132px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--glass); }
.identityCards b { font-size: 1.08rem; }
.identityCards span { color: var(--cream-soft); font-size: .83rem; }

.lately { background: rgba(42,7,19,.12); }
.sectionIntro { display: grid; grid-template-columns: 1fr .7fr; align-items: end; gap: 100px; margin-bottom: 62px; }
.sectionIntro p, .wishCopy > p, .messageHeading > p { margin: 0; color: var(--cream-soft); line-height: 1.95; font-size: 1rem; }
.storyGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.storyCard { position: relative; min-height: 390px; overflow: hidden; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(150deg, rgba(255,255,255,.08), rgba(255,255,255,.025)); transition: transform .3s ease, border-color .3s ease; }
.storyCard:hover { transform: translateY(-7px); border-color: rgba(225,170,165,.55); }
.storyNo { color: var(--rose); font-size: .72rem; font-weight: 600; letter-spacing: .12em; }
.storyCard h3 { position: relative; z-index: 2; margin: 92px 0 18px; font-size: 1.75rem; line-height: 1.42; letter-spacing: -.03em; }
.storyCard p { position: relative; z-index: 2; max-width: 270px; margin: 0; color: var(--cream-soft); font-size: .93rem; line-height: 1.85; }
.cardMark { position: absolute; right: -10px; bottom: -32px; color: rgba(255,247,237,.045); font: 700 9rem/1 Georgia, serif; }

.wish { display: grid; grid-template-columns: 1fr .75fr; align-items: center; gap: 100px; }
.wishCopy > p { max-width: 620px; margin-top: 30px; }
.joyMachine { min-height: 310px; display: flex; flex-direction: column; justify-content: space-between; padding: 34px; border-radius: 24px; background: var(--cream); color: var(--wine-deep); transform: rotate(1.5deg); box-shadow: 0 30px 70px rgba(28,2,11,.2); }
.joyLabel { margin: 0; color: var(--wine-soft); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.joyMachine strong { font-size: clamp(1.9rem, 3vw, 3rem); line-height: 1.35; letter-spacing: -.04em; }
.joyMachine button { align-self: flex-start; border: 1px solid rgba(75,15,34,.24); border-radius: 999px; background: transparent; color: var(--wine-deep); padding: 10px 15px; cursor: pointer; font-weight: 700; }

.messages { padding-bottom: 140px; }
.messageHeading { display: grid; grid-template-columns: 1fr .65fr; align-items: end; gap: 100px; margin-bottom: 64px; }
.messageHeading .sectionLabel { margin-bottom: 34px; }
.messageLayout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 24px; align-items: start; }
.messageForm { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 20px; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--glass); }
.messageForm label { display: flex; flex-direction: column; gap: 10px; color: var(--cream-soft); font-size: .86rem; font-weight: 600; }
.messageForm input, .messageForm textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; outline: none; background: rgba(42,7,19,.22); color: var(--cream); padding: 14px 15px; resize: vertical; font-size: .98rem; line-height: 1.65; transition: border-color .2s ease, background .2s ease; }
.messageForm input:focus, .messageForm textarea:focus { border-color: var(--rose); background: rgba(42,7,19,.34); }
.messageForm input::placeholder, .messageForm textarea::placeholder { color: rgba(234,223,211,.5); }
.honeypot { position: absolute !important; left: -9999px; }
.formBottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.formBottom > span { color: #ffd0c9; font-size: .78rem; }
.formBottom button { border: 0; border-radius: 999px; background: var(--cream); color: var(--wine-deep); padding: 13px 18px; cursor: pointer; font-weight: 700; white-space: nowrap; }
.formBottom button:disabled { opacity: .55; cursor: wait; }
.messageList { display: flex; flex-direction: column; gap: 12px; }
.messageCard, .emptyMessage { margin: 0; padding: 24px 26px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.045); }
.messageCard > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.messageCard strong { font-size: .98rem; }
.messageCard time { color: var(--rose); font-size: .72rem; }
.messageCard p { margin: 16px 0 0; color: var(--cream-soft); line-height: 1.85; font-size: .97rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.emptyMessage { color: var(--cream-soft); line-height: 1.8; }

footer { width: min(1240px, calc(100% - 80px)); margin: 0 auto; padding: 100px 0 38px; border-top: 1px solid var(--line); }
.footerEyebrow { margin-bottom: 22px; }
footer small { display: block; padding-top: 70px; color: rgba(234,223,211,.58); font-size: .75rem; letter-spacing: .04em; }

@keyframes reveal { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 48px; }
  .portraitCard { width: min(100%, 520px); min-height: 560px; }
  .aboutGrid, .sectionIntro, .wish, .messageHeading, .messageLayout { grid-template-columns: 1fr; gap: 44px; }
  .storyGrid { grid-template-columns: 1fr; }
  .storyCard { min-height: 320px; }
  .messageForm { position: static; }
}
@media (max-width: 620px) {
  .nav, .hero, .section, footer { width: min(100% - 36px, 1240px); }
  .nav { height: 78px; }
  .navLinks { gap: 16px; }
  .navLinks > a:not(.navContact) { display: none; }
  .hero { min-height: auto; padding: 72px 0; }
  h1 { font-size: clamp(3.45rem, 17vw, 5rem); }
  .lede { font-size: 1rem; line-height: 1.85; }
  .heroActions { align-items: flex-start; flex-direction: column; gap: 20px; }
  .portraitCard { min-height: 440px; }
  .section { padding: 84px 0; }
  .sectionLabel { margin-bottom: 42px; }
  .identityCards { grid-template-columns: 1fr; }
  .identityCards article { min-height: 95px; }
  .wish { gap: 52px; }
  .joyMachine { min-height: 270px; padding: 26px; }
  .messages { padding-bottom: 100px; }
  .formBottom { align-items: flex-start; flex-direction: column; }
  footer { padding-top: 84px; }
  footer small { padding-top: 42px; line-height: 1.8; }
}