/* ============================================================
   FitLab Reviews — article.css  v1.0
   Shared component styles for ALL article layouts.
   Imported once by ResearchLayout.astro (and future layouts).
   Never copy-paste these into individual article files.

   Component index:
     1.  Layout (breadcrumb, hero, 2-col grid)
     2.  TOC (sticky sidebar)
     3.  Disclosure bar
     4.  Article typography (body, h2, h3, p, ul, ol, a)
     5.  Mobile quick-read table        [mobile-only]
     6.  Callout boxes                  (3 variants)
     7.  FitLab Score badge             (4 tier states)
     8.  Comparison table
     9.  Dose checker                   (clinical vs label)
     10. Timeline
     11. Product card                   (Amazon affiliate)
     12. Related grid
     13. Author bio
     14. Footnotes / references
     15. Responsive overrides
   ============================================================ */


/* ── 1. LAYOUT ──────────────────────────────────────────── */

/* Breadcrumb */
.art-breadcrumb {
  background: var(--soft);
  border-bottom: 1px solid var(--soft);
  padding: 10px 0;
}
.art-breadcrumb__inner {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .76rem;
  color: var(--muted);
  flex-wrap: wrap;
}
.art-breadcrumb__inner a {
  color: var(--muted);
  text-decoration: none;
  transition: color .15s;
}
.art-breadcrumb__inner a:hover { color: var(--ink) }
.art-breadcrumb__inner span[aria-current] { color: var(--ink-2); font-weight: 500 }

/* Article hero */
.art-hero {
  background: var(--paper);
  border-bottom: 1px solid var(--soft);
  padding: 52px 0 44px;
}
.art-hero__inner { max-width: 780px }

.art-hero__badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

/* Evidence type badges */
.art-ev-badge {
  display: inline-flex;
  align-items: center;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 50px;
}
.ev-rct    { background: var(--accent);  color: var(--ink)   }
.ev-meta   { background: var(--ink);     color: var(--cream) }
.ev-review { background: var(--soft);    color: var(--ink-2) }
.ev-obs    { background: var(--paper);   color: var(--muted); border: 1px solid var(--soft) }
.ev-guide  { background: #E8E4FB;        color: #3D2FA8      }

.art-cat-badge {
  display: inline-flex;
  align-items: center;
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 50px;
  background: var(--cream);
  color: var(--ink-2);
  border: 1px solid var(--soft);
}

.art-hero__h1 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  letter-spacing: -.03em;
  line-height: 1.07;
  color: var(--ink);
  margin: 0 0 16px;
  text-wrap: balance;
  max-width: 22ch;
}
.art-hero__desc {
  font-size: 1.05rem;
  color: var(--muted);
  line-height: 1.65;
  margin: 0 0 22px;
  max-width: 58ch;
}
.art-hero__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: .8rem;
  color: var(--muted);
}
.art-hero__author {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: color .15s;
}
.art-hero__author:hover { color: var(--ink-2) }
.art-hero__av {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #e8a800);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .58rem;
  font-weight: 700;
  flex-shrink: 0;
}
.art-hero__author-name { font-size: .82rem }
.art-hero__sep { color: var(--soft) }
.art-hero__date,
.art-hero__read { font-size: .78rem }

/* 2-col layout wrapper */
.art-layout {
  padding: 52px 0 88px;
}
.art-layout__inner {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 56px;
  align-items: start;
}

/* Main column */
.art-main {
  min-width: 0; /* prevent grid blowout */
  max-width: 720px;
}


/* ── 2. TOC ─────────────────────────────────────────────── */

.art-toc {
  position: sticky;
  top: calc(var(--nav-h, 74px) + 24px);
  /* height must not exceed viewport minus nav */
  max-height: calc(100vh - var(--nav-h, 74px) - 48px);
  overflow-y: auto;
  scrollbar-width: none;
}
.art-toc::-webkit-scrollbar { display: none }

