/* YingNing 的技术笔记 — site chrome
   Editorial paper/ink system shared with the article posters. */

:root{
  --paper:#FAF6EC;
  --paper-2:#F3EFE4;
  --ink:#14110C;
  --ink-2:#4B463B;
  --ink-3:#8B8373;
  --rule:rgba(20,17,12,.16);
  --rule-strong:rgba(20,17,12,.42);
  --accent:#C2402A;
  --accent-soft:rgba(194,64,42,.08);
  --cn:"PingFang SC","Hiragino Sans GB","Heiti SC",sans-serif;
  --serif:"Songti SC","STSong","Source Han Serif SC",serif;
  --latin:"Helvetica Neue","Arial",sans-serif;
  --mono:"SFMono-Regular",Menlo,"Courier New",monospace;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#14120E;
    --paper-2:#1B1813;
    --ink:#F3EFE4;
    --ink-2:#C9C0AE;
    --ink-3:#8F8676;
    --rule:rgba(243,239,228,.18);
    --rule-strong:rgba(243,239,228,.42);
    --accent:#E4735C;
    --accent-soft:rgba(228,115,92,.1);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--cn);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}
a{color:inherit}
img{max-width:100%}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:.01em}
p{margin:0}
.mono{font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;font-size:10.5px}

.wrap{max-width:1180px;margin:0 auto;padding:0 40px}

/* ---------- masthead ---------- */
.masthead{padding-top:38px}
.mh-top{
  display:flex;justify-content:space-between;gap:24px;
  border-bottom:1px solid var(--rule);padding-bottom:12px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  color:var(--ink-3);text-transform:uppercase;
}
.mh-top a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid transparent}
.mh-top a:hover{color:var(--accent);border-bottom-color:var(--accent)}

.wordmark{margin-top:34px}
.wordmark .lat{display:block;font-family:var(--latin);font-weight:800;font-size:64px;line-height:.95;letter-spacing:-.025em}
.wordmark .cn{display:block;font-family:var(--serif);font-weight:700;font-size:32px;letter-spacing:.2em;margin-top:14px;color:var(--ink-2)}

.mh-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:26px;padding-bottom:40px}
.tagline{font-size:16.5px;line-height:1.85;color:var(--ink-2);max-width:560px}
.site-nav{display:flex;gap:22px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.site-nav a{text-decoration:none;color:var(--ink-2);border-bottom:1px solid var(--rule)}
.site-nav a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- section head ---------- */
.sec-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  border-top:2px solid var(--ink);padding-top:12px;
}
.sec-head h2{font-size:26px;letter-spacing:.05em}
.sec-head .en{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;color:var(--ink-3);text-transform:uppercase}

/* ---------- featured ---------- */
.feature{display:grid;grid-template-columns:1.06fr 1fr;gap:44px;margin-top:28px;align-items:start}
.feature-cover{display:block;border:1px solid var(--rule);overflow:hidden;background:var(--paper-2)}
.feature-cover img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:top center;transition:transform .5s ease}
.feature-cover:hover img{transform:scale(1.015)}
@media (prefers-reduced-motion: reduce){.feature-cover:hover img{transform:none}}

.feature-body .kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--accent);text-transform:uppercase}
.feature-body h3{font-size:33px;line-height:1.4;margin-top:12px;letter-spacing:.005em;text-wrap:balance}
.feature-body h3 a{text-decoration:none}
.feature-body h3 a:hover{color:var(--accent)}
.feature-body .summary{font-size:16px;line-height:1.85;color:var(--ink-2);margin-top:14px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.tags span{border:1px solid var(--rule);padding:2px 9px;font-size:12px;color:var(--ink-2);letter-spacing:.03em}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:22px}
.btn{
  display:inline-block;text-decoration:none;padding:11px 18px;border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  transition:background .15s,color .15s,border-color .15s;
}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule-strong)}
.btn.ghost:hover{background:transparent;border-color:var(--accent);color:var(--accent)}
.actions .note{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink-3)}

/* ---------- archive ---------- */
.archive{margin:34px 0 0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.archive li{border-bottom:1px solid var(--rule)}
.archive a{
  display:grid;grid-template-columns:56px 1fr 210px 104px 22px;gap:18px;align-items:baseline;
  padding:17px 0;text-decoration:none;transition:background .15s;
}
.archive a:hover{background:var(--accent-soft)}
.archive .no{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.1em}
.archive .t{font-size:18.5px;font-weight:600;letter-spacing:.01em}
.archive a:hover .t{color:var(--accent)}
.archive .tg{font-size:12.5px;color:var(--ink-3)}
.archive .dt{font-family:var(--mono);font-size:11px;color:var(--ink-3);text-align:right}
.archive .ar{font-family:var(--mono);font-size:12px;color:var(--ink-3);text-align:right}

/* ---------- about ---------- */
.about{margin-top:70px;padding-bottom:20px}
.about-grid{display:grid;grid-template-columns:200px 1fr;gap:44px;margin-top:22px;border-top:1px solid var(--rule);padding-top:22px}
.about-grid h3{font-size:15px;letter-spacing:.02em;color:var(--ink-2)}
.about-grid .body p{font-size:15.5px;line-height:1.95;color:var(--ink-2);max-width:720px}
.about-grid .body p + p{margin-top:12px}
.about-grid .links{margin-top:18px;display:flex;gap:18px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.about-grid .links a{text-decoration:none;color:var(--ink-2);border-bottom:1px solid var(--rule)}
.about-grid .links a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- footer ---------- */
.site-foot{
  margin-top:56px;border-top:1px solid var(--rule);padding:18px 0 56px;
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--ink-3);
}
.site-foot a{text-decoration:none;color:var(--ink-3);border-bottom:1px solid transparent}
.site-foot a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- post 404 etc ---------- */
.notice{padding:90px 0 120px}
.notice .code{font-family:var(--latin);font-weight:800;font-size:96px;line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.4px var(--ink)}
.notice h1{font-family:var(--serif);font-size:30px;letter-spacing:.08em;margin-top:18px}
.notice p{margin-top:14px;color:var(--ink-2)}
.notice .btn{margin-top:26px}

@media (max-width:560px){
  .actions{flex-direction:column;align-items:stretch}
  .actions .btn{text-align:center}
  .actions .note{text-align:center}
  .mh-top{flex-wrap:wrap;row-gap:4px}
}

@media (max-width:960px){
  .wrap{padding:0 22px}
  .wordmark .lat{font-size:44px}
  .wordmark .cn{font-size:22px;letter-spacing:.14em}
  .mh-foot{flex-direction:column;align-items:flex-start;gap:18px}
  .feature{grid-template-columns:1fr;gap:24px}
  .feature-body h3{font-size:26px}
  .archive a{grid-template-columns:36px 1fr; row-gap:4px}
  .archive .tg,.archive .dt,.archive .ar{grid-column:2;text-align:left}
  .archive .tg{color:var(--ink-3)}
  .about-grid{grid-template-columns:1fr;gap:12px}
  .sec-head{flex-wrap:wrap;gap:4px 16px}
}