// Meridian — Article reading page

const MA = window.MERIDIAN;
const { Wordmark, ArcMark, Eyebrow, RuleBadge } = window;

// Article data
window.ARTICLE = {
  section: 'Research · Neurobiology',
  title: 'A cell-free microfluidic assay for quantifying amyloid-β aggregation kinetics in pre-symptomatic Alzheimer cohorts',
  doi: '10.xxxx/mer.2026.0003',
  vol: 'Vol. 01 · Issue 01',
  received: '14 Mar 2026',
  accepted: '02 Apr 2026',
  published: '14 Apr 2026',
  wordCount: 8421,
  figures: 6,
  authors: [
    { name: 'Sarah Chen', affil: 1, orcid: '0000-0002-1825-0097', corr: true },
    { name: 'Miguel Ortega', affil: 1, orcid: '0000-0001-5109-3700' },
    { name: 'Priya Raman', affil: 2, orcid: '0000-0003-1415-9265' },
    { name: 'Hannes Vogel', affil: 3, orcid: '0000-0002-7531-8642' },
  ],
  affils: [
    'Department of Molecular Neurobiology, Stanford University, Stanford, CA, USA',
    'Broad Institute of MIT and Harvard, Cambridge, MA, USA',
    'European Molecular Biology Laboratory (EMBL), Heidelberg, Germany',
  ],
  reviewers: [
    { name: 'Prof. Amara Okonkwo', affil: 'Stanford Neurobiology', round: 1, doi: '10.xxxx/mer.rev.2026.0003.a', verdict: 'Revise & resubmit' },
    { name: 'Dr. Hiroshi Tanaka', affil: 'Keio University Hospital', round: 1, doi: '10.xxxx/mer.rev.2026.0003.b', verdict: 'Minor revisions' },
    { name: 'Prof. Elena Vasquez', affil: 'Johns Hopkins BSPH', round: 2, doi: '10.xxxx/mer.rev.2026.0003.c', verdict: 'Accept' },
  ],
  outline: [
    ['§1', 'Introduction', 0],
    ['§2', 'A cell-free microfluidic platform', 1],
    ['§3', 'Resolving aggregation in 42 minutes', 1],
    ['§4', 'Longitudinal cohort validation', 0],
    ['§5', 'Discussion', 0],
    ['§6', 'Methods', 0],
    ['§7', 'Data availability', 0],
  ],
};

// ───────────────── Topbar ─────────────────
window.ArticleTopbar = function ArticleTopbar() {
  return (
    <nav style={{ borderBottom: `1px solid ${MA.rule}`, background: MA.paper, position: 'sticky', top: 0, zIndex: 20, backdropFilter: 'blur(8px)' }}>
      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '14px 32px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
          <Wordmark size={20} />
          <div style={{ width: 1, height: 18, background: MA.rule }} />
          <Eyebrow>{window.ARTICLE.section}</Eyebrow>
        </div>
        <div style={{ display: 'flex', gap: 20, alignItems: 'center' }}>
          <Eyebrow>{window.ARTICLE.vol}</Eyebrow>
          <button style={{ fontFamily: MA.mono, fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: MA.ink, background: 'transparent', border: `1px solid ${MA.rule}`, padding: '7px 12px', cursor: 'pointer' }}>Cite</button>
          <button style={{ fontFamily: MA.mono, fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: MA.paper, background: MA.accent, border: `1px solid ${MA.accent}`, padding: '7px 12px', cursor: 'pointer' }}>Download PDF</button>
        </div>
      </div>
    </nav>
  );
};

