/* ===========================================================
   Beetles' Blog Custom Styles — v4
   Editorial / Serif-first / Paper-feel

   Design principles:
   - Single accent color (burgundy / 酒红), used sparingly
   - Warm paper body background, full serif UI
   - Three-tier shadow system, three-tier radius system
   - Constrained motion (two meaningful animations only)
   - Editorial typography: H2 counters, lead paragraph, ornamental blockquote
   =========================================================== */

/* ---------- Design Tokens ---------- */

:root {
  /* Accent — single burgundy, used sparingly */
  --accent: #8B2C3F;           /* burgundy */
  --accent-hover: #6B1F2F;     /* deeper burgundy */
  --accent-soft: rgba(139, 44, 63, 0.08);
  --accent-softer: rgba(139, 44, 63, 0.04);

  /* Text */
  --text: #1F2937;             /* gray-800 */
  --text-secondary: #4B5563;   /* gray-600 */
  --text-muted: #6B7280;       /* gray-500 */
  --text-subtle: #9CA3AF;      /* gray-400 */

  /* Surfaces */
  --bg: #FAF9F6;               /* warm cream */
  --bg-card: #FFFFFF;
  --bg-elevated: #F7F5F0;      /* slightly warmer than the card */
  --bg-code: #F3F1EC;          /* warm code background */

  /* Borders */
  --border: #E5E1D8;           /* warm, paper-like */
  --border-subtle: rgba(17, 24, 39, 0.06);

  /* Shadow — three tiers only */
  --shadow-card: 0 1px 3px rgba(17, 24, 39, 0.04), 0 1px 2px rgba(17, 24, 39, 0.03);
  --shadow-hover: 0 8px 24px -8px rgba(17, 24, 39, 0.1);
  --shadow-pop: 0 20px 48px -16px rgba(17, 24, 39, 0.16);

  /* Radius — three tiers */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  /* Motion — three tiers */
  --t-fast: 150ms;
  --t-base: 250ms;
  --t-slow: 400ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Fonts — serif everywhere except code */
  --font-serif: 'Noto Serif SC', 'Source Han Serif SC', 'PingFang SC', 'Microsoft YaHei', serif;
  --font-ui: var(--font-serif);
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
}

[data-user-color-scheme="dark"] {
  /* Same-hue rose — burgundy lightened for dark bg readability */
  --accent: #E07A8F;           /* rose — lighter burgundy, same hue */
  --accent-hover: #EFA0B0;
  --accent-soft: rgba(224, 122, 143, 0.12);
  --accent-softer: rgba(224, 122, 143, 0.06);

  --text: #E5E5E5;             /* neutral off-white */
  --text-secondary: #B8B8B8;
  --text-muted: #888888;
  --text-subtle: #5E5E5E;

  /* Neutral dark gray — not warm-brown, not cold-blue */
  --bg: #181818;
  --bg-card: #212121;
  --bg-elevated: #282828;
  --bg-code: #252525;

  --border: rgba(255, 255, 255, 0.09);
  --border-subtle: rgba(255, 255, 255, 0.05);

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-hover: 0 8px 24px -8px rgba(0, 0, 0, 0.4);
  --shadow-pop: 0 20px 48px -16px rgba(0, 0, 0, 0.5);
}

/* ---------- Global base ---------- */

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: var(--font-serif);
}

::selection {
  background: var(--accent-soft);
  color: inherit;
}

/* Thin scrollbar */
html::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb {
  background: rgba(107, 114, 128, 0.3);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
html::-webkit-scrollbar-thumb:hover {
  background: rgba(107, 114, 128, 0.55);
  background-clip: padding-box;
}
[data-user-color-scheme="dark"] html::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25);
  background-clip: padding-box;
}

/* Gentle page fade-in (single animation on first load) */
@keyframes pageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
main { animation: pageIn 0.4s ease both; }

/* ---------- Reading progress bar ---------- */

#reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--accent);
  z-index: 9999;
  transition: width 100ms linear;
  pointer-events: none;
}

/* ---------- Navbar ---------- */

