/* ============================================================
   写给未来的我 · 站点样式
   配色：米纸 / 墨色 / 朱砂 / 淡金
   ============================================================ */

:root{
  --paper:#f5f0e6;
  --paper-hi:#fbf8f2;
  --ink:#2b2721;
  --ink-soft:#6c6155;
  --ink-mute:#948a7c;
  --line:#ddd2c0;
  --line-soft:rgba(211,197,175,.8);
  --accent:#a63f28;
  --gold:#b08a45;
  --shadow:0 30px 70px -34px rgba(66,48,28,.42);
  --serif:"Noto Serif SC","Source Han Serif SC","Source Han Serif CN","Songti SC","STSong","SimSun",serif;
  --nav-h:78px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:16px;
  line-height:1.95;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* 背景光晕 */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 12% -10%, rgba(176,138,69,.16), transparent 58%),
    radial-gradient(90% 70% at 88% 8%, rgba(166,63,40,.10), transparent 60%),
    radial-gradient(120% 100% at 50% 108%, rgba(120,110,90,.14), transparent 60%);
}

/* 纸纹 */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.30; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.30'/%3E%3C/svg%3E");
}

.wrap{position:relative; z-index:2}
.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:12px; z-index:99; background:#fff; padding:10px 16px}

/* ---------------- 导航 ---------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:24px clamp(18px,4vw,56px);
  transition:background .5s ease, box-shadow .5s ease, padding .5s ease;
}
.nav.solid{
  background:rgba(250,247,241,.88);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 1px 0 rgba(200,186,164,.9), 0 18px 40px -34px rgba(60,45,30,.6);
  padding-top:14px; padding-bottom:14px;
}
.brand{
  font-size:15px; letter-spacing:.34em; color:var(--ink);
  text-decoration:none; white-space:nowrap; transition:color .4s;
}
.brand:hover{color:var(--accent)}
.links{display:flex; gap:clamp(16px,2.6vw,34px)}
.links a{
  color:var(--ink-soft); text-decoration:none; white-space:nowrap;
  font-size:14.5px; letter-spacing:.2em;
  padding-bottom:4px; border-bottom:1px solid transparent;
  transition:color .35s, border-color .35s;
}
.links a:hover{color:var(--accent); border-bottom-color:var(--accent)}
.links a[aria-current="page"]{color:var(--accent); border-bottom-color:var(--accent)}

/* ---------------- 首页大屏 ---------------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:130px 24px 110px;
}
.hero::after{
  content:""; position:absolute; left:50%; bottom:0; width:1px; height:86px;
  background:linear-gradient(to bottom, rgba(150,135,112,.5), transparent);
  transform:translateX(-50%);
}
.kicker{
  margin:0; font-size:13px; letter-spacing:.6em; text-indent:.6em;
  color:var(--gold);
}
.display{
  margin:26px 0 0;
  font-size:clamp(38px,7.4vw,76px); font-weight:500;
  line-height:1.28; letter-spacing:.10em; color:var(--ink);
}
.display .dot{color:var(--accent)}
.lede{
  margin:34px 0 0; max-width:34em;
  font-size:clamp(14.5px,1.6vw,17px); color:var(--ink-soft); letter-spacing:.055em;
}
.meta{
  margin-top:44px; font-size:13px; letter-spacing:.32em; color:var(--ink-mute);
}
.meta span{color:var(--accent)}
.vtext{
  position:absolute; right:clamp(14px,4vw,58px); top:50%;
  transform:translateY(-50%); writing-mode:vertical-rl;
  font-size:13px; letter-spacing:.55em; color:rgba(148,138,124,.7);
}

/* ---------------- 子页页头 ---------------- */
.pagehead{
  padding:calc(var(--nav-h) + 76px) 24px 0;
  text-align:center;
}
.pagehead h1{
  margin:22px 0 0; font-size:clamp(28px,5vw,46px);
  font-weight:500; letter-spacing:.16em; line-height:1.4;
}
.pagehead .lede{margin-top:22px}

/* ---------------- 版块通用 ---------------- */
section{padding:clamp(66px,10vw,128px) 24px}
section.tight{padding-top:0}
.inner{max-width:860px; margin:0 auto}
.inner.wide{max-width:960px}

.sec-head{
  display:flex; align-items:baseline; gap:18px; margin:0 0 44px;
}
.sec-head .idx{
  font-size:12.5px; letter-spacing:.34em; color:var(--gold); white-space:nowrap;
}
.sec-head h2{
  margin:0; font-size:clamp(21px,2.9vw,29px);
  font-weight:500; letter-spacing:.14em; white-space:nowrap;
}
.sec-head .rule{flex:1; height:1px; background:var(--line); min-width:24px}

