<section class="mu-ed" aria-label="Ledger editorial news demo">
  <div class="reading-progress" data-mu-ed-progress aria-hidden="true"></div>

  <div class="top-bar">
    <div class="top-bar-date">Thursday, May 28, 2026 · Vol. CXLII · No. 118</div>
    <div class="top-bar-editions">
      <span class="top-bar-edition active">International</span>
      <span class="top-bar-edition">Americas</span>
      <span class="top-bar-edition">Europe</span>
      <span class="top-bar-edition">Asia-Pacific</span>
    </div>
  </div>

  <div class="masthead">
    <div class="masthead-tagline">Independent. Rigorous. Since 1882.</div>
    <div class="masthead-name">Ledger</div>
    <div class="masthead-sub">The Journal of Record for Ideas That Matter</div>
    <nav class="masthead-nav">
      <div class="mnav-item active">World</div>
      <div class="mnav-item">Economy</div>
      <div class="mnav-item">Technology</div>
      <div class="mnav-item">Science</div>
      <div class="mnav-item">Culture</div>
      <div class="mnav-item">Opinion</div>
      <div class="mnav-item">Data</div>
      <div class="mnav-item">Archive</div>
    </nav>
  </div>

  <div class="page-wrap">
    <div class="feature-grid">
      <div class="feat-col">
        <div class="side-story">
          <div class="side-cat">Economy</div>
          <div class="side-title">Central Banks Signal Coordinated Rate Pause Through Q3</div>
          <div class="side-deck">Officials from six major economies signalled willingness to hold current rates as inflation data converges toward target bands for the first time since 2021.</div>
          <div class="side-by">By A. Chen · 4 min read</div>
        </div>
        <div class="side-story">
          <div class="side-cat">Technology</div>
          <div class="side-title">Open Source AI Models Outperform Proprietary Rivals on Key Benchmarks</div>
          <div class="side-deck">A new evaluation framework from the Allen Institute reveals that openly licensed models have closed the performance gap in reasoning tasks by nearly 23 points.</div>
          <div class="side-by">By R. Okonkwo · 6 min read</div>
        </div>
        <div class="side-story">
          <div class="side-cat">Science</div>
          <div class="side-title">Ancient Ocean Current Reversal Reframes Paleoclimate Models</div>
          <div class="side-deck">Sediment cores from the South Atlantic suggest that thermohaline circulation collapsed twice during the Holocene, forcing a revision of long-held warming assumptions.</div>
          <div class="side-by">By Dr. E. Vasquez · 8 min read</div>
        </div>
      </div>
      <div class="col-rule"></div>

      <div class="feat-col">
        <div class="lead-img">
          <svg width="100%" height="100%" viewBox="0 0 560 315" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
            <rect width="560" height="315" fill="#1a1714"/>
            <line x1="0" y1="60" x2="560" y2="60" stroke="rgba(255,255,255,0.05)" stroke-width="1"/>
            <line x1="0" y1="160" x2="560" y2="160" stroke="rgba(255,255,255,0.05)" stroke-width="1"/>
            <line x1="0" y1="260" x2="560" y2="260" stroke="rgba(255,255,255,0.05)" stroke-width="1"/>
            <circle cx="200" cy="157" r="80" fill="rgba(196,30,30,0.12)"/>
            <circle cx="360" cy="157" r="80" fill="rgba(255,255,255,0.04)"/>
            <text x="280" y="170" text-anchor="middle" font-family="'Libre Baskerville',serif" font-size="18" fill="rgba(255,255,255,0.15)" letter-spacing="8">LEDGER</text>
            <rect x="0" y="285" width="560" height="30" fill="rgba(196,30,30,0.15)"/>
          </svg>
        </div>
        <div class="lead-img-cap">The new global order: contested spaces and the architecture of multilateral failure. · Ledger / Graphics Desk</div>
        <div class="lead-cat">World Affairs</div>
        <h1 class="lead-title">The Fracture Lines<br>of a <em>Post-Western</em><br>World Order</h1>
        <div class="lead-deck">As the architecture of the postwar international system strains under the weight of competing hegemonies, historians and diplomats alike warn that the rules-based order may be entering its most consequential rupture since 1945.</div>
        <div class="lead-byline">By <strong>Prof. Mara Holloway</strong> · Analysis · May 28, 2026 · 18 min read</div>
        <div class="lead-body">
          <p>The system was never supposed to last forever. Built on the ruins of European empires and tempered by the cold arithmetic of nuclear deterrence, the institutions assembled at Bretton Woods and San Francisco were always products of a particular moment — and of particular power.</p>
          <p>That moment, most analysts now agree, has passed. The question is no longer whether the liberal international order will survive the century, but what will replace it — and who will write the rules for whatever comes next.</p>
          <p>The contest playing out across five continents is not merely geopolitical. It is epistemic. Rival conceptions of sovereignty, legitimacy, and the proper scope of international law are colliding in courtrooms, trading floors, and satellite networks simultaneously.</p>
        </div>
      </div>
      <div class="col-rule"></div>

      <div class="feat-col">
        <div class="side-story">
          <div class="side-cat">Culture</div>
          <div class="side-title">A Silence That Speaks: The Return of Slow Reading</div>
          <div class="side-deck">Sales of long-form literary nonfiction have climbed 34% in two years as readers push back against the algorithmic fragment. Publishers are cautiously celebratory.</div>
          <div class="side-by">By F. Andersen · 5 min read</div>
        </div>
        <div class="side-story breaking-story">
          <div class="side-cat">Breaking</div>
          <div class="side-title side-title-small">UN Security Council Convenes Emergency Session Over Arctic Shipping Dispute</div>
          <div class="side-deck">Norway, Russia, and Canada have submitted competing jurisdiction claims over newly navigable polar routes as ice coverage hits a 40-year low.</div>
          <div class="side-by">Developing story · Updated 12 min ago</div>
        </div>
        <div class="side-story side-story-mt">
          <div class="side-cat">Opinion</div>
          <div class="side-title">The Algorithm Doesn't Care About Your Attention — But You Should</div>
          <div class="side-deck">Our media columnist on why the fight against engagement-driven content is ultimately a fight for cognitive sovereignty.</div>
          <div class="side-by">By D. Laurent · 7 min read</div>
        </div>
      </div>
    </div>

    <div class="section-head">
      <h2>In Depth</h2>
      <span class="section-more">More →</span>
    </div>
    <div class="card-grid">
      <div class="story-card">
        <div class="card-img card-img-1">
          <svg width="100%" height="100%" viewBox="0 0 240 160" aria-hidden="true"><rect width="240" height="160" fill="#2c3e50"/><circle cx="120" cy="80" r="40" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/><circle cx="120" cy="80" r="25" fill="rgba(52,152,219,0.3)"/></svg>
        </div>
        <div class="card-cat">Economics</div>
        <div class="card-title">Shadow Banking's Quiet Comeback, Decade After the Crisis</div>
        <div class="card-deck">Off-balance-sheet vehicles have returned to pre-2008 proportions, raising uncomfortable questions for regulators.</div>
        <div class="card-by">By T. Osei · 9 min read</div>
      </div>
      <div class="story-card">
        <div class="card-img card-img-2">
          <svg width="100%" height="100%" viewBox="0 0 240 160" aria-hidden="true"><rect width="240" height="160" fill="#1a3a2a"/><rect x="20" y="20" width="200" height="3" fill="rgba(255,255,255,0.08)"/><rect x="20" y="40" width="160" height="3" fill="rgba(255,255,255,0.05)"/><rect x="20" y="60" width="180" height="3" fill="rgba(255,255,255,0.08)"/></svg>
        </div>
        <div class="card-cat">Environment</div>
        <div class="card-title">Rewilding at Scale: The Nations Betting on Nature's Recovery</div>
        <div class="card-deck">From the Scottish Highlands to the Paraguayan Chaco, a quiet ecological revolution is underway — with surprisingly bankable results.</div>
        <div class="card-by">By J. Petersen · 11 min read</div>
      </div>
      <div class="story-card">
        <div class="card-img card-img-3">
          <svg width="100%" height="100%" viewBox="0 0 240 160" aria-hidden="true"><rect width="240" height="160" fill="#3d1a2c"/><polygon points="120,30 200,130 40,130" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="1"/></svg>
        </div>
        <div class="card-cat">Technology</div>
        <div class="card-title">Synthetic Biology Enters the Farm: A Reckoning With Risk</div>
        <div class="card-deck">Lab-engineered microbes designed to fix nitrogen without fertiliser are moving toward commercial release. Not everyone is ready.</div>
        <div class="card-by">By Dr. C. Iyer · 14 min read</div>
      </div>
      <div class="story-card">
        <div class="card-img card-img-4">
          <svg width="100%" height="100%" viewBox="0 0 240 160" aria-hidden="true"><rect width="240" height="160" fill="#1a1a2e"/><line x1="0" y1="80" x2="240" y2="80" stroke="rgba(255,255,255,0.08)"/><circle cx="60" cy="80" r="12" fill="rgba(100,100,200,0.3)"/><circle cx="120" cy="60" r="18" fill="rgba(100,100,200,0.2)"/><circle cx="180" cy="90" r="10" fill="rgba(100,100,200,0.25)"/></svg>
        </div>
        <div class="card-cat">Politics</div>
        <div class="card-title">The Technocrats vs. The Populists: Europe's Governing Crisis</div>
        <div class="card-deck">A new wave of election results across the continent is forcing a reckoning with the limits of expert-led government.</div>
        <div class="card-by">By A. Müller · 10 min read</div>
      </div>
    </div>

    <div class="opinion-data">
      <div class="opinion-block">
        <div class="section-head"><h2>Opinion</h2><span class="section-more">All columns →</span></div>
        <div class="opinion-quote">Democracy does not die in darkness alone — it also dies in the blinding light of too much noise, too quickly consumed.</div>
        <div class="side-by side-by-attrib">Mara Holloway · Contributing Editor</div>
        <div class="side-story">
          <div class="side-cat">Dispatch</div>
          <div class="side-title">From Geneva: The Treaties Nobody Talks About Anymore</div>
          <div class="side-deck">Our Geneva correspondent on the slow death of humanitarian law by bureaucratic attrition and the NGOs fighting back.</div>
          <div class="side-by">By S. Bonnet · 8 min read</div>
        </div>
      </div>
      <div class="data-block">
        <div class="data-title">By the Numbers</div>
        <div class="data-row"><span class="data-label">Press Freedom Index ↓</span><div class="data-bar-wrap"><div class="data-bar" data-w="38"></div></div><span class="data-val">38</span></div>
        <div class="data-row"><span class="data-label">Global Literacy Rate</span><div class="data-bar-wrap"><div class="data-bar" data-w="87"></div></div><span class="data-val">87%</span></div>
        <div class="data-row"><span class="data-label">Arctic Ice Cover</span><div class="data-bar-wrap"><div class="data-bar" data-w="41"></div></div><span class="data-val">−41%</span></div>
        <div class="data-row"><span class="data-label">UN Budget Shortfall</span><div class="data-bar-wrap"><div class="data-bar" data-w="72"></div></div><span class="data-val">$2.4B</span></div>
        <div class="data-row"><span class="data-label">Multilateral Treaties</span><div class="data-bar-wrap"><div class="data-bar" data-w="55"></div></div><span class="data-val">↑ 55</span></div>
      </div>
    </div>

    <div class="newsletter">
      <div class="nl-text">
        <div class="nl-eyebrow">The Ledger Brief</div>
        <div class="nl-title">Analysis that earns the<br>time you give it. Daily.</div>
      </div>
      <div class="nl-form">
        <input class="nl-input" type="email" placeholder="[email protected]" aria-label="Email address">
        <button class="nl-btn" type="button">Subscribe</button>
      </div>
    </div>
  </div>
