/* public/css/article.css */
.article-page { background: #06080b; color: #e8eaed; min-height: 100vh; }
.article__bar { padding: 1.5rem 2rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.article__back { color: #9aa3ad; text-decoration: none; font-size: .8rem; letter-spacing: .04em; }
.article__back:hover { color: #e8eaed; }
.article { padding: 4rem 0 6rem; }
.article .wrap { max-width: 46rem; margin: 0 auto; padding: 0 1.5rem; }
.article__title { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; margin: .75rem 0; }
.article__meta { color: #6f7883; font-size: .8rem; }
.article__summary { color: #b6bdc6; font-size: 1.15rem; line-height: 1.6; margin: 1.5rem 0 0; }
.article__content { font-size: 1.05rem; line-height: 1.75; margin-top: 3rem; }
.article__content h2 { font-size: 1.6rem; margin: 2.5rem 0 .75rem; line-height: 1.25; }
.article__content h3 { font-size: 1.25rem; margin: 2rem 0 .5rem; }
.article__content p { margin: 0 0 1.25rem; }
.article__content ul, .article__content ol { margin: 0 0 1.25rem 1.25rem; }
.article__content li { margin-bottom: .5rem; }
.article__content blockquote { margin: 2rem 0; padding-left: 1.25rem; border-left: 2px solid rgba(255,255,255,.2); color: #b6bdc6; font-style: italic; }
.article__content img { max-width: 100%; height: auto; display: block; margin: 2rem auto; border-radius: 2px; }
.article__content figcaption { text-align: center; font-size: .8rem; color: #6f7883; margin-top: -1rem; margin-bottom: 2rem; }
.article__content a { color: #e8eaed; text-decoration: underline; text-underline-offset: 3px; }
.article__files { display: flex; flex-wrap: wrap; gap: .75rem; margin: 3rem 0; padding: 1.5rem 0; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.article__foot { margin-top: 3rem; }
@media (max-width: 640px) { .article { padding: 2.5rem 0 4rem; } }

/* Tables arrive with Word imports. Hairlines and a small-caps header row, in the
   site's own language rather than Word's boxed grid. Nothing here can be set from
   the document: the sanitizer strips every attribute a table carries. */
.article__content table { width: 100%; border-collapse: collapse; margin: 2.5rem 0; font-size: .95rem; }
.article__content caption { text-align: left; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: #6f7883; padding-bottom: .75rem; }
.article__content th, .article__content td { text-align: left; vertical-align: top;
  padding: .85rem 1.5rem .85rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.article__content thead th { font-family: "Saira", system-ui, sans-serif; font-size: .75rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: #9aa3ad; border-bottom-color: rgba(255,255,255,.22); }
.article__content tbody tr:last-child td { border-bottom: none; }
.article__content th p, .article__content td p { margin: 0; }
.article__content th p + p, .article__content td p + p { margin-top: .5rem; }

/* Narrow screens: the table scrolls sideways on its own rather than crushing four
   columns into the width of a phone. */
@media (max-width: 700px) {
  .article__content table { display: block; overflow-x: auto; }
  .article__content th, .article__content td { min-width: 9rem; }
}