/* modern.css — loaded after main.css. Overrides the 2016 HPSTR skin.
   Same palette as /me/ so the blog and the personal site read as one place. */

:root{
  --bg:#fbfaf7; --panel:#ffffff; --ink:#16181d; --mut:#6b7280; --faint:#98a0aa;
  --line:#e7e4de; --accent:#1f5f5b; --accent-soft:#eef4f2;
  --measure:720px; --radius:12px;
  color-scheme: light dark;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0f1113; --panel:#15181b; --ink:#e9e7e3; --mut:#9ba3ad; --faint:#6e7681;
        --line:#252a2f; --accent:#7fc0b6; --accent-soft:#16211f}
}

html{background:var(--bg) !important}
body{
  background:var(--bg) !important;
  color:var(--ink) !important;
  font:17px/1.85 ui-sans-serif,-apple-system,"PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",sans-serif !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding-top:0 !important;
}
body.custom-background{background:var(--bg) !important}
h1,h2,h3,h4,h5,h6,p,li,dd,dt,td,th,blockquote{color:var(--ink)}
a{color:var(--accent) !important;text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}
hr{border:0;border-top:1px solid var(--line);margin:40px 0}

/* ---------- top nav (replaces the off-canvas dl-menu) ---------- */
.site-nav{
  position:sticky;top:0;z-index:100;
  border-bottom:1px solid var(--line);
  background:var(--bg);
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  -webkit-backdrop-filter:saturate(1.3) blur(10px);
  backdrop-filter:saturate(1.3) blur(10px);
}
.nav-wrap{
  max-width:var(--measure);margin:0 auto;padding:0 24px;
  min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.nav-brand{font-size:15px;font-weight:650;letter-spacing:-.01em;color:var(--ink) !important}
.nav-links{display:flex;gap:2px;flex-wrap:wrap}
.nav-links a{
  color:var(--mut) !important;font-size:13.5px;padding:6px 10px;border-radius:8px;
  text-decoration:none;transition:color .15s ease,background .15s ease;
}
.nav-links a:hover{color:var(--ink) !important;background:var(--accent-soft);text-decoration:none}
.dl-menuwrapper{display:none !important}

/* ---------- shells ---------- */
/* main.css sets #main's width inside a media query, so a plain override loses
   to it; both the column and the header block above must share --measure or the
   page reads as two left edges. */
#main{max-width:var(--measure) !important;margin:0 auto;padding:36px 24px 8px}
.wrap{max-width:var(--measure) !important}

/* ---------- index / archive header ---------- */
#post-index .entry-header,
#page .entry-header{
  background:none !important;height:auto !important;min-height:0 !important;
  padding:0 !important;margin:0 !important;position:static !important;
}
#post-index .entry-image,
#post-index .image-credit{display:none !important}
#post-index .header-title,
#page .header-title{position:static !important;padding:0 !important;margin:0 0 8px !important}
#post-index .header-title-wrap{padding:0}
/* the theme centres a 38px site-title here, duplicating the brand in the nav.
   The header now carries page.title, left-aligned like everything else. */
#post-index .entry-header, #page .entry-header{text-align:left !important;padding-top:8px !important}
/* .entry-header sits OUTSIDE #main, so it needs the same measure or the h1
   lands flush against the viewport edge. */
#post-index .header-title, #page .header-title{padding:0 !important;margin:0 !important}
#post-index .header-title-wrap, #page .header-title-wrap{
  text-align:left !important;
  max-width:var(--measure) !important;margin:0 auto !important;padding:0 24px !important;
}
#post-index .entry-header h1{
  font-size:clamp(25px,3.2vw,32px) !important;line-height:1.2;letter-spacing:-.022em;
  font-weight:680;margin:0 0 6px;color:var(--ink) !important;
}
#post-index .entry-header h2{
  font-size:14.5px !important;font-weight:400;color:var(--mut) !important;
  margin:0 0 10px;letter-spacing:0;line-height:1.6;
}
/* single post: the theme centres .header-title and pads the h1 by 20px, which
   breaks the left edge established by the nav and the body copy. */
