/* =========================================================
   News Archive Page Styles
   File: css/news-archive.css
   Purpose: Chapter-wide news, articles, SIG updates, event recaps,
   newsletters, outreach stories, and student highlights.
========================================================= */

:root{
  --news-navy:#071326;
  --news-navy-2:#0b1d38;
  --news-blue:#2f6fed;
  --news-blue-2:#5b8cff;
  --news-cyan:#56d7ff;
  --news-ink:#182033;
  --news-muted:#667085;
  --news-line:#e5e7eb;
  --news-soft:#f5f7fb;
  --news-white:#ffffff;
  --news-green:#2fa66a;
  --news-purple:#6757d8;
  --news-amber:#c98218;
  --news-red:#c94a4a;
  --news-shadow:0 18px 45px rgba(7, 19, 38, .12);
  --news-radius:18px;
  
  --primary: #0a2463;
  --primary-light: #1e3a8a;
  --secondary: #00d4ff;
  --accent: #ff6b35;

  --dark: #0f172a;
  --gray: #64748b;
  --light-gray: #e2e8f0;
  --white: #ffffff;

  --gradient-1: linear-gradient(135deg, #0a2463 0%, #1e3a8a 100%);
  --gradient-2: linear-gradient(135deg, #00d4ff 0%, #0a2463 100%);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
}
  
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'DM Sans', sans-serif;
      background: #f9f8f5;
      color: #1a1a1a;
      padding: 2rem 1rem 4rem;
    }

    .article-wrap {
      max-width: 720px;
      margin: 0 auto;
      background: #ffffff;
      border: 0.5px solid #e0ddd6;
      border-radius: 12px;
      padding: 3rem 3.5rem;
    }

    .badge {
      display: inline-block;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      background: #E6F1FB;
      color: #0C447C;
      padding: 4px 10px;
      border-radius: 4px;
      margin-bottom: 1rem;
    }

    .meta {
      font-size: 13px;
      color: #666;
      display: flex;
      gap: 0.5rem;
      align-items: center;
      margin-bottom: 1.25rem;
    }

    .meta span + span::before {
      content: '·';
      margin-right: 0.5rem;
    }

    h1 {
      font-family: 'Lora', serif;
      font-size: 30px;
      font-weight: 600;
      line-height: 1.3;
      color: #111;
      margin-bottom: 1rem;
    }

    .subtitle {
      font-size: 16px;
      color: #555;
      line-height: 1.6;
      border-left: 3px solid #378ADD;
      padding-left: 1rem;
      margin-bottom: 2rem;
    }

    hr {
      border: none;
      border-top: 0.5px solid #ddd;
      margin-bottom: 2rem;
    }

    .body {
      font-family: 'Lora', serif;
      font-size: 17px;
      line-height: 1.85;
      color: #1a1a1a;
    }

    .body p {
      margin-bottom: 1.4rem;
    }

    .body h2 {
      font-family: 'DM Sans', sans-serif;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #888;
      margin: 2.5rem 0 0.75rem;
      padding-top: 1.5rem;
      border-top: 0.5px solid #e5e5e5;
    }

    .pullquote {
      margin: 2rem 0;
      padding: 1rem 1.5rem;
      background: #E6F1FB;
      border-left: 4px solid #378ADD;
      border-radius: 0 8px 8px 0;
      font-family: 'Lora', serif;
      font-style: italic;
      font-size: 18px;
      color: #0C447C;
      line-height: 1.6;
    }

    .article-footer {
      margin-top: 3rem;
      padding-top: 1.25rem;
      border-top: 0.5px solid #ddd;
      font-size: 13px;
      color: #888;
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
    }

    .article-footer .author {
      font-weight: 500;
      color: #1a1a1a;
    }

    @media (max-width: 600px) {
      .article-wrap { padding: 2rem 1.5rem; }
      h1 { font-size: 24px; }
      .body { font-size: 16px; }
    }