.navbar {
  transition: background-color var(--t-base) ease, box-shadow var(--t-base) ease;
}

.navbar .nav-item .nav-link {
  position: relative;
  transition: color var(--t-fast) ease;
}

.navbar .nav-item .nav-link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width var(--t-base) var(--ease), left var(--t-base) var(--ease);
}

.navbar .nav-item .nav-link:hover::after {
  width: 60%;
  left: 20%;
}

/* ---------- Banner ---------- */

#banner .mask {
  background: rgba(30, 22, 18, 0.52) !important;
}
[data-user-color-scheme="dark"] #banner .mask {
  background: rgba(0, 0, 0, 0.55) !important;
}

.banner-text {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

#banner-title {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0.04em;
}

#banner-subtitle {
  font-weight: 300;
  letter-spacing: 0.08em;
  opacity: 0.9;
}

/* ---------- Board (content container) ---------- */

#board {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  background: var(--bg-card);
}

/* ---------- Sticky TOC (desktop) ---------- */

@media (min-width: 992px) {
  .sidebar {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
  }

  .sidebar::-webkit-scrollbar { width: 3px; }
  .sidebar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 2px;
  }
  [data-user-color-scheme="dark"] .sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
  }
}

/* ---------- Index cards ---------- */

.index-card {
  border-radius: var(--r-lg) !important;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-slow) var(--ease),
              box-shadow var(--t-slow) ease,
              border-color var(--t-base) ease;
}

.index-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: var(--border);
}

.index-card + .index-card {
  margin-top: 1.6rem;
}

/* Card image */
.index-img { overflow: hidden; }
.index-img img {
  transition: transform 0.6s var(--ease);
}
.index-card:hover .index-img img { transform: scale(1.04); }

/* Card title */
.index-header {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.35 !important;
  font-size: 1.25rem !important;
  margin-bottom: 0.65em !important;
  transition: color var(--t-base) ease;
}

.index-card:hover .index-header a { color: var(--accent) !important; }

