Long Read Editorial
A full editorial layout built to make writing the only thing that matters.
Best fornewsletter homepages, literary magazines, longform blogs, paid-subscription publications.
The code
<section class="br-lre" aria-label="Long read editorial layout demo">
<div class="card">
<div class="masthead">
<div class="masthead-left">Issue No. 47 · Jun 2025</div>
<div class="masthead-center">THE LONG READ</div>
<div class="masthead-right">Est. 2021 · Fortnightly</div>
</div>
<div class="nav-strip">
<button class="nav-item active" type="button">Essays</button>
<button class="nav-item" type="button">Dispatches</button>
<button class="nav-item" type="button">Reviews</button>
<button class="nav-item" type="button">Interviews</button>
<button class="nav-item" type="button">Archive</button>
<button class="nav-item" type="button">About</button>
</div>
<div class="content-grid">
<aside class="toc" aria-label="In this issue">
<div class="toc-head">In this issue</div>
<ul class="toc-list">
<li class="toc-item featured">
<span class="toc-num">Essay — p.1</span>
<div class="toc-title">The Attention Economy Is Eating Its Own Tail</div>
</li>
<li class="toc-item">
<span class="toc-num">Dispatch — p.4</span>
<div class="toc-title">Notes from Three Months Without a Smartphone</div>
</li>
<li class="toc-item">
<span class="toc-num">Review — p.6</span>
<div class="toc-title">Scarcity: The Untold History of Enough</div>
</li>
</ul>
<div class="toc-section-label">Also inside</div>
<ul class="toc-list">
<li class="toc-item">
<span class="toc-num">Interview</span>
<div class="toc-title">Jia Tolentino on writing slow</div>
</li>
<li class="toc-item">
<span class="toc-num">Column</span>
<div class="toc-title">Why newsletters are the new pamphlets</div>
</li>
<li class="toc-item">
<span class="toc-num">Links</span>
<div class="toc-title">7 things worth reading this fortnight</div>
</li>
</ul>
</aside>
<article class="article-col">
<div class="article-label">— Feature Essay · Issue 47</div>
<h1 class="article-h1">The Attention Economy<br />Is <em>Eating</em> Its Own Tail</h1>
<p class="article-deck">
When every platform optimises for engagement above all else, the resulting content becomes a mirror — reflecting not what we think, but what we feel compelled to click. And we are running out of things to say.
</p>
<div class="byline">
<div class="byline-cell"><strong>Marcus Osei</strong><span>Contributing Editor</span></div>
<div class="byline-cell"><strong>June 3, 2025</strong><span>14 min read</span></div>
<div class="byline-cell"><strong>2,840</strong><span>words</span></div>
<div class="byline-cell"><strong>Issue 47</strong><span>p. 1 of 8</span></div>
</div>
<p class="body-p dropcap">
There is a particular kind of essay that dominates the internet right now. It begins with a hook — a surprising statistic, a confessional sentence, a rhetorical question — and then proceeds to build, paragraph by paragraph, toward a conclusion that the reader suspected before they began. The form is optimised not for insight but for the sensation of insight. The click is the product. The reading is incidental.<sup>1</sup>
</p>
<p class="body-p">
This is not an accident. The platforms that host most of our public writing have spent fifteen years tuning their recommendation algorithms toward a single metric: time-on-site. Attention, captured and held, is the commodity being traded. What we call "content" is, in economic terms, a vehicle for delivering human attention to advertisers — and content that fails to capture attention is content that does not exist.
</p>
<blockquote class="pull-quote">
<p>"The algorithm does not reward being right. It rewards being interesting — and these two things are increasingly, catastrophically at odds."</p>
<cite>— Marcus Osei, Issue 47</cite>
</blockquote>
<h2 class="article-h2">The Feedback Loop</h2>
<p class="body-p">
The problem is not simply that bad ideas spread. The problem is structural: when engagement is the metric, every writer faces a quiet, persistent pressure to make their work more engaging. Over time, this shapes not just tone but thought. You begin to notice which sentences make readers stop scrolling, and which do not. You begin to write more sentences that make readers stop scrolling. Before long, stopping the scroll becomes the thing the sentences are <em>for</em>.
</p>
<p class="body-p">
The newsletter was supposed to fix this. Send your writing directly to readers who asked for it; no algorithm to appease, no feed to optimise for. And for a while, it did. But as newsletters multiplied, readers developed what one writer called "inbox fatigue" — the same exhaustion, the same half-reading, the same reach for the delete key. The medium changes; the attention problem does not.<sup>2</sup>
</p>
<h2 class="article-h2">What Remains</h2>
<p class="body-p">
The writers who have found something durable are, almost without exception, those who have made peace with being slow. They publish infrequently. They write long. They refuse to have opinions about things that happened in the last forty-eight hours. They treat their readers as people with enough time to think — which is, paradoxically, what makes their readers make time to think.
</p>
<div class="footnote">
<sup>1</sup> This essay is not exempt from the critique it contains. The irony is intentional, and uncomfortable.<br />
<sup>2</sup> "Platform Fatigue and the Illusion of Escape," <em>Columbia Journalism Review</em>, March 2024.
</div>
</article>
<aside class="sidebar" aria-label="Subscribe and recent issues">
<div class="sidebar-block">
<div class="sb-label">Subscribe</div>
<div class="sub-count">14,200 readers · free fortnightly</div>
<div class="stat-row">
<div class="stat-cell"><span class="stat-val">47</span><span class="stat-lab">Issues</span></div>
<div class="stat-cell"><span class="stat-val">94%</span><span class="stat-lab">Open rate</span></div>
</div>
<form class="subscribe-form" onsubmit="return false;">
<input class="sub-input" type="email" placeholder="[email protected]" aria-label="Email" />
<button class="sub-btn" type="submit">Subscribe →</button>
</form>
<p class="sub-note">No ads. No sponsors. No tracking. Unsubscribe in one click.</p>
</div>
<div class="sidebar-block">
<div class="sb-label">Recent Issues</div>
<div class="recent-item">
<span class="ri-issue">Issue 46 · Essay</span>
<div class="ri-title">Against Productivity as Identity</div>
<span class="ri-date">May 20, 2025</span>
</div>
<div class="recent-item">
<span class="ri-issue">Issue 45 · Interview</span>
<div class="ri-title">Hanya Yanagihara on structure and grief</div>
<span class="ri-date">May 6, 2025</span>
</div>
<div class="recent-item">
<span class="ri-issue">Issue 44 · Essay</span>
<div class="ri-title">The Myth of the Second Brain</div>
<span class="ri-date">Apr 22, 2025</span>
</div>
<div class="recent-item">
<span class="ri-issue">Issue 43 · Review</span>
<div class="ri-title">The Hours, re-read in 2025</div>
<span class="ri-date">Apr 8, 2025</span>
</div>
</div>
<div class="sidebar-block">
<div class="sb-label">Topics</div>
<div class="tag-cloud">
<button class="tag active" type="button">Technology</button>
<button class="tag" type="button">Culture</button>
<button class="tag" type="button">Media</button>
<button class="tag" type="button">Writing</button>
<button class="tag" type="button">Books</button>
<button class="tag" type="button">Politics</button>
<button class="tag" type="button">Labour</button>
<button class="tag" type="button">Cities</button>
<button class="tag" type="button">Science</button>
</div>
</div>
<div class="sidebar-block last">
<div class="sb-label">Reading time</div>
<div class="reading-time">
<div>This issue: <strong>~34 minutes</strong></div>
<div>Feature essay: <strong>14 min</strong></div>
<div>All articles: <strong>8 pieces</strong></div>
</div>
</div>
</aside>
</div>
</div>
</section> <section class="br-lre" aria-label="Long read editorial layout demo">
<div class="card">
<div class="masthead">
<div class="masthead-left">Issue No. 47 · Jun 2025</div>
<div class="masthead-center">THE LONG READ</div>
<div class="masthead-right">Est. 2021 · Fortnightly</div>
</div>
<div class="nav-strip">
<button class="nav-item active" type="button">Essays</button>
<button class="nav-item" type="button">Dispatches</button>
<button class="nav-item" type="button">Reviews</button>
<button class="nav-item" type="button">Interviews</button>
<button class="nav-item" type="button">Archive</button>
<button class="nav-item" type="button">About</button>
</div>
<div class="content-grid">
<aside class="toc" aria-label="In this issue">
<div class="toc-head">In this issue</div>
<ul class="toc-list">
<li class="toc-item featured">
<span class="toc-num">Essay — p.1</span>
<div class="toc-title">The Attention Economy Is Eating Its Own Tail</div>
</li>
<li class="toc-item">
<span class="toc-num">Dispatch — p.4</span>
<div class="toc-title">Notes from Three Months Without a Smartphone</div>
</li>
<li class="toc-item">
<span class="toc-num">Review — p.6</span>
<div class="toc-title">Scarcity: The Untold History of Enough</div>
</li>
</ul>
<div class="toc-section-label">Also inside</div>
<ul class="toc-list">
<li class="toc-item">
<span class="toc-num">Interview</span>
<div class="toc-title">Jia Tolentino on writing slow</div>
</li>
<li class="toc-item">
<span class="toc-num">Column</span>
<div class="toc-title">Why newsletters are the new pamphlets</div>
</li>
<li class="toc-item">
<span class="toc-num">Links</span>
<div class="toc-title">7 things worth reading this fortnight</div>
</li>
</ul>
</aside>
<article class="article-col">
<div class="article-label">— Feature Essay · Issue 47</div>
<h1 class="article-h1">The Attention Economy<br />Is <em>Eating</em> Its Own Tail</h1>
<p class="article-deck">
When every platform optimises for engagement above all else, the resulting content becomes a mirror — reflecting not what we think, but what we feel compelled to click. And we are running out of things to say.
</p>
<div class="byline">
<div class="byline-cell"><strong>Marcus Osei</strong><span>Contributing Editor</span></div>
<div class="byline-cell"><strong>June 3, 2025</strong><span>14 min read</span></div>
<div class="byline-cell"><strong>2,840</strong><span>words</span></div>
<div class="byline-cell"><strong>Issue 47</strong><span>p. 1 of 8</span></div>
</div>
<p class="body-p dropcap">
There is a particular kind of essay that dominates the internet right now. It begins with a hook — a surprising statistic, a confessional sentence, a rhetorical question — and then proceeds to build, paragraph by paragraph, toward a conclusion that the reader suspected before they began. The form is optimised not for insight but for the sensation of insight. The click is the product. The reading is incidental.<sup>1</sup>
</p>
<p class="body-p">
This is not an accident. The platforms that host most of our public writing have spent fifteen years tuning their recommendation algorithms toward a single metric: time-on-site. Attention, captured and held, is the commodity being traded. What we call "content" is, in economic terms, a vehicle for delivering human attention to advertisers — and content that fails to capture attention is content that does not exist.
</p>
<blockquote class="pull-quote">
<p>"The algorithm does not reward being right. It rewards being interesting — and these two things are increasingly, catastrophically at odds."</p>
<cite>— Marcus Osei, Issue 47</cite>
</blockquote>
<h2 class="article-h2">The Feedback Loop</h2>
<p class="body-p">
The problem is not simply that bad ideas spread. The problem is structural: when engagement is the metric, every writer faces a quiet, persistent pressure to make their work more engaging. Over time, this shapes not just tone but thought. You begin to notice which sentences make readers stop scrolling, and which do not. You begin to write more sentences that make readers stop scrolling. Before long, stopping the scroll becomes the thing the sentences are <em>for</em>.
</p>
<p class="body-p">
The newsletter was supposed to fix this. Send your writing directly to readers who asked for it; no algorithm to appease, no feed to optimise for. And for a while, it did. But as newsletters multiplied, readers developed what one writer called "inbox fatigue" — the same exhaustion, the same half-reading, the same reach for the delete key. The medium changes; the attention problem does not.<sup>2</sup>
</p>
<h2 class="article-h2">What Remains</h2>
<p class="body-p">
The writers who have found something durable are, almost without exception, those who have made peace with being slow. They publish infrequently. They write long. They refuse to have opinions about things that happened in the last forty-eight hours. They treat their readers as people with enough time to think — which is, paradoxically, what makes their readers make time to think.
</p>
<div class="footnote">
<sup>1</sup> This essay is not exempt from the critique it contains. The irony is intentional, and uncomfortable.<br />
<sup>2</sup> "Platform Fatigue and the Illusion of Escape," <em>Columbia Journalism Review</em>, March 2024.
</div>
</article>
<aside class="sidebar" aria-label="Subscribe and recent issues">
<div class="sidebar-block">
<div class="sb-label">Subscribe</div>
<div class="sub-count">14,200 readers · free fortnightly</div>
<div class="stat-row">
<div class="stat-cell"><span class="stat-val">47</span><span class="stat-lab">Issues</span></div>
<div class="stat-cell"><span class="stat-val">94%</span><span class="stat-lab">Open rate</span></div>
</div>
<form class="subscribe-form" onsubmit="return false;">
<input class="sub-input" type="email" placeholder="[email protected]" aria-label="Email" />
<button class="sub-btn" type="submit">Subscribe →</button>
</form>
<p class="sub-note">No ads. No sponsors. No tracking. Unsubscribe in one click.</p>
</div>
<div class="sidebar-block">
<div class="sb-label">Recent Issues</div>
<div class="recent-item">
<span class="ri-issue">Issue 46 · Essay</span>
<div class="ri-title">Against Productivity as Identity</div>
<span class="ri-date">May 20, 2025</span>
</div>
<div class="recent-item">
<span class="ri-issue">Issue 45 · Interview</span>
<div class="ri-title">Hanya Yanagihara on structure and grief</div>
<span class="ri-date">May 6, 2025</span>
</div>
<div class="recent-item">
<span class="ri-issue">Issue 44 · Essay</span>
<div class="ri-title">The Myth of the Second Brain</div>
<span class="ri-date">Apr 22, 2025</span>
</div>
<div class="recent-item">
<span class="ri-issue">Issue 43 · Review</span>
<div class="ri-title">The Hours, re-read in 2025</div>
<span class="ri-date">Apr 8, 2025</span>
</div>
</div>
<div class="sidebar-block">
<div class="sb-label">Topics</div>
<div class="tag-cloud">
<button class="tag active" type="button">Technology</button>
<button class="tag" type="button">Culture</button>
<button class="tag" type="button">Media</button>
<button class="tag" type="button">Writing</button>
<button class="tag" type="button">Books</button>
<button class="tag" type="button">Politics</button>
<button class="tag" type="button">Labour</button>
<button class="tag" type="button">Cities</button>
<button class="tag" type="button">Science</button>
</div>
</div>
<div class="sidebar-block last">
<div class="sb-label">Reading time</div>
<div class="reading-time">
<div>This issue: <strong>~34 minutes</strong></div>
<div>Feature essay: <strong>14 min</strong></div>
<div>All articles: <strong>8 pieces</strong></div>
</div>
</div>
</aside>
</div>
</div>
</section>/* ─── 07 Long Read Editorial — newsletter-style three-column ──── */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Schibsted+Grotesk:ital,wght@0,400;0,500;0,700;0,900;1,400&display=swap');
.br-lre {
--br-lre-bg: #f7f4ee;
--br-lre-ink: #0c0c0a;
--br-lre-muted: #6b6860;
--br-lre-yellow: #f0e614;
--br-lre-red: #d41c00;
--br-lre-rule: 1px solid #0c0c0a;
position: relative;
width: 100%;
height: 820px;
background: var(--br-lre-bg);
color: var(--br-lre-ink);
font-family: 'Schibsted Grotesk', system-ui, sans-serif;
font-size: 16px;
line-height: 1.5;
overflow: hidden;
box-sizing: border-box;
}
.br-lre *,
.br-lre *::before,
.br-lre *::after { box-sizing: border-box; margin: 0; padding: 0; }
.br-lre .card {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
/* Masthead */
.br-lre .masthead {
border-bottom: 3px solid var(--br-lre-ink);
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 0 32px;
height: 52px;
flex-shrink: 0;
}
.br-lre .masthead-left { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--br-lre-muted); }
.br-lre .masthead-center {
font-family: 'Libre Baskerville', Georgia, serif;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.5px;
border-left: var(--br-lre-rule);
border-right: var(--br-lre-rule);
padding: 0 28px;
height: 100%;
display: flex;
align-items: center;
white-space: nowrap;
}
.br-lre .masthead-right {
text-align: right;
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--br-lre-muted);
}
/* Nav */
.br-lre .nav-strip {
border-bottom: var(--br-lre-rule);
display: flex;
justify-content: center;
gap: 0;
height: 32px;
flex-shrink: 0;
}
.br-lre .nav-item {
font-family: 'Schibsted Grotesk', sans-serif;
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
padding: 0 20px;
display: flex;
align-items: center;
border-left: var(--br-lre-rule);
background: transparent;
cursor: pointer;
color: var(--br-lre-muted);
transition: background 0.1s, color 0.1s;
white-space: nowrap;
}
.br-lre .nav-item:last-child { border-right: var(--br-lre-rule); }
.br-lre .nav-item:hover { background: var(--br-lre-ink); color: var(--br-lre-bg); }
.br-lre .nav-item.active { background: var(--br-lre-yellow); color: var(--br-lre-ink); font-weight: 700; }
/* Main grid */
.br-lre .content-grid {
display: grid;
grid-template-columns: 200px 1fr 260px;
flex: 1;
min-height: 0;
}
/* TOC */
.br-lre .toc {
border-right: var(--br-lre-rule);
padding: 28px 20px;
overflow: hidden;
}
.br-lre .toc-head {
font-size: 9px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--br-lre-muted);
border-bottom: var(--br-lre-rule);
padding-bottom: 10px;
margin-bottom: 16px;
}
.br-lre .toc-list { list-style: none; display: flex; flex-direction: column; }
.br-lre .toc-item {
border-bottom: 1px solid #e0dcd5;
padding: 9px 0;
cursor: pointer;
}
.br-lre .toc-num {
font-family: 'Libre Baskerville', serif;
font-size: 9px;
color: var(--br-lre-muted);
display: block;
margin-bottom: 3px;
font-style: italic;
}
.br-lre .toc-title {
font-size: 11px;
line-height: 1.35;
color: var(--br-lre-ink);
font-weight: 500;
}
.br-lre .toc-item:hover .toc-title { text-decoration: underline; text-underline-offset: 3px; }
.br-lre .toc-item.featured .toc-title {
font-weight: 700;
background: var(--br-lre-yellow);
padding: 1px 4px;
margin: 0 -4px;
}
.br-lre .toc-section-label {
font-size: 8px;
letter-spacing: 3px;
text-transform: uppercase;
color: #bbb;
margin: 14px 0 6px;
}
/* Article */
.br-lre .article-col {
border-right: var(--br-lre-rule);
overflow-y: auto;
padding: 36px 48px 36px 44px;
}
.br-lre .article-col::-webkit-scrollbar { width: 6px; }
.br-lre .article-col::-webkit-scrollbar-thumb { background: #ccc; }
.br-lre .article-label {
font-size: 9px;
letter-spacing: 5px;
text-transform: uppercase;
color: var(--br-lre-red);
font-weight: 700;
margin-bottom: 14px;
}
.br-lre .article-h1 {
font-family: 'Libre Baskerville', serif;
font-size: clamp(28px, 3.2vw, 44px);
line-height: 1.08;
letter-spacing: -0.03em;
color: var(--br-lre-ink);
margin-bottom: 20px;
font-weight: 700;
}
.br-lre .article-h1 em { font-style: italic; color: var(--br-lre-muted); }
.br-lre .article-deck {
font-size: 14px;
line-height: 1.65;
color: var(--br-lre-muted);
border-left: 4px solid var(--br-lre-ink);
padding-left: 16px;
margin-bottom: 24px;
font-style: italic;
font-family: 'Libre Baskerville', serif;
}
.br-lre .byline {
display: flex;
align-items: center;
border-top: var(--br-lre-rule);
border-bottom: var(--br-lre-rule);
margin-bottom: 28px;
font-size: 10px;
flex-wrap: wrap;
}
.br-lre .byline-cell {
padding: 8px 14px;
border-right: var(--br-lre-rule);
letter-spacing: 1px;
flex: 1;
min-width: 120px;
}
.br-lre .byline-cell:last-child { border-right: none; }
.br-lre .byline-cell strong { display: block; font-size: 11px; color: var(--br-lre-ink); margin-bottom: 1px; font-weight: 700; }
.br-lre .byline-cell span { color: var(--br-lre-muted); }
.br-lre .dropcap::first-letter {
font-family: 'Libre Baskerville', serif;
font-size: 5.4em;
font-weight: 700;
float: left;
line-height: 0.78;
padding-right: 10px;
margin-top: 4px;
color: var(--br-lre-ink);
}
.br-lre .body-p {
font-size: 14px;
line-height: 1.85;
color: var(--br-lre-ink);
margin-bottom: 18px;
font-family: 'Libre Baskerville', serif;
}
.br-lre .body-p em { font-style: italic; }
.br-lre .pull-quote {
margin: 28px -20px;
padding: 20px 24px;
background: var(--br-lre-yellow);
border-left: 6px solid var(--br-lre-ink);
}
.br-lre .pull-quote p {
font-family: 'Libre Baskerville', serif;
font-size: 20px;
line-height: 1.35;
font-style: italic;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--br-lre-ink);
margin-bottom: 8px;
}
.br-lre .pull-quote cite {
font-size: 9px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--br-lre-muted);
font-style: normal;
}
.br-lre .article-h2 {
font-family: 'Schibsted Grotesk', sans-serif;
font-size: 11px;
font-weight: 900;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--br-lre-ink);
margin: 28px 0 12px;
display: flex;
align-items: center;
gap: 12px;
}
.br-lre .article-h2::before {
content: '';
flex: 0 0 40px;
height: 2px;
background: var(--br-lre-ink);
display: block;
}
.br-lre .footnote {
font-size: 11px;
font-family: 'Libre Baskerville', serif;
font-style: italic;
color: var(--br-lre-muted);
border-top: 1px solid #ddd;
padding-top: 10px;
margin-top: 10px;
line-height: 1.6;
}
.br-lre sup {
font-size: 9px;
color: var(--br-lre-red);
font-style: normal;
font-family: 'Schibsted Grotesk', sans-serif;
vertical-align: super;
}
/* Sidebar */
.br-lre .sidebar {
padding: 24px 20px;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.br-lre .sidebar::-webkit-scrollbar { width: 4px; }
.br-lre .sidebar::-webkit-scrollbar-thumb { background: #ddd; }
.br-lre .sidebar-block {
border-bottom: var(--br-lre-rule);
padding: 18px 0;
}
.br-lre .sidebar-block:first-child { padding-top: 0; }
.br-lre .sidebar-block.last { border: none; }
.br-lre .sb-label {
font-size: 8px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--br-lre-muted);
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.br-lre .sb-label::after {
content: '';
flex: 1;
height: 1px;
background: #ddd;
}
.br-lre .subscribe-form { display: flex; flex-direction: column; gap: 6px; }
.br-lre .sub-input {
border: 1.5px solid var(--br-lre-ink);
background: var(--br-lre-bg);
font-family: 'Schibsted Grotesk', sans-serif;
font-size: 11px;
padding: 8px 10px;
outline: none;
color: var(--br-lre-ink);
width: 100%;
}
.br-lre .sub-input::placeholder { color: #bbb; }
.br-lre .sub-input:focus { background: var(--br-lre-yellow); }
.br-lre .sub-btn {
background: var(--br-lre-ink);
color: var(--br-lre-bg);
border: none;
font-family: 'Schibsted Grotesk', sans-serif;
font-size: 9px;
font-weight: 900;
letter-spacing: 3px;
text-transform: uppercase;
padding: 9px 14px;
cursor: pointer;
width: 100%;
transition: background 0.1s;
}
.br-lre .sub-btn:hover { background: var(--br-lre-red); }
.br-lre .sub-note { font-size: 9px; color: var(--br-lre-muted); line-height: 1.5; margin-top: 8px; }
.br-lre .sub-count { font-size: 10px; color: var(--br-lre-ink); font-weight: 700; margin-bottom: 10px; }
.br-lre .stat-row {
display: flex;
border: var(--br-lre-rule);
margin-bottom: 10px;
}
.br-lre .stat-cell {
flex: 1;
padding: 8px 10px;
border-right: var(--br-lre-rule);
text-align: center;
}
.br-lre .stat-cell:last-child { border-right: none; }
.br-lre .stat-val { font-weight: 900; font-size: 18px; display: block; }
.br-lre .stat-lab { font-size: 8px; letter-spacing: 1px; color: var(--br-lre-muted); text-transform: uppercase; }
.br-lre .recent-item {
display: flex;
flex-direction: column;
gap: 3px;
padding: 10px 0;
border-bottom: 1px solid #e8e4dd;
cursor: pointer;
}
.br-lre .recent-item:last-child { border-bottom: none; }
.br-lre .ri-issue { font-size: 8px; letter-spacing: 2px; color: var(--br-lre-muted); text-transform: uppercase; }
.br-lre .ri-title { font-size: 11px; font-family: 'Libre Baskerville', serif; line-height: 1.35; }
.br-lre .ri-title:hover { text-decoration: underline; }
.br-lre .ri-date { font-size: 9px; color: var(--br-lre-muted); }
.br-lre .tag-cloud { display: flex; flex-wrap: wrap; gap: 4px; }
.br-lre .tag {
font-family: 'Schibsted Grotesk', sans-serif;
font-size: 9px;
letter-spacing: 2px;
text-transform: uppercase;
border: 1px solid var(--br-lre-ink);
background: transparent;
padding: 3px 8px;
cursor: pointer;
color: var(--br-lre-ink);
transition: all 0.1s;
}
.br-lre .tag:hover, .br-lre .tag.active { background: var(--br-lre-ink); color: var(--br-lre-bg); }
.br-lre .reading-time { font-size: 11px; color: var(--br-lre-muted); line-height: 2; }
.br-lre .reading-time strong { color: var(--br-lre-ink); }
@media (max-width: 900px) {
.br-lre .content-grid { grid-template-columns: 1fr; }
.br-lre .toc, .br-lre .sidebar { border-right: none; border-bottom: var(--br-lre-rule); }
.br-lre .article-col { border-right: none; padding: 28px 24px; }
.br-lre .masthead-center { font-size: 18px; padding: 0 16px; }
.br-lre .pull-quote { margin: 22px 0; }
} /* ─── 07 Long Read Editorial — newsletter-style three-column ──── */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Schibsted+Grotesk:ital,wght@0,400;0,500;0,700;0,900;1,400&display=swap');
.br-lre {
--br-lre-bg: #f7f4ee;
--br-lre-ink: #0c0c0a;
--br-lre-muted: #6b6860;
--br-lre-yellow: #f0e614;
--br-lre-red: #d41c00;
--br-lre-rule: 1px solid #0c0c0a;
position: relative;
width: 100%;
height: 820px;
background: var(--br-lre-bg);
color: var(--br-lre-ink);
font-family: 'Schibsted Grotesk', system-ui, sans-serif;
font-size: 16px;
line-height: 1.5;
overflow: hidden;
box-sizing: border-box;
}
.br-lre *,
.br-lre *::before,
.br-lre *::after { box-sizing: border-box; margin: 0; padding: 0; }
.br-lre .card {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
/* Masthead */
.br-lre .masthead {
border-bottom: 3px solid var(--br-lre-ink);
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 0 32px;
height: 52px;
flex-shrink: 0;
}
.br-lre .masthead-left { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--br-lre-muted); }
.br-lre .masthead-center {
font-family: 'Libre Baskerville', Georgia, serif;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.5px;
border-left: var(--br-lre-rule);
border-right: var(--br-lre-rule);
padding: 0 28px;
height: 100%;
display: flex;
align-items: center;
white-space: nowrap;
}
.br-lre .masthead-right {
text-align: right;
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--br-lre-muted);
}
/* Nav */
.br-lre .nav-strip {
border-bottom: var(--br-lre-rule);
display: flex;
justify-content: center;
gap: 0;
height: 32px;
flex-shrink: 0;
}
.br-lre .nav-item {
font-family: 'Schibsted Grotesk', sans-serif;
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
padding: 0 20px;
display: flex;
align-items: center;
border-left: var(--br-lre-rule);
background: transparent;
cursor: pointer;
color: var(--br-lre-muted);
transition: background 0.1s, color 0.1s;
white-space: nowrap;
}
.br-lre .nav-item:last-child { border-right: var(--br-lre-rule); }
.br-lre .nav-item:hover { background: var(--br-lre-ink); color: var(--br-lre-bg); }
.br-lre .nav-item.active { background: var(--br-lre-yellow); color: var(--br-lre-ink); font-weight: 700; }
/* Main grid */
.br-lre .content-grid {
display: grid;
grid-template-columns: 200px 1fr 260px;
flex: 1;
min-height: 0;
}
/* TOC */
.br-lre .toc {
border-right: var(--br-lre-rule);
padding: 28px 20px;
overflow: hidden;
}
.br-lre .toc-head {
font-size: 9px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--br-lre-muted);
border-bottom: var(--br-lre-rule);
padding-bottom: 10px;
margin-bottom: 16px;
}
.br-lre .toc-list { list-style: none; display: flex; flex-direction: column; }
.br-lre .toc-item {
border-bottom: 1px solid #e0dcd5;
padding: 9px 0;
cursor: pointer;
}
.br-lre .toc-num {
font-family: 'Libre Baskerville', serif;
font-size: 9px;
color: var(--br-lre-muted);
display: block;
margin-bottom: 3px;
font-style: italic;
}
.br-lre .toc-title {
font-size: 11px;
line-height: 1.35;
color: var(--br-lre-ink);
font-weight: 500;
}
.br-lre .toc-item:hover .toc-title { text-decoration: underline; text-underline-offset: 3px; }
.br-lre .toc-item.featured .toc-title {
font-weight: 700;
background: var(--br-lre-yellow);
padding: 1px 4px;
margin: 0 -4px;
}
.br-lre .toc-section-label {
font-size: 8px;
letter-spacing: 3px;
text-transform: uppercase;
color: #bbb;
margin: 14px 0 6px;
}
/* Article */
.br-lre .article-col {
border-right: var(--br-lre-rule);
overflow-y: auto;
padding: 36px 48px 36px 44px;
}
.br-lre .article-col::-webkit-scrollbar { width: 6px; }
.br-lre .article-col::-webkit-scrollbar-thumb { background: #ccc; }
.br-lre .article-label {
font-size: 9px;
letter-spacing: 5px;
text-transform: uppercase;
color: var(--br-lre-red);
font-weight: 700;
margin-bottom: 14px;
}
.br-lre .article-h1 {
font-family: 'Libre Baskerville', serif;
font-size: clamp(28px, 3.2vw, 44px);
line-height: 1.08;
letter-spacing: -0.03em;
color: var(--br-lre-ink);
margin-bottom: 20px;
font-weight: 700;
}
.br-lre .article-h1 em { font-style: italic; color: var(--br-lre-muted); }
.br-lre .article-deck {
font-size: 14px;
line-height: 1.65;
color: var(--br-lre-muted);
border-left: 4px solid var(--br-lre-ink);
padding-left: 16px;
margin-bottom: 24px;
font-style: italic;
font-family: 'Libre Baskerville', serif;
}
.br-lre .byline {
display: flex;
align-items: center;
border-top: var(--br-lre-rule);
border-bottom: var(--br-lre-rule);
margin-bottom: 28px;
font-size: 10px;
flex-wrap: wrap;
}
.br-lre .byline-cell {
padding: 8px 14px;
border-right: var(--br-lre-rule);
letter-spacing: 1px;
flex: 1;
min-width: 120px;
}
.br-lre .byline-cell:last-child { border-right: none; }
.br-lre .byline-cell strong { display: block; font-size: 11px; color: var(--br-lre-ink); margin-bottom: 1px; font-weight: 700; }
.br-lre .byline-cell span { color: var(--br-lre-muted); }
.br-lre .dropcap::first-letter {
font-family: 'Libre Baskerville', serif;
font-size: 5.4em;
font-weight: 700;
float: left;
line-height: 0.78;
padding-right: 10px;
margin-top: 4px;
color: var(--br-lre-ink);
}
.br-lre .body-p {
font-size: 14px;
line-height: 1.85;
color: var(--br-lre-ink);
margin-bottom: 18px;
font-family: 'Libre Baskerville', serif;
}
.br-lre .body-p em { font-style: italic; }
.br-lre .pull-quote {
margin: 28px -20px;
padding: 20px 24px;
background: var(--br-lre-yellow);
border-left: 6px solid var(--br-lre-ink);
}
.br-lre .pull-quote p {
font-family: 'Libre Baskerville', serif;
font-size: 20px;
line-height: 1.35;
font-style: italic;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--br-lre-ink);
margin-bottom: 8px;
}
.br-lre .pull-quote cite {
font-size: 9px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--br-lre-muted);
font-style: normal;
}
.br-lre .article-h2 {
font-family: 'Schibsted Grotesk', sans-serif;
font-size: 11px;
font-weight: 900;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--br-lre-ink);
margin: 28px 0 12px;
display: flex;
align-items: center;
gap: 12px;
}
.br-lre .article-h2::before {
content: '';
flex: 0 0 40px;
height: 2px;
background: var(--br-lre-ink);
display: block;
}
.br-lre .footnote {
font-size: 11px;
font-family: 'Libre Baskerville', serif;
font-style: italic;
color: var(--br-lre-muted);
border-top: 1px solid #ddd;
padding-top: 10px;
margin-top: 10px;
line-height: 1.6;
}
.br-lre sup {
font-size: 9px;
color: var(--br-lre-red);
font-style: normal;
font-family: 'Schibsted Grotesk', sans-serif;
vertical-align: super;
}
/* Sidebar */
.br-lre .sidebar {
padding: 24px 20px;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.br-lre .sidebar::-webkit-scrollbar { width: 4px; }
.br-lre .sidebar::-webkit-scrollbar-thumb { background: #ddd; }
.br-lre .sidebar-block {
border-bottom: var(--br-lre-rule);
padding: 18px 0;
}
.br-lre .sidebar-block:first-child { padding-top: 0; }
.br-lre .sidebar-block.last { border: none; }
.br-lre .sb-label {
font-size: 8px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--br-lre-muted);
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.br-lre .sb-label::after {
content: '';
flex: 1;
height: 1px;
background: #ddd;
}
.br-lre .subscribe-form { display: flex; flex-direction: column; gap: 6px; }
.br-lre .sub-input {
border: 1.5px solid var(--br-lre-ink);
background: var(--br-lre-bg);
font-family: 'Schibsted Grotesk', sans-serif;
font-size: 11px;
padding: 8px 10px;
outline: none;
color: var(--br-lre-ink);
width: 100%;
}
.br-lre .sub-input::placeholder { color: #bbb; }
.br-lre .sub-input:focus { background: var(--br-lre-yellow); }
.br-lre .sub-btn {
background: var(--br-lre-ink);
color: var(--br-lre-bg);
border: none;
font-family: 'Schibsted Grotesk', sans-serif;
font-size: 9px;
font-weight: 900;
letter-spacing: 3px;
text-transform: uppercase;
padding: 9px 14px;
cursor: pointer;
width: 100%;
transition: background 0.1s;
}
.br-lre .sub-btn:hover { background: var(--br-lre-red); }
.br-lre .sub-note { font-size: 9px; color: var(--br-lre-muted); line-height: 1.5; margin-top: 8px; }
.br-lre .sub-count { font-size: 10px; color: var(--br-lre-ink); font-weight: 700; margin-bottom: 10px; }
.br-lre .stat-row {
display: flex;
border: var(--br-lre-rule);
margin-bottom: 10px;
}
.br-lre .stat-cell {
flex: 1;
padding: 8px 10px;
border-right: var(--br-lre-rule);
text-align: center;
}
.br-lre .stat-cell:last-child { border-right: none; }
.br-lre .stat-val { font-weight: 900; font-size: 18px; display: block; }
.br-lre .stat-lab { font-size: 8px; letter-spacing: 1px; color: var(--br-lre-muted); text-transform: uppercase; }
.br-lre .recent-item {
display: flex;
flex-direction: column;
gap: 3px;
padding: 10px 0;
border-bottom: 1px solid #e8e4dd;
cursor: pointer;
}
.br-lre .recent-item:last-child { border-bottom: none; }
.br-lre .ri-issue { font-size: 8px; letter-spacing: 2px; color: var(--br-lre-muted); text-transform: uppercase; }
.br-lre .ri-title { font-size: 11px; font-family: 'Libre Baskerville', serif; line-height: 1.35; }
.br-lre .ri-title:hover { text-decoration: underline; }
.br-lre .ri-date { font-size: 9px; color: var(--br-lre-muted); }
.br-lre .tag-cloud { display: flex; flex-wrap: wrap; gap: 4px; }
.br-lre .tag {
font-family: 'Schibsted Grotesk', sans-serif;
font-size: 9px;
letter-spacing: 2px;
text-transform: uppercase;
border: 1px solid var(--br-lre-ink);
background: transparent;
padding: 3px 8px;
cursor: pointer;
color: var(--br-lre-ink);
transition: all 0.1s;
}
.br-lre .tag:hover, .br-lre .tag.active { background: var(--br-lre-ink); color: var(--br-lre-bg); }
.br-lre .reading-time { font-size: 11px; color: var(--br-lre-muted); line-height: 2; }
.br-lre .reading-time strong { color: var(--br-lre-ink); }
@media (max-width: 900px) {
.br-lre .content-grid { grid-template-columns: 1fr; }
.br-lre .toc, .br-lre .sidebar { border-right: none; border-bottom: var(--br-lre-rule); }
.br-lre .article-col { border-right: none; padding: 28px 24px; }
.br-lre .masthead-center { font-size: 18px; padding: 0 16px; }
.br-lre .pull-quote { margin: 22px 0; }
}More from 8 CSS Brutalist Designs
Product CardsData DashboardIndie SaaS PricingStreetwear CatalogForm ElementsSelected Work GridWindows 95 Desktop
View the full collection →