← back to Sdcc Mockups
html/05-magazine.html
139 lines
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Magazine — SDCC Mockup</title>
<link href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Newsreader',Georgia,serif;background:#fdfbf6;color:#1a1a1a;font-size:18px;line-height:1.55}
a{color:inherit;text-decoration:none}
.skip{position:absolute;top:-40px;left:0;background:#1a1a1a;color:#fdfbf6;padding:8px;z-index:100}.skip:focus{top:0}
.masthead{border-bottom:3px double #1a1a1a;padding:24px 32px 14px;text-align:center;background:#fdfbf6}
.dateline{font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#666;margin-bottom:14px}
.masthead h1{font-family:'Newsreader',serif;font-size:84px;font-weight:700;letter-spacing:-.02em;line-height:.95}
.masthead h1 em{font-style:italic;font-weight:400}
.masthead .tag{font-family:'Inter',sans-serif;font-size:12px;color:#666;margin-top:8px;letter-spacing:.06em;text-transform:uppercase}
.subhead{border-top:1px solid #1a1a1a;border-bottom:1px solid #1a1a1a;margin-top:14px;padding:10px 0;display:flex;justify-content:space-between;align-items:center;font-family:'Inter',sans-serif;font-size:13px}
.subhead .nav-l a{margin-right:24px;font-weight:500}
.subhead .nav-r a{margin-left:24px;color:#666}
.subhead .donate{background:#1a1a1a;color:#fdfbf6;padding:6px 16px;font-weight:600;letter-spacing:.04em}
.searchbar{display:flex;align-items:center;gap:8px;color:#666}
.searchbar input{border:0;background:transparent;font-family:inherit;font-size:13px;width:140px;border-bottom:1px solid #ccc;padding:2px 0}
main{max-width:1180px;margin:0 auto;padding:48px 32px;display:grid;grid-template-columns:2.2fr 1fr;gap:48px}
.lead{border-bottom:1px solid #ccc;padding-bottom:36px}
.lead-tag{font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#a02c2c;font-weight:700;margin-bottom:14px}
.lead h2{font-size:62px;line-height:1;font-weight:700;letter-spacing:-.025em;margin-bottom:14px}
.lead h2 em{font-style:italic;font-weight:400}
.lead .deck{font-size:22px;color:#444;line-height:1.4;margin-bottom:24px;font-weight:400;font-style:italic}
.lead .meta{font-family:'Inter',sans-serif;font-size:12px;color:#888;letter-spacing:.04em;margin-bottom:28px}
.lead .meta strong{color:#1a1a1a;font-weight:600}
.lead .photo{width:100%;height:340px;background:linear-gradient(135deg,#3a2520,#5c3a30,#7a4f44);border-radius:0;margin-bottom:14px;position:relative;overflow:hidden}
.lead .photo::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 60%,rgba(255,220,180,.3),transparent 50%)}
.lead .caption{font-family:'Inter',sans-serif;font-size:12px;color:#666;font-style:italic;margin-bottom:24px}
.lead .body p{margin-bottom:14px;font-size:18px;color:#222}
.lead .body p:first-of-type::first-letter{font-family:'Newsreader',serif;font-size:64px;font-weight:700;float:left;line-height:.85;margin:6px 8px 0 0;color:#a02c2c}
.cont-link{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;color:#a02c2c;text-decoration:underline;text-underline-offset:3px}
aside{font-family:'Newsreader',serif}
.opinion{padding-bottom:24px;border-bottom:1px solid #ccc;margin-bottom:24px}
.op-tag{font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#1a1a1a;font-weight:700;margin-bottom:8px}
.op-h{font-size:24px;line-height:1.15;font-weight:700;letter-spacing:-.01em;margin-bottom:8px}
.op-h em{font-style:italic;font-weight:400}
.op-by{font-family:'Inter',sans-serif;font-size:12px;color:#666}
.most-read{background:#1a1a1a;color:#fdfbf6;padding:24px;margin:24px 0}
.mr-h{font-family:'Inter',sans-serif;font-size:12px;letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:10px;margin-bottom:14px}
.mr-item{display:flex;gap:12px;margin-bottom:14px;align-items:start}
.mr-num{font-family:'Newsreader',serif;font-size:32px;font-weight:700;color:#a02c2c;line-height:.9;flex-shrink:0;width:28px}
.mr-t{font-size:15px;line-height:1.25;font-weight:500}
.subscribe{border:2px solid #1a1a1a;padding:24px;text-align:center}
.subscribe h3{font-size:24px;font-weight:700;letter-spacing:-.01em;margin-bottom:6px}
.subscribe p{font-family:'Inter',sans-serif;font-size:13px;color:#666;margin-bottom:14px;line-height:1.5}
.subscribe input{width:100%;padding:10px 12px;border:1px solid #ccc;font-family:inherit;font-size:14px;margin-bottom:8px}
.subscribe button{width:100%;background:#1a1a1a;color:#fdfbf6;padding:11px;border:0;font-family:'Inter',sans-serif;font-weight:600;font-size:13px;cursor:pointer}
.below{max-width:1180px;margin:0 auto;padding:0 32px 64px;border-top:3px double #1a1a1a;padding-top:32px}
.below h3{font-family:'Inter',sans-serif;font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin-bottom:24px}
.below-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.bcard{padding-right:32px;border-right:1px solid #ccc}
.bcard:last-child{border:0}
.bcard .b-tag{font-family:'Inter',sans-serif;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#a02c2c;font-weight:700;margin-bottom:8px}
.bcard h4{font-size:20px;line-height:1.2;font-weight:700;letter-spacing:-.01em;margin-bottom:8px}
.bcard p{font-size:14px;color:#444;font-family:'Inter',sans-serif;line-height:1.5}
.ft{background:#1a1a1a;color:#fdfbf6;padding:48px 32px;text-align:center;font-family:'Inter',sans-serif;font-size:13px;color:#999}
.ft h2{font-family:'Newsreader',serif;font-size:32px;color:#fdfbf6;font-weight:700;margin-bottom:8px}
</style></head><body>
<a class="skip" href="#m">Skip to main content</a>
<header class="masthead">
<div class="dateline">Vol. XV · No. 18 · Monday May 4, 2026</div>
<h1><em>Student Debt</em> Crisis</h1>
<div class="tag">A people-powered movement of two million borrowers</div>
<div class="subhead">
<div class="nav-l"><a>Lawsuit</a><a>Forgiveness</a><a>SAVE</a><a>PSLF</a><a>Op-Eds</a><a>Stories</a></div>
<div class="searchbar"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg><input type="search" placeholder="Search archives"></div>
<div class="nav-r"><a>Action</a><a>About</a><a class="donate">Donate</a></div>
</div>
</header>
<main id="m">
<article class="lead">
<div class="lead-tag">★ Lead Story · SAVE Plan Litigation</div>
<h2>The 8 million borrowers <em>caught in the middle</em> of a court fight no one explained.</h2>
<p class="deck">A federal court paused the SAVE income-driven repayment plan in 2024. Eighteen months later, the borrowers in it still don't know what they owe — or when.</p>
<p class="meta"><strong>By Sarah Klein, Senior Policy Researcher</strong> · 12 min read · Published May 3, 2026 · Updated 4 hours ago</p>
<div class="photo"></div>
<div class="caption">Borrowers gather outside the Eighth Circuit Court of Appeals on April 22, 2026, as oral arguments resume in <em>Missouri v. Department of Education</em>. Photo: A. Rivera for SDCC.</div>
<div class="body">
<p>When Maria Chen received her first SAVE plan statement in October 2023, her monthly payment dropped from $487 to $0. She made one payment, then the court order came. For eighteen months, she has not made a payment, accrued interest she does not understand, and received seven different and contradictory letters from her servicer.</p>
<p>She is one of approximately eight million federal borrowers in this position. The Department of Education has not issued definitive guidance. The servicers do not have it. The court has not ruled. And the political conversation about "loan forgiveness" has continued without acknowledging that millions of people are being held in administrative limbo by a lawsuit they cannot influence.</p>
<p>This is the second story in our six-part series on the SAVE litigation. The first ran in March, focused on the procedural history. This one focuses on the borrowers themselves — what they know, what they don't, and what their financial lives look like in the meantime.</p>
</div>
<a class="cont-link">Continue reading →</a>
</article>
<aside>
<div class="opinion">
<div class="op-tag">Opinion</div>
<div class="op-h">The Department of Education's <em>silence</em> is itself a policy choice.</div>
<div class="op-by">By Cody Hounanian, Executive Director · 6 min read</div>
</div>
<div class="opinion">
<div class="op-tag">Press Release</div>
<div class="op-h">SDCC files amicus brief in <em>Missouri v. ED</em>; oral argument set for June.</div>
<div class="op-by">May 1, 2026</div>
</div>
<div class="opinion">
<div class="op-tag">Long Read</div>
<div class="op-h">A <em>15-year</em> history of the PSLF program, and the four turning points that made forgiveness real.</div>
<div class="op-by">By Tariq Habash · 22 min read</div>
</div>
<div class="most-read">
<div class="mr-h">Most read this week</div>
<div class="mr-item"><div class="mr-num">1</div><div class="mr-t">Department of Education to transfer $1.6T loan portfolio to Treasury</div></div>
<div class="mr-item"><div class="mr-num">2</div><div class="mr-t">Navigating Student Loan Changes: What Borrowers Need To Know</div></div>
<div class="mr-item"><div class="mr-num">3</div><div class="mr-t">Little Hoover Commission Convenes Hearing on California Institutional Debt</div></div>
<div class="mr-item"><div class="mr-num">4</div><div class="mr-t">Fifth Annual State of Student Debt Summit recap</div></div>
</div>
<div class="subscribe">
<h3>The SDCC Briefing</h3>
<p>Our weekly long-form policy newsletter. Sundays at 7am. 47,000 readers including 800+ Hill staffers and journalists.</p>
<input type="email" placeholder="email@example.com">
<button>Subscribe — free</button>
</div>
</aside>
</main>
<section class="below">
<h3>More from this issue</h3>
<div class="below-grid">
<div class="bcard"><div class="b-tag">Investigation</div><h4>The for-profit college that quietly closed and left 12,000 borrowers without records.</h4><p>Eight months of FOIA requests, three states, one investigation.</p></div>
<div class="bcard"><div class="b-tag">Borrower Story</div><h4>"I made 121 payments. They told me I was 12 short."</h4><p>How one teacher fought 9 years for PSLF — and finally won.</p></div>
<div class="bcard"><div class="b-tag">Data</div><h4>The 23% of federal borrowers in default — mapped by zip code.</h4><p>Default isn't random. It clusters in places lenders never visited.</p></div>
<div class="bcard"><div class="b-tag">Op-Ed</div><h4>"Forgiveness" was always the wrong word.</h4><p>Why we should call it what it is: discharge of mis-charged debt.</p></div>
</div>
</section>
<footer class="ft">
<h2>Student Debt Crisis Center</h2>
<p>501(c)(3) non-profit · EIN 81-2468531 · 1875 K Street NW · Washington, DC 20006</p>
<p style="margin-top:14px">© 2026 SDCC · Charity Navigator 4★ · Privacy · Accessibility</p>
</footer>
</body></html>