/* Blog: post pages (_layouts/note.html) and the index at /blog/. */
:root {
  --bg: #ffffff;
  --ink: #33383c;
  --body: #494e52;
  --muted: #7a8288;
  --faint: #a4aaaf;
  --line: #e4e6e8;
  --accent: #00369f;
  --link: #224b8d;
  --card: #ffffff;
  --code-bg: #fafafa;
  --table-head: #f2f3f3;
  --soft: #f5f7fa;
  /* Latin faces first; CJK glyphs fall through to the Chinese faces. */
  --serif: "Source Serif 4", "Noto Serif SC", "Songti SC", "STSong", Georgia, serif;
  --sans: Inter, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15171a; --ink: #e8eaed; --body: #cfd3d7; --muted: #9aa0a6; --faint: #737a80; --line: #2c3036;
    --accent: #7aa2f7; --link: #8fb3ff; --card: #ffffff; --code-bg: #1e2125; --table-head: #1b1e22; --soft: #1b1e22;
  }
}
:root[data-theme="dark"] {
  --bg: #15171a; --ink: #e8eaed; --body: #cfd3d7; --muted: #9aa0a6; --faint: #737a80; --line: #2c3036;
  --accent: #7aa2f7; --link: #8fb3ff; --card: #ffffff; --code-bg: #1e2125; --table-head: #1b1e22; --soft: #1b1e22;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--body); font: 400 18.5px/1.72 var(--serif); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
[id] { scroll-margin-top: 76px; }

/* ---------- top bar and footer ---------- */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--accent); z-index: 20; }
.topbar {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between;
  padding: 12px max(16px, calc((100vw - 1040px) / 2)); background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line); font: 500 15px/1.4 var(--sans);
}
.topbar .home { color: var(--ink); font-weight: 600; }
.topbar nav a { color: var(--muted); margin-left: 22px; }
.topbar nav a:hover, .topbar nav a[aria-current] { color: var(--ink); text-decoration: none; }

.site-end { max-width: 700px; margin: 40px auto 0; padding: 22px 16px 64px; border-top: 1px solid var(--line); font: 400 15px/1.6 var(--sans); color: var(--muted); }
.site-end.wide { max-width: 940px; }
.site-end a { margin-right: 18px; }

/* ---------- shared header pieces ---------- */
.note-kicker { font: 600 12.5px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px; }
.note-kicker a { color: inherit; }
.note-kicker .sep { color: var(--faint); margin: 0 .5em; }
.note-title { font: 700 clamp(31px, 5vw, 44px)/1.12 var(--serif); color: var(--ink); letter-spacing: -.01em; margin: 0 0 18px; }
.note-dek { font-size: 21px; line-height: 1.5; color: var(--muted); margin: 0 0 22px; }
.note-meta { font: 400 14.5px/1.5 var(--sans); color: var(--muted); margin: 0 0 14px; }
.note-meta b { color: var(--ink); font-weight: 600; }
.note-tags { font: 400 13.5px/1.5 var(--sans); color: var(--muted); margin: 0 0 14px; }
.note-tags span { margin-right: 12px; }
.note-links { margin: 0 0 8px; }
.note-links a {
  display: inline-block; margin: 0 6px 8px 0; padding: 5px 14px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--ink); font: 500 14px/1.4 var(--sans);
}
.note-links a:hover { border-color: var(--faint); text-decoration: none; }

/* ---------- post page ---------- */
.note { max-width: 700px; margin: 0 auto; padding: 56px 16px 24px; }

.note-body .part-ref { margin: -.5em 0 1.4em; font: 400 14.5px/1.5 var(--sans); color: var(--muted); }
.note-body h2 { font: 700 27px/1.25 var(--serif); color: var(--ink); margin: 2.1em 0 .6em; }
.note-body h3 { font: 700 21px/1.3 var(--serif); color: var(--ink); margin: 1.8em 0 .5em; }
.note-body p { margin: 0 0 1.1em; }
.note-body ul, .note-body ol { padding-left: 1.3em; }
.note-body b, .note-body strong { color: var(--ink); }