</section>

/* ─── 04 Ledger — minimalist broadsheet editorial / news UI ────── */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Source+Sans+3:wght@300;400;600&display=swap');

.mu-ed {
  --mu-ed-bg: #f8f6f2;
  --mu-ed-white: #ffffff;
  --mu-ed-ink: #111010;
  --mu-ed-mid: #6a6560;
  --mu-ed-dim: #b0aaa4;
  --mu-ed-rule: #e0dbd4;
  --mu-ed-accent: #c41e1e;
  --mu-ed-accent-light: #fdf0f0;
  --mu-ed-serif: 'Libre Baskerville', serif;
  --mu-ed-sans: 'Source Sans 3', sans-serif;

  position: relative;
  width: 100%;
  min-height: 1800px;
  background: var(--mu-ed-bg);
  color: var(--mu-ed-ink);
  font-family: var(--mu-ed-sans);
  line-height: 1.6;
  overflow-x: hidden;
  box-sizing: border-box;
}
.mu-ed *, .mu-ed *::before, .mu-ed *::after { box-sizing: border-box; margin: 0; padding: 0; }

.mu-ed .reading-progress { position: absolute; top: 0; left: 0; height: 2px; background: var(--mu-ed-accent); z-index: 200; width: 0; transition: width 0.1s; }

