/* after-reading · Jason DS layer 2 override：publication 深绿 + serif content allowance */
:root {
  --jx-paper: #fafaf7;
  --jx-surface: #ffffff;
  --jx-surface-sunk: #f1efe9;
  --jx-ink: #1a1a1a;
  --jx-ink-2: #2d2d2d;
  --jx-ink-muted: #6b6862;
  --jx-rule: rgba(0,0,0,0.10);
  --jx-rule-strong: rgba(0,0,0,0.30);
  --jx-accent: #2a4d3a;
  --jx-accent-hub: #2240d6;
}

/* after-reading allowance：内容容器（书评/笔记）允许 serif body */
.book-take,
.book-title,
article {
  font-family: var(--jx-font-display);
}

/* chrome 层强制 sans */
.book-meta,
.jx-footer,
.jx-chip,
.jx-return-to-hub {
  font-family: var(--jx-font-mono);
}

/* after-reading · Jason 的书架 · publication design system */

:root {
  --paper: #fafaf7;
  --ink: #1a1a1a;
  --accent: #2a4d3a;
  --accent-soft: rgba(42, 77, 58, 0.08);
  --muted: #6b6862;
  --rule: rgba(0, 0, 0, 0.1);
  --code-bg: #f1efe9;

  --fs-display: 4rem;
  --fs-h1: 2.75rem;
  --fs-h2: 1.875rem;
  --fs-h3: 1.375rem;
  --fs-body: 1.0625rem;
  --fs-meta: 0.875rem;
  --fs-caption: 0.8125rem;

  --font-serif: "Source Serif Pro", "Noto Serif SC", Georgia, serif;
  --font-sans: Inter, "PingFang SC", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", Menlo, monospace;

  --reading-width: 68ch;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
}

.shell {
  max-width: 920px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

/* —— Masthead —— */
.masthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 1rem;
  margin-bottom: 3rem;
}
.mast-title {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  margin: 0;
  letter-spacing: 0.02em;
}
.return-to-hub {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.05em;
  text-transform: lowercase;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s, color 0.15s;
}
.return-to-hub:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* —— Hero —— */
.hero {
  margin-bottom: 4rem;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.hero-title {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  line-height: 1.05;
  margin: 0 0 1rem;
  letter-spacing: -0.02em;
}
.hero-lead {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--muted);
  margin: 0 0 1.5rem;
}
.hero-intro {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--ink);
  max-width: var(--reading-width);
  margin: 0;
}

/* —— Timeline —— */
.timeline {
  margin-bottom: 5rem;
  padding: 2rem;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
}
.timeline-narrative {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink);
  white-space: pre-line;
  margin: 0;
}

/* —— Sections —— */
.shelf-section {
  margin-bottom: 5rem;
}
.section-head {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1rem;
  align-items: baseline;
}
.section-title {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  margin: 0;
  letter-spacing: -0.01em;
}
.section-blurb {
  grid-column: 1;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--muted);
  margin: 0;
}
.section-count {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--muted);
  margin: 0;
  align-self: center;
}

/* —— Book grid —— */
.book-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 2rem;
}
@media (max-width: 640px) {
  .book-grid {
    grid-template-columns: 1fr;
  }
}

.book {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.book:last-child {
  border-bottom: none;
}
.book-num {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--muted);
  letter-spacing: 0.08em;
}
.book-body {
  min-width: 0;
}
.book-title {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  margin: 0 0 0.25rem;
  line-height: 1.3;
}
.book-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--muted);
  margin: 0 0 0.5rem;
}
.book-take {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 0.5rem;
}
.book-notes {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 0.05em;
  border-bottom: 1px solid transparent;
}
.book-notes:hover {
  border-bottom-color: var(--accent);
}

/* —— Footer —— */
.site-footer {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--muted);
  border-top: 1px solid var(--rule);
  padding: 2rem 0;
  margin-top: 5rem;
  text-align: center;
}
.site-footer a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.site-footer a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* —— Mobile —— */
@media (max-width: 480px) {
  .shell {
    padding: 2rem 1rem;
  }
  .hero-title {
    font-size: 2.5rem;
  }
  .timeline {
    padding: 1.5rem;
  }
}

/* —— Dark mode (system-following only) —— */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #1a1612;
    --ink: #ebe4d6;
    --accent: #d68a5b;
    --accent-soft: rgba(214, 138, 91, 0.18);
    --muted: #9d958a;
    --rule: rgba(235, 228, 214, 0.14);
    --code-bg: #221d17;
    /* 与 jx/tokens.css dark 分支对齐：本文件顶部 :root 的 light 值会覆盖 jx 的 dark，
       所以这里把 jx- 系列也跟着切到 dark，保持 masthead/footer 等 chrome 层在 dark 下不再白底黑字 */
    --jx-paper: #0e1014;
    --jx-surface: #161922;
    --jx-surface-sunk: #0a0c10;
    --jx-ink: #ebecef;
    --jx-ink-2: #b0b4bd;
    --jx-ink-muted: #7c818c;
    --jx-rule: rgba(255,255,255,0.10);
    --jx-rule-strong: rgba(255,255,255,0.30);
  }
}