.art-toc__inner {
  padding: 20px 0;
}
.art-toc__label {
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.art-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.art-toc__item {}
.art-toc__link {
  display: block;
  font-size: .8rem;
  color: var(--muted);
  text-decoration: none;
  padding: 5px 10px 5px 12px;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  line-height: 1.45;
  transition: color .15s, border-color .15s, background-color .15s;
}
.art-toc__link:hover {
  color: var(--ink);
  background: var(--soft);
  border-left-color: var(--soft);
}
.art-toc__link.is-active {
  color: var(--ink);
  font-weight: 600;
  border-left-color: var(--accent);
  background: var(--accent-soft, #FFE9A0);
}

/* Reading progress bar under TOC */
.art-toc__progress {
  height: 2px;
  background: var(--soft);
  border-radius: 2px;
  margin-top: 20px;
  overflow: hidden;
}
.art-toc__progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  width: 0%;
  transition: width .2s linear;
}


/* ── 3. DISCLOSURE BAR ──────────────────────────────────── */

.art-disclosure {
  background: var(--soft);
  border-radius: 10px;
  padding: 11px 16px;
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 36px;
}
.art-disclosure strong { color: var(--ink-2) }
.art-disclosure a {
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1px solid var(--soft);
  text-decoration: none;
  transition: border-color .15s;
}
.art-disclosure a:hover { border-color: var(--ink) }


/* ── 4. ARTICLE TYPOGRAPHY ──────────────────────────────── */

.art-body h2 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(1.35rem, 2.8vw, 1.75rem);
  letter-spacing: -.022em;
  line-height: 1.15;
  color: var(--ink);
  margin: 56px 0 16px;
  padding-top: 56px;
  border-top: 1px solid var(--soft);
  scroll-margin-top: calc(var(--nav-h, 74px) + 28px);
}
/* First H2 — no top border or excess margin */
.art-body h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.art-body h3 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: -.015em;
  line-height: 1.2;
  color: var(--ink);
  margin: 36px 0 12px;
  scroll-margin-top: calc(var(--nav-h, 74px) + 28px);
}
.art-body h4 {
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 28px 0 10px;
}
.art-body p {
  font-size: .97rem;
  color: var(--ink-2);
  line-height: 1.8;
  margin: 0 0 18px;
}
.art-body p:last-child { margin-bottom: 0 }
.art-body strong { color: var(--ink); font-weight: 600 }
.art-body em     { font-style: italic }
.art-body a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--soft);
  transition: border-color .15s;
}
.art-body a:hover { border-color: var(--ink) }