.note-fig { width: min(940px, calc(100vw - 32px)); margin: 2em 0 2.2em; position: relative; left: 50%; transform: translateX(-50%); }
.note-fig.narrow { width: min(700px, calc(100vw - 32px)); }
.note-fig a { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.note-fig img { display: block; width: 100%; height: auto; }
.note-fig figcaption { max-width: 700px; margin: 12px auto 0; font: 400 14.5px/1.6 var(--sans); color: var(--muted); }

.note-table { overflow-x: auto; margin: 1.4em 0 1.6em; }
.note-table table { border-collapse: collapse; width: 100%; font: 400 15px/1.5 var(--sans); }
.note-table th, .note-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.note-table th:first-child, .note-table td:first-child { text-align: left; }
.note-table th { background: var(--table-head); color: var(--ink); font-weight: 600; }

.note-body pre {
  margin: 0 0 1.2em; padding: 16px 18px; overflow-x: auto; border-radius: 10px; background: var(--code-bg);
  border: 1px solid var(--line); font: 13.5px/1.6 var(--mono); color: var(--ink);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.note-body code { font-family: var(--mono); font-size: .86em; }
.note-body pre code { font-size: inherit; }
.note-body .highlight span { color: inherit; font-style: normal; font-weight: inherit; }
.copy-wrap { position: relative; }
.copy-wrap pre { padding-top: 46px; }
.copy-btn {
  position: absolute; top: 9px; right: 9px; padding: 4px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: 500 13px/1.4 var(--sans);
}
.copy-btn:hover { border-color: var(--faint); }

/* series box: a card under the header, a left rail on wide screens */
.rail-label { font: 600 12px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.series-box { margin: 26px 0 32px; padding: 16px 18px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); font: 400 14.5px/1.5 var(--sans); }
.series-box-title { display: block; font: 600 17px/1.35 var(--serif); color: var(--ink); }
.series-list { list-style: none; counter-reset: part; margin: 10px 0 0; padding: 0; font: 400 14.5px/1.45 var(--sans); }
.series-list li { counter-increment: part; position: relative; padding: 5px 0 5px 32px; }
.series-list li::before {
  content: counter(part); position: absolute; left: 0; top: 5px; width: 21px; height: 21px; border-radius: 50%;
  border: 1px solid var(--faint); font: 600 11.5px/19px var(--sans); text-align: center; color: var(--muted);
}
.series-list a { color: var(--body); }
.series-list .is-published::before { border-color: var(--accent); color: var(--accent); }
.series-list .is-current::before { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.series-list .is-current a { color: var(--ink); font-weight: 600; }
.series-list .is-planned { color: var(--faint); }
.series-list .is-planned::before { border-style: dashed; border-color: var(--line); color: var(--faint); }
.series-list .soon { font-size: 12px; margin-left: 4px; white-space: nowrap; }

/* table of contents: only on wide screens */
.toc-rail { display: none; font: 400 13.5px/1.45 var(--sans); }
.toc-rail ol { list-style: none; margin: 8px 0 0; padding: 0; border-left: 1px solid var(--line); }
.toc-rail a { display: block; padding: 4px 0 4px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--muted); }
.toc-rail a:hover { color: var(--ink); text-decoration: none; }
.toc-rail .sub { display: none; }
.toc-rail .sub.open { display: block; }
.toc-rail .sub a { padding-left: 26px; font-size: 13px; }
.toc-rail a.active { color: var(--ink); border-left-color: var(--accent); }

@media (min-width: 1440px) {
  .series-box, .toc-rail:not([hidden]) {
    position: fixed; top: 92px; width: 212px; max-height: calc(100vh - 124px); overflow-y: auto; margin: 0;
  }
  .series-box { left: max(16px, calc(50vw - 714px)); padding: 0; border: 0; background: none; }
  .toc-rail:not([hidden]) { display: block; right: max(16px, calc(50vw - 714px)); }
  .topbar { padding-left: max(16px, calc(50vw - 714px)); padding-right: max(16px, calc(50vw - 714px)); }
}

/* end of a post: previous / next and more from the topic */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 3em 0 0; font: 400 15px/1.45 var(--sans); }
.post-nav a, .post-nav .is-planned { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); }
.post-nav a:hover { border-color: var(--faint); text-decoration: none; }
.post-nav span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 3px; }
.post-nav .next { grid-column: 2; text-align: right; }
.post-nav .is-planned { color: var(--faint); border-style: dashed; }
.post-related { margin: 2.6em 0 0; }
.post-related .rail-label { margin-bottom: 4px; }

