/* ============================================================
       5. PAGE-SCOPED ARTICLE STYLES
          All selectors prefixed with .article-* to avoid collisions
          with site.css card/section/callout rules.
       ============================================================ */



    /* Article-level tokens */
    .article-page {
      --art-cream:        #F5F1EB;
      --art-warm:         #FDFAF6;
      --art-ink:          #1A1714;
      --art-ink-mid:      #3D3730;
      --art-ink-light:    #7A7068;
      /* Accent colours bridge to FitBeforeBuy brand */
      --art-accent:       #324274;   /* = --color-primary */
      --art-accent-dark:  #22335f;   /* = --color-primary-dark */
      --art-rust:         #B33D14;   /* danger-ish, complements brand blue */
      --art-rust-light:   #D95225;
      --art-sage:         #3A5933;
      --art-sage-light:   #E4EEE2;
      --art-gold:         #A07820;
      --art-gold-light:   #F0E4BC;
      --art-border:       rgba(50,66,116,0.12);
      --art-border-strong:rgba(50,66,116,0.28);
    }

    /* Noise texture */
    .article-page::before {
      content: '';
      position: fixed; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
      pointer-events: none; z-index: 900; opacity: 0.5;
    }

    /* ── HERO ── */
    .article-hero {
      background: var(--art-ink);
      color: var(--art-cream);
      padding: 64px 40px 56px;
      position: relative;
      overflow: hidden;
    }
    .article-hero::after {
      content: '';
      position: absolute; right: -80px; top: -80px;
      width: 480px; height: 480px;
      border-radius: 50%;
      border: 1px solid rgba(245,241,235,0.05);
      pointer-events: none;
    }
    .article-hero::before {
      content: '';
      position: absolute; right: 60px; top: 40px;
      width: 260px; height: 260px;
      border-radius: 50%;
      border: 1px solid rgba(245,241,235,0.035);
      pointer-events: none;
    }

    .article-hero-inner {
      max-width: 860px;
      margin: 0 auto;
      position: relative; z-index: 1;
    }

    .article-hero-label {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: 'DM Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #8BA0D4;          /* a muted tint of the brand blue on dark */
      margin-bottom: 22px;
    }
    .article-hero-label::before {
      content: '';
      width: 22px; height: 1px;
      background: #8BA0D4;
    }
    .article-hero-label a {
      color: var(--art-gold-light);
      text-decoration: none;
      font-weight: 500;
      transition: color 0.2s;
    }
    .article-hero-label a:hover { 
        color: var(--art-gold);
        text-decoration: underline;
    }

    .article-hero h1 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2rem, 5vw, 3.4rem);
      font-weight: 900;
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: var(--art-cream);
      margin-bottom: 22px;
      max-width: 680px;
    }
    .article-hero h1 em {
      font-style: italic;
      color: rgba(245,241,235,0.55);
    }

    .article-hero-meta {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      font-family: 'DM Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.04em;
      opacity: 0.5;
    }

    .article-hero-disclaimer {
      margin-top: 28px;
      padding: 15px 20px;
      background: rgba(245,241,235,0.055);
      border-left: 3px solid #8BA0D4;
      border-radius: 2px;
      font-size: 13px;
      line-height: 1.65;
      color: rgba(245,241,235,0.78);
      max-width: 620px;
    }
    .article-hero-disclaimer strong { color: #A8BFEE; }

    /* ── ARTICLE BODY WRAPPER ── */
    .article-body {
      background: var(--art-cream);
      font-family: 'DM Sans', sans-serif;
      color: var(--art-ink);
      padding-top: 25px;
    }

    .article-inner {
      max-width: 860px;
      margin: 0 auto;
      padding: 0 40px 80px;
    }

    /* ── TOC ── */
    .article-toc {
      background: var(--art-warm);
      border: 1px solid var(--art-border-strong);
      border-radius: 4px;
      padding: 28px 32px;
      margin: 44px 0;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 0 36px;
      align-items: start;
    }
    .article-toc-label {
      font-family: 'Playfair Display', serif;
      font-size: 1.3rem;
      font-weight: 700;
      writing-mode: vertical-rl;
      text-orientation: mixed;
      transform: rotate(180deg);
      letter-spacing: 0.04em;
      color: var(--art-ink-light);
      align-self: stretch;
      display: flex;
      align-items: center;
    }
    .article-toc-links { list-style: none; width: 100%; }
    .article-toc-links li {
      border-bottom: 1px solid var(--art-border);
      padding: 9px 0;
    }
    .article-toc-links li:last-child { border-bottom: none; }
    .article-toc-links a {
      text-decoration: none;
      color: var(--art-ink-mid);
      font-size: 14px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: color 0.2s;
    }
    .article-toc-links a:hover { color: var(--color-primary); }
    .toc-num {
      font-family: 'DM Mono', monospace;
      font-size: 10px;
      color: var(--art-ink-light);
      min-width: 20px;
    }

    /* ── ARTICLE SECTIONS ── */
    .article-section {
      margin-bottom: 60px;
      animation: artFadeUp 0.45s ease both;
    }
    @keyframes artFadeUp {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .article-section:nth-child(1) { animation-delay: 0.05s; }
    .article-section:nth-child(2) { animation-delay: 0.10s; }
    .article-section:nth-child(3) { animation-delay: 0.15s; }
    .article-section:nth-child(4) { animation-delay: 0.20s; }
    .article-section:nth-child(5) { animation-delay: 0.25s; }
    .article-section:nth-child(6) { animation-delay: 0.30s; }

    .article-section-header {
      display: flex;
      align-items: flex-start;
      gap: 18px;
      margin-bottom: 24px;
      padding-bottom: 18px;
      border-bottom: 2px solid var(--art-ink);
    }
    .article-sec-num {
      font-family: 'DM Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.1em;
      color: var(--art-ink-light);
      padding-top: 5px;
      min-width: 28px;
    }
    .article-section-header h2 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.4rem, 3vw, 1.9rem);
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -0.01em;
      color: var(--art-ink);
    }

    .article-section-intro {
      font-size: 15px;
      color: var(--art-ink-light);
      margin-bottom: 24px;
      max-width: 640px;
      padding-left: 46px;
      line-height: 1.7;
    }

    /* ── CONDITION CARDS ── */
    .art-condition-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
      gap: 14px;
    }
    .art-condition-card {
      background: var(--art-warm);
      border: 1px solid var(--art-border);
      border-radius: 4px;
      padding: 22px;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .art-condition-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(50,66,116,0.1);
    }
    .art-condition-card.risk-high  { border-top: 3px solid var(--art-rust); }
    .art-condition-card.risk-mod   { border-top: 3px solid var(--art-gold); }
    .art-condition-card.risk-low   { border-top: 3px solid var(--art-sage); }

    .art-condition-card h3 {
      font-family: 'Playfair Display', serif;
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 10px;
      color: var(--art-ink);
    }
    .art-condition-card p {
      font-size: 13.5px;
      color: var(--art-ink-mid);
      line-height: 1.65;
      margin-bottom: 12px;
    }
    .art-condition-card p:last-child { margin-bottom: 0; }

    .art-tag-list {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-bottom: 10px;
    }
    .art-tag {
      font-family: 'DM Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.05em;
      padding: 3px 7px;
      border-radius: 2px;
      border: 1px solid var(--art-border-strong);
      color: var(--art-ink-mid);
    }
    .art-tag.red    { border-color: var(--art-rust); color: var(--art-rust); }
    .art-tag.amber  { border-color: var(--art-gold); color: var(--art-gold); }
    .art-tag.brand  { border-color: var(--color-primary); color: var(--color-primary); }

    /* ── MEDICATION TABLE ── */
    .art-med-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      font-family: 'DM Sans', sans-serif;
    }
    .art-med-table thead th {
      background: var(--art-ink);
      color: var(--art-cream);
      padding: 11px 15px;
      text-align: left;
      font-family: 'DM Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-weight: 500;
    }
    .art-med-table tbody tr {
      border-bottom: 1px solid var(--art-border);
      transition: background 0.15s;
    }
    .art-med-table tbody tr:hover { background: var(--art-warm); }
    .art-med-table tbody td {
      padding: 13px 15px;
      vertical-align: top;
      line-height: 1.6;
      color: var(--art-ink-mid);
    }
    .art-med-name {
      font-weight: 600;
      font-size: 13px;
      color: var(--art-ink);
      min-width: 150px;
    }
    .art-med-name small { font-weight: 400; color: var(--art-ink-light); display: block; }

    /* ── MEDICATION TABLE — MOBILE CARD STACK ── */
    @media (max-width: 600px) {
      /* Hide the header row — labels come from data-label */
      .art-med-table thead { display: none; }

      .art-med-table,
      .art-med-table tbody,
      .art-med-table tr,
      .art-med-table td { display: block; width: 100%; }

      /* Each row becomes a card */
      .art-med-table tbody tr {
        background: var(--art-warm);
        border: 1px solid var(--art-border);
        border-radius: 4px;
        margin-bottom: 12px;
        padding: 16px;
        border-bottom: 1px solid var(--art-border); /* keep border */
      }
      .art-med-table tbody tr:last-child { margin-bottom: 0; }

      /* Each cell gets a label prefix from data-label */
      .art-med-table tbody td {
        padding: 6px 0;
        border: none;
        display: grid;
        grid-template-columns: 90px 1fr;
        gap: 0 10px;
        align-items: start;
        font-size: 13.5px;
      }

      .art-med-table tbody td::before {
        content: attr(data-label);
        font-family: 'DM Mono', monospace;
        font-size: 9px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--art-ink-light);
        font-weight: 500;
        padding-top: 3px;
        line-height: 1.4;
      }

      /* First cell (medication name) gets extra top breathing room */
      .art-med-table tbody td:first-child {
        padding-top: 0;
        margin-bottom: 4px;
      }

      /* Risk pill cell — align pill with the label */
      .art-med-table tbody td:nth-child(2) {
        align-items: center;
      }

      .art-med-name { font-size: 14px; }
      .art-med-name small { font-size: 12px; margin-top: 2px; }
    }

    /* Risk pills — uses site.css .pill pattern but scoped */
    .art-risk-pill {
      display: inline-block;
      font-family: 'DM Mono', monospace;
      font-size: 9px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: var(--radius-sm);
      font-weight: 600;
    }
    .art-risk-high { background: #fde8e2; color: var(--art-rust); }
    .art-risk-mod  { background: var(--art-gold-light); color: var(--art-gold); }

    /* ── CALLOUT BOXES ── */
    .art-callout {
      padding: 18px 22px;
      border-radius: 4px;
      margin: 20px 0;
      font-size: 14px;
      line-height: 1.65;
      font-family: 'DM Sans', sans-serif;
    }
    .art-callout-warning { background: #fde8e2; border-left: 4px solid var(--art-rust); }
    .art-callout-warning strong { color: var(--art-rust); }
    .art-callout-info    { background: var(--art-sage-light); border-left: 4px solid var(--art-sage); }
    .art-callout-info strong    { color: var(--art-sage); }
    .art-callout-brand   { background: #EBF0FB; border-left: 4px solid var(--color-primary); }
    .art-callout-brand strong   { color: var(--color-primary); }
    .art-callout-neutral { background: var(--art-gold-light); border-left: 4px solid var(--art-gold); }
    .art-callout-neutral strong { color: var(--art-gold); }

    /* ── AGE BLOCKS ── */
    .art-age-blocks {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .art-age-block {
      background: var(--art-warm);
      border: 1px solid var(--art-border);
      padding: 26px;
      border-radius: 4px;
    }
    .art-age-block.highlight-danger { border-top: 3px solid var(--art-rust); }
    .art-age-badge {
      font-family: 'Playfair Display', serif;
      font-size: 2.4rem;
      font-weight: 900;
      line-height: 1;
      color: var(--art-ink);
      margin-bottom: 4px;
      display: block;
    }
    .art-age-badge.danger { color: var(--art-rust); }
    .art-age-label {
      font-family: 'DM Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--art-ink-light);
      margin-bottom: 14px;
      display: block;
    }
    .art-age-block p {
      font-size: 14px;
      color: var(--art-ink-mid);
      line-height: 1.65;
      margin: 0;
    }

    /* ── SKIP LIST ── */
    .art-skip-list { list-style: none; }
    .art-skip-list li {
      padding: 18px 22px;
      background: var(--art-warm);
      border: 1px solid var(--art-border);
      border-radius: 4px;
      margin-bottom: 10px;
      display: flex;
      gap: 18px;
      align-items: flex-start;
      transition: transform 0.15s;
    }
    .art-skip-list li:hover { transform: translateX(4px); }
    .art-skip-icon { font-size: 20px; min-width: 26px; line-height: 1.5; }
    .art-skip-list strong { display: block; margin-bottom: 4px; font-size: 15px; color: var(--art-ink); }
    .art-skip-list p { font-size: 13.5px; color: var(--art-ink-mid); margin: 0; line-height: 1.6; }

    /* ── ALTERNATIVES GRID ── */
    .art-alt-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
      gap: 12px;
    }
    .art-alt-card {
      background: var(--art-ink);
      color: var(--art-cream);
      padding: 20px 18px;
      border-radius: 4px;
    }
    .art-alt-card.brand-accent {
      background: var(--color-primary);   /* FBB blue for the "medical" card */
    }
    .art-alt-icon { font-size: 20px; margin-bottom: 8px; display: block; }
    .art-alt-card strong { display: block; font-size: 14px; font-weight: 600; margin-bottom: 5px; }
    .art-alt-card p { font-size: 12.5px; line-height: 1.6; opacity: 0.72; margin: 0; color: var(--art-cream); }

    /* ── CTA STRIP (uses site brand colors) ── */
    .art-cta-strip {
      background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
      color: #fff;
      padding: 36px 40px;
      border-radius: var(--radius-xl);
      margin: 44px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
      flex-wrap: wrap;
      box-shadow: var(--shadow-md);
    }
    .art-cta-strip h3 {
      font-family: 'Playfair Display', serif;
      font-size: 1.45rem;
      font-weight: 700;
      margin-bottom: 5px;
      color: #fff;
    }
    .art-cta-strip p { font-size: 14px; opacity: 0.88; max-width: 400px; margin: 0; color: #fff; }
    .art-cta-btn {
      display: inline-block;
      background: #fff;
      color: var(--color-primary);
      padding: 13px 26px;
      border-radius: var(--radius-xl);
      font-weight: 700;
      font-size: 14px;
      text-decoration: none;
      letter-spacing: 0.02em;
      white-space: nowrap;
      transition: box-shadow 0.2s, transform 0.2s;
      box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    }
    .art-cta-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 22px rgba(0,0,0,0.2);
      color: var(--color-primary-dark);
    }

    /* ── RELATED LINKS ── */
    .art-related-links {
      list-style: none;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .art-related-links a {
      display: block;
      padding: 13px 16px;
      background: var(--art-warm);
      border: 1px solid var(--art-border);
      border-radius: 4px;
      text-decoration: none;
      color: var(--art-ink-mid);
      font-size: 14px;
      font-weight: 500;
      transition: border-color 0.2s, color 0.2s;
    }
    .art-related-links a:hover {
      border-color: var(--color-primary);
      color: var(--color-primary);
    }
    .art-related-links a::before { content: '→ '; color: var(--color-primary); }

    /* ── ARTICLE FOOTER NOTE ── */
    .art-footer-note {
      font-size: 12px;
      color: var(--art-ink-light);
      margin-top: 18px;
      font-family: 'DM Sans', sans-serif;
    }

/* Footer */
.footer {
  margin-top: 0;
}

    @media (max-width: 768px) {

      /* Article mobile */
      .article-hero { padding: 44px 20px 40px; }
      .article-inner { padding: 0 20px 56px; }
      .article-toc { grid-template-columns: 1fr; }
      .article-toc-label { writing-mode: horizontal-tb; transform: none; margin-bottom: 12px; }
      .art-age-blocks { grid-template-columns: 1fr; }
      .art-related-links { grid-template-columns: 1fr; }
      .art-cta-strip { flex-direction: column; padding: 28px 24px; }
      .art-condition-grid { grid-template-columns: 1fr; }
      .article-section-intro { padding-left: 0; }
    }
    @media (max-width: 480px) {
      .article-hero h1 { font-size: 1.875rem; }
    }