/* Article styles for /blog/<slug>/. All lengths are rem so they ride the
   root-font scale set in styles.min.css and grow with the viewport. */
.art-wrap { padding: 7rem 0 5rem; }
/* A reading measure, centred in the viewport, rather than the full site
   container - at 1440+ the old full-width column left a lopsided gutter. */
.art-col { max-width: 50rem; margin: 0 auto; padding: 0 var(--section-px); }
.art-head { max-width: 100%; }
.art-crumb { font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 1.25rem; }
.art-crumb a { color: var(--text-muted); text-decoration: none; }
.art-crumb a:hover { color: var(--accent); }
.art-head h1 { font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1.12; letter-spacing: -0.03em; margin-bottom: 1.25rem; }
.art-lede { font-size: 1.125rem; line-height: 1.7; color: var(--text-muted); margin-bottom: 1.75rem; }
.art-meta { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--text-muted);
  border-top: 0.0625rem solid var(--border); padding-top: 1rem; margin-bottom: 3.5rem; }
.art-body { max-width: 100%; }
.art-body h2 { font-size: clamp(1.375rem, 2vw, 1.875rem); letter-spacing: -0.02em; margin: 3rem 0 1rem; }
.art-body h3 { font-size: 1.1875rem; margin: 2rem 0 0.75rem; color: var(--text-main); }
.art-body p { color: var(--text-muted); line-height: 1.8; margin-bottom: 1.25rem; }
.art-body strong { color: var(--text-main); font-weight: 600; }
.art-body ul, .art-body ol { color: var(--text-muted); line-height: 1.8; margin: 0 0 1.5rem 1.25rem; }
.art-body li { margin-bottom: 0.6rem; }
.art-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.1875rem; }
.art-body code { font-family: 'JetBrains Mono', monospace; font-size: 0.85em; background: var(--bg-subtle);
  border: 0.0625rem solid var(--border); border-radius: 0.25rem; padding: 0.1rem 0.35rem; color: var(--accent-2); }
.art-callout { background: var(--bg-card); border: 0.0625rem solid var(--border); border-left: 0.1875rem solid var(--accent);
  border-radius: 0.5rem; padding: 1.25rem 1.5rem; margin: 2rem 0; }
.art-callout p { margin: 0; color: var(--text-main); }
.art-table-wrap { overflow-x: auto; margin: 1.75rem 0; }
.art-body table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.art-body th, .art-body td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 0.0625rem solid var(--border); color: var(--text-muted); }
.art-body th { color: var(--text-main); font-weight: 600; white-space: nowrap; }
.art-cta { margin-top: 4rem; padding-top: 2rem; border-top: 0.0625rem solid var(--border); }
.art-cta h2 { margin-top: 0; }
.art-next { margin-top: 3rem; }
.art-next h2 { font-size: 1.125rem; margin-bottom: 1rem; }
.art-next ul { list-style: none; margin-left: 0; }
.art-next a { color: var(--text-main); text-decoration: none; border-bottom: 0.0625rem solid var(--border); }
.art-next a:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 768px) { .art-wrap { padding: 5.5rem 0 3rem; } }

/* Direct-answer block. The writer is instructed to open with a 40-60 word
   answer to the target query; lifting it into its own box makes it obvious to
   a reader and easy for an answer engine to extract. */
.art-answer { background: var(--bg-card); border: 0.0625rem solid var(--border);
  border-left: 0.1875rem solid var(--lime); border-radius: 0.5rem; padding: 1.35rem 1.6rem; margin: 0 0 2.25rem; }
.art-answer p { margin: 0; color: var(--text-main); font-size: 1.0625rem; line-height: 1.7; }