/* ══════════════════════════════════════════════════════════
   REPORT MOBILE RESPONSIVE — shared across all static reports
   ══════════════════════════════════════════════════════════ */

@media screen and (max-width: 820px) {
  :root {
    --page-w: 100%;
    --margin: 20px;
    --gutter: 16px;
    --col: 100%;
  }

  body {
    background: white;
  }

  .page {
    width: 100%;
    min-height: auto;
    margin: 0;
    box-shadow: none;
    border-bottom: 4px solid #e8e8e8;
    overflow: visible;
  }

  /* ── Cover ─────────────────────────────── */

  .cover {
    padding: 24px 20px;
    min-height: 70vh;
  }

  .cover-title {
    font-size: 42px;
    margin-bottom: 16px;
  }

  .cover-subtitle {
    font-size: 16px;
    max-width: 100%;
    margin-bottom: 32px;
  }

  .cover-meta {
    font-size: 9px;
    letter-spacing: 1px;
    line-height: 1.6;
  }

  .cover-badge {
    font-size: 10px;
    padding: 6px 10px;
    top: 20px;
    right: 20px;
  }

  .cover-year {
    font-size: 12px;
    letter-spacing: 3px;
  }

  .cover-theme {
    font-size: 10px;
    letter-spacing: 2px;
  }

  /* ── Article ───────────────────────────── */

  .article {
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 16px;
  }

  .article-header {
    padding-bottom: 12px;
    margin-bottom: 0;
  }

  .article-headline {
    font-size: 22px;
  }

  .article-subhead {
    font-size: 13px;
  }

  .article-card-badge {
    font-size: 10px;
    letter-spacing: 2px;
  }

  .article-body {
    grid-column: unset;
    font-size: 14px;
    line-height: 1.7;
    text-align: left;
    hyphens: none;
  }

  .article-sidebar {
    grid-column: unset;
  }

  .pull-quote {
    font-size: 18px;
  }

  .sidebar-box {
    font-size: 13px;
  }

  .sidebar-box h4 {
    font-size: 9px;
  }

  .article-screenshot img {
    max-height: none;
    height: auto;
  }

  .article-footer {
    flex-direction: column;
    gap: 4px;
    text-align: center;
    padding-top: 12px;
    font-size: 8px;
  }

  .page-number {
    position: static;
    text-align: center;
    padding: 8px 0;
    font-size: 9px;
  }

  .page-number.left,
  .page-number.right {
    left: unset;
    right: unset;
  }

  /* ── Editor's Note ─────────────────────── */

  .editors-note {
    padding: 24px 20px;
    padding-top: 32px;
  }

  .editors-note-body {
    column-count: 1;
    font-size: 14px;
  }

  .editors-note-body p:first-child::first-letter {
    font-size: 48px;
  }

  /* ── Division splash ───────────────────── */

  .division-splash {
    padding: 32px 20px;
    min-height: auto;
  }

  .division-splash .suit-symbol {
    font-size: 72px;
  }

  .division-splash h2 {
    font-size: 28px;
  }

  .division-splash .division-site {
    font-size: 11px;
  }

  .division-splash .division-roster {
    font-size: 11px;
    max-width: 100%;
  }

  .division-splash .ss-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
    margin-top: 20px;
  }

  .division-splash .ss-grid img {
    height: 80px;
  }

  /* ── Monthly feature / weekly recap ───── */

  .feature-body {
    column-count: 1;
    font-size: 14px;
    text-align: left;
    hyphens: none;
  }

  .feature-headline {
    font-size: 22px;
  }

  .feature-callout {
    font-size: 14px;
  }

  .weekly-recap {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .weekly-card {
    font-size: 12px;
  }

  /* ── Back cover ────────────────────────── */

  .back-cover {
    padding: 48px 20px;
    min-height: auto;
  }

  .back-cover blockquote {
    font-size: 20px;
    max-width: 100%;
  }

  .back-cover cite {
    font-size: 10px;
  }

  .back-cover .colophon {
    position: static;
    margin-top: 32px;
    font-size: 8px;
  }
}