#post .header-title, #page .header-title{text-align:left !important;margin:0 !important}
#post .header-title-wrap, #page .header-title-wrap{text-align:left !important}
#post .header-title h1, #post .entry-title{margin:0 0 8px !important;text-align:left !important}
#post .header-title h2{
  margin:0 0 4px !important;font-size:12.5px !important;font-weight:400;
  text-transform:none !important;letter-spacing:.01em;color:var(--mut) !important;
}

/* ---------- neutralise the 2016 card skin ----------
   main.css paints white boxes (#post-index article, .entry-content, .read-more,
   #disqus_thread) and puts text colour on the body. Once the body goes light-on-
   dark for prefers-color-scheme, those panels stay white and the text inside
   turns near-invisible. Just recolouring them keeps two competing skins, so drop
   the skin instead: this site is a flat reading surface, same as /me/. */
#post-index article{
  background:none !important;box-shadow:none !important;border-radius:0 !important;
  padding:0 !important;margin:0 !important;
}
#post-index article.hentry{
  border-top:1px solid var(--line) !important;
  padding:26px 0 22px !important;
}
#post-index article.hentry:first-of-type{border-top:0 !important;padding-top:0 !important}
#post .entry-content, #page .entry-content,
#post #disqus_thread, #page #disqus_thread{
  background:none !important;box-shadow:none !important;
  padding:0 !important;margin:10px 0 20px !important;
}
/* .read-more is the theme's prev/next block on single posts, not our index link
   (that one is .post-link) — but kill its white panel too. */
.read-more{background:none !important;box-shadow:none !important;border-top:1px solid var(--line) !important}

/* ---------- post cards on the index ---------- */
article.hentry{
  border-top:1px solid var(--line);
  padding:26px 0 22px;
  margin:0 !important;
}
article.hentry:first-of-type{border-top:0}
.entry-title,.entry-title a{
  font-size:20px !important;line-height:1.42;font-weight:640;
  letter-spacing:-.01em;color:var(--ink) !important;margin:0 0 6px;
  text-decoration:none;
}
.entry-title a:hover{color:var(--accent) !important}
.entry-meta{
  font-size:12.5px !important;color:var(--mut) !important;margin:0 0 8px !important;
  letter-spacing:.01em;text-transform:none !important;text-align:left !important;
  display:block !important;
}
/* single posts: the theme centres the meta with 50px margins */
#post .entry-meta, #page .entry-meta{
  margin:0 0 26px !important;text-align:left !important;
}
.entry-meta a{color:var(--mut) !important}
.entry-meta span{margin-right:10px}
.entry-reading-time{color:var(--faint) !important;font-size:12px;float:none !important}
.entry-reading-time i{display:none}

/* index shows an excerpt, not the whole article */
.post-excerpt{color:var(--mut);font-size:15px;line-height:1.75;margin:0 0 10px;max-width:62ch}
.post-link{
  display:inline-block;font-size:13.5px;font-weight:550;color:var(--accent) !important;
  padding:0;background:none;box-shadow:none;border:0;
}

/* ---------- single post ---------- */
#post article.hentry, #page article.hentry{
  border-top:0;padding:0 !important;
}
.entry-header{background:none !important;height:auto !important;position:static !important}
.entry-header .entry-image{display:none}
.post .entry-title, #post .entry-title{
  font-size:clamp(26px,3.6vw,34px) !important;line-height:1.22;letter-spacing:-.02em;
  font-weight:680;margin:0 0 8px;
}
.entry-content{
  font-size:17px;line-height:1.88;color:var(--ink);
  margin-top:10px;
}
.entry-content p{margin:0 0 1.1em}
/* the theme enlarges the first paragraph as a lede; these archive posts have none */
.entry-content > p:first-child{
  font-size:17px !important;line-height:1.88 !important;margin-bottom:1.1em !important;
}
.entry-content h2{font-size:21px;font-weight:650;letter-spacing:-.01em;margin:2em 0 .5em;
  padding:0;border:0;display:block}
