/* MAGRS article layout (draft 2026-10-26). Loaded after /assets/magrs-home-theme.css, which supplies the
   header, menu, fonts, colors and footer. Used by the tile article pages (what-is-magrs, why-magrs-matters, ai-or-si, marshall-principle, who-maintains-magrs). */

/* Featured header: black band, date and title centered above the thumbnail */
.ma-hero { background: var(--ink); color: #fff; text-align: center; }
.ma-hero__text { max-width: 768px; margin: 0 auto; padding: 32px 24px 28px; }
.ma-hero__date { margin: 0 0 8px; font: 400 14px/24px var(--f-body); color: rgba(255, 255, 255, 0.85); }
.ma-hero__title { margin: 0; font: 700 36px/48px var(--f-head); text-transform: uppercase; letter-spacing: 2.25px; }
.ma-hero__img { display: block; max-width: 1200px; margin: 0 auto; }
.ma-hero__img img { display: block; width: 100%; height: auto; }

/* Reading column: 768 entry, 624 text, 24px rhythm */
.ma-body { max-width: 768px; margin: 0 auto; padding: 48px 72px 24px; }
.ma-byline { margin: 0 0 24px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); font: 400 14px/24px var(--f-body); color: var(--muted); }
.ma-byline__name { font: 400 14px/24px var(--f-alt); text-transform: uppercase; letter-spacing: 0.0625em; color: var(--ink); }
.ma-content { max-width: 624px; }
.ma-content p { margin: 0 0 24px; }
.ma-content h2 { margin: 48px 0 24px; font: 400 30px/36px var(--f-head); text-transform: uppercase; letter-spacing: 1.875px; }
.ma-content h3 { margin: 24px 0 12px; font: 400 24px/32px var(--f-alt); text-transform: uppercase; letter-spacing: 1.5px; }
.ma-content h3 + p { margin-top: 0; }
.ma-content ul { margin: 0 0 24px; padding-left: 1.25em; }
.ma-content li { margin-bottom: 8px; }
.ma-content li::marker { color: var(--accent); }
.ma-content hr { border: 0; border-top: 1px solid var(--rule); margin: 48px 0; }
.ma-content hr + h2 { margin-top: 0; }
.ma-content blockquote { margin: 0 0 24px; padding: 4px 0 4px 24px; border-left: 4px solid var(--accent); font: 400 22px/34px var(--f-body); }
.ma-content a { color: var(--accent); }
.ma-hero__link { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.ma-hero__link:hover { color: var(--accent); }
.ma-content blockquote p { margin: 0; }
.ma-quote-by { margin: 0 0 4px; font: 400 15px/24px var(--f-alt); text-transform: uppercase; letter-spacing: 0.0625em; }
.ma-motto { font-style: italic; color: var(--muted); }
.ma-rule { padding: 16px 24px; background: var(--panel); border-left: 4px solid var(--accent); }
.ma-foot { max-width: 624px; margin-top: 48px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 14px; }
.ma-foot p { margin: 0; }
.ma-foot a { text-decoration: none; font-weight: 700; }
.ma-foot a:hover { text-decoration: underline; }

@media (max-width: 1023px) { .ma-body { padding-left: 48px; padding-right: 48px; } }
@media (max-width: 567px) {
  .ma-hero__text { padding: 24px 20px; }
  .ma-hero__title { font-size: 26px; line-height: 34px; letter-spacing: 1.5px; }
  .ma-body { padding: 32px 20px 16px; }
  .ma-content h2 { font-size: 26px; line-height: 32px; margin-top: 36px; }
  .ma-content h3 { font-size: 20px; line-height: 28px; }
  .ma-content hr { margin: 36px 0; }
  .ma-content blockquote { font-size: 19px; line-height: 30px; padding-left: 16px; }
}