// ───────────────── Left outline rail ─────────────────
window.ArticleRail = function ArticleRail() {
  const A = window.ARTICLE;
  return (
    <aside style={{ padding: '40px 0 40px 24px', position: 'sticky', top: 60, alignSelf: 'start', maxHeight: 'calc(100vh - 60px)', overflowY: 'auto' }}>
      <Eyebrow>Contents</Eyebrow>
      <ul style={{ listStyle: 'none', padding: 0, margin: '18px 0 32px', display: 'flex', flexDirection: 'column', gap: 2 }}>
        {A.outline.map(([n, t, d], i) => (
          <li key={n}>
            <a href={`#s${i}`} style={{
              display: 'flex', gap: 10, padding: `7px 0 7px ${d * 14}px`,
              fontFamily: MA.sans, fontSize: 13, color: i === 1 ? MA.accent : MA.text,
              textDecoration: 'none', borderLeft: i === 1 ? `2px solid ${MA.accent}` : `2px solid transparent`,
              paddingLeft: d * 14 + 10,
            }}>
              <span style={{ fontFamily: MA.mono, fontSize: 10, color: MA.muted, width: 24, flexShrink: 0 }}>{n}</span>
              <span>{t}</span>
            </a>
          </li>
        ))}
      </ul>

      <div style={{ borderTop: `1px solid ${MA.rule}`, paddingTop: 24 }}>
        <Eyebrow>Metrics</Eyebrow>
        <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 12 }}>
          {[
            ['Reads', '1,284'],
            ['Citations', '3'],
            ['Downloads', '412'],
            ['Altmetric', '28'],
          ].map(([k, v]) => (
            <div key={k} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <span style={{ fontFamily: MA.sans, fontSize: 12, color: MA.muted }}>{k}</span>
              <span style={{ fontFamily: MA.mono, fontSize: 13, color: MA.ink }}>{v}</span>
            </div>
          ))}
        </div>
      </div>

      <div style={{ borderTop: `1px solid ${MA.rule}`, paddingTop: 24, marginTop: 24 }}>
        <Eyebrow>Tools</Eyebrow>
        <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
          {['Cite this article', 'Export BibTeX', 'Share', 'Print view'].map(t => (
            <a key={t} href="#" style={{ fontFamily: MA.sans, fontSize: 12.5, color: MA.text, textDecoration: 'none', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <span>{t}</span><span style={{ color: MA.muted }}>→</span>
            </a>
          ))}
        </div>
      </div>
    </aside>
  );
};

// ───────────────── Article body ─────────────────
window.ArticleBody = function ArticleBody() {
  const A = window.ARTICLE;
  return (
    <article style={{ maxWidth: 680, margin: '0 auto', padding: '48px 24px 80px' }}>
      {/* Header */}
      <header style={{ marginBottom: 48, borderBottom: `1px solid ${MA.rule}`, paddingBottom: 36 }}>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 20 }}>
          <RuleBadge color={MA.accent}>Research article</RuleBadge>
          <RuleBadge color={MA.success}>Peer reviewed</RuleBadge>
          <RuleBadge color={MA.info}>Open data</RuleBadge>
          <RuleBadge color={MA.muted}>Version 2</RuleBadge>
        </div>
        <h1 style={{ fontFamily: MA.serif, fontSize: 44, lineHeight: 1.1, letterSpacing: '-0.025em', color: MA.ink, margin: '0 0 28px', fontWeight: 400, textWrap: 'balance' }}>
          {A.title}
        </h1>

        {/* Authors */}
        <div style={{ marginBottom: 20, fontFamily: MA.sans, fontSize: 14.5, color: MA.text, lineHeight: 1.7 }}>
          {A.authors.map((a, i) => (
            <span key={a.orcid}>
              <span style={{ color: a.corr ? MA.accent : MA.text, fontWeight: a.corr ? 500 : 400 }}>{a.name}</span>
              <sup style={{ color: MA.muted, fontSize: 10, marginLeft: 1 }}>{a.affil}{a.corr && '*'}</sup>
              <a href="#" title={`ORCID ${a.orcid}`} style={{ fontFamily: MA.mono, fontSize: 9, color: MA.info, textDecoration: 'none', marginLeft: 4, padding: '1px 4px', border: `1px solid ${MA.info}`, letterSpacing: '0.05em' }}>ORCID</a>
              {i < A.authors.length - 1 && <span style={{ color: MA.muted, margin: '0 6px' }}> · </span>}
            </span>
          ))}
        </div>

        {/* Affiliations */}
        <div style={{ fontFamily: MA.sans, fontSize: 11.5, color: MA.muted, lineHeight: 1.65, marginBottom: 20 }}>
          {A.affils.map((af, i) => (
            <div key={i}><sup style={{ color: MA.muted, fontSize: 9 }}>{i + 1}</sup> {af}</div>
          ))}
          <div style={{ marginTop: 6 }}><sup style={{ color: MA.accent }}>*</sup> Corresponding author · <span style={{ color: MA.accent }}>sarah.chen@stanford.edu</span></div>
        </div>

        {/* Metadata strip */}
        <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap', paddingTop: 16, borderTop: `1px solid ${MA.rule}`, fontFamily: MA.mono, fontSize: 10, color: MA.muted, letterSpacing: '0.06em' }}>
          <span>DOI · <span style={{ color: MA.ink }}>{A.doi}</span></span>
          <span>RCVD {A.received.toUpperCase()}</span>
          <span>ACPT {A.accepted.toUpperCase()}</span>
          <span>PUB {A.published.toUpperCase()}</span>
          <span style={{ color: MA.accent }}>CC-BY 4.0</span>
        </div>
      </header>

      {/* Plain-language summary callout */}
      <aside style={{ padding: '24px 28px', background: MA.paperDim, borderLeft: `3px solid ${MA.accent}`, marginBottom: 44 }}>
        <Eyebrow style={{ color: MA.accent }}>Plain-language summary</Eyebrow>
        <p style={{ fontFamily: MA.serif, fontSize: 18, lineHeight: 1.55, color: MA.text, margin: '12px 0 0', fontWeight: 300 }}>
          We built a chip-based test that can watch Alzheimer's-related proteins clump together in real time, without needing brain tissue. In a group of 42 people with no symptoms yet, the test flagged those who later developed early memory changes — up to three years before anything showed up on existing clinical scans.
        </p>
      </aside>

      {/* Abstract */}
      <section style={{ marginBottom: 44 }}>
        <Eyebrow>Abstract</Eyebrow>
        <p style={{ fontFamily: MA.serif, fontSize: 17, lineHeight: 1.7, color: MA.text, margin: '14px 0 0', fontWeight: 400 }}>
          Early detection of amyloid-β (Aβ) aggregation remains a central obstacle in pre-symptomatic Alzheimer diagnostics. Existing modalities — positron emission tomography, cerebrospinal fluid biomarkers — are either invasive, expensive, or insensitive to the rapid oligomeric phase preceding fibril formation. Here we report a cell-free microfluidic assay capable of resolving Aβ aggregation kinetics within 42 minutes, enabling longitudinal monitoring without tissue sampling. In a pilot cohort of 42 pre-symptomatic participants…
        </p>
      </section>

      {/* Body sections */}
      {[
        { h: '§1 · Introduction', p: 'Alzheimer\'s disease progresses silently for one to two decades before clinical presentation. During this window, amyloid-β oligomers accumulate in soluble forms that existing imaging modalities cannot resolve with the sensitivity needed to support pre-symptomatic intervention trials [1,2]. The gap between pathological onset and diagnostic certainty is perhaps the central obstacle to disease-modifying therapeutics.' },
        { h: '§2 · A cell-free microfluidic platform', p: 'We engineered a two-channel microfluidic device (Fig. 1a) in which recombinant Aβ₄₂ monomer is introduced at physiological concentration alongside thioflavin-T, a fluorescent aggregation reporter. Channel geometry maintains laminar flow at Reynolds numbers below 0.8, ensuring that measured kinetics reflect intrinsic aggregation rather than convective mixing.' },
      ].map((s, i) => (
        <section key={i} id={`s${i}`} style={{ marginBottom: 36 }}>
          <h2 style={{ fontFamily: MA.serif, fontSize: 26, lineHeight: 1.2, color: MA.ink, letterSpacing: '-0.015em', margin: '0 0 16px', fontWeight: 400 }}>{s.h}</h2>
          <p style={{ fontFamily: MA.serif, fontSize: 17, lineHeight: 1.75, color: MA.text, margin: 0, fontWeight: 400 }}>{s.p}</p>
        </section>
      ))}

      {/* Figure */}
      <figure style={{ margin: '48px 0', padding: 0 }}>
        <div style={{ background: MA.paperDim, border: `1px solid ${MA.rule}`, padding: '40px 32px', position: 'relative' }}>
          <svg width="100%" height="220" viewBox="0 0 600 220" style={{ display: 'block' }}>
            <line x1="40" y1="180" x2="560" y2="180" stroke={MA.ink} strokeWidth="1" />
            <line x1="40" y1="20" x2="40" y2="180" stroke={MA.ink} strokeWidth="1" />
            {[0, 0.25, 0.5, 0.75, 1].map(t => (
              <g key={t}>
                <line x1={40 + t * 520} y1="180" x2={40 + t * 520} y2="184" stroke={MA.ink} strokeWidth="1" />
                <text x={40 + t * 520} y="198" fontFamily="JetBrains Mono, monospace" fontSize="9" fill={MA.muted} textAnchor="middle">{Math.round(t * 42)}</text>
              </g>
            ))}
            {/* curves */}
            <path d="M 40 178 Q 200 178 260 160 Q 320 120 400 60 Q 500 30 560 28" fill="none" stroke={MA.accent} strokeWidth="1.8" />
            <path d="M 40 178 Q 240 178 310 170 Q 400 150 500 120 Q 550 105 560 100" fill="none" stroke={MA.ink} strokeWidth="1.2" strokeDasharray="3,3" />
            <path d="M 40 178 Q 280 178 380 175 Q 500 170 560 168" fill="none" stroke={MA.muted} strokeWidth="1" strokeDasharray="2,4" />
            <text x="555" y="32" fontFamily="JetBrains Mono, monospace" fontSize="9" fill={MA.accent} textAnchor="end">Cohort +</text>
            <text x="555" y="104" fontFamily="JetBrains Mono, monospace" fontSize="9" fill={MA.ink} textAnchor="end">Cohort ±</text>
            <text x="555" y="164" fontFamily="JetBrains Mono, monospace" fontSize="9" fill={MA.muted} textAnchor="end">Control</text>
            <text x="300" y="215" fontFamily="JetBrains Mono, monospace" fontSize="9" fill={MA.muted} textAnchor="middle">TIME (MIN)</text>
          </svg>
        </div>
        <figcaption style={{ fontFamily: MA.sans, fontSize: 12.5, color: MA.text, marginTop: 12, lineHeight: 1.55 }}>
          <span style={{ fontFamily: MA.mono, fontSize: 10, letterSpacing: '0.1em', color: MA.accent }}>FIG 1</span>{'   '}
          <span style={{ fontWeight: 500 }}>Aggregation kinetics across three cohorts.</span> Pre-symptomatic participants with later progression (n = 14) showed a characteristic lag-phase shortening relative to age-matched controls.
        </figcaption>
      </figure>

      {/* Pull quote */}
      <blockquote style={{ margin: '56px 0', padding: '0 0 0 28px', borderLeft: `3px solid ${MA.accent}`, fontFamily: MA.serif, fontSize: 26, lineHeight: 1.35, letterSpacing: '-0.015em', color: MA.ink, fontStyle: 'italic', fontWeight: 400 }}>
        "The lag-phase shortening preceded detectable amyloid-PET positivity by a median of 2.8 years — a window wide enough for intervention trials to matter."
      </blockquote>

      <section style={{ marginBottom: 36 }}>
        <h2 style={{ fontFamily: MA.serif, fontSize: 26, lineHeight: 1.2, color: MA.ink, letterSpacing: '-0.015em', margin: '0 0 16px', fontWeight: 400 }}>§3 · Resolving aggregation in 42 minutes</h2>
        <p style={{ fontFamily: MA.serif, fontSize: 17, lineHeight: 1.75, color: MA.text, margin: '0 0 16px', fontWeight: 400 }}>
          Real-time fluorescence readout enabled kinetic fitting to a modified Finke–Watzky two-step model, capturing both nucleation and elongation rate constants. Across three biological replicates, the assay resolved the lag phase with a coefficient of variation below 8%.
        </p>
        <p style={{ fontFamily: MA.serif, fontSize: 17, lineHeight: 1.75, color: MA.text, margin: 0, fontWeight: 400 }}>
          The 42-minute completion time represents a &gt;60-fold speed improvement over standard thioflavin-T plate assays. Throughput of 96 samples per device-hour compares favorably with PET imaging — and without the attendant radioligand exposure.
        </p>
      </section>
    </article>
  );
};

