/* ================================================================
   Trunk Trick — Blog Post Template · "Noir & Gold"
   Shared by every blog post (blog/posts/<slug>/index.html).
   Warm black + golden yellow, serif reading body, left TOC.
   ================================================================ */

:root {
  --bg:        #0a0a07;
  --surface:   #11110b;
  --card:      #17170f;
  --hover:     #1f1e14;
  --border:    rgba(247,245,236,0.07);
  --border-firm: rgba(247,245,236,0.14);
  --text:      #f7f5ec;
  --text2:     #b6b2a0;
  --text3:     #7c7868;
  --amber:       #f5c518;
  --amber-hover: #ffd63d;
  --amber-deep:  #d6a800;
  --amber-bg:    rgba(245,197,24,0.09);
  --amber-glow:  rgba(245,197,24,0.22);
  --mono: 'Ubuntu Mono', 'SF Mono', 'Fira Code', monospace;
  --sans: 'Google Sans Text', system-ui, -apple-system, sans-serif;
  --serif: 'Source Serif 4', 'Songti SC', 'SimSun', Georgia, 'Times New Roman', serif;
}

html { font-size: 15px; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.has-toc { padding-left: 260px; }

main {
  max-width: 780px;
  margin: 0 auto;
  padding: 3.25rem 2rem 6rem;
  position: relative;
  z-index: 10;
}

/* Back link */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text3);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 1.75rem;
  transition: color 0.2s cubic-bezier(0.32,0.72,0,1), gap 0.2s cubic-bezier(0.32,0.72,0,1);
}
.back-link:hover { color: var(--amber); gap: 0.6rem; }

/* Article header */
.article-header { margin-bottom: 2.25rem; }
.article-header .date {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--amber);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}
.article-header h1 {
  font-family: var(--sans);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--text);
  margin: 0;
  text-wrap: balance;
}

/* ---- Markdown body (serif reading) ---- */
.markdown-body {
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--text2);
}

.markdown-body h2 {
  font-family: var(--sans);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 2.6em 0 0.7em;
  padding-bottom: 0.45em;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 2rem;
}
.markdown-body h2:first-child { margin-top: 0; }

.markdown-body h3 {
  font-family: var(--sans);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--text);
  margin: 2em 0 0.55em;
  scroll-margin-top: 2rem;
}

.markdown-body h4 {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--amber);
  margin: 1.4em 0 0.4em;
}

.markdown-body p { margin: 0 0 0.9em; }

.markdown-body a { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(245,197,24,0.4); }
.markdown-body a:hover { color: var(--amber-hover); text-decoration-color: var(--amber-hover); }

.markdown-body pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.35rem;
  overflow-x: auto;
  margin: 1.6em 0;
  font-size: 0.85rem;
  line-height: 1.65;
  box-shadow: 0 1px 0 var(--ds-edge-hi) inset;
}
.markdown-body pre code { background: none; padding: 0; color: inherit; font-size: inherit; font-family: var(--mono); }

.markdown-body :not(pre) > code {
  background: var(--amber-bg);
  color: var(--amber);
  padding: 0.15em 0.45em;
  border-radius: 6px;
  font-size: 0.86em;
  font-family: var(--mono);
}

.markdown-body img { max-width: 100%; border-radius: 12px; margin: 1.4em auto; display: block; }

.markdown-body blockquote {
  border-left: 2px solid var(--amber);
  padding: 0.6rem 1.15rem;
  color: var(--text3);
  margin: 1.6em 0;
  background: var(--amber-bg);
  border-radius: 0 10px 10px 0;
  font-style: italic;
}

.markdown-body ul, .markdown-body ol { padding-left: 1.5rem; margin: 0 0 1.15em; color: var(--text2); }
.markdown-body li { margin-bottom: 0.35em; line-height: 1.7; }
.markdown-body li::marker { color: var(--amber); }

.markdown-body table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 0.9rem; }
.markdown-body th { background: var(--surface); font-weight: 600; color: var(--text); padding: 0.65rem 0.9rem; border: 1px solid var(--border); text-align: left; }
.markdown-body td { background: var(--card); padding: 0.65rem 0.9rem; border: 1px solid var(--border); color: var(--text2); }
.markdown-body hr { border: none; border-top: 1px solid var(--border); margin: 2.6em 0; }

mjx-container { overflow-x: auto; overflow-y: hidden; }

/* ---- Left TOC ---- */
.toc-sidebar {
  position: fixed;
  left: 0; top: 0;
  width: 248px;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 3rem 1rem 2.5rem;
  z-index: 20;
  border-right: 1px solid var(--border);
  background: rgba(10,10,7,0.86);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  font-size: 0.8rem;
}
.toc-sidebar h4 {
  font-family: var(--sans);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text3);
  margin: 0 0 1rem;
}
.toc-sidebar a {
  display: block;
  padding: 0.36rem 0.6rem;
  color: var(--text3);
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.16s cubic-bezier(0.32,0.72,0,1);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toc-sidebar a:hover { color: var(--text); background: rgba(247,245,236,0.04); }
.toc-sidebar a.active { color: var(--amber); background: var(--amber-bg); }
.toc-sidebar a.toc-h2 { font-weight: 500; color: var(--text2); padding-left: 0.4rem; }
.toc-sidebar a.toc-h3 { padding-left: 1.2rem; font-size: 0.75rem; }
.toc-sidebar a.toc-h4 { padding-left: 2rem; font-size: 0.72rem; }

@media (max-width: 1100px) {
  body.has-toc { padding-left: 0; }
  .toc-sidebar { display: none; }
}

/* ---- Code copy ---- */
.code-block-wrap { position: relative; }
.code-block-wrap .copy-btn {
  position: absolute;
  top: 0.5rem; right: 0.5rem;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  background: rgba(247,245,236,0.05);
  border: 1px solid rgba(247,245,236,0.12);
  border-radius: 8px;
  color: var(--text3);
  cursor: pointer;
  font-size: 0.72rem;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s, color 0.2s;
  backdrop-filter: blur(8px);
}
.code-block-wrap:hover .copy-btn { opacity: 1; }
.code-block-wrap .copy-btn:hover { background: rgba(247,245,236,0.12); color: var(--text); }

/* ---- Comments ---- */
.comments-section { margin-top: 3rem; }
.comments-divider { height: 1px; background: var(--border); margin-bottom: 2rem; }
.comments-heading {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
  color: var(--text);
}

/* ---- Prev / Next nav ---- */
.article-nav {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.article-nav .nav-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 1.3rem;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--ds-edge-hi) inset;
  transition: all 0.2s cubic-bezier(0.32,0.72,0,1);
  text-decoration: none;
  color: var(--text);
}
.article-nav .nav-btn:hover { border-color: var(--border-firm); background: var(--hover); transform: translateY(-1px); }
.article-nav .nav-btn.next-only { margin-left: auto; max-width: 280px; }
.article-nav .nav-btn.prev-only { margin-right: auto; max-width: 280px; }
.article-nav .nav-label {
  font-family: var(--mono);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text3);
  margin-bottom: 3px;
}
.article-nav .nav-title {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* Highlight.js theme — tuned warm-black */
.hljs { color: #b6b2a0; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-section, .hljs-link { color: #ffd63d; }
.hljs-string, .hljs-title, .hljs-name, .hljs-type, .hljs-attribute, .hljs-symbol, .hljs-bullet, .hljs-addition, .hljs-variable, .hljs-template-tag, .hljs-template-variable { color: #9fd17f; }
.hljs-comment, .hljs-quote, .hljs-deletion, .hljs-meta { color: #7c7868; }
.hljs-number, .hljs-regexp, .hljs-built_in, .hljs-builtin-name { color: #ffb347; }
.hljs-title.function_, .hljs-function .hljs-title { color: #58b9ff; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: bold; }

::selection { background: var(--amber); color: var(--bg); }

@media (max-width: 640px) {
  main { padding: 2rem 1rem 4rem; }
  .article-header h1 { font-size: 1.55rem; }
  .article-nav { flex-direction: column; }
  .article-nav .nav-btn { max-width: none; }
}