.index-pin { color: #B8860B; margin-right: 0.3em; }

/* Excerpt */
.index-excerpt,
.index-excerpt__noimg {
  line-height: 1.75 !important;
  font-size: 0.95rem;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.index-excerpt > div,
.index-excerpt__noimg > div {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card meta row — minimal */
.index-btm {
  margin-top: 1em;
  padding-top: 0.8em;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em 1em;
}

.index-btm.post-metas .post-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin: 0 !important;
  font-size: 0.8rem;
  color: var(--text-subtle);
  letter-spacing: 0.01em;
}

.index-btm.post-metas .post-meta .iconfont {
  font-size: 0.88em;
  opacity: 0.7;
}

/* Category in meta — plain text with subtle emphasis */
.index-btm .post-meta:has(.icon-category) a {
  color: var(--text-secondary) !important;
  text-decoration: none !important;
  background-image: none !important;
  font-weight: 500;
  transition: color var(--t-fast) ease;
}
.index-btm .post-meta:has(.icon-category) a:hover {
  color: var(--accent) !important;
}

/* Tags */
.index-btm .post-meta:has(.icon-tags) a {
  color: var(--text-subtle);
  margin-right: 0.4em;
  text-decoration: none !important;
  background-image: none !important;
  transition: color var(--t-fast) ease;
}
.index-btm .post-meta:has(.icon-tags) a:hover { color: var(--accent); }

/* ---------- Dual-column grid on desktop ---------- */

@media (min-width: 992px) {
  .index-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.8rem;
    margin-bottom: 2rem;
  }

  .index-cards-grid .index-card {
    margin: 0 !important;
    flex-direction: column !important;
    display: flex !important;
    min-width: 0;
  }

  .index-cards-grid .index-card .col-md-4,
  .index-cards-grid .index-card .col-md-8,
  .index-cards-grid .index-card .col-md-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .index-cards-grid .index-card .index-img {
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .index-cards-grid .index-card .index-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .index-cards-grid .index-card .index-info {
    padding: 1.3rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .index-cards-grid .index-card .index-info .index-excerpt,
  .index-cards-grid .index-card .index-info .index-excerpt__noimg {
    flex: 1;
  }

  .index-cards-grid .index-card + .index-card {
    margin-top: 0 !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .index-card .index-img {
    aspect-ratio: 4 / 3;
    height: auto;
  }
  .index-card .index-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0 !important;
  }
}

/* ---------- Post content typography ---------- */

.post-content {
  font-family: var(--font-serif);
  line-height: 1.85;
  letter-spacing: 0.005em;
  word-wrap: break-word;
  color: var(--text);
  counter-reset: h2counter;
}

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4 {
  font-family: var(--font-serif);
  margin-top: 2em;
  margin-bottom: 0.7em;
  font-weight: 650;
  letter-spacing: -0.005em;
  color: var(--text);
}

/* H2 — editorial numbering */
.post-content h2 {
  counter-increment: h2counter;
  position: relative;
  padding-bottom: 0.35em;
  padding-left: 0;
  border-bottom: 1px solid var(--border);
}

.post-content h2::before {
  content: counter(h2counter, decimal-leading-zero);
  display: inline-block;
  margin-right: 0.6em;
  font-size: 0.72em;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.08em;
  vertical-align: 0.15em;
  font-variant-numeric: tabular-nums;
}

/* H3 — subtle quiet weight */
.post-content h3 {
  color: var(--text-secondary);
  font-weight: 600;
}

.post-content p { margin-bottom: 1.1em; }

/* Lead paragraph — first paragraph after the top-injected nav block */
.post-content > p:first-of-type {
  font-size: 1.08em;
  line-height: 1.8;
  color: var(--text-secondary);
  letter-spacing: 0.008em;
}

/* Link underline-slide */
.post-content a:not(.headerlink) {
  color: var(--accent);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size var(--t-base) ease;
}
.post-content a:not(.headerlink):hover { background-size: 100% 1px; }

/* Inline code */
.post-content :not(pre) > code {
  padding: 0.12em 0.4em;
  border-radius: var(--r-sm);
  background: var(--bg-code);
  font-family: var(--font-mono);
  font-size: 0.86em;
  color: var(--text);
  border: 1px solid var(--border-subtle);
}

/* Code blocks — flat, no shadow */
figure.highlight,
.post-content pre {
  border-radius: var(--r-md);
  margin: 1.3em 0;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}

.post-content code,
figure.highlight code,
figure.highlight pre {
  font-family: var(--font-mono);
  font-feature-settings: "liga" 0;
}

/* Tables — flat */
.post-content table {
  border-radius: var(--r-md);
  overflow: hidden;
  margin: 1.4em 0;
  border: 1px solid var(--border);
}

.post-content thead th {
  background: var(--bg-elevated);
  font-weight: 600;
  border-bottom: 2px solid var(--border);
}

.post-content tbody tr { transition: background var(--t-fast) ease; }
.post-content tbody tr:hover { background: var(--accent-softer); }

/* Blockquote — ornamental opening mark */
.post-content blockquote {
  position: relative;
  border-left: 3px solid var(--accent);
  background: var(--accent-softer);
  padding: 0.9em 1.3em 0.9em 1.8em;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin: 1.4em 0;
  color: var(--text-secondary);
  font-style: italic;
}

.post-content blockquote::before {
  content: '\201C'; /* opening curly double quote */
  position: absolute;
  left: 0.45em;
  top: -0.15em;
  font-family: Georgia, 'Noto Serif SC', serif;
  font-size: 2.2em;
  line-height: 1;
  color: var(--accent);
  opacity: 0.25;
  font-style: normal;
  user-select: none;
  pointer-events: none;
}

.post-content blockquote p:last-child { margin-bottom: 0; }

/* Lists — refined markers */
.post-content ul,
.post-content ol {
  padding-left: 1.6em;
  margin: 1em 0;
}

.post-content ul { list-style: none; }

.post-content ul > li {
  position: relative;
  padding-left: 0.2em;
  margin-bottom: 0.35em;
}

.post-content ul > li::before {
  content: '';
  position: absolute;
  left: -1em;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.7;
}

.post-content ul ul > li::before {
  background: transparent;
  border: 1px solid var(--accent);
  opacity: 0.55;
}

.post-content ol {
  list-style: none;
  counter-reset: olcounter;
}

.post-content ol > li {
  position: relative;
  padding-left: 0.2em;
  margin-bottom: 0.35em;
  counter-increment: olcounter;
}

.post-content ol > li::before {
  content: counter(olcounter) ".";
  position: absolute;
  left: -1.5em;
  top: 0;
  min-width: 1.3em;
  text-align: right;
  color: var(--accent);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

/* MathJax overflow */
mjx-container[display="true"] {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.5em 0;
}
mjx-container[display="true"]::-webkit-scrollbar { height: 4px; }
.MathJax_Display { overflow-x: auto; overflow-y: hidden; }

/* Images — no shadow, gentle radius */
.post-content img {
  border-radius: var(--r-md);
  max-width: 100%;
  transition: opacity var(--t-base) ease;
}

/* Figure caption — when alt text is present, Fluid may render <figcaption> */
.post-content figure { margin: 1.6em 0; text-align: center; }

.post-content figcaption,
.post-content .image-caption {
  margin-top: 0.6em;
  font-size: 0.85em;
  color: var(--text-muted);
  font-style: italic;
  letter-spacing: 0.02em;
}

/* Horizontal rule — editorial mark */
.post-content hr {
  border: none;
  text-align: center;
  margin: 2.4em 0;
  height: 1em;
  line-height: 1em;
}

.post-content hr::before {
  content: '\00A7 \00A7 \00A7'; /* three section signs */
  letter-spacing: 0.6em;
  color: var(--text-subtle);
  font-size: 0.9em;
}

/* ---------- Post meta ---------- */

.post-metas .post-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}

/* ---------- TOC ---------- */

.toc { font-size: 0.92rem; }

.tocbot-list a.tocbot-link {
  transition: color var(--t-fast) ease, padding-left var(--t-fast) ease;
  border-left: 2px solid transparent;
  padding: 0.24em 0.6em;
  color: var(--text-muted);
}

.tocbot-list a.tocbot-link:hover {
  color: var(--accent);
  padding-left: 0.85em;
}

.tocbot-active-link {
  font-weight: 600 !important;
  color: var(--accent) !important;
  border-left-color: var(--accent) !important;
}

/* ---------- Sidebar category list ----------
   Note: Fluid theme injects an iconfont glyph (\e61f) via
   .list-group-item.active::before. We don't fight it — we let it
   render and simply style the active item's color / weight. */

.category-bar {
  font-size: 0.92rem;
  padding: 0.2em 0;
}

.category-bar .list-group-item {
  border: none !important;
  background: transparent !important;
  padding: 0.45em 0.2em 0.45em 0.2em;
  border-radius: 0;
  margin: 0;
  color: var(--text-muted);
  transition: color var(--t-fast) ease, padding-left var(--t-fast) ease;
}

.category-bar .list-group-item:hover {
  color: var(--accent);
  padding-left: 0.5em;
}

.category-bar .list-group-item.active {
  color: var(--accent) !important;
  font-weight: 600;
  background: transparent !important;
}

/* Gently size & space the theme's active iconfont glyph */
.category-bar .list-group-item.active::before {
  color: var(--accent) !important;
  opacity: 0.75;
  margin-right: 0.45rem !important;
  font-size: 0.85em;
}

/* ---------- Pagination ---------- */

.pagination {
  margin-top: 2.5rem !important;
  justify-content: center;
  gap: 4px;
}

.pagination .page-item .page-link {
  border-radius: var(--r-md) !important;
  margin: 0 2px;
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-secondary);
  min-width: 38px;
  text-align: center;
  font-weight: 500;
  transition: color var(--t-fast) ease, border-color var(--t-fast) ease, background var(--t-fast) ease;
}

.pagination .page-item .page-link:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-softer);
}