/* Lists */
.art-body ul,
.art-body ol {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.art-body ul li,
.art-body ol li {
  font-size: .97rem;
  color: var(--ink-2);
  line-height: 1.72;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.art-body ul li::before {
  content: '→';
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
  font-size: .88rem;
}
.art-body ol { counter-reset: art-ol }
.art-body ol li { counter-increment: art-ol }
.art-body ol li::before {
  content: counter(art-ol) '.';
  color: var(--muted);
  font-weight: 700;
  font-size: .8rem;
  flex-shrink: 0;
  min-width: 20px;
  margin-top: 4px;
}

/* Inline code */
.art-body code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: .84em;
  background: var(--soft);
  color: var(--ink-2);
  padding: 2px 6px;
  border-radius: 4px;
}


/* ── 5. MOBILE QUICK-READ TABLE  [mobile-only] ──────────── */

.art-quick-read {
  display: none; /* shown only on mobile — see responsive section */
  background: var(--ink);
  color: var(--cream);
  border-radius: 18px;
  padding: 22px 18px;
  margin-bottom: 28px;
}
.art-quick-read__eyebrow {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.art-quick-read__eyebrow::before {
  content: '';
  width: 16px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
}
.art-quick-read table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
.art-quick-read th {
  text-align: left;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(247,242,229,.4);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(247,242,229,.1);
}
.art-quick-read td {
  padding: 9px 0;
  border-bottom: 1px solid rgba(247,242,229,.07);
  vertical-align: top;
  color: rgba(247,242,229,.8);
  line-height: 1.5;
}
.art-quick-read td:first-child {
  font-weight: 600;
  color: var(--cream);
  padding-right: 12px;
  width: 38%;
}
.art-quick-read tr:last-child td { border-bottom: none }
/* Colspan "identical" cells */
.art-quick-read td.draw {
  text-align: center;
  color: var(--accent);
  font-weight: 700;
}

/* Verdict box at bottom of quick-read */
.art-quick-read__verdict {
  margin-top: 14px;
  padding: 11px 14px;
  background: rgba(255,201,59,.1);
  border: 1px solid rgba(255,201,59,.22);
  border-radius: 9px;
  font-size: .8rem;
  color: var(--accent);
  line-height: 1.55;
}
.art-quick-read__verdict strong { color: var(--accent) }


/* ── 6. CALLOUT BOXES ───────────────────────────────────── */

/* Base */
.callout {
  border-radius: 13px;
  padding: 17px 20px;
  margin: 28px 0;
  font-size: .9rem;
  line-height: 1.67;
  position: relative;
}
.callout__label {
  display: block;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 7px;
  opacity: .6;
}

/* Variant A — Key finding (accent fill) */
.callout--key {
  background: var(--accent);
  color: var(--ink);
}
.callout--key .callout__label { color: var(--ink); opacity: .55 }
.callout--key strong { color: var(--ink) }

/* Variant B — Study / citation (left border) */
.callout--study {
  background: var(--paper);
  border: 1px solid var(--soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0;
  color: var(--ink-2);
}
.callout--study .callout__label { color: var(--muted); opacity: 1 }
.callout--study em { font-style: italic; color: var(--ink) }

/* Variant C — Warning / caution (amber) */
.callout--warn {
  background: #FDF4E0;
  border: 1px solid rgba(184,122,10,.25);
  border-left: 3px solid #B87A0A;
  border-radius: 0 12px 12px 0;
  color: #4A3800;
}
.callout--warn .callout__label { color: #B87A0A; opacity: 1 }
.callout--warn strong { color: #3A2C00 }


/* ── 7. FITLAB SCORE BADGE ──────────────────────────────── */

/* Container — usually inside a product card or inline */
.fl-score-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  font-family: 'Fraunces', serif;
}
/* Sizes */
.fl-score-badge--sm { width: 48px;  height: 48px }
.fl-score-badge--md { width: 64px;  height: 64px }
.fl-score-badge--lg { width: 80px;  height: 80px }

.fl-score-badge__num {
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
}
.fl-score-badge--sm .fl-score-badge__num { font-size: 1.1rem }
.fl-score-badge--md .fl-score-badge__num { font-size: 1.35rem }
.fl-score-badge--lg .fl-score-badge__num { font-size: 1.7rem }

.fl-score-badge__denom {
  font-family: 'Inter', sans-serif;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .65;
  margin-top: 1px;
}

/* Score tiers */
.fl-score--great {
  background: var(--ink);
  color: var(--accent);  /* number in accent */
}
.fl-score--great .fl-score-badge__denom { color: var(--cream) }

.fl-score--good {
  background: var(--accent);
  color: var(--ink);
}
.fl-score--good .fl-score-badge__denom { color: var(--ink) }

.fl-score--mid {
  background: var(--soft);
  color: var(--ink);
}
.fl-score--mid .fl-score-badge__denom { color: var(--muted) }

.fl-score--low {
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--soft);
}
.fl-score--low .fl-score-badge__denom { color: var(--muted) }

/* Verdict tag — used next to score badge */
.fl-verdict {
  display: inline-flex;
  align-items: center;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 50px;
}
.fl-verdict--pick  { background: var(--accent); color: var(--ink) }
.fl-verdict--value { background: var(--ink);    color: var(--cream) }
.fl-verdict--avoid { background: var(--cream);  color: var(--ink-2); border: 1px solid var(--soft) }
.fl-verdict--mixed { background: var(--soft);   color: var(--ink-2) }


/* ── 8. COMPARISON TABLE ────────────────────────────────── */

.compare-wrap {
  overflow-x: auto;
  margin: 28px 0;
  border-radius: 16px;
  border: 1px solid var(--soft);
  -webkit-overflow-scrolling: touch;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  min-width: 480px;
}
.compare-table thead tr {
  background: var(--ink);
}
.compare-table th {
  text-align: left;
  padding: 13px 18px;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream);
  white-space: nowrap;
}
.compare-table td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--soft);
  color: var(--ink-2);
  vertical-align: top;
  line-height: 1.5;
}
.compare-table tr:last-child td { border-bottom: none }
.compare-table tr:nth-child(even) td { background: var(--paper) }
/* Row label — first column */
.compare-table td:first-child {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
/* Cell state classes */
.cell-win  { color: #2E7D32; font-weight: 600 }
.cell-lose { color: var(--muted) }
.cell-draw { color: #B87A0A; font-weight: 600 }


/* ── 9. DOSE CHECKER ────────────────────────────────────── */

.dose-checker {
  background: var(--paper);
  border: 1px solid var(--soft);
  border-radius: 16px;
  padding: 20px;
  margin: 28px 0;
}
.dose-checker__label {
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.dose-checker__row {
  margin-bottom: 16px;
}
.dose-checker__row:last-child { margin-bottom: 0 }
.dose-checker__row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 7px;
  gap: 8px;
}
.dose-checker__name {
  font-size: .86rem;
  font-weight: 600;
  color: var(--ink);
}
.dose-checker__value {
  font-size: .76rem;
  color: var(--muted);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  flex-shrink: 0;
}
.dose-checker__bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.dose-checker__bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dose-checker__bar-tag {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  min-width: 62px;
  flex-shrink: 0;
}
.dose-checker__bar-bg {
  flex: 1;
  height: 7px;
  background: var(--soft);
  border-radius: 50px;
  overflow: hidden;
}
.dose-checker__bar-fill {
  height: 100%;
  border-radius: 50px;
  transition: width .4s ease;
}
/* Clinical dose bar — accent */
.dose-checker__bar-fill--clinical {
  background: var(--accent);
}
/* Label dose bar — may be underdosed */
.dose-checker__bar-fill--label {
  background: var(--ink);
}
/* Underdosed state — warning color */
.dose-checker__bar-fill--under {
  background: #C84A2E;
}

/* Flag text for underdosed ingredient */
.dose-checker__flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  font-weight: 600;
  color: #C84A2E;
  margin-top: 5px;
}
.dose-checker__flag::before {
  content: '⚠';
  font-size: .8rem;
}


/* ── 10. TIMELINE ───────────────────────────────────────── */

.timeline {
  position: relative;
  padding-left: 28px;
  margin: 24px 0;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--soft);
  border-radius: 2px;
}
.timeline__item {
  position: relative;
  padding-bottom: 24px;
}
.timeline__item:last-child { padding-bottom: 0 }
.timeline__item::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--cream);
  box-shadow: 0 0 0 1px var(--soft);
}
.timeline__week {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 3px;
}
.timeline__title {
  font-weight: 600;
  color: var(--ink);
  font-size: .9rem;
  margin-bottom: 4px;
}
.timeline__desc {
  font-size: .84rem;
  color: var(--muted);
  line-height: 1.6;
}