.entry-content h3{font-size:17.5px;font-weight:650;margin:1.7em 0 .4em;color:var(--ink)}
.entry-content h4{font-size:16px;font-weight:600;margin:1.5em 0 .3em}
.entry-content ul,.entry-content ol{padding-left:1.35em;margin:0 0 1.1em}
.entry-content li{margin:.28em 0}
.entry-content img{max-width:100%;height:auto;border-radius:8px;display:block;margin:1.4em auto}
.entry-content blockquote{
  margin:1.6em 0;padding:2px 0 2px 18px;border-left:3px solid var(--accent);
  color:var(--mut);font-style:normal;
}
.entry-content code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.87em;
  background:var(--accent-soft);color:var(--ink);padding:.1em .36em;border-radius:5px;
  border:0;
}
.entry-content pre{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;overflow-x:auto;font-size:13px;line-height:1.65;margin:1.4em 0;
}
.entry-content pre code{background:none;padding:0;font-size:inherit}
.entry-content table{width:100%;border-collapse:collapse;font-size:14px;margin:1.2em 0;
  display:block;overflow-x:auto}
.entry-content th,.entry-content td{border-bottom:1px solid var(--line);padding:9px 12px;
  text-align:left;vertical-align:top}
.entry-content th{font-size:12.5px;color:var(--mut);font-weight:600;background:var(--accent-soft);
  white-space:nowrap}
.entry-content hr{border-top:1px solid var(--line)}

/* ---------- archive (/posts/) ---------- */
#post-index article > h2{
  font-size:13px;letter-spacing:.14em;color:var(--accent) !important;font-weight:650;
  margin:30px 0 6px;text-transform:none;
}
#post-index article:first-of-type > h2{margin-top:4px}
#post-index ul{list-style:none;padding:0;margin:0}
#post-index li.entry-title{
  font-size:16px !important;font-weight:400;line-height:1.5;
  padding:9px 0;border-bottom:1px solid var(--line);margin:0;
}
#post-index li.entry-title a{color:var(--ink) !important;font-weight:450}
#post-index li.entry-title a:hover{color:var(--accent) !important}

/* ---------- footer ---------- */
.footer-wrapper{background:none !important;border-top:1px solid var(--line);margin-top:64px}
.footer-wrapper footer{
  max-width:var(--measure);margin:0 auto;padding:20px 24px 44px;
  color:var(--faint) !important;font-size:13px;text-align:left;
}
.footer-wrapper footer a{color:var(--faint) !important}

/* ---------- pagination ---------- */
.pagination{
  max-width:var(--measure);margin:0 auto;padding:26px 24px 4px;
  display:flex;justify-content:space-between;gap:12px;font-size:13.5px;
}
.pagination a,.pagination span{
  display:inline-block;padding:7px 12px;border:1px solid var(--line);border-radius:8px;
  color:var(--mut) !important;
}
.pagination a:hover{border-color:var(--accent);color:var(--accent) !important;text-decoration:none}

@media(max-width:680px){
  #main{padding:34px 18px 8px}
  /* ID selectors above outrank a bare .header-title-wrap, so restate them here */
  #post-index .header-title-wrap, #post .header-title-wrap,
  #page .header-title-wrap{padding:0 18px !important}
  .nav-wrap{padding:0 18px}
  .entry-content{font-size:16px;line-height:1.8}
  .entry-title{font-size:18.5px !important}
  .footer-wrapper footer{padding:18px 18px 34px}
}

/* ---------- front page ----------
   The root page is not a post list: it is the thing someone lands on when they
   look the person up. Typography carries it — one size jump, one accent, no
   cards, no icons. */