.pagination .page-item.active .page-link {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* ---------- Tag cloud ---------- */

.tagcloud a {
  transition: color var(--t-fast) ease, background var(--t-fast) ease;
  border-radius: var(--r-sm);
  padding: 3px 10px;
  display: inline-block;
  margin: 3px;
  font-size: 0.9rem;
}

.tagcloud a:hover {
  color: var(--accent) !important;
  background: var(--accent-soft);
}

/* ---------- Archive ---------- */

.archive-item-link {
  transition: color var(--t-fast) ease, padding-left var(--t-fast) ease;
}

.archive-item-link:hover {
  padding-left: 0.4em;
  color: var(--accent);
}

/* ---------- About avatar ---------- */

.about-avatar img {
  transition: transform var(--t-slow) var(--ease);
}

.about-avatar img:hover {
  transform: scale(1.04);
}

/* ---------- Note blocks ---------- */

.note {
  border-radius: var(--r-md) !important;
  border-left-width: 3px !important;
}

/* ---------- Anchor links ---------- */

.anchorjs-link {
  transition: opacity var(--t-fast) ease, color var(--t-fast) ease;
  color: var(--text-subtle) !important;
}

.anchorjs-link:hover { color: var(--accent) !important; }

/* ---------- Comments ---------- */

#comments {
  margin-top: 2rem;
}

