/* Shared tokens. Article-specific CSS should not redefine these globally. */
html { scrollbar-gutter: stable; }
:root {
  color-scheme: light dark;
  --blog-bg: #fcfcfb;
  --blog-surface: #f3f3f0;
  --blog-text: #252522;
  --blog-muted: #66665e;
  --blog-line: #ddddd5;
  --blog-accent: #386655;
  --blog-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --blog-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --blog-width: 900px;
  --blog-gutter: clamp(20px, 5vw, 48px);
  --blog-radius: 6px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --blog-bg: #151515;
    --blog-surface: #20201f;
    --blog-text: #e9e9e2;
    --blog-muted: #aaa99f;
    --blog-line: #383835;
    --blog-accent: #a1c6b4;
  }
}
body.blog-page {
  margin: 0;
  padding: 0;
  background: var(--blog-bg);
  color: var(--blog-text);
  font-family: var(--blog-font);
}
.blog-ui, .blog-ui *, .blog-prose, .blog-prose * { box-sizing: border-box; }
.blog-ui { font: 16px/1.65 var(--blog-font); color: var(--blog-text); }
.blog-ui [hidden] { display: none !important; }
.blog-ui a, .blog-prose a { color: inherit; text-underline-offset: 4px; }
.blog-ui a:hover, .blog-prose a:hover { color: var(--blog-accent); }
.blog-ui :focus-visible, .blog-prose :focus-visible, .blog-skip:focus-visible {
  outline: 2px solid var(--blog-accent);
  outline-offset: 4px;
}
.blog-wrap { width: min(100% - 2 * var(--blog-gutter), var(--blog-width)); margin-inline: auto; }
.blog-ui.blog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 76px;
  border-bottom: 1px solid var(--blog-line);
}
.blog-ui .blog-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 500 16px/1.5 var(--blog-font); letter-spacing: -.015em; }
.blog-ui .blog-logo { display: block; width: 32px; height: 32px; border-radius: 4px; }
.blog-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.blog-ui .blog-nav { font-size: 14px; color: var(--blog-muted); }
.blog-ui.blog-intro { padding-block: 36px 28px; width: 100%; }
.blog-ui .blog-article-identity { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.blog-ui .blog-article-icon { width: 56px; height: 56px; border-radius: var(--blog-radius); object-fit: cover; }
.blog-ui .blog-article-identity .blog-eyebrow { margin: 0; }
.blog-ui .blog-eyebrow {
  display: block;
  margin: 0 0 12px;
  color: var(--blog-muted);
  font: 13px/1.5 var(--blog-font);
}
.blog-ui h1 { margin: 0 0 16px; font: 500 clamp(24px, 3vw, 30px)/1.35 var(--blog-font); letter-spacing: -.02em; text-wrap: balance; }
.blog-ui .blog-deck { margin: 0; color: var(--blog-muted); font-size: 16px; line-height: 1.7; }
.blog-ui.blog-article-note { margin: 0 0 24px; color: var(--blog-muted); font: 16px/1.7 var(--blog-font); }
.blog-ui .blog-section-label { margin: 0; font: 500 12px/1.5 var(--blog-font); color: var(--blog-muted); }
.blog-ui .blog-post-list { list-style: none; margin: 20px 0 100px; padding: 0; }
.blog-ui .blog-post-card { padding: 30px 0; border-top: 1px solid var(--blog-line); }
.blog-ui .blog-post-link { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 20px; text-decoration: none; }
.blog-ui .blog-post-icon { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: var(--blog-radius); }
.blog-ui .blog-post-meta { font: 12px/1.8 var(--blog-font); color: var(--blog-muted); }
.blog-ui .blog-post-title { display: block; margin: 0; font: 500 17px/1.55 var(--blog-font); letter-spacing: -.015em; }
.blog-ui .blog-post-description { display: block; margin-top: 4px; font: 14px/1.6 var(--blog-font); color: var(--blog-muted); }
.blog-ui .blog-footer-links { display: flex; gap: 20px; }
.blog-ui.blog-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-block: 26px 36px; border-top: 1px solid var(--blog-line); font-size: 13px; color: var(--blog-muted); }
.blog-ui.blog-footer p { margin: 0; }
.blog-skip { position: absolute; top: -100px; left: 20px; z-index: 10; padding: 10px 16px; background: var(--blog-bg); color: var(--blog-text); font-family: var(--blog-font); }
.blog-skip:focus { top: 12px; }
.blog-ui.blog-discussion { width: 100%; margin: 48px auto; padding-top: 24px; border-top: 1px solid var(--blog-line); }
.blog-ui .blog-discussion-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.blog-ui .blog-discussion-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-ui .blog-discussion-heading { margin: 0; font: 500 18px/1.5 var(--blog-font); }
.blog-ui .blog-muted { color: var(--blog-muted); font-size: 14px; margin: 8px 0 20px; }
.blog-ui .blog-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; min-height: 42px; height: auto;
  border: 1px solid var(--blog-line); border-radius: var(--blog-radius);
  background: var(--blog-bg); color: var(--blog-text); font: 500 14px/1.5 var(--blog-font);
  cursor: pointer; box-shadow: none;
}
.blog-ui .blog-button:hover { background: var(--blog-surface); }
.blog-ui .blog-button[aria-pressed="true"] { color: var(--blog-accent); border-color: var(--blog-accent); }
.blog-ui .blog-button:disabled { opacity: .55; cursor: not-allowed; }
.blog-ui .blog-form { display: grid; gap: 16px; margin-top: 24px; }
.blog-ui .blog-form label { display: grid; gap: 6px; font-size: 14px; }
.blog-ui .blog-field,
body.blog-page .blog-ui.blog-discussion .blog-form .blog-field {
  width: 100%; min-width: 0; height: auto; padding: 10px 12px;
  background: var(--blog-bg); color: var(--blog-text);
  border: 1px solid var(--blog-line); border-radius: var(--blog-radius);
  font: 16px/1.6 var(--blog-font); box-shadow: none;
}
.blog-ui textarea.blog-field { min-height: 132px; resize: vertical; }
.blog-ui .blog-field:focus-visible,
body.blog-page .blog-ui.blog-discussion .blog-form .blog-field:focus-visible { outline: 2px solid var(--blog-accent); outline-offset: 2px; }
.blog-ui .blog-form .blog-button { justify-self: start; }
.blog-ui .blog-status { min-height: 1.6em; margin: 12px 0; color: var(--blog-muted); font-size: 14px; }
.blog-ui .blog-status:empty { min-height: 0; margin: 0; }
.blog-ui .blog-form .blog-policy { margin: 0; font-size: 12px; color: var(--blog-muted); }
.blog-ui .blog-comments { list-style: none; padding: 0; margin: 24px 0; }
.blog-ui .blog-comment { padding: 20px 0; border-top: 1px solid var(--blog-line); }
.blog-ui .blog-comment-meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; font-size: 14px; }
.blog-ui .blog-comment-meta time { color: var(--blog-muted); font-size: 12px; }
.blog-ui .blog-comment-body { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.blog-ui .blog-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* All pages share the same shell and width. Homepage content stays list-only. */
.blog-home .blog-post-list { margin-block: 12px 64px; }
.blog-home .blog-post-card { padding-block: 22px; }
.blog-home .blog-post-card:first-child { border-top: 0; }
.blog-home .blog-post-title { font: 500 17px/1.55 var(--blog-font); letter-spacing: -.015em; margin: 0; }
.blog-ui .blog-submit-icon { width: 16px; height: 16px; flex: none; }
.blog-ui .blog-spinner { border: 1.5px solid var(--blog-line); border-top-color: var(--blog-accent); border-radius: 50%; }
.blog-ui .blog-receipt { margin-top: 24px; padding: 16px 0; }
.blog-ui .blog-receipt-heading { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font: 500 16px/1.5 var(--blog-font); }
.blog-ui .blog-receipt-icon { width: 22px; height: 22px; color: var(--blog-accent); flex: none; }
.blog-ui .blog-receipt-icon path { stroke-dasharray: 24; stroke-dashoffset: 0; }
.blog-ui .blog-receipt .blog-muted { margin: 0 0 16px; }
@media (prefers-reduced-motion: no-preference) {
  .blog-spinner { animation: blog-spin .8s linear infinite; }
  .blog-receipt:not([hidden]) { animation: blog-arrive .25s ease-out both; }
  .blog-receipt:not([hidden]) .blog-receipt-icon path { animation: blog-check .35s .1s ease-out both; }
  @keyframes blog-spin { to { transform: rotate(360deg); } }
  @keyframes blog-arrive { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes blog-check { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
}
/* Opt-in only: the shell never sets typography inside a custom article. */
.blog-prose { width: 100%; margin-inline: auto; color: var(--blog-text); font: 16px/1.7 var(--blog-font); overflow-wrap: break-word; }
.blog-utility { margin-bottom: 48px; }
.blog-prose p, .blog-prose ul, .blog-prose ol, .blog-prose blockquote, .blog-prose pre, .blog-prose figure { margin: 0 0 1.5em; }
.blog-prose h2, .blog-prose h3 { font-family: var(--blog-font); line-height: 1.3; letter-spacing: -.025em; margin: 2em 0 .75em; }
.blog-prose h2 { font-size: 22px; }
.blog-prose h3 { font-size: 18px; }
.blog-prose li { margin: .4em 0; }
.blog-prose blockquote { border-left: 2px solid var(--blog-accent); padding-left: 24px; color: var(--blog-muted); }
.blog-prose code { font: .8em/1.6 var(--blog-mono); background: var(--blog-surface); border-radius: 3px; padding: .15em .3em; }
.blog-prose pre { padding: 20px; background: var(--blog-surface); overflow: auto; border-radius: var(--blog-radius); }
.blog-prose pre code { padding: 0; }
.blog-prose img, .blog-prose video { max-width: 100%; height: auto; }
.blog-prose figcaption { font: 13px/1.6 var(--blog-font); color: var(--blog-muted); margin-top: 10px; }
@media (max-width: 600px) {
  .blog-ui.blog-header { min-height: 76px; }
  .blog-ui .blog-post-link { grid-template-columns: 56px minmax(0, 1fr); gap: 4px 14px; }
  .blog-ui .blog-post-icon { width: 56px; height: 56px; grid-row: 1 / 3; }
  .blog-ui .blog-post-meta { grid-column: 2; }
  .blog-ui.blog-intro { padding-bottom: 36px; }
  .blog-home .blog-post-list { margin-top: 24px; }
}
@media print {
  .blog-header, .blog-footer, .blog-discussion, .blog-skip { display: none !important; }
}