.mu-ed .top-bar { background: var(--mu-ed-ink); color: var(--mu-ed-bg); display: flex; align-items: center; justify-content: space-between; padding: 8px 40px; font-size: 11px; letter-spacing: 0.1em; }
.mu-ed .top-bar-date { color: rgba(255,255,255,0.5); }
.mu-ed .top-bar-editions { display: flex; gap: 20px; }
.mu-ed .top-bar-edition { color: rgba(255,255,255,0.5); cursor: pointer; transition: color 0.2s; }
.mu-ed .top-bar-edition:hover, .mu-ed .top-bar-edition.active { color: rgba(255,255,255,1); }

.mu-ed .masthead { text-align: center; padding: 40px 40px 0; border-bottom: 3px solid var(--mu-ed-ink); position: relative; }
.mu-ed .masthead-tagline { font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--mu-ed-mid); margin-bottom: 16px; }
.mu-ed .masthead-name { font-family: var(--mu-ed-serif); font-size: clamp(60px,8vw,120px); font-weight: 700; line-height: 0.9; letter-spacing: -0.03em; margin-bottom: 8px; }
.mu-ed .masthead-sub { font-size: 12px; letter-spacing: 0.1em; color: var(--mu-ed-mid); margin-bottom: 32px; }
.mu-ed .masthead-nav { display: flex; align-items: center; justify-content: center; gap: 0; border-top: 1px solid var(--mu-ed-rule); border-bottom: 1px solid var(--mu-ed-rule); margin: 0 -40px; }
.mu-ed .mnav-item { font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; padding: 12px 24px; cursor: pointer; color: var(--mu-ed-mid); transition: all 0.2s; border-right: 1px solid var(--mu-ed-rule); }
.mu-ed .mnav-item:first-child { border-left: 1px solid var(--mu-ed-rule); }
.mu-ed .mnav-item:hover, .mu-ed .mnav-item.active { color: var(--mu-ed-ink); background: var(--mu-ed-white); }
.mu-ed .mnav-item.active { font-weight: 600; }

.mu-ed .page-wrap { max-width: 1280px; margin: 0 auto; padding: 40px 40px; }

.mu-ed .feature-grid { display: grid; grid-template-columns: 1fr 2px 1.6fr 2px 1fr; gap: 0; margin-bottom: 48px; }
.mu-ed .col-rule { background: var(--mu-ed-rule); }
.mu-ed .feat-col { padding: 0 32px; }
.mu-ed .feat-col:first-child { padding-left: 0; }
.mu-ed .feat-col:last-child { padding-right: 0; }

.mu-ed .lead-cat { font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--mu-ed-accent); font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.mu-ed .lead-cat::after { content: ''; flex: 1; height: 1px; background: var(--mu-ed-accent); }
.mu-ed .lead-title { font-family: var(--mu-ed-serif); font-size: clamp(28px,3.5vw,44px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 16px; }
.mu-ed .lead-title em { font-style: italic; font-weight: 400; }
.mu-ed .lead-deck { font-family: var(--mu-ed-serif); font-size: 16px; font-weight: 400; font-style: italic; color: var(--mu-ed-mid); line-height: 1.6; margin-bottom: 16px; }
.mu-ed .lead-byline { font-size: 11px; letter-spacing: 0.1em; color: var(--mu-ed-dim); border-top: 1px solid var(--mu-ed-rule); padding-top: 10px; margin-bottom: 20px; }
.mu-ed .lead-byline strong { color: var(--mu-ed-ink); letter-spacing: 0.05em; }
.mu-ed .lead-body { font-size: 15px; line-height: 1.85; color: var(--mu-ed-mid); font-weight: 300; }
.mu-ed .lead-body p { margin-bottom: 14px; }
.mu-ed .lead-body p:first-child::first-letter { font-family: var(--mu-ed-serif); font-size: 56px; font-weight: 700; float: left; line-height: 0.85; margin-right: 8px; margin-top: 4px; color: var(--mu-ed-ink); }
.mu-ed .lead-img { width: 100%; aspect-ratio: 16/9; background: linear-gradient(145deg,#1a1714,#3a3028); margin-bottom: 12px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.mu-ed .lead-img-cap { font-size: 10px; color: var(--mu-ed-dim); letter-spacing: 0.05em; margin-bottom: 24px; }

.mu-ed .side-story { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--mu-ed-rule); }
.mu-ed .side-story:last-child { border-bottom: none; margin-bottom: 0; }
.mu-ed .side-story.breaking-story { background: var(--mu-ed-accent-light); padding: 16px; margin: 0 -16px; }
.mu-ed .side-story.side-story-mt { margin-top: 20px; }
.mu-ed .side-cat { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mu-ed-accent); font-weight: 600; margin-bottom: 8px; }
.mu-ed .side-title { font-family: var(--mu-ed-serif); font-size: 18px; font-weight: 700; line-height: 1.25; margin-bottom: 8px; cursor: pointer; }
.mu-ed .side-title.side-title-small { font-size: 16px; }
.mu-ed .side-title:hover { color: var(--mu-ed-accent); }
.mu-ed .side-deck { font-size: 13px; color: var(--mu-ed-mid); line-height: 1.65; margin-bottom: 8px; font-weight: 300; }
.mu-ed .side-by { font-size: 10px; letter-spacing: 0.08em; color: var(--mu-ed-dim); }
.mu-ed .side-by.side-by-attrib { margin-bottom: 16px; }

.mu-ed .section-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; padding-bottom: 12px; border-bottom: 2px solid var(--mu-ed-ink); }
.mu-ed .section-head h2 { font-family: var(--mu-ed-serif); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.mu-ed .section-head .section-more { margin-left: auto; font-size: 11px; letter-spacing: 0.1em; color: var(--mu-ed-accent); cursor: pointer; text-transform: uppercase; }

.mu-ed .card-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-bottom: 48px; }
.mu-ed .story-card { cursor: pointer; }
.mu-ed .story-card:hover .card-title { color: var(--mu-ed-accent); }
.mu-ed .card-img { aspect-ratio: 3/2; margin-bottom: 12px; position: relative; overflow: hidden; }
.mu-ed .card-img.card-img-1 { background: linear-gradient(135deg,#2c3e50,#3498db); }
.mu-ed .card-img.card-img-2 { background: linear-gradient(135deg,#1a3a2a,#2d6a4f); }
.mu-ed .card-img.card-img-3 { background: linear-gradient(135deg,#3d1a2c,#8b2060); }
.mu-ed .card-img.card-img-4 { background: linear-gradient(135deg,#1a1a2e,#4a4a8a); }
.mu-ed .card-cat { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mu-ed-accent); font-weight: 600; margin-bottom: 6px; }
.mu-ed .card-title { font-family: var(--mu-ed-serif); font-size: 17px; font-weight: 700; line-height: 1.3; margin-bottom: 6px; transition: color 0.2s; }
.mu-ed .card-deck { font-size: 12px; color: var(--mu-ed-mid); line-height: 1.6; margin-bottom: 8px; font-weight: 300; }
.mu-ed .card-by { font-size: 10px; color: var(--mu-ed-dim); }

.mu-ed .opinion-data { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; margin-bottom: 48px; }
.mu-ed .opinion-quote { font-family: var(--mu-ed-serif); font-size: clamp(20px,2.5vw,28px); font-style: italic; font-weight: 400; line-height: 1.4; color: var(--mu-ed-ink); padding: 24px 0; border-top: 3px solid var(--mu-ed-ink); border-bottom: 1px solid var(--mu-ed-rule); margin-bottom: 20px; }
.mu-ed .opinion-quote::before { content: '\201C'; font-size: 60px; line-height: 0; vertical-align: -24px; color: var(--mu-ed-accent); margin-right: 4px; }
.mu-ed .data-title { font-family: var(--mu-ed-serif); font-size: 18px; font-weight: 700; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--mu-ed-ink); }
.mu-ed .data-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--mu-ed-rule); }
.mu-ed .data-label { font-size: 12px; color: var(--mu-ed-mid); flex: 1; }
.mu-ed .data-bar-wrap { width: 120px; height: 4px; background: var(--mu-ed-rule); border-radius: 2px; overflow: hidden; }
.mu-ed .data-bar { height: 100%; background: var(--mu-ed-ink); border-radius: 2px; }
.mu-ed .data-bar[data-w="38"] { width: 38%; }
.mu-ed .data-bar[data-w="41"] { width: 41%; }
.mu-ed .data-bar[data-w="55"] { width: 55%; }
.mu-ed .data-bar[data-w="72"] { width: 72%; }
.mu-ed .data-bar[data-w="87"] { width: 87%; }
.mu-ed .data-val { font-family: var(--mu-ed-serif); font-size: 14px; font-weight: 700; min-width: 40px; text-align: right; }

.mu-ed .newsletter { background: var(--mu-ed-ink); padding: 40px; margin-bottom: 48px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; }
.mu-ed .nl-eyebrow { font-size: 10px; letter-spacing: 0.2em; color: rgba(255,255,255,0.4); text-transform: uppercase; margin-bottom: 8px; }
.mu-ed .nl-title { font-family: var(--mu-ed-serif); font-size: 26px; font-weight: 700; color: var(--mu-ed-white); line-height: 1.2; }
.mu-ed .nl-form { display: flex; gap: 0; }
.mu-ed .nl-input { font-family: var(--mu-ed-sans); font-size: 14px; padding: 14px 20px; border: none; background: rgba(255,255,255,0.1); color: var(--mu-ed-white); outline: none; min-width: 280px; }
.mu-ed .nl-input::placeholder { color: rgba(255,255,255,0.3); }
.mu-ed .nl-btn { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; padding: 14px 24px; background: var(--mu-ed-accent); color: var(--mu-ed-white); border: none; cursor: pointer; font-family: var(--mu-ed-sans); font-weight: 600; transition: opacity 0.2s; }
.mu-ed .nl-btn:hover { opacity: 0.85; }

@media (max-width: 900px) {
  .mu-ed .top-bar, .mu-ed .masthead, .mu-ed .page-wrap { padding-left: 24px; padding-right: 24px; }
  .mu-ed .masthead-nav { margin: 0 -24px; flex-wrap: wrap; }
  .mu-ed .feature-grid { grid-template-columns: 1fr; gap: 24px; }
  .mu-ed .feat-col { padding: 0; }
  .mu-ed .col-rule { display: none; }
  .mu-ed .card-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .mu-ed .opinion-data { grid-template-columns: 1fr; gap: 24px; }
  .mu-ed .newsletter { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
  .mu-ed .nl-form { flex-direction: column; gap: 8px; }
  .mu-ed .nl-input { min-width: 0; }
}

(() => {
  // Scoped reading-progress bar — the source mock read
  // document.documentElement.scrollTop, which would track the host
  // page's scroll. Rebind to the wrapper's nearest scrollable
  // ancestor (or window as a fallback for full-page demos).
  const root = document.querySelector('.mu-ed');
  if (!root) return;
  const progress = root.querySelector('[data-mu-ed-progress]');
  if (!progress) return;

  function update() {
    const r = root.getBoundingClientRect();
    const total = root.scrollHeight - window.innerHeight;
    if (total <= 0) { progress.style.width = '0%'; return; }
    const scrolled = Math.max(0, -r.top);
    const pct = Math.min(100, (scrolled / total) * 100);
    progress.style.width = pct + '%';
  }
  window.addEventListener('scroll', update, { passive: true });
  window.addEventListener('resize', update);
  update();
})();