/* ---------- lists of posts ---------- */
.post-list { list-style: none; margin: 0; padding: 0; }
.post-row { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 4px 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.post-row:last-child { border-bottom: 0; }
.post-row-date { font: 400 14px/1.9 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.post-row-title { font: 600 19px/1.35 var(--serif); color: var(--ink); }
.post-row-excerpt { margin: 4px 0 0; font-size: 16.5px; line-height: 1.55; color: var(--muted); }
.post-row-meta { margin: 6px 0 0; font: 400 13.5px/1.5 var(--sans); color: var(--faint); }
.post-row-meta a { color: var(--muted); }

/* ---------- blog index ---------- */
.blog { max-width: 940px; margin: 0 auto; padding: 56px 16px 24px; }
.blog-head { max-width: 700px; }
.blog h2 { font: 700 27px/1.25 var(--serif); color: var(--ink); margin: 0 0 .3em; }

.view-tabs { display: inline-flex; gap: 4px; margin: 26px 0 30px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; }
.view-tabs[hidden] { display: none; }
.view-tabs button {
  padding: 6px 16px; border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; font: 500 14px/1.4 var(--sans);
}
.view-tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.view[hidden] { display: none; }

.topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 0 0 3em; }
.topic-card {
  display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 14px; border: 1px solid var(--line); border-radius: 12px;
  color: var(--body); font: 400 14px/1.5 var(--sans);
}
.topic-card:hover { border-color: var(--faint); text-decoration: none; }
.topic-card-name { font: 700 18px/1.3 var(--serif); color: var(--ink); }
.topic-card-desc { color: var(--muted); flex: 1; }
.topic-card-count { font-weight: 600; color: var(--accent); }
.topic-card.is-empty .topic-card-count { color: var(--faint); font-weight: 500; }

.topic { margin: 0 0 3.2em; }
.topic-desc { margin: 0 0 1.2em; color: var(--muted); font-size: 17px; }
.series-card { margin: 0 0 1.4em; padding: 18px 20px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.series-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.series-card h3 { font: 700 21px/1.3 var(--serif); color: var(--ink); margin: 0; }
.series-card > p { margin: 6px 0 0; font-size: 16.5px; color: var(--muted); }
.series-progress { font: 500 13px/1 var(--sans); color: var(--muted); white-space: nowrap; }
.series-progress i { display: inline-block; width: 8px; height: 8px; margin-right: 3px; border-radius: 50%; border: 1px solid var(--faint); vertical-align: 0; }
.series-progress i.on { background: var(--accent); border-color: var(--accent); }
.series-progress b { margin-left: 5px; font-weight: 500; }
.blog .archive-year { font: 700 21px/1.3 var(--serif); color: var(--ink); margin: 1.6em 0 .2em; }
.blog .archive-year:first-of-type { margin-top: 0; }

@media (max-width: 640px) {
  body { font-size: 17.5px; }
  .note, .blog { padding-top: 36px; }
  .note-dek { font-size: 19px; }
  .note-body h2, .blog h2 { font-size: 24px; }
  .topbar nav a { margin-left: 14px; }
  .topbar nav .wide { display: none; }
  .note-fig a { padding: 8px; border-radius: 9px; }
  .post-row { grid-template-columns: minmax(0, 1fr); }
  .post-row-date { line-height: 1.4; }
  .post-nav { grid-template-columns: minmax(0, 1fr); }
  .post-nav .next { grid-column: 1; }
}