:root { --cream:#f7e9d5; --paper:#fffaf0; --red:#dc3c36; --navy:#172647; --pink:#f3b8b0; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--navy); background:var(--cream); font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif; }
a { color:inherit; text-decoration:none; }
.hero { min-height:100svh; overflow:hidden; position:relative; padding:0 5vw 48px; background-color:var(--cream); background-image:linear-gradient(rgba(23,38,71,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(23,38,71,.035) 1px,transparent 1px); background-size:28px 28px; }
.nav { height:100px; border-bottom:2px solid var(--navy); display:flex; align-items:center; justify-content:space-between; position:relative; z-index:5; }
.brand { font-family:Georgia,"Songti SC",serif; font-size:22px; font-weight:700; letter-spacing:.08em; }
.brand span { color:var(--red); margin-right:8px; }
.nav-links { display:flex; align-items:center; gap:34px; font-size:13px; }
.nav-cta { color:var(--paper); background:var(--red); padding:13px 22px; box-shadow:4px 4px 0 var(--navy); transition:.2s; }
.nav-cta:hover { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--navy); }
.hero-grid { min-height:calc(100svh - 190px); display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:6vw; }
.eyebrow { margin:0 0 23px; color:var(--red); font:700 11px monospace; letter-spacing:.2em; }
h1 { margin:0; font-family:Georgia,"Songti SC",serif; font-size:clamp(58px,7vw,108px); font-weight:400; line-height:1.03; letter-spacing:-.05em; }
h1 span { display:inline-block; color:var(--red); font-style:italic; position:relative; }
h1 span::after { content:""; position:absolute; left:-2%; right:-4%; bottom:3px; height:10px; z-index:-1; background:var(--pink); transform:rotate(-1deg); }
.intro { margin:30px 0; line-height:1.9; color:#59627a; font-size:15px; }
.primary { display:inline-flex; align-items:center; gap:70px; padding:17px 20px 17px 24px; border:2px solid var(--navy); background:var(--paper); box-shadow:5px 5px 0 var(--navy); font-size:14px; transition:.2s; }
.primary:hover { transform:translate(2px,2px); box-shadow:3px 3px 0 var(--navy); }
.mail-scene { min-height:520px; position:relative; display:flex; align-items:center; justify-content:center; transform:rotate(2deg); }
.envelope { width:min(35vw,480px); aspect-ratio:1.45; position:relative; overflow:hidden; background:var(--paper); border:3px solid var(--navy); box-shadow:16px 17px 0 var(--pink); display:flex; align-items:flex-end; justify-content:center; padding:28px; }
.envelope::before,.envelope::after { content:""; position:absolute; bottom:-2px; width:72%; height:78%; border-top:3px solid var(--navy); background:var(--paper); }
.envelope::before { left:-21%; transform:rotate(35deg); } .envelope::after { right:-21%; transform:rotate(-35deg); }
.envelope-flap { position:absolute; z-index:1; top:-52%; width:74%; aspect-ratio:1; border:3px solid var(--navy); background:var(--cream); transform:rotate(45deg); }
.envelope > span { position:absolute; left:25px; top:22px; font:10px monospace; letter-spacing:.1em; }
.envelope > i { position:relative; z-index:3; color:var(--paper); background:var(--red); width:52px; aspect-ratio:1; display:grid; place-items:center; border-radius:50%; font-style:normal; font-size:20px; }
.postmark { width:118px; aspect-ratio:1; border:3px double var(--navy); border-radius:50%; position:absolute; z-index:4; top:28px; left:0; display:flex; flex-direction:column; justify-content:center; align-items:center; transform:rotate(-18deg); background:rgba(247,233,213,.72); }
.postmark b { font:700 17px Georgia,serif; } .postmark span { font:10px monospace; margin-top:5px; }
.stamp { width:105px; height:125px; position:absolute; z-index:5; right:-4px; top:42px; background:var(--red); color:var(--paper); display:flex; flex-direction:column; align-items:center; justify-content:center; border:7px dotted var(--cream); outline:2px solid var(--red); transform:rotate(7deg); }
.stamp span { font-size:39px; } .stamp small { font:9px monospace; letter-spacing:.1em; }
.mail-scene > p { position:absolute; bottom:10px; right:7%; font:10px monospace; letter-spacing:.16em; }
.ticker { height:44px; position:absolute; left:0; right:0; bottom:0; display:flex; overflow:hidden; color:var(--cream); background:var(--navy); font:12px/44px monospace; letter-spacing:.18em; white-space:nowrap; }
.ticker span { min-width:max-content; animation:marquee 20s linear infinite; padding-right:2em; }
@keyframes marquee { to { transform:translateX(-100%); } }
.story { min-height:720px; padding:130px 8vw; display:grid; grid-template-columns:.7fr 2.4fr .75fr; gap:5vw; align-items:center; position:relative; }
.section-label { align-self:start; font:700 10px monospace; letter-spacing:.15em; color:#68718a; }
.story-copy > p { margin:0 0 20px; color:#68718a; font-size:14px; }
.story h2,.letter-intro h2,.closing h2 { margin:0; font-family:Georgia,"Songti SC",serif; font-size:clamp(48px,6vw,90px); line-height:1.13; letter-spacing:-.04em; font-weight:400; }
.story h2 span { color:var(--red); font-style:italic; border-bottom:7px solid var(--pink); }
.story-note { justify-self:end; width:145px; padding:22px 18px; border:2px dashed var(--red); color:var(--red); transform:rotate(4deg); text-align:center; display:flex; flex-direction:column; gap:9px; font-size:12px; }
.story-note b { font:700 18px Georgia,"Songti SC",serif; } .story-note i { font-style:normal; font-size:22px; }
.stats { margin:0 5vw 130px; border:2px solid var(--navy); display:grid; grid-template-columns:repeat(3,1fr); box-shadow:7px 7px 0 var(--pink); background:var(--paper); }
.stats > div { min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-right:2px solid var(--navy); }
.stats > div:last-child { border-right:0; }
.stats strong { font:400 54px Georgia,serif; color:var(--red); } .stats span { margin-top:14px; font-size:12px; letter-spacing:.08em; }
.letter-section { min-height:850px; padding:110px 8vw; background:var(--navy); color:var(--cream); display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:8vw; overflow:hidden; position:relative; }
.letter-section::before { content:"AIR MAIL · AIR MAIL · AIR MAIL · AIR MAIL ·"; position:absolute; left:-30px; right:-30px; top:0; height:20px; color:var(--paper); background:repeating-linear-gradient(135deg,var(--red) 0 24px,var(--paper) 24px 48px,var(--navy) 48px 72px,var(--paper) 72px 96px); font:0/0 a; }
.section-label.light { color:#aeb7cd; margin-bottom:65px; }
.letter-intro h2 { font-size:clamp(62px,7vw,100px); }
.letter-intro > p { margin:32px 0 42px; color:#b4bed2; font-size:14px; line-height:1.9; }
.shuffle { border:1px solid rgba(247,233,213,.55); color:var(--cream); background:transparent; padding:14px 18px; min-width:140px; display:inline-flex; justify-content:space-between; cursor:pointer; font:14px inherit; transition:.2s; }
.shuffle:hover { color:var(--navy); background:var(--cream); }
.letter-wrap { text-align:center; perspective:1000px; }
.letter-paper { min-height:460px; background:var(--paper); color:var(--navy); border:2px solid var(--navy); box-shadow:14px 15px 0 var(--pink); padding:42px 46px; position:relative; display:flex; flex-direction:column; justify-content:space-between; transform:rotate(1deg); transition:transform .35s,opacity .25s; overflow:hidden; }
.letter-paper.changing { transform:rotate(-2deg) translateY(12px); opacity:.3; }
.letter-meta { display:flex; justify-content:space-between; color:#69728a; font:10px monospace; letter-spacing:.08em; border-bottom:1px solid #c6bdaf; padding-bottom:14px; }
blockquote { margin:30px auto; position:relative; z-index:2; font:400 clamp(28px,3vw,45px)/1.6 Georgia,"Songti SC",serif; }
.letter-sign { display:flex; justify-content:flex-end; align-items:center; gap:16px; font-size:12px; }
.letter-sign i { width:44px; aspect-ratio:1; display:grid; place-items:center; border-radius:50%; color:var(--paper); background:var(--red); font-style:normal; }
.paper-lines { position:absolute; inset:0; opacity:.035; background:repeating-linear-gradient(0deg,var(--navy) 0 1px,transparent 1px 26px); }
.copy-button { margin-top:36px; min-width:180px; border:0; background:var(--red); color:var(--paper); padding:15px 19px; cursor:pointer; display:inline-flex; justify-content:space-between; gap:42px; font:14px inherit; }
.copy-button:hover { background:#f04a42; }
.letter-wrap > p { color:#8994ae; font-size:11px; letter-spacing:.06em; }
.steps { padding:130px 5vw 150px; }
.steps > .section-label { margin-bottom:60px; }
.step-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:2px solid var(--navy); }
.step-grid article { min-height:330px; position:relative; padding:28px 34px; border-right:2px solid var(--navy); }
.step-grid article:first-child { border-left:2px solid var(--navy); }
.step-grid article > b { font:11px monospace; color:var(--red); }
.step-icon { display:block; margin:46px 0 30px; font:44px Georgia,serif; color:var(--red); }
.step-grid h3 { margin:0 0 14px; font:400 27px Georgia,"Songti SC",serif; }.step-grid p { margin:0; color:#68718a; max-width:240px; font-size:13px; line-height:1.8; }
.closing { min-height:680px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--pink); position:relative; overflow:hidden; padding:100px 22px; }
.closing::before { content:""; position:absolute; width:520px; aspect-ratio:1; border:2px dashed rgba(23,38,71,.15); border-radius:50%; }
.closing > * { position:relative; z-index:2; }.closing h2 { font-size:clamp(55px,7vw,96px); }.closing h2 span { color:var(--red); font-style:italic; }
.closing .primary { margin-top:50px; background:var(--cream); }.closing-stamp { width:56px; aspect-ratio:1; display:grid; place-items:center; color:var(--paper); background:var(--red); border-radius:50%; margin-bottom:25px; }
footer { min-height:130px; padding:36px 5vw; display:flex; align-items:center; justify-content:space-between; border-top:2px solid var(--navy); background:var(--cream); font-size:11px; }
footer .brand { font-size:18px; } footer p { color:#68718a; }
@media (max-width:760px) {
  .hero { padding:0 22px 48px; } .nav { height:80px; } .nav-links > a:first-child { display:none; }
  .hero-grid { grid-template-columns:1fr; padding:70px 0 120px; gap:70px; } h1 { font-size:clamp(54px,16vw,74px); }
  .intro { font-size:14px; } .desktop { display:none; } .mail-scene { min-height:330px; }
  .envelope { width:82vw; } .postmark { width:86px; top:-5px; } .stamp { width:78px; height:94px; right:5px; top:5px; }
  .story { min-height:630px; display:block; padding:100px 22px; } .section-label { margin-bottom:70px; } .story h2 { font-size:48px; } .story-note { margin:70px 0 0 auto; width:125px; }
  .stats { margin:0 22px 100px; grid-template-columns:1fr; }.stats > div { min-height:135px; border-right:0; border-bottom:2px solid var(--navy); }.stats > div:last-child { border-bottom:0; }
  .letter-section { padding:100px 22px 90px; grid-template-columns:1fr; gap:80px; }.letter-intro h2 { font-size:62px; }.letter-paper { min-height:390px; padding:30px 24px; }.letter-meta { font-size:8px; } blockquote { font-size:28px; }
  .steps { padding:100px 22px; }.step-grid { grid-template-columns:1fr; }.step-grid article,.step-grid article:first-child { min-height:270px; border-left:2px solid var(--navy); border-right:2px solid var(--navy); border-bottom:2px solid var(--navy); }.step-icon { margin:28px 0 22px; }
  .closing { min-height:600px; }.closing h2 { font-size:52px; } footer { padding:38px 22px; flex-direction:column; align-items:flex-start; gap:22px; } footer p { margin:0; }
}
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.ticker span{animation:none} }