*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#eee9df;color:#59473f;font-family:"Microsoft YaHei","PingFang SC",sans-serif}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #c28776;outline-offset:5px}[hidden]{display:none!important}.music{position:fixed;z-index:5;top:24px;right:28px;display:flex;align-items:center;gap:8px;padding:10px 15px;border:1px solid rgba(255,255,255,.65);border-radius:30px;background:rgba(82,62,52,.35);backdrop-filter:blur(10px);color:white;font-size:12px;letter-spacing:.08em}.music span:first-child{font-size:18px}.cover{position:relative;min-height:100svh;background:#8e7360 url('../images/our-photo.png') center/cover no-repeat;color:#fff8ec;display:flex;align-items:center;overflow:hidden}.cover-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(48,34,29,.74),rgba(69,48,35,.44) 50%,rgba(60,44,35,.14)),linear-gradient(0deg,rgba(48,34,29,.25),transparent 40%)}.cover-content{position:relative;width:min(1120px,100%);margin:auto;padding:110px 8% 95px}.eyebrow{display:flex;align-items:center;gap:12px;font:10px Georgia,serif;letter-spacing:.25em}.eyebrow span{width:32px;height:1px;background:#e6cbb9}.cover-kicker{margin:76px 0 20px;color:#e9c6ae;font:11px Georgia,serif;letter-spacing:.28em}.cover h1{margin:0;font-family:Georgia,"Songti SC","SimSun",serif;font-weight:400;line-height:1.25;font-size:clamp(48px,6vw,86px);letter-spacing:.08em}.cover h1 em{font-style:normal;color:#f5dccb}.cover-copy{margin:30px 0;line-height:2.2;font-size:15px;letter-spacing:.12em;color:#fbf0e8}.open-letter{border:1px solid #f2dfd0;background:#f5e9dc;color:#62483d;padding:16px 22px;min-width:185px;text-align:left;letter-spacing:.12em;transition:transform .25s,background .25s}.open-letter:hover{transform:translateY(-3px);background:white}.open-letter span{float:right}.cover-bottom{margin-top:95px;font-size:11px;letter-spacing:.15em;color:#ead8cc}.cover-bottom span{margin:0 8px}.cover-caption{position:absolute;right:6%;bottom:6%;font:10px/1.9 Georgia,serif;letter-spacing:.18em;color:#f6e9dd;text-align:right}.cover-caption span{font-size:18px}.letter-section{padding:95px 20px 0;background:radial-gradient(ellipse at 15% 15%,#f5e7da 0,transparent 40%),#eeeae2}.letter-intro{max-width:780px;margin:0 auto 20px;display:flex;justify-content:space-between;color:#a68f80;font:10px Georgia,serif;letter-spacing:.24em}.paper{max-width:780px;margin:auto;padding:64px clamp(28px,8vw,94px) 55px;background:#fffdf8;box-shadow:0 18px 60px rgba(102,79,64,.11);border:1px solid #e9e1d5}.paper-top,.paper-bottom{display:flex;justify-content:space-between;align-items:center;color:#b49887;font:10px Georgia,serif;letter-spacing:.22em}.paper-top span:last-child{font-size:22px;color:#c98e80}.paper h2{margin:50px 0 12px;font:normal clamp(27px,4vw,38px) Georgia,"Songti SC","SimSun",serif;letter-spacing:.14em;color:#604b42}.paper-subtitle{font-size:12px;letter-spacing:.15em;color:#b69e8f}.rule{margin:38px 0 46px;border-top:1px solid #e9ddd2;text-align:center;height:1px}.rule span{position:relative;top:-11px;background:#fffdf8;padding:0 15px;color:#c9a494;font-size:13px}.letter-content{font-family:"Songti SC","SimSun",serif;font-size:16px;line-height:2.4;letter-spacing:.045em;color:#5d5149;overflow-wrap:anywhere}.letter-content p{margin:0 0 1.8em}.letter-content .declaration{font-size:22px;color:#ad7168;letter-spacing:.13em}.letter-content .signature{text-align:right;font-size:14px;line-height:2.4;margin-top:65px}.paper-bottom{border-top:1px solid #eee5da;padding-top:25px;margin-top:52px}.after-letter{text-align:center;padding:80px 10px 95px}.after-letter>p{font-family:Georgia,"Songti SC",serif;font-size:18px;letter-spacing:.1em;color:#897368}.after-letter button{background:transparent;border:1px solid #c3a99b;color:#80675c;border-radius:30px;padding:13px 25px;letter-spacing:.1em;margin-top:12px}.after-letter button:hover{background:#fffaf4}.after-letter button span{padding-left:8px}#surprise{max-width:480px;margin:40px auto 0;padding:35px 20px;background:#fbf6ee;border:1px solid #eadacf;color:#8d6e63;animation:reveal .8s both}#surprise p{font:16px/2.2 Georgia,"Songti SC",serif;letter-spacing:.08em}#surprise p span,.surprise-star{color:#c88e80}footer{text-align:center;border-top:1px solid #ded5cb;padding:28px;color:#a78f81;font:10px Georgia,serif;letter-spacing:.23em}footer span{color:#bd887b}@keyframes reveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@media(max-width:600px){.music{top:16px;right:16px}.cover{background-position:60% center}.cover-shade{background:linear-gradient(90deg,rgba(48,34,29,.72),rgba(48,34,29,.32)),linear-gradient(0deg,rgba(48,34,29,.32),transparent)}.cover-content{padding:100px 28px 90px}.cover-kicker{margin-top:65px}.cover h1{font-size:50px}.cover-copy{font-size:14px}.cover-bottom{margin-top:75px}.cover-caption{display:none}.letter-section{padding:60px 14px 0}.paper{padding:38px 25px}.paper h2{margin-top:40px}.letter-content{font-size:16px;line-height:2.25;letter-spacing:.02em}.letter-content .signature{font-size:13px}.after-letter{padding:65px 0 75px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Keep both people visible on narrow screens, with the message below the photo. */
@media(max-width:600px){
  .cover{min-height:100svh;align-items:flex-start;background-color:#624b40;background-size:100% auto;background-position:center 65px}
  .cover-shade{background:linear-gradient(to bottom,rgba(55,39,33,.15) 65px,rgba(55,39,33,.02) 180px,rgba(98,75,64,.15) 250px,#624b40 calc(65px + 56vw),#624b40 100%)}
  .cover-content{padding:calc(65px + 57vw) 28px 50px}
  .cover-kicker{margin:36px 0 16px}
  .cover h1{font-size:clamp(40px,11vw,50px)}
  .cover-copy{margin:20px 0;line-height:2}
  .cover-bottom{margin-top:40px}
}
.open-letter .envelope-icon{float:right;width:21px;height:21px;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}