#main:has(.hero){padding-top:20px}
.hero{padding:14px 0 4px}
.hero-kicker{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint) !important;margin:0 0 20px;
}
.hero h1{
  font-size:clamp(30px,5.2vw,46px);line-height:1.06;letter-spacing:-.035em;
  font-weight:700;margin:0 0 20px;color:var(--ink) !important;
}
.hero-lede{
  font-size:16.5px;line-height:1.85;color:var(--mut) !important;
  margin:0 0 26px;
}
.hero-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;font-size:14px;margin:0}
.hero-links a{color:var(--accent) !important}
.hero-links a:not(.hero-cta){position:relative}
.hero-links a:not(.hero-cta)::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .28s cubic-bezier(.2,.7,.2,1);
}
.hero-links a:not(.hero-cta):hover::after,
.hero-links a:not(.hero-cta):focus-visible::after{transform:scaleX(1)}
/* .hero-links a outranks a bare .hero-cta, so the filled button must be more
   specific or its label takes the link colour on a dark pill. */
.hero-links a.hero-cta{
  display:inline-block;padding:9px 16px;border-radius:9px;
  background:var(--ink) !important;color:var(--bg) !important;font-weight:600;
  text-decoration:none !important;
}
.hero-links a.hero-cta:hover{background:var(--accent) !important;color:var(--bg) !important}

.sec{margin:54px 0 0}
.sec-head{
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mut) !important;font-weight:600;margin:0 0 4px;
}

.picks{list-style:none;padding:0;margin:0}
.picks li + li{border-top:1px solid var(--line)}
.picks a{display:block;padding:16px 0;text-decoration:none !important}
.pick-title{display:block;font-size:17px;font-weight:620;letter-spacing:-.012em;color:var(--ink)}
.picks a:hover .pick-title{color:var(--accent)}
.pick-gist{display:block;margin-top:4px;font-size:14px;font-style:normal;color:var(--mut);line-height:1.6}

.years{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:16px 0 0}
.years a{
  display:block;padding:9px 14px;border:1px solid var(--line);border-radius:9px;
  color:var(--mut) !important;font-size:13.5px;text-decoration:none !important;
}
.years a b{color:var(--ink);font-weight:620;font-variant-numeric:tabular-nums;margin-right:8px}
.years a:hover{border-color:var(--accent)}

.now p{margin:14px 0 0;font-size:15.5px;line-height:1.82;color:var(--mut) !important}
.now b{color:var(--ink);font-weight:620;margin-right:9px}
.more{margin:16px 0 0;font-size:14px}

@media(max-width:680px){
  .hero h1{font-size:clamp(26px,8vw,34px)}
  .hero-lede{font-size:15.5px}
  .picks a{padding:14px 0}
  .pick-title{font-size:16px}
  .sec{margin:42px 0 0}
}
/* ---------- footer links ---------- */
.foot-links{display:inline-flex;gap:16px;margin-left:18px}
.foot-links a{color:var(--faint) !important}
.foot-links a:hover{color:var(--mut) !important}
@media(max-width:680px){
  .foot-links{display:flex;margin:10px 0 0}
}

/* ---------- motion ----------
   Everything below is gated on `html.motion`, which site.js only adds when JS
   runs and the reader has not asked for reduced motion. No class -> static page.
   Only opacity/transform animate, so it stays on the compositor. */
.motion #main > section{
  opacity:0;transform:translateY(12px);
  transition:opacity .62s cubic-bezier(.2,.7,.2,1),transform .62s cubic-bezier(.2,.7,.2,1);
}
.motion #main > section.in{opacity:1;transform:none}

/* a block cursor that only exists while you are looking at the headline:
   the one loud thing on the page, and you have to find it */
.hero h1 .caret{
  display:inline-block;width:.36em;height:.84em;margin-left:.1em;
  border-radius:2px;background:var(--accent);
  vertical-align:-.055em;
  opacity:0;transform:translateX(-5px);
  transition:opacity .16s ease,transform .16s ease;
}
.hero h1:hover .caret{
  opacity:1;transform:none;
  animation:caret-blink 1.06s steps(1,end) infinite;
}
@keyframes caret-blink{
  0%,48%{opacity:1}
  49%,100%{opacity:.06}
}