/* ── 11. PRODUCT CARD (Amazon affiliate) ────────────────── */

.product-card {
  background: var(--paper);
  border: 1px solid var(--soft);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 28px 0;
  transition: box-shadow .2s, transform .2s;
}
.product-card:hover {
  box-shadow: 0 12px 36px rgba(26,24,18,.07);
  transform: translateY(-2px);
}
.product-card__sym {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1rem;
  flex-shrink: 0;
  background: var(--ink);
  color: var(--accent);
}
/* Product image — replaces sym when a real photo is available */
.product-card__img-wrap {
  width: 96px;
  height: 96px;
  border-radius: 14px;
  border: 1px solid var(--soft);
  background: #fff;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 6px;
  display: block;
}
.product-card__body { flex: 1; min-width: 0 }
.product-card__brand {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.product-card__name {
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 6px;
  line-height: 1.2;
}
.product-card__desc {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 12px;
}

/* Score row inside product card */
.product-card__score-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

/* CTA row */
.product-card__ctas {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.product-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 50px;
  text-decoration: none;
  transition: background .18s, color .18s, transform .18s;
  border: none;
  cursor: pointer;
}
/* Review link — dark
   Force color + border-bottom override since .art-body a
   sets color:var(--ink) and border-bottom which would bleed in */
.product-card__cta--review {
  background: var(--ink);
  color: var(--cream) !important;
  border-bottom: none !important;
}
.product-card__cta--review:hover {
  background: var(--accent);
  color: var(--ink) !important;
  border-bottom: none !important;
}
/* Amazon CTA — orange */
.product-card__cta--amazon {
  background: #FF9900;
  color: #fff !important;
  border-bottom: none !important;
}
.product-card__cta--amazon:hover {
  background: #E47911;
  color: #fff !important;
  transform: translateY(-1px);
  border-bottom: none !important;
}


/* ── 12. RELATED GRID ───────────────────────────────────── */

.related-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 28px 0 8px;
}
.related-card {
  background: var(--paper);
  border: 1px solid var(--soft);
  border-radius: 14px;
  padding: 15px 16px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.related-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(26,24,18,.06);
  border-color: var(--soft);
  border-bottom: 1px solid var(--soft);
}
.related-card__cat {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.related-card__title {
  font-family: 'Fraunces', serif;
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.28;
  color: var(--ink);
  letter-spacing: -.01em;
}


/* ── 13. AUTHOR BIO ─────────────────────────────────────── */

.author-bio {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  background: var(--paper);
  border: 1px solid var(--soft);
  border-radius: 16px;
  margin-top: 52px;
}
.author-bio__av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #e8a800);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: .88rem;
  flex-shrink: 0;
}
.author-bio__name {
  font-weight: 600;
  font-size: .9rem;
  color: var(--ink);
  margin-bottom: 2px;
}
.author-bio__role {
  font-size: .74rem;
  color: var(--muted);
  margin-bottom: 7px;
}
.author-bio__copy {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}
.author-bio__copy a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--soft);
  transition: border-color .15s;
}
.author-bio__copy a:hover { border-color: var(--ink) }