/* ---------- Footer ---------- */

footer.content-wrapper {
  border-top: 1px solid var(--border-subtle);
  padding-top: 1.5rem;
  color: var(--text-muted);
}

/* ---------- Scroll-to-top ---------- */

#scroll-top-button {
  transition: transform var(--t-base) ease, opacity var(--t-base) ease;
}

#scroll-top-button:hover { transform: translateY(-2px); }

/* ---------- Scroll fade-in (for cards) ---------- */

.fade-in-scroll {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.fade-in-scroll.is-visible {
  opacity: 1;
}

/* ---------- Breadcrumb (minimal, textual) ---------- */

.post-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: -0.4rem 0 1.8rem 0;
  font-size: 0.85rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--text-subtle);
}

.post-breadcrumb .crumb-link {
  color: var(--text-subtle);
  text-decoration: none !important;
  background-image: none !important;
  padding: 2px 0;
  transition: color var(--t-fast) ease;
}

.post-breadcrumb .crumb-link:hover { color: var(--accent); }

.post-breadcrumb .crumb-sep {
  margin: 0 0.55em;
  color: var(--border);
  user-select: none;
}

.post-breadcrumb .crumb-current {
  color: var(--text-secondary);
  font-weight: 500;
  max-width: 58%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Series navigation ---------- */

.series-nav {
  margin: 1.6rem 0 2.4rem 0;
  padding: 1.3rem 1.5rem;
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
}

.series-nav-header {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  margin-bottom: 0.9em;
  padding-bottom: 0.7em;
  border-bottom: 1px dashed var(--border);
}

.series-nav-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
  flex: 1;
  letter-spacing: 0.01em;
}

.series-nav-progress {
  font-size: 0.8rem;
  padding: 1px 10px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0.03em;
}

.series-nav-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1em 0;
  counter-reset: none; /* don't interfere with .post-content ol counter */
}

.series-nav-list li { margin: 0; }
.series-nav-list li::before { content: none !important; } /* override ul marker */

.series-nav-list li a {
  display: flex;
  align-items: baseline;
  padding: 0.45em 0.7em;
  border-radius: var(--r-sm);
  text-decoration: none !important;
  background-image: none !important;
  color: var(--text-secondary);
  transition: color var(--t-fast) ease, background var(--t-fast) ease;
}

.series-nav-list li a:hover {
  background: var(--accent-softer);
  color: var(--accent);
}

.series-nav-list li.current a {
  color: var(--accent);
  font-weight: 600;
  cursor: default;
}

.series-nav-list li.current a:hover { background: transparent; }

