/* In-house articles (src/pages/blog-articles.tsx): figures, notes, glossary, FAQ. */
.article-figure { margin: 2rem 0; }
.article-figure svg { display: block; width: 100%; height: auto; }
.article-figure figcaption { margin-top: .75rem; font: 400 var(--fs-mono)/1.6 var(--mono); color: var(--ink-2); letter-spacing: .02em; }
.article-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--mist-1); }

.fig-block rect { fill: var(--mist-0); stroke: var(--ink); stroke-width: 1; }
.fig-secret rect { stroke: var(--amber-ink); }
.fig-link, .fig-axis { stroke: var(--ink-2); stroke-width: 1.5; fill: none; }
.fig-dot { fill: var(--amber); }
.fig-bars rect { fill: var(--mist-2); stroke: var(--ink); stroke-width: 1; }
.fig-bars .fig-now { fill: var(--amber); }
.fig-bars .fig-future { fill: none; stroke-dasharray: 4 3; }
.fig-h { font: 500 17px var(--sans); fill: var(--ink); }
.fig-m { font: 400 13px var(--mono); fill: var(--ink-2); }
.fig-s { font: 400 14px var(--sans); fill: var(--ink-2); }

.table-scroll { overflow-x: auto; margin: 1.5rem 0; }
.table-scroll table { min-width: 560px; }

.article-note, .article-warning { padding: 1rem 1.25rem; border-left: 2px solid var(--line); background: var(--mist-1); color: var(--ink-2); }
.article-warning { border-left-color: var(--amber); }

.article-glossary { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: .5rem 1.5rem; margin: 1.5rem 0; }
.article-glossary dt { font: 500 var(--fs-mono)/1.6 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink); }
.article-glossary dd { margin: 0; color: var(--ink-2); }
@media (max-width: 560px) { .article-glossary { grid-template-columns: minmax(0, 1fr); } .article-glossary dd { margin-bottom: .75rem; } }

.article-faq-list { border-top: 1px solid var(--line); }
.article-faq { border-bottom: 1px solid var(--line); }
.article-faq summary { display: flex; justify-content: space-between; gap: 1rem; min-height: 44px; padding: 1.1rem 0; cursor: pointer; list-style: none; font: 500 1.05rem/1.4 var(--sans); color: var(--ink); }
.article-faq summary::-webkit-details-marker { display: none; }
.article-faq summary::after { content: '+'; font-family: var(--mono); color: var(--ink-2); }
.article-faq[open] summary::after { content: '-'; }
.article-faq summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.article-faq p { margin: 0 0 1.25rem; max-width: 68ch; color: var(--ink-2); line-height: 1.7; }