/* ── 14. FOOTNOTES / REFERENCES ─────────────────────────── */

.footnotes {
  margin-top: 52px;
  padding-top: 0;
  border-top: none;
}
.footnotes__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: var(--ink);
  border-radius: 14px 14px 0 0;
}
.footnotes__title {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.footnotes__count {
  font-size: .68rem;
  font-weight: 600;
  color: rgba(247,242,229,.35);
  letter-spacing: .08em;
}
.footnotes__body {
  background: var(--paper);
  border: 1px solid var(--soft);
  border-top: none;
  border-radius: 0 0 14px 14px;
  overflow: hidden;
}
.footnote {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 0;
  border-bottom: 1px solid var(--soft);
}
.footnote:last-child { border-bottom: none }
.footnote__num {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 14px 0 14px 16px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--soft);
  line-height: 1.6;
}
.footnote__content {
  padding: 13px 16px;
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.7;
}
.footnote__content em { font-style: italic; color: var(--ink-2) }
.footnote__content strong { color: var(--ink); font-weight: 600 }
.footnote__content a {
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--soft);
  transition: color .15s, border-color .15s;
  font-size: .78rem;
}
.footnote__content a:hover { color: var(--ink); border-color: var(--ink) }
.footnote__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  flex-wrap: wrap;
}
.footnote__tag {
  display: inline-flex;
  align-items: center;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 50px;
}
.footnote__tag--rct    { background: var(--accent); color: var(--ink) }
.footnote__tag--meta   { background: var(--ink);    color: var(--cream) }
.footnote__tag--review { background: var(--soft);   color: var(--ink-2) }
.footnote__tag--issn   { background: transparent;   color: var(--muted); border: 1px solid var(--soft) }
.footnote__pubmed {
  font-size: .68rem;
  color: var(--muted);
  font-family: monospace;
}


/* ── 15. RESPONSIVE ─────────────────────────────────────── */

/* Tablet — 2-col layout holds but TOC narrower */
@media (max-width: 1100px) {
  .art-layout__inner {
    grid-template-columns: 180px 1fr;
    gap: 40px;
  }
}

/* Tablet-small — collapse to single column, hide TOC sidebar */
@media (max-width: 900px) {
  .art-layout__inner {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .art-toc {
    display: none; /* TOC hidden on mobile — auto-generated inline dropdown could be added later */
  }
  .art-hero { padding: 36px 0 32px }
  .art-layout { padding: 36px 0 64px }
  .art-hero__h1 { max-width: none }
}

/* Mobile — tighten product card image */
@media (max-width: 680px) {
  /* Show mobile quick-read */
  .art-quick-read { display: block }

  .art-hero { padding: 28px 0 24px }
  .art-layout { padding: 28px 0 52px }

  .art-body h2 {
    font-size: 1.25rem;
    margin-top: 44px;
    padding-top: 44px;
  }
  .art-body h3 { font-size: 1.05rem }
  .art-body p  { font-size: .93rem; line-height: 1.74 }

  /* Comparison table — allow horizontal scroll */
  .compare-wrap { border-radius: 12px }
  .compare-table th,
  .compare-table td { padding: 10px 13px; font-size: .82rem }

  /* Product card — stack vertically */
  .product-card { flex-direction: column; gap: 12px }
  .product-card__img-wrap { width: 72px; height: 72px }
  .product-card__sym { width: 44px; height: 44px }

  /* Related grid — single column */
  .related-grid { grid-template-columns: 1fr }

  /* Author bio — tighten */
  .author-bio { padding: 16px }

  /* Hero meta — wrap naturally */
  .art-hero__meta { gap: 7px; font-size: .76rem }

  /* References — tighter on mobile */
  .footnote__num { padding: 12px 0 12px 12px; font-size: .68rem }
  .footnote__content { padding: 11px 14px; font-size: .78rem }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .product-card,
  .related-card,
  .art-toc__progress-fill {
    transition: none;
  }
}