/* 逝燃 SHIRAN · 官网 official.css v1 */
:root{
  --paper:#f5f1ea; --paper-2:#faf6ef; --cement-l:#cfc9c0; --cement:#b7b0a6;
  --cement-d:#9a948a; --ink:#2b2b2b; --ink-soft:#5f5a54; --amber:#d8a05a;
  --olive:#6f7d3a; --blue:#5b6c8f;
  --serif:"Songti SC","STSong","SimSun","Source Han Serif SC",serif;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.85; letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
img{display:block; width:100%; height:auto}
a{color:inherit; text-decoration:none}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:10; background:rgba(245,241,234,.9); backdrop-filter:blur(10px); border-bottom:1px solid rgba(183,176,166,.25)}
.nav-in{max-width:720px; margin:0 auto; padding:14px 22px; display:flex; align-items:center; justify-content:space-between}
.nav-brand{font-family:var(--serif); font-size:19px; letter-spacing:.14em}
.nav-brand span{display:inline-block; margin-left:8px; font-family:var(--sans); font-size:10px; letter-spacing:.28em; color:var(--cement-d); vertical-align:2px}
.nav-link{font-size:13px; color:var(--ink-soft); letter-spacing:.06em}
.nav-link:active{color:var(--amber)}

/* ---------- layout ---------- */
main{max-width:720px; margin:0 auto}
.sec{padding:76px 22px}
.sec-tint{background:var(--paper-2)}
.sec-title{font-family:var(--serif); font-size:25px; font-weight:400; letter-spacing:.1em; line-height:1.5; margin-bottom:22px}
.sec-lead{font-size:14px; color:var(--ink-soft); margin:-10px 0 34px; letter-spacing:.03em}
.note{font-size:12px; color:var(--cement-d); margin-top:26px; letter-spacing:.04em}

/* ---------- hero ---------- */
.hero{padding:64px 22px 0; text-align:center}
.hero-eyebrow{font-size:11px; letter-spacing:.4em; color:var(--cement-d); margin-bottom:26px}
.hero-title{font-family:var(--serif); font-weight:400; font-size:44px; line-height:1.34; letter-spacing:.12em; margin-bottom:28px}
.hero-sub{font-size:14.5px; color:var(--ink-soft); line-height:2.1; letter-spacing:.03em; margin-bottom:52px}
.hero-fig{position:relative}
.hero-fig::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(245,241,234,.55),transparent 32%,transparent 82%,var(--paper))}

/* ---------- steps ---------- */
.steps{list-style:none; display:grid; gap:34px}
.steps li{position:relative; padding-left:44px}
.step-no{position:absolute; left:0; top:2px; font-family:var(--serif); font-size:13px; color:var(--amber); letter-spacing:.1em}
.steps h3{font-family:var(--serif); font-size:18px; font-weight:400; letter-spacing:.12em; margin-bottom:8px}
.steps p{font-size:14px; color:var(--ink-soft); line-height:1.95}
.sec-cta{margin-top:44px}

.btn{display:inline-block; padding:13px 34px; border:1px solid var(--cement); border-radius:2px;
  font-size:14px; letter-spacing:.14em; color:var(--ink); transition:.25s}
.btn:active{background:var(--ink); color:var(--paper); border-color:var(--ink)}

/* ---------- themes ---------- */
.themes{display:grid; gap:0}
.theme{padding:26px 0; border-top:1px solid rgba(183,176,166,.32)}
.theme:first-child{border-top:none; padding-top:0}
.theme h3{font-family:var(--serif); font-size:21px; font-weight:400; letter-spacing:.16em; margin-bottom:4px}
.theme h3 span{display:block; font-family:var(--sans); font-size:11px; letter-spacing:.24em; color:var(--cement-d); margin-top:8px}
.theme-q{font-family:var(--serif); font-size:15px; letter-spacing:.06em; color:var(--ink); margin:16px 0 8px;
  padding-left:12px; border-left:2px solid var(--cement-l)}
.theme-d{font-size:13.5px; color:var(--ink-soft); line-height:1.95}
.t-1 .theme-q{border-left-color:var(--cement)}
.t-2 .theme-q{border-left-color:var(--olive)}
.t-3 .theme-q{border-left-color:var(--blue)}
.t-4 .theme-q{border-left-color:var(--ink)}

/* ---------- split ---------- */
.split{padding-top:0}
.split-fig{margin:0 -22px 36px; position:relative}
.split-fig::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,var(--paper),transparent 18%,transparent 84%,var(--paper))}
.split-txt p{font-size:14px; color:var(--ink-soft); line-height:2; margin-bottom:16px}
.plain-list{list-style:none; margin-top:26px; border-top:1px solid rgba(183,176,166,.32)}
.plain-list li{font-size:13px; color:var(--ink-soft); letter-spacing:.04em;
  padding:11px 0 11px 16px; border-bottom:1px solid rgba(183,176,166,.32); position:relative}
.plain-list li::before{content:""; position:absolute; left:0; top:19px; width:5px; height:5px; border-radius:50%; background:var(--amber)}

/* ---------- belief ---------- */
.belief{display:grid; gap:28px}
.belief figure{position:relative}
.belief figcaption{font-family:var(--serif); font-size:15px; letter-spacing:.34em;
  text-align:center; margin-top:16px; color:var(--ink-soft)}

/* ---------- channels ---------- */
.channels{list-style:none; display:flex; flex-wrap:wrap; gap:8px}
.channels li{font-size:13px; letter-spacing:.06em; color:var(--ink-soft);
  padding:9px 14px; border:1px solid var(--cement-l); border-radius:2px; white-space:nowrap}

/* ---------- safe ---------- */
.safe-txt{font-size:13px; color:var(--ink-soft); line-height:2.15; letter-spacing:.03em}

/* ---------- foot ---------- */
.foot{padding:58px 22px 64px; text-align:center; border-top:1px solid rgba(183,176,166,.3);
  background:var(--paper-2)}
.foot p{font-size:13px; letter-spacing:.06em; margin-bottom:9px}
.foot .muted{font-size:12px; color:var(--cement-d)}
.foot a{border-bottom:1px solid rgba(154,148,138,.5)}
.legal-links{font-size:12px; color:var(--cement-d); margin-top:18px}
.legal-links .sep{margin:0 8px; opacity:.5}
.foot .beian{font-size:11px; color:var(--cement-d); letter-spacing:.04em; margin-top:4px}

@media (min-width:680px){
  .hero{padding-top:88px}
  .hero-title{font-size:54px}
  .sec{padding:96px 30px}
  .split{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; padding-top:96px}
  .split-fig{margin:0}
  .split-fig::after{background:linear-gradient(90deg,var(--paper),transparent 16%,transparent 84%,var(--paper))}
  .belief{grid-template-columns:repeat(3,1fr); gap:16px}
  .belief figcaption{font-size:13px; letter-spacing:.2em}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