.series-ch {
  display: inline-block;
  min-width: 4.8em;
  font-size: 0.82rem;
  color: var(--text-subtle);
  font-weight: 500;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.series-nav-list li.current .series-ch { color: var(--accent); }

.series-title {
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.series-nav-pager {
  display: flex;
  gap: 0.8em;
  padding-top: 0.9em;
  border-top: 1px dashed var(--border);
}

.series-pager-prev,
.series-pager-next {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0.6em 0.9em;
  border-radius: var(--r-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
  text-decoration: none !important;
  background-image: none !important;
  color: inherit;
  transition: border-color var(--t-fast) ease, color var(--t-fast) ease;
  min-width: 0;
}

.series-pager-next { text-align: right; }

.series-pager-prev:hover,
.series-pager-next:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.series-pager-label {
  font-size: 0.74rem;
  color: var(--text-subtle);
  margin-bottom: 2px;
  letter-spacing: 0.05em;
}

.series-pager-prev .series-pager-label::before { content: '← '; }
.series-pager-next .series-pager-label::after  { content: ' →'; }

.series-pager-title {
  font-size: 0.92rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.series-pager-placeholder { flex: 1; }

/* ---------- 404 page ---------- */

.page-404 {
  text-align: center;
  padding: 3rem 1rem 4rem 1rem;
  animation: pageIn 0.5s ease both;
}

.page-404-code {
  font-family: var(--font-serif);
  font-size: 7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  letter-spacing: -0.04em;
  margin-bottom: 0.3em;
  user-select: none;
}

.page-404-msg {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.5em;
}

.page-404-desc {
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: 2em;
}

.page-404-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7em;
  margin-top: 1em;
}

.page-404-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 1.3em;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-secondary) !important;
  text-decoration: none !important;
  background-image: none !important;
  font-size: 0.95rem;
  font-weight: 500;
  border: 1px solid var(--border);
  transition: color var(--t-fast) ease, border-color var(--t-fast) ease, background var(--t-fast) ease;
}

.page-404-btn:hover {
  color: var(--accent) !important;
  border-color: var(--accent);
  background: var(--accent-softer);
}

.page-404-btn.primary {
  background: var(--accent);
  color: #fff !important;
  border-color: var(--accent);
}

.page-404-btn.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff !important;
}

/* ---------- Command Palette (⌘K / Ctrl-K) ---------- */

.cmdk-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14vh;
  background: rgba(17, 14, 10, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--t-base) ease;
}

.cmdk-overlay.is-open {
  display: flex;
  opacity: 1;
}

[data-user-color-scheme="dark"] .cmdk-overlay {
  background: rgba(0, 0, 0, 0.55);
}

body.cmdk-lock { overflow: hidden; }

.cmdk-panel {
  width: min(620px, 92vw);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  animation: cmdkIn 180ms var(--ease);
}

@keyframes cmdkIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cmdk-head {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.85em 1.1em;
  border-bottom: 1px solid var(--border-subtle);
}

.cmdk-prompt {
  color: var(--accent);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1;
  user-select: none;
}

.cmdk-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
  padding: 0.2em 0;
  letter-spacing: 0.005em;
}

.cmdk-input::placeholder { color: var(--text-subtle); }

.cmdk-hint {
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: var(--text-subtle);
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 4px;
  letter-spacing: 0.05em;
}

.cmdk-list {
  max-height: 50vh;
  overflow-y: auto;
  padding: 0.4em 0;
}

.cmdk-list::-webkit-scrollbar { width: 4px; }
.cmdk-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

.cmdk-item {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.55em 1.1em;
  color: var(--text-secondary) !important;
  text-decoration: none !important;
  background: transparent !important;
  background-image: none !important;
  transition: background var(--t-fast) ease, color var(--t-fast) ease;
  cursor: pointer;
}

.cmdk-item.is-active {
  background: var(--accent-soft) !important;
  color: var(--text) !important;
}

.cmdk-arrow {
  color: var(--text-subtle);
  font-size: 0.85em;
  width: 1em;
  flex-shrink: 0;
  font-family: var(--font-mono);
}

.cmdk-item.is-active .cmdk-arrow { color: var(--accent); }