/* selected rows: a rule grows out of the left margin, the title steps aside */
.picks li{position:relative}
.picks li::before{
  content:"";position:absolute;left:-15px;top:14px;bottom:14px;width:2px;
  border-radius:2px;background:var(--accent);
  transform:scaleY(0);transform-origin:50% 50%;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.picks li:hover::before,.picks li:focus-within::before{transform:scaleY(1)}
.picks a{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.picks a:hover,.picks a:focus-visible{transform:translateX(4px)}
.pick-title{transition:color .18s ease}

/* secondary links: the underline draws in from the left rather than appearing */
.hero-links a:not(.hero-cta){position:relative}
.hero-links a:not(.hero-cta)::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .28s cubic-bezier(.2,.7,.2,1);
}
.hero-links a:not(.hero-cta):hover::after,
.hero-links a:not(.hero-cta):focus-visible::after{transform:scaleX(1)}

/* the primary button lifts a hair; no bounce, no scale theatre */
.hero-links a.hero-cta{transition:background .2s ease,transform .2s ease}
.hero-links a.hero-cta:hover{transform:translateY(-1px)}

@media(max-width:680px){
  .picks li::before{left:-13px;top:12px;bottom:12px}
}

/* belt and braces: the script already bails, this covers CSS-only readers */
@media(prefers-reduced-motion:reduce){
  .motion #main > section{opacity:1 !important;transform:none !important;transition:none !important}
  .hero h1 .caret{display:none !important}
  .picks li::before,.picks a,.pick-title,.hero-links a.hero-cta,
  .hero-links a:not(.hero-cta)::after{transition:none !important}
  .picks a:hover,.hero-links a.hero-cta:hover{transform:none}
  .hero-links a:not(.hero-cta)::after{display:none}
}

/* ---------- mirrored articles (公众号 / CSDN) ----------
   Scoped to body.archive so none of this leaks onto the 2016 blog posts. */
.arc-kicker{
  margin:0 0 6px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mut) !important;font-weight:600;
}
.arc-src,.arc-back{
  margin:22px 0 0;font-size:13.5px;line-height:1.78;color:var(--faint) !important;
}
.arc-src a,.arc-back a{
  color:var(--mut) !important;text-decoration:none !important;
  border-bottom:1px solid var(--line);
}
.arc-src a:hover,.arc-back a:hover{color:var(--accent) !important;border-color:var(--accent)}

.archive .entry-content h2,
.archive .entry-content h3,
.archive .entry-content h4{
  margin:34px 0 10px;line-height:1.4;letter-spacing:-.01em;color:var(--ink) !important;
}
.archive .entry-content h2{font-size:21px}
.archive .entry-content h3{font-size:17.5px}
.archive .entry-content h4{font-size:15.5px}
.archive .entry-content p{margin:0 0 16px;font-size:16.5px;line-height:1.85}
.archive .entry-content ul,.archive .entry-content ol{margin:14px 0 18px;padding-left:24px}
.archive .entry-content li{margin:7px 0;font-size:16px;line-height:1.8}
.archive .entry-content figure{margin:24px 0}
.archive .entry-content figure img{
  display:block;width:100%;height:auto;border-radius:10px;
  border:1px solid var(--line);background:var(--panel);
}
.archive .entry-content pre{
  margin:20px 0;padding:14px 16px;overflow-x:auto;
  background:var(--accent-soft);border:1px solid var(--line);border-radius:10px;
}
.archive .entry-content pre code{
  padding:0;background:none;color:var(--ink);font-size:13px;line-height:1.65;
  white-space:pre;
}
.archive .entry-content .tbl{overflow-x:auto;margin:22px 0}
.archive .entry-content table{border-collapse:collapse;font-size:14px;line-height:1.6}
.archive .entry-content td{
  border:1px solid var(--line);padding:6px 10px;text-align:left;vertical-align:top;
  font-variant-numeric:tabular-nums;
}