:root{
  --bg:#141216; --card:#1a171d; --fg:#eee9ee; --dim:#8b8390;
  --mag:#e05c8a; --line:#241f28;
}
@font-face{
  font-family:"Source Serif"; src:url("/fonts/SourceSerif-var.woff2") format("woff2");
  font-weight:400 600; font-display:swap;
  unicode-range:U+0000-00FF,U+2000-206F;
}
@font-face{
  font-family:"Serif SC"; src:url("/fonts/NotoSerifSC-sub.woff2") format("woff2");
  font-weight:400; font-display:swap;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:400 15.5px/1.8 "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
}
a{color:var(--fg); text-decoration:none}
a:hover{color:var(--mag)}
.wrap{max-width:860px; margin:0 auto; padding:0 28px}
header{border-bottom:1px solid var(--line)}
header .wrap{display:flex; align-items:center; justify-content:space-between; height:68px}
.masthead{font-family:"Source Serif","Serif SC",Georgia,"Songti SC",serif; font-size:19px; letter-spacing:.04em}
.masthead i{color:var(--mag); font-style:normal}
header nav{display:flex; gap:22px; font-size:13px}
header nav a{color:var(--dim)}
header nav a:hover{color:var(--mag)}
main{padding:52px 0 78px}
h1{font-family:"Source Serif","Serif SC",Georgia,"Songti SC",serif; font-weight:400; font-size:33px; line-height:1.3; margin:0 0 12px; letter-spacing:-.01em}
.lead{color:var(--dim); font-size:14.5px; margin:0 0 50px; max-width:54ch}
.lead em{color:var(--mag); font-style:normal}
.grid{display:flex; flex-direction:column; gap:14px}
.card{background:var(--card); border:1px solid var(--line); padding:26px 28px; display:grid;
  grid-template-columns:56px 1fr; gap:22px}
.card .no{font-family:"Source Serif","Serif SC",Georgia,serif; font-size:26px; color:var(--mag); line-height:1; padding-top:3px}
.card .m{font-size:11.5px; color:var(--dim); letter-spacing:.12em; text-transform:uppercase; margin-bottom:8px}
.card h2{font-family:"Source Serif","Serif SC",Georgia,"Songti SC",serif; font-weight:400; font-size:20px; line-height:1.45; margin:0 0 8px}
.card h2 a:hover{color:var(--mag)}
.card p{margin:0; color:var(--dim); font-size:14px}
article h1{font-size:28px; margin-bottom:8px}
article .m{display:block; font-size:11.5px; color:var(--dim); letter-spacing:.12em; text-transform:uppercase; margin-bottom:30px}
article p{margin:0 0 21px}
article h2{font-family:"Source Serif","Serif SC",Georgia,"Songti SC",serif; font-weight:400; font-size:20px; margin:36px 0 12px}
article h2::after{content:""; display:block; width:32px; height:1px; background:var(--mag); margin-top:10px}
pre{background:var(--card); border:1px solid var(--line); padding:15px 17px; overflow:auto; font-size:13px; line-height:1.65}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; color:var(--mag)}
footer{border-top:1px solid var(--line)}
footer .wrap{padding:22px 28px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-size:11.5px; color:var(--dim); letter-spacing:.1em}
.nf h1{font-size:54px; color:var(--mag)}
@media(max-width:620px){
  h1{font-size:26px}
  .card{grid-template-columns:1fr; gap:10px; padding:22px}
  .card .no{font-size:20px}
}