:root { --paper:#f6f5f0; --ink:#171717; --muted:#72716c; --blue:#3149e8; --orange:#ff6847; --line:#d8d6cf; --serif:Georgia,"Times New Roman",serif; --sans:"Noto Sans SC","PingFang SC","Microsoft YaHei","Heiti SC",system-ui,sans-serif; --wrap:920px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
.wrap { width:min(var(--wrap),calc(100% - 64px)); margin-inline:auto; }
.topbar { height:86px; display:flex; align-items:center; border-bottom:1px solid var(--line); }
.nav { width:min(1240px,calc(100% - 64px)); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; align-items:center; gap:12px; font-weight:750; letter-spacing:-.04em; font-size:18px; white-space:nowrap; }
.brand-mark { position:relative; width:30px; height:30px; border-radius:50%; background:var(--orange); display:grid; place-items:center; overflow:hidden; flex:0 0 auto; }
.brand-mark::before,.brand-mark::after { content:""; position:absolute; background:var(--paper); width:20px; height:2px; transform:rotate(-42deg); }
.brand-mark::after { transform:rotate(42deg); }
.brand-mark span { z-index:1; width:5px; height:5px; background:var(--paper); border-radius:50%; }
.brand small { display:block; font-family:var(--serif); font-size:10px; font-weight:500; letter-spacing:.17em; color:var(--muted); margin-top:2px; }
.nav-links { display:flex; align-items:center; gap:28px; font-size:12px; color:#45443f; }
.nav-links a:hover { color:var(--blue); }
.nav-cta { padding:11px 16px; border:1px solid var(--ink); border-radius:99px; font-size:11px; }
.article { padding:74px 0 100px; }
.article-back { display:inline-flex; align-items:center; gap:9px; color:var(--muted); font-size:12px; margin-bottom:42px; }
.article-back:hover { color:var(--blue); }
.article-kicker { display:flex; align-items:center; gap:11px; color:var(--blue); font:11px/1.4 var(--serif); letter-spacing:.16em; text-transform:uppercase; }
.article-kicker i { width:7px; height:7px; border-radius:50%; background:var(--orange); display:inline-block; }
.article h1 { max-width:900px; margin:21px 0 25px; font-size:clamp(39px,7.1vw,76px); line-height:1.22; letter-spacing:-.075em; font-weight:740; }
.article-meta { display:flex; gap:19px; align-items:center; color:var(--muted); font:11px var(--serif); letter-spacing:.08em; margin-bottom:32px; }
.article-meta span+span::before { content:"✳"; color:var(--orange); margin-right:19px; }
.article-cover { width:100%; aspect-ratio:1.95; position:relative; overflow:hidden; background:#e7e8f4; margin:0 0 48px; }
.article-cover img { display:block; width:100%; height:100%; object-fit:cover; }
.article-cover::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(49,73,232,.10),transparent 60%); pointer-events:none; }
.article-body { max-width:680px; margin-inline:auto; }
.article-body p { margin:0 0 27px; color:#373631; font-size:18px; line-height:2.05; letter-spacing:.005em; }
.article-source { margin:39px 0 0; padding:19px 21px; background:#e9e8e1; border-left:3px solid var(--orange); }
.article-source small { display:block; color:var(--muted); font:10px var(--serif); letter-spacing:.13em; margin-bottom:9px; }
.article-source a { display:inline-flex; align-items:center; gap:9px; color:var(--blue); font-size:14px; text-decoration:underline; text-decoration-color:rgba(49,73,232,.35); text-underline-offset:4px; }
.article-source a:hover { color:var(--ink); }
.more { max-width:680px; margin:72px auto 0; padding-top:23px; border-top:1px solid var(--line); }
.more-label { color:var(--blue); font:10px var(--serif); letter-spacing:.17em; margin:0 0 15px; }
.more-links { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.more-links a { display:flex; justify-content:space-between; gap:12px; align-items:start; padding:16px 0; border-bottom:1px solid var(--line); font-size:14px; line-height:1.65; }
.more-links a:hover { color:var(--blue); }
.more-links span { color:var(--orange); white-space:nowrap; }
.footer { background:var(--ink); color:var(--paper); padding:28px 0; }
.footer-inner { width:min(1240px,calc(100% - 64px)); display:flex; justify-content:space-between; align-items:center; gap:20px; margin:auto; }
.footer-brand { display:flex; align-items:center; gap:10px; font-size:12px; font-weight:650; }
.footer-brand .brand-mark { width:22px; height:22px; }
.footer-brand .brand-mark::before,.footer-brand .brand-mark::after { width:14px; }
.footer-note,.footer-top { color:#aaa9a3; font-size:10px; letter-spacing:.05em; }
.footer-top:hover { color:white; }
.footer-legal { width:min(1240px,calc(100% - 64px)); margin:14px auto 0; padding-top:14px; border-top:1px solid rgba(255,255,255,.14); color:#aaa9a3; font-size:10px; letter-spacing:.04em; }
@media(max-width:620px) {
  .wrap { width:calc(100% - 38px); }
  .topbar { height:70px; }
  .nav { width:calc(100% - 36px); }
  .brand { font-size:15px; gap:9px; }
  .brand-mark { width:27px; height:27px; }
  .nav-links { gap:12px; font-size:11px; }
  .nav-links a:not(.nav-cta) { display:none; }
  .nav-links a.blog-link { display:inline-flex; }
  .nav-cta { padding:9px 12px; font-size:10px; }
  .article { padding:47px 0 72px; }
  .article-back { margin-bottom:31px; }
  .article h1 { font-size:clamp(39px,11.3vw,58px); margin:17px 0 19px; }
  .article-cover { aspect-ratio:1.25; margin-bottom:32px; }
  .article-body p { font-size:16px; line-height:2; margin-bottom:22px; }
  .article-source { padding:16px; }
  .more { margin-top:54px; }
  .more-links { grid-template-columns:1fr; gap:0; }
  .footer-inner { width:calc(100% - 38px); align-items:flex-start; flex-direction:column; gap:13px; }
  .footer-legal { width:calc(100% - 38px); }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } }