/* Article typography — used by the Firefox viewport, the Settings-rich pages
 * and (plainly) by the noscript fallback. */

.article {
  max-width: 720px;
  margin: 0 auto;
  padding: 44px 34px 96px;
  font-size: 16px;
  line-height: 1.85;
  animation: ff-nav 0.18s ease;
}

.article-header { margin-bottom: 30px; }
.article-header h1 {
  font-size: 30px;
  line-height: 1.3;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 13px;
  color: var(--text-dim);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.article-meta time { font-variant-numeric: tabular-nums; }

.article-body { word-break: break-word; }

.article-body h1, .article-body h2, .article-body h3, .article-body h4 {
  line-height: 1.4;
  margin: 1.6em 0 0.6em;
  letter-spacing: -0.01em;
}
.article-body h1 { font-size: 25px; }
.article-body h2 { font-size: 21px; padding-left: 13px; border-left: 4px solid var(--accent); }
.article-body h3 { font-size: 18px; }
.article-body p { margin: 0.9em 0; }

.article-body a { font-weight: 500; }

.article-body blockquote {
  margin: 1.4em 0;
  padding: 10px 20px;
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 10px 10px 0;
  color: var(--text);
}
.article-body blockquote p { margin: 0.4em 0; }

.article-body code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  padding: 2px 6px;
  border-radius: 5px;
}

.article-body pre {
  background: #1e2223;
  color: #eeeeec;
  border-radius: 12px;
  padding: 16px 18px;
  overflow-x: auto;
  line-height: 1.6;
  font-size: 13.5px;
  margin: 1.4em 0;
}
.article-body pre code { background: none; padding: 0; color: inherit; font-size: inherit; }

/* hexo highlight.js output */
.article-body figure.highlight { margin: 1.4em 0; }
.article-body figure.highlight,
.article-body figure.highlight pre { background: #1e2223; border-radius: 12px; }
.article-body figure.highlight td { border: none; }
.article-body figure.highlight .gutter {
  background: rgba(255, 255, 255, 0.045);
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px 0 0 12px;
  padding: 14px 10px;
  text-align: right;
  color: #6b7375;
  user-select: none;
}
.article-body figure.highlight .code { padding: 14px 16px; }
.article-body figure.highlight .code pre { margin: 0; padding: 0; background: none; border-radius: 0; }

.article-body ul, .article-body ol { padding-left: 1.6em; }
.article-body li { margin: 0.35em 0; }
.article-body hr { border: none; border-top: 1px solid var(--border); margin: 2.4em 0; }

.article-body img { max-width: 100%; border-radius: 10px; }

.article-body table {
  border-collapse: collapse;
  margin: 1.4em 0;
  font-size: 14px;
  width: 100%;
}
.article-body th, .article-body td {
  border: 1px solid var(--border);
  padding: 8px 12px;
}
.article-body th { background: var(--bg-alt); }

/* math (KaTeX) */
.article-body .katex { color: inherit; font-size: 1.08em; }
.article-body .katex-display {
  margin: 1.3em 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 3px 0;
}
.article-body .katex-error { color: var(--text-dim); font-family: var(--font-mono); font-size: 0.9em; }

.article-footer {
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-dim);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* code highlight colors (subset of a tango-ish scheme) */
.hljs-keyword, .hljs-selector-tag, .hljs-built_in { color: #ad7fa8; }
.hljs-string, .hljs-attr { color: #fce94f; }
.hljs-title, .hljs-name { color: #729fcf; }
.hljs-number, .hljs-symbol { color: #f57900; }
.hljs-comment, .hljs-quote { color: #6b7375; font-style: italic; }
.hljs-meta { color: #34e2e2; }
.hljs-addition { color: #8ae234; }
.hljs-deletion { color: #ef2929; }