.cmdk-title {
  flex: 1;
  font-size: 0.95rem;
  letter-spacing: 0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmdk-title mark {
  background: transparent;
  color: var(--accent);
  font-weight: 600;
  padding: 0;
}

.cmdk-cat {
  font-size: 0.75rem;
  color: var(--text-subtle);
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--bg-elevated);
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.cmdk-item.is-active .cmdk-cat {
  background: var(--bg-card);
  color: var(--accent);
}

.cmdk-empty {
  padding: 1.2em 1.1em;
  color: var(--text-subtle);
  font-style: italic;
  text-align: center;
  font-size: 0.9rem;
}

.cmdk-foot {
  display: flex;
  align-items: center;
  gap: 1.2em;
  padding: 0.55em 1.1em;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  font-size: 0.72rem;
  color: var(--text-subtle);
  letter-spacing: 0.03em;
}

.cmdk-foot kbd {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 5px;
  margin-right: 3px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ---------- Keyboard-hint chip in navbar ---------- */

.cmdk-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 3px 10px;
  margin-left: 0.5em;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.72rem;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background var(--t-fast) ease, color var(--t-fast) ease;
}

.cmdk-trigger:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* ---------- Subject Map (homepage hero) ---------- */

.subject-map {
  margin: 0 0 2.4rem 0;
  padding: 1.8rem 1.6rem 1.4rem 1.6rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

.subject-map-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: 1.1em;
  padding-bottom: 0.8em;
  border-bottom: 1px solid var(--border-subtle);
}

.subject-map-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
}

.subject-map-title::before {
  content: '§';
  color: var(--accent);
  margin-right: 0.4em;
  opacity: 0.8;
}

.subject-map-meta {
  font-size: 0.82rem;
  color: var(--text-subtle);
  letter-spacing: 0.03em;
}

.subject-map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.85em 1.4em;
}

.subject-map-item {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  padding: 0.45em 0 0.45em 0.85em;
  color: inherit !important;
  text-decoration: none !important;
  background-image: none !important;
  border-left: 2px solid var(--border);
  transition: border-color var(--t-fast) ease, padding-left var(--t-fast) ease;
}

.subject-map-item:hover {
  border-left-color: var(--accent);
  padding-left: 1em;
}

.subject-map-name {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  transition: color var(--t-fast) ease;
}

.subject-map-item:hover .subject-map-name { color: var(--accent); }

.subject-map-count {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--text-subtle);
  font-weight: 400;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}

.subject-map-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.55;
  letter-spacing: 0.01em;
}

@media (max-width: 767px) {
  .subject-map {
    padding: 1.3rem 1.1rem 1rem 1.1rem;
    border-radius: var(--r-md);
  }
  .subject-map-grid { grid-template-columns: 1fr; gap: 0.75em 1em; }
}

/* ---------- Reading time chip ---------- */

.post-meta-top {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: -1rem 0 1.8rem 0;
  padding-bottom: 0.8em;
  border-bottom: 1px dashed var(--border);
  font-size: 0.82rem;
  color: var(--text-subtle);
  letter-spacing: 0.025em;
}

.post-meta-top .reading-time {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.post-meta-top .reading-time::before {
  content: '≈';
  color: var(--accent);
  opacity: 0.75;
  font-weight: 500;
  margin-right: 0.1em;
}

.post-meta-top .rt-sep {
  color: var(--border);
  user-select: none;
}

.post-meta-top .rt-chars {
  font-variant-numeric: tabular-nums;
}

/* ---------- Responsive ---------- */

@media (max-width: 767px) {
  #board {
    border-radius: var(--r-md);
  }

  .index-card {
    border-radius: var(--r-md) !important;
  }

  .post-content {
    line-height: 1.78;
  }

  .post-content h1,
  .post-content h2,
  .post-content h3 {
    margin-top: 1.5em;
  }

  .post-content h2::before {
    margin-right: 0.45em;
  }

  .series-nav { padding: 1rem; }
  .series-nav-pager { flex-direction: column; }
  .series-pager-next { text-align: left; }

  .post-breadcrumb .crumb-current { max-width: 100%; }

  .page-404-code { font-size: 5rem; }
  .page-404-msg { font-size: 1.15rem; }
}