/* ---------------- 信 ---------------- */
.letter{
  position:relative;
  background:linear-gradient(180deg, var(--paper-hi), #fdfbf6 55%, #f9f5ed);
  border:1px solid var(--line-soft);
  box-shadow:var(--shadow);
  padding:clamp(36px,6vw,72px) clamp(24px,6vw,78px);
}
.letter::before,
.letter::after{
  content:""; position:absolute; width:22px; height:22px;
  border:1px solid var(--gold); opacity:.55;
}
.letter::before{left:14px; top:14px; border-right:0; border-bottom:0}
.letter::after{right:14px; bottom:14px; border-left:0; border-top:0}
.letter h2{
  margin:0 0 8px; font-size:clamp(19px,2.5vw,25px);
  font-weight:500; letter-spacing:.16em;
}
.letter .sub{
  margin:0 0 38px; font-size:13px; letter-spacing:.28em; color:var(--ink-mute);
}
.letter p{
  margin:0 0 1.35em;
  font-size:clamp(15px,1.72vw,17.5px); letter-spacing:.045em;
  text-align:justify; text-justify:inter-ideograph;
}
.letter p:last-child{margin-bottom:0}
.letter p.opener::first-letter{
  float:left; font-size:3.05em; line-height:.92;
  padding:.06em .14em 0 0; color:var(--accent);
}
.letter .solo{
  margin:2.2em 0; padding:26px 0; text-align:center;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  font-size:clamp(16px,2vw,19px); letter-spacing:.16em;
}
.sign{
  margin-top:2.4em; display:flex; align-items:flex-end;
  justify-content:flex-end; gap:22px;
}
.sign .by{
  text-align:right; font-size:13.5px;
  letter-spacing:.2em; color:var(--ink-soft); line-height:2.1;
}
.seal{
  width:66px; height:66px; flex:0 0 auto;
  border:1.5px solid var(--accent); border-radius:4px;
  color:var(--accent); display:grid; place-content:center;
  text-align:center; font-size:13px; letter-spacing:.14em;
  line-height:1.5; transform:rotate(-3deg); opacity:.9;
}

/* ---------------- 卡片 ---------------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.card{
  background:rgba(255,253,248,.7);
  border:1px solid var(--line-soft);
  padding:38px 26px 34px; text-align:center;
  transition:background .5s, border-color .5s, box-shadow .5s;
}
.card:hover{
  background:rgba(255,254,250,.96);
  border-color:var(--gold);
  box-shadow:0 26px 50px -34px rgba(66,48,28,.45);
}
.card .num{
  display:block; font-size:25px; color:var(--gold);
  letter-spacing:.1em; margin-bottom:16px;
}
.card h3{margin:0 0 12px; font-size:17.5px; font-weight:500; letter-spacing:.2em}
.card p{margin:0; font-size:14.5px; color:var(--ink-soft); letter-spacing:.03em}

/* ---------------- 关于 ---------------- */
.about{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,60px); align-items:start}
.about p{
  font-size:clamp(15px,1.7vw,16.8px); letter-spacing:.045em;
  margin:0 0 1.3em; text-align:justify;
}
.about p:last-child{margin-bottom:0}
.facts{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.facts li{
  display:flex; gap:14px; padding:18px 2px;
  border-bottom:1px solid var(--line);
  font-size:14.8px; color:var(--ink-soft); letter-spacing:.04em;
}
.facts li .d{
  width:5px; height:5px; border-radius:50%;
  background:var(--gold); flex:0 0 auto; margin-top:.72em;
}
.facts li b{font-weight:500; color:var(--ink); letter-spacing:.14em; min-width:5.2em}

/* ---------------- 联系 ---------------- */
.rows{border-top:1px solid var(--line)}
.row{
  display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  padding:22px 2px; border-bottom:1px solid var(--line);
  text-decoration:none; color:inherit;
  transition:padding-left .45s cubic-bezier(.2,.7,.2,1), color .45s;
}
a.row:hover{padding-left:12px; color:var(--accent)}
.row .k{
  font-size:13px; letter-spacing:.32em;
  color:var(--ink-mute); white-space:nowrap;
}
.row .v{font-size:15.5px; letter-spacing:.05em; text-align:right}
.row .v small{
  display:block; font-size:12.5px;
  color:var(--ink-mute); letter-spacing:.04em;
}

.hint{
  margin-top:30px; padding:24px 26px;
  background:rgba(176,138,69,.09);
  border-left:2px solid var(--gold);
  font-size:14.5px; color:var(--ink-soft); letter-spacing:.04em;
}

/* ---------------- CTA ---------------- */
.cta{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.cta a{
  display:block; padding:34px 30px;
  background:rgba(255,253,248,.6);
  border:1px solid var(--line-soft);
  text-decoration:none; color:inherit;
  transition:background .5s, border-color .5s;
}
.cta a:hover{background:rgba(255,254,250,.95); border-color:var(--gold)}
.cta .t{
  display:block; font-size:17px; letter-spacing:.16em; margin-bottom:10px;
}
.cta .s{display:block; font-size:13.5px; color:var(--ink-mute); letter-spacing:.05em}
.cta .arrow{
  display:inline-block; margin-top:18px; font-size:13px;
  letter-spacing:.24em; color:var(--gold);
}

/* ---------------- 表单 ---------------- */
.form{max-width:640px; margin:0 auto; display:grid; gap:20px}
.field{display:grid; gap:9px}
.field label{font-size:12.5px; letter-spacing:.28em; color:var(--ink-mute)}
.field input,
.field textarea{
  font-family:var(--serif); font-size:15.5px; color:var(--ink);
  background:rgba(255,253,248,.85);
  border:1px solid var(--line-soft);
  border-radius:2px; padding:14px 16px;
  outline:none; line-height:1.8;
  transition:border-color .4s, background .4s, box-shadow .4s;
}
.field textarea{min-height:180px; resize:vertical}
.field input:focus,
.field textarea:focus{
  border-color:var(--gold);
  background:#fffdf8;
  box-shadow:0 0 0 3px rgba(176,138,69,.12);
}
.btn{
  font-family:var(--serif); font-size:14.5px; letter-spacing:.28em;
  padding:15px 30px; cursor:pointer; border:0; border-radius:2px;
  background:var(--ink); color:var(--paper-hi);
  transition:background .4s, transform .3s;
}
.btn:hover{background:var(--accent)}
.btn:active{transform:translateY(1px)}
.formnote{
  font-size:13px; color:var(--ink-mute);
  letter-spacing:.04em; text-align:center;
}
.formnote a{color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(166,63,40,.35)}
.status{
  min-height:1.6em; font-size:13.5px; letter-spacing:.05em;
  text-align:center; color:var(--ink-mute);
}
.status.ok{color:#4a6b3f}
.status.err{color:var(--accent)}

/* ---------------- 页脚 ---------------- */
footer{
  border-top:1px solid var(--line);
  padding:60px 24px 54px; text-align:center;
  color:var(--ink-mute); font-size:12.5px; letter-spacing:.3em;
}
footer .mark{
  display:block; margin-bottom:18px;
  color:var(--gold); font-size:15px; letter-spacing:.5em;
}
.foot-links{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:clamp(14px,3vw,26px); margin:0 0 26px;
}
.foot-links a{
  color:var(--ink-mute); text-decoration:none;
  font-size:12.5px; letter-spacing:.2em;
  transition:color .35s;
}
.foot-links a:hover{color:var(--accent)}

/* ---------------- 动效 ---------------- */
.reveal{opacity:0}
.reveal.in{animation:rise .95s cubic-bezier(.2,.7,.2,1) var(--d,0s) both}
@keyframes rise{
  from{opacity:0; transform:translateY(26px)}
  to{opacity:1; transform:none}
}
.hero .kicker{opacity:0; animation:fadeUp 1.4s .15s cubic-bezier(.2,.7,.2,1) forwards}
.hero .display{opacity:0; animation:fadeUp 1.6s .32s cubic-bezier(.2,.7,.2,1) forwards}
.hero .lede{opacity:0; animation:fadeUp 1.6s .58s cubic-bezier(.2,.7,.2,1) forwards}
.hero .meta{opacity:0; animation:fadeUp 1.6s .82s cubic-bezier(.2,.7,.2,1) forwards}
.hero .vtext{opacity:0; animation:fadeIn 2s 1.2s ease forwards}
@keyframes fadeUp{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}

/* ---------------- 响应式 ---------------- */
@media (max-width:820px){
  .about{grid-template-columns:1fr}
  .cta{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .cards{gap:16px}
}
@media (max-width:720px){
  :root{--nav-h:66px}
  .nav{gap:14px; padding:18px 16px}
  .nav.solid{padding-top:12px; padding-bottom:12px}
  .brand{font-size:13px; letter-spacing:.18em}
  .links{gap:15px}
  .links a{font-size:12.5px; letter-spacing:.1em}
  section{padding-left:18px; padding-right:18px}
  .sec-head{gap:12px; margin-bottom:32px}
  .sec-head .rule{display:none}
  .row{flex-direction:column; align-items:flex-start; gap:6px}
  .row .v{text-align:left}
  .vtext{display:none}
  .seal{width:58px; height:58px; font-size:12px}
}
@media (max-width:400px){
  .brand{display:none}
  .links{width:100%; justify-content:space-between}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .reveal{opacity:1}
  .hero .kicker,.hero .display,.hero .lede,.hero .meta,.hero .vtext{opacity:1}
}