/* Copied verbatim from the approved Type 1b mockup (modern-article.html), inline <style> block 1. Do not edit; put overrides in mb.css. */

    :root {
      --primary: #0B1220;
      --bg: #F6F3EE;
      --surface: #FFFFFF;
      --text: #141820;
      --muted: #5A6472;
      --accent: #9E1B2E;
      --accent-hover: #7E1524;
      --border: #D8D2C8;
      --chip-bg: #ECE7DF;
      --chip-text: #2A3140;
      --radius: 6px;
      --shadow: 0 1px 2px rgba(11,18,32,.06), 0 8px 24px rgba(11,18,32,.06);
      --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
      --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
      --max: 1120px; --prose: 680px;
      --font-display: "Archivo", "Arial Narrow", Arial, sans-serif;
      --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
    }
    *, *::before, *::after { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: var(--font-body);
      font-size: 16px;
      line-height: 1.6;
      color: var(--text);
      background: var(--bg);
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; }
    a:hover { color: var(--accent); }

    .mock-banner {
      background: #2A3140; color: #E8E4DC; font-size: 12px;
      letter-spacing: .04em; text-transform: uppercase;
      text-align: center; padding: 8px 16px;
    }
    .mock-banner strong { color: #fff; }

    .site-header {
      position: sticky; top: 0; z-index: 50;
      background: var(--primary); color: #F6F3EE;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .header-inner {
      max-width: var(--max); margin: 0 auto; padding: 0 var(--space-5);
      height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
    }
    .brand { display: flex; align-items: baseline; gap: 10px; color: #fff; }
    .brand:hover { color: #fff; }
    .brand-mark {
      font-family: var(--font-display); font-weight: 700;
      font-size: 1.35rem; letter-spacing: -0.02em; line-height: 1;
    }
    .brand-cue {
      font-size: 10px; font-weight: 600; letter-spacing: .12em;
      text-transform: uppercase; color: rgba(246,243,238,.55);
      border-left: 1px solid rgba(246,243,238,.25); padding-left: 10px;
    }
    .nav { display: flex; align-items: center; gap: var(--space-5); font-size: 14px; font-weight: 500; }
    .nav a { color: rgba(246,243,238,.85); }
    .nav a:hover, .nav a.is-active { color: #fff; }
    .btn {
      display: inline-flex; align-items: center; justify-content: center;
      font-family: var(--font-body); font-weight: 600; font-size: 13px;
      letter-spacing: .02em; border-radius: 4px; border: 1px solid transparent;
      padding: 10px 18px; cursor: pointer; transition: background .15s, color .15s;
    }
    .btn-accent { background: var(--accent); color: #fff; }
    .btn-accent:hover { background: var(--accent-hover); color: #fff; }

    .article-wrap { max-width: var(--max); margin: 0 auto; padding: var(--space-7) var(--space-5) var(--space-6); }
    .article-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 300px;
      gap: var(--space-7);
      align-items: start;
    }

    .breadcrumb {
      font-size: 13px; color: var(--muted); margin-bottom: var(--space-4);
    }
    .breadcrumb a { color: var(--muted); }
    .breadcrumb a:hover { color: var(--accent); }

    .chip {
      display: inline-flex; font-size: 11px; font-weight: 600;
      letter-spacing: .08em; text-transform: uppercase;
      padding: 4px 10px; border-radius: 3px;
      background: rgba(158,27,46,.12); color: var(--accent);
    }

    .article-header h1 {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: clamp(1.85rem, 3vw, 2.6rem);
      line-height: 1.15;
      letter-spacing: -0.025em;
      margin: var(--space-3) 0 var(--space-4);
    }
    .dek {
      font-size: 1.125rem;
      color: var(--muted);
      line-height: 1.55;
      margin: 0 0 var(--space-5);
      max-width: 52ch;
    }
    .byline {
      display: flex; flex-wrap: wrap; gap: var(--space-4);
      align-items: center; padding: var(--space-4) 0;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      margin-bottom: var(--space-5);
      font-size: 14px;
    }
    .byline .name { font-weight: 600; }
    .byline .meta { color: var(--muted); }

    .hero-art {
      aspect-ratio: 16 / 9;
      background: linear-gradient(145deg, #1a2332 0%, #0B1220 50%, #3a1520 100%);
      border-radius: var(--radius);
      margin-bottom: var(--space-3);
      position: relative;
      overflow: hidden;
    }
    .hero-art::after {
      content: "";
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at 30% 20%, rgba(158,27,46,.3), transparent 55%);
    }
    .hero-art-caption {
      font-size: 13px; color: var(--muted); margin: 0 0 var(--space-6);
    }

    .prose {
      max-width: var(--prose);
      font-size: 1.0625rem;
      line-height: 1.75;
    }
    .prose p { margin: 0 0 1.25em; }
    .prose .drop {
      font-family: var(--font-display);
      font-size: 1.15em;
      font-weight: 500;
    }
    .prose blockquote {
      margin: 1.5em 0;
      padding: var(--space-4) var(--space-5);
      border-left: 3px solid var(--accent);
      background: var(--surface);
      border-radius: 0 var(--radius) var(--radius) 0;
      color: var(--text);
      font-family: var(--font-display);
      font-size: 1.15rem;
      line-height: 1.45;
    }
    .prose h2 {
      font-family: var(--font-display);
      font-size: 1.4rem;
      font-weight: 600;
      letter-spacing: -0.02em;
      margin: 1.75em 0 0.6em;
    }

    .article-cta {
      margin: var(--space-7) 0;
      padding: var(--space-5);
      background: var(--primary);
      color: #F6F3EE;
      border-radius: var(--radius);
      display: flex; flex-wrap: wrap; gap: var(--space-4);
      align-items: center; justify-content: space-between;
    }
    .article-cta p { margin: 0; max-width: 40ch; color: rgba(246,243,238,.75); font-size: 14px; }
    .article-cta strong { display: block; color: #fff; font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 4px; }

    .sidebar {
      position: sticky; top: 88px;
      display: flex; flex-direction: column; gap: var(--space-5);
    }
    .side-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: var(--space-4);
    }
    .side-card > h2 {
      font-size: 11px; font-weight: 700; letter-spacing: .1em;
      text-transform: uppercase; color: var(--muted);
      margin: 0 0 var(--space-3);
      padding-bottom: var(--space-2);
      border-bottom: 1px solid var(--border);
    }
    .related-item {
      display: block; padding: var(--space-3) 0;
      border-bottom: 1px solid var(--border);
    }
    .related-item:last-child { border-bottom: none; padding-bottom: 0; }
    .related-item .r-chip {
      font-size: 10px; font-weight: 600; letter-spacing: .08em;
      text-transform: uppercase; color: var(--accent); margin-bottom: 4px;
    }
    .related-item h3 {
      font-family: var(--font-display);
      font-size: 1rem; font-weight: 600; line-height: 1.3;
      margin: 0 0 4px; letter-spacing: -0.01em;
    }
    .related-item:hover h4 { color: var(--accent); }
    .related-item .r-date { font-size: 12px; color: var(--muted); }

    .site-footer {
      border-top: 1px solid var(--border);
      background: var(--surface);
      padding: var(--space-6) var(--space-5);
      margin-top: var(--space-6);
    }
    .footer-bottom {
      max-width: var(--max); margin: 0 auto;
      font-size: 12px; color: var(--muted);
      display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
    }

    @media (max-width: 900px) {
      .article-layout { grid-template-columns: 1fr; }
      .sidebar { position: static; }
      .nav { display: none; }
      .brand-cue { display: none; }
    }