// ───────────────── Right rail: reviews tabs ─────────────────
window.ArticleReviewRail = function ArticleReviewRail() {
  const A = window.ARTICLE;
  const [tab, setTab] = React.useState('reviews');
  const tabs = [['reviews', 'Peer review'], ['data', 'Data'], ['versions', 'Versions']];

  return (
    <aside style={{ padding: '40px 24px 40px 0', position: 'sticky', top: 60, alignSelf: 'start', maxHeight: 'calc(100vh - 60px)', overflowY: 'auto' }}>
      <div style={{ border: `1px solid ${MA.rule}`, background: MA.paper }}>
        {/* Tabs */}
        <div style={{ display: 'flex', borderBottom: `1px solid ${MA.rule}` }}>
          {tabs.map(([k, l]) => (
            <button key={k} onClick={() => setTab(k)} style={{
              flex: 1, padding: '11px 10px', fontFamily: MA.mono, fontSize: 10,
              letterSpacing: '0.1em', textTransform: 'uppercase',
              background: tab === k ? MA.paper : MA.paperDim,
              color: tab === k ? MA.accent : MA.muted,
              border: 'none', borderRight: k !== 'versions' ? `1px solid ${MA.rule}` : 'none',
              borderBottom: tab === k ? `2px solid ${MA.accent}` : '2px solid transparent',
              marginBottom: -1, cursor: 'pointer',
            }}>{l}</button>
          ))}
        </div>

        <div style={{ padding: 18, maxHeight: 520, overflowY: 'auto' }}>
          {tab === 'reviews' && (
            <div>
              <Eyebrow>3 signed reviews · 2 rounds</Eyebrow>
              <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 12 }}>
                {A.reviewers.map((r, i) => (
                  <div key={r.doi} style={{ border: `1px solid ${MA.rule}`, padding: 12, background: MA.paper }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
                      <Eyebrow style={{ color: MA.accent }}>Round {r.round}</Eyebrow>
                      <Eyebrow style={{ fontSize: 9 }}>DOI →</Eyebrow>
                    </div>
                    <div style={{ fontFamily: MA.serif, fontSize: 15, color: MA.ink, letterSpacing: '-0.01em' }}>{r.name}</div>
                    <div style={{ fontFamily: MA.sans, fontSize: 11, color: MA.muted, marginTop: 2 }}>{r.affil}</div>
                    <div style={{ marginTop: 10, paddingTop: 10, borderTop: `1px solid ${MA.rule}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                      <span style={{ fontFamily: MA.mono, fontSize: 9, color: MA.ink, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{r.verdict}</span>
                      <span style={{ fontFamily: MA.mono, fontSize: 9, color: MA.muted }}>read →</span>
                    </div>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 16, padding: '12px', background: MA.paperDim, fontFamily: MA.sans, fontSize: 12, lineHeight: 1.55, color: MA.text }}>
                <div style={{ fontFamily: MA.mono, fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase', color: MA.muted, marginBottom: 6 }}>Handling editor</div>
                Dr. Rahul Mehta · EMBL Heidelberg
              </div>
            </div>
          )}
          {tab === 'data' && (
            <div>
              <Eyebrow>Data & code availability</Eyebrow>
              <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {[
                  ['Raw kinetics data', 'Zenodo', 'zenodo.org/10.5281/…'],
                  ['Analysis code', 'GitHub', 'github.com/chen-lab/amyloid-mf'],
                  ['Cohort metadata', 'dbGaP (controlled)', 'phs003244.v1.p1'],
                  ['Chip fabrication', 'protocols.io', 'protocols.io/mf-v1'],
                ].map(([k, src, link]) => (
                  <div key={k} style={{ border: `1px solid ${MA.rule}`, padding: 12 }}>
                    <div style={{ fontFamily: MA.sans, fontSize: 13, color: MA.ink, fontWeight: 500 }}>{k}</div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 4, fontFamily: MA.mono, fontSize: 10, color: MA.muted }}>
                      <span>{src}</span><span style={{ color: MA.accent }}>{link}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
          {tab === 'versions' && (
            <div>
              <Eyebrow>Version history</Eyebrow>
              <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 0, borderLeft: `1px solid ${MA.rule}`, paddingLeft: 14 }}>
                {[
                  ['v2 · current', '14 Apr 2026', 'Published', MA.success],
                  ['v1 → v2', '28 Mar 2026', 'Revision after review', MA.accent],
                  ['v1', '14 Mar 2026', 'Submitted', MA.muted],
                ].map(([v, d, s, c], i) => (
                  <div key={v} style={{ padding: '10px 0', borderBottom: i < 2 ? `1px solid ${MA.rule}` : 'none', position: 'relative' }}>
                    <div style={{ position: 'absolute', left: -18, top: 16, width: 8, height: 8, borderRadius: '50%', background: c, border: `2px solid ${MA.paper}` }} />
                    <div style={{ fontFamily: MA.mono, fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase', color: c }}>{v}</div>
                    <div style={{ fontFamily: MA.serif, fontSize: 14, color: MA.ink, marginTop: 2 }}>{s}</div>
                    <div style={{ fontFamily: MA.mono, fontSize: 10, color: MA.muted, marginTop: 2 }}>{d}</div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>
    </aside>
  );
};

// ───────────────── Revision timeline ─────────────────
window.ArticleTimeline = function ArticleTimeline() {
  const [active, setActive] = React.useState(1);
  const stages = [
    { k: 'Submitted', date: '14 Mar', n: 'v1', color: MA.muted, body: { t: 'Initial submission', d: 'Manuscript received with 6 figures, full methods, and supplementary data. Intake completeness check passed automatically.' } },
    { k: 'Reviewer comments', date: '21 Mar — 28 Mar', n: 'R1', color: MA.accent, body: { t: '2 reviews returned in round 1', d: 'Prof. Okonkwo (Revise & resubmit): "The lag-phase claim is compelling, but the control cohort needs expansion from 12 to ≥ 30 participants." Dr. Tanaka (Minor revisions): "Supplementary Fig. 3 should include per-replicate variability."' } },
    { k: 'Author revisions', date: '28 Mar — 02 Apr', n: 'v2', color: MA.accent, body: { t: '1,847 words changed · 2 new figures', d: 'Authors expanded the control cohort to 34 participants, added Supplementary Fig. 7 showing per-replicate kinetics, and strengthened the Discussion on clinical translation. Full reviewer responses published alongside.' } },
    { k: 'Accepted', date: '02 Apr', n: '✓', color: MA.success, body: { t: 'Round 2 accept · Prof. Vasquez', d: 'Prof. Vasquez (third reviewer, invited for the revised manuscript) accepted without further changes. Decision issued same day by handling editor.' } },
    { k: 'Published', date: '14 Apr', n: '✦', color: MA.success, body: { t: 'Open access · CC-BY 4.0', d: 'Article, 3 signed reviews, and author responses published simultaneously. All assigned DOIs. Data deposited to Zenodo and dbGaP.' } },
  ];
  const a = stages[active];
  return (
    <section style={{ background: MA.paperWarm, borderTop: `1px solid ${MA.ink}`, borderBottom: `1px solid ${MA.rule}` }}>
      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '56px 32px 64px' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 36, flexWrap: 'wrap', gap: 16 }}>
          <div>
            <Eyebrow>§ Revision timeline · 31 days from submission to publication</Eyebrow>
            <h2 style={{ fontFamily: MA.serif, fontSize: 40, lineHeight: 1.05, color: MA.ink, letterSpacing: '-0.025em', margin: '10px 0 0', fontWeight: 400 }}>
              How this article <em style={{ fontStyle: 'italic' }}>actually</em> evolved.
            </h2>
          </div>
          <div style={{ fontFamily: MA.mono, fontSize: 10, color: MA.muted, letterSpacing: '0.08em', textAlign: 'right', lineHeight: 1.7 }}>
            <div>14 MAR — SUBMITTED</div>
            <div>02 APR — ACCEPTED</div>
            <div style={{ color: MA.accent }}>14 APR — PUBLISHED</div>
          </div>
        </div>

        {/* Timeline rail */}
        <div style={{ position: 'relative', marginBottom: 36 }}>
          <div style={{ position: 'absolute', top: 22, left: '4%', right: '4%', height: 1, background: MA.rule }} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0 }}>
            {stages.map((s, i) => (
              <button key={s.k} onClick={() => setActive(i)} style={{
                display: 'flex', flexDirection: 'column', alignItems: 'center',
                background: 'transparent', border: 'none', cursor: 'pointer', padding: '0 10px',
              }}>
                <div style={{
                  width: 44, height: 44, borderRadius: '50%',
                  background: active === i ? s.color : MA.paper,
                  border: `1.5px solid ${s.color}`,
                  color: active === i ? MA.paper : s.color,
                  fontFamily: MA.mono, fontSize: 11, fontWeight: 500, letterSpacing: '0.02em',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  transition: 'all 150ms ease',
                }}>{s.n}</div>
                <div style={{ marginTop: 14, fontFamily: MA.serif, fontSize: 15, color: active === i ? MA.ink : MA.text, letterSpacing: '-0.01em' }}>{s.k}</div>
                <div style={{ marginTop: 2, fontFamily: MA.mono, fontSize: 9.5, color: MA.muted, letterSpacing: '0.08em' }}>{s.date.toUpperCase()}</div>
              </button>
            ))}
          </div>
        </div>

        {/* Active detail */}
        <div style={{ background: MA.paper, border: `1px solid ${MA.rule}`, borderTop: `3px solid ${a.color}`, padding: '24px 28px', display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 32 }}>
          <div>
            <Eyebrow style={{ color: a.color }}>Stage {active + 1} of 5 · {a.k}</Eyebrow>
            <div style={{ fontFamily: MA.mono, fontSize: 11, color: MA.muted, marginTop: 10, letterSpacing: '0.06em' }}>{a.date.toUpperCase()}</div>
          </div>
          <div>
            <h3 style={{ fontFamily: MA.serif, fontSize: 22, color: MA.ink, letterSpacing: '-0.015em', margin: '0 0 10px', fontWeight: 400 }}>{a.body.t}</h3>
            <p style={{ fontFamily: MA.serif, fontSize: 16, lineHeight: 1.6, color: MA.text, margin: 0, fontWeight: 400 }}>{a.body.d}</p>
          </div>
        </div>

        <div style={{ marginTop: 14, fontFamily: MA.mono, fontSize: 10, color: MA.muted, letterSpacing: '0.1em' }}>
          Click any stage to explore →
        </div>
      </div>
    </section>
  );
};

// ───────────────── Cite-below footer stripe ─────────────────
window.ArticleCite = function ArticleCite() {
  const A = window.ARTICLE;
  return (
    <section style={{ background: MA.paper, borderBottom: `1px solid ${MA.rule}` }}>
      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '40px 32px', display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 48 }}>
        <div>
          <Eyebrow>How to cite</Eyebrow>
          <div style={{ marginTop: 14, fontFamily: MA.mono, fontSize: 12.5, lineHeight: 1.7, color: MA.text, padding: 16, background: MA.paperDim, border: `1px solid ${MA.rule}` }}>
            Chen, S., Ortega, M., Raman, P., &amp; Vogel, H. (2026). A cell-free microfluidic assay for quantifying amyloid-β aggregation kinetics in pre-symptomatic Alzheimer cohorts. <em style={{ color: MA.ink }}>Meridian</em>, 1(1). <span style={{ color: MA.accent }}>https://doi.org/{A.doi}</span>
          </div>
        </div>
        <div>
          <Eyebrow>Cite the reviews</Eyebrow>
          <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 10 }}>
            {A.reviewers.map(r => (
              <div key={r.doi} style={{ padding: 12, border: `1px solid ${MA.rule}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div>
                  <div style={{ fontFamily: MA.serif, fontSize: 14, color: MA.ink }}>{r.name}</div>
                  <div style={{ fontFamily: MA.mono, fontSize: 10, color: MA.muted, marginTop: 2 }}>{r.doi}</div>
                </div>
                <span style={{ fontFamily: MA.mono, fontSize: 10, color: MA.accent }}>Copy →</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};
