ページ 簡単
News — Opinion / Editorial Column
A self-contained editorial opinion column page in classic newsprint style, with a red OPINION kicker, serif headline and italic deck, a prominent columnist byline card built from a CSS portrait gradient, and a single elegant reading column featuring a drop cap, justified body type, and oversized serif pull quotes. Captioned duotone press-photo figures, an editor's note footer, and a more-from-this-columnist list complete the layout, while vanilla JavaScript powers a clap/recommend counter, native share with copy-link fallback, and a small toast helper.
Labで開く
MCP
html css vanilla-js
ターゲット: JS HTML
コード
:root {
--cream: #f4efe4;
--paper: #faf7f0;
--white: #ffffff;
--newsprint: #efe9da;
--ink: #16130f;
--ink-2: #2b2620;
--ink-3: #4a443b;
--muted: #7a7164;
--red: #b4291f;
--red-d: #8f1f17;
--red-50: #f3dcd9;
--rule: rgba(22, 19, 15, 0.16);
--rule-2: rgba(22, 19, 15, 0.30);
--rule-hair: rgba(22, 19, 15, 0.10);
--ok: #2f7d4f;
--warn: #b67a18;
--danger: #b4291f;
--r-sm: 4px;
--r-md: 8px;
--r-lg: 12px;
--serif: "Playfair Display", "Times New Roman", Georgia, serif;
--sans: "Inter", system-ui, -apple-system, sans-serif;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
margin: 0;
background: var(--cream);
color: var(--ink);
font-family: var(--sans);
line-height: 1.5;
font-size: 17px;
}
a {
color: inherit;
}
.skip-link {
position: absolute;
left: -999px;
top: 0;
background: var(--ink);
color: var(--cream);
padding: 10px 16px;
z-index: 50;
font: 600 13px/1 var(--sans);
}
.skip-link:focus {
left: 12px;
top: 12px;
}
.sr-only,
.sr-only:not(:focus):not(:active) {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
:focus-visible {
outline: 2px solid var(--red);
outline-offset: 2px;
}
/* ---------- Masthead ---------- */
.masthead {
background: var(--paper);
border-bottom: 3px double var(--rule-2);
}
.masthead__inner {
max-width: 1180px;
margin: 0 auto;
padding: 22px 24px 14px;
text-align: center;
}
.masthead__dateline {
margin: 0 0 8px;
font: 600 11px/1.4 var(--sans);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
}
.masthead__title {
margin: 0;
font-family: var(--serif);
font-weight: 900;
font-size: clamp(34px, 7vw, 64px);
line-height: 1;
letter-spacing: 0.01em;
color: var(--ink);
}
.masthead__tag {
margin: 10px 0 0;
font: italic 500 14px/1.4 var(--serif);
color: var(--ink-3);
}
.subnav {
border-top: 1px solid var(--rule);
background: var(--paper);
}
.subnav ul {
max-width: 1180px;
margin: 0 auto;
padding: 0 24px;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 4px 26px;
justify-content: center;
align-items: center;
}
.subnav li {
padding: 9px 0;
}
.subnav a {
text-decoration: none;
font: 600 12px/1 var(--sans);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-2);
padding-bottom: 3px;
border-bottom: 2px solid transparent;
transition: color 0.15s, border-color 0.15s;
}
.subnav a:hover {
color: var(--red);
border-color: var(--red);
}
.subnav__cta a {
color: var(--red);
}
/* ---------- Layout ---------- */
.wrap {
max-width: 1180px;
margin: 0 auto;
padding: 40px 24px 56px;
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 56px;
align-items: start;
}
/* ---------- Column head ---------- */
.column {
max-width: 680px;
margin: 0 auto;
}
.kicker {
margin: 0 0 14px;
font: 700 12px/1 var(--sans);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--red);
}
.headline {
margin: 0;
font-family: var(--serif);
font-weight: 800;
font-size: clamp(32px, 5.4vw, 52px);
line-height: 1.06;
letter-spacing: -0.005em;
color: var(--ink);
}
.deck {
margin: 18px 0 0;
font-family: var(--serif);
font-style: italic;
font-weight: 500;
font-size: clamp(18px, 2.4vw, 22px);
line-height: 1.45;
color: var(--ink-3);
}
/* ---------- Byline card ---------- */
.byline {
margin: 26px 0 20px;
display: flex;
gap: 16px;
align-items: flex-start;
padding: 16px;
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--r-md);
}
.byline__portrait {
flex: 0 0 64px;
width: 64px;
height: 64px;
margin: 0;
border-radius: var(--r-sm);
display: grid;
place-items: center;
overflow: hidden;
background:
radial-gradient(120% 100% at 30% 18%, rgba(244, 239, 228, 0.55), transparent 55%),
radial-gradient(140% 120% at 78% 86%, var(--red-d), transparent 60%),
linear-gradient(150deg, #3a322a 0%, #1d1813 60%, #120f0b 100%);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}
.byline__initials {
font-family: var(--serif);
font-weight: 700;
font-size: 24px;
color: var(--cream);
letter-spacing: 0.02em;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.byline__meta {
min-width: 0;
}
.byline__name {
margin: 0;
font: 700 16px/1.2 var(--sans);
color: var(--ink);
}
.byline__title {
margin: 3px 0 0;
font: 600 12px/1.3 var(--sans);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--red-d);
}
.byline__bio {
margin: 8px 0 0;
font: 400 13.5px/1.5 var(--sans);
color: var(--ink-3);
}
.column__meta {
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
font: 500 13px/1.4 var(--sans);
color: var(--muted);
}
.column__meta-updated {
color: var(--red-d);
font-weight: 600;
}
.rule {
border: 0;
border-top: 1px solid var(--rule);
margin: 24px 0;
}
/* ---------- Body ---------- */
.column__body {
font-size: 18px;
line-height: 1.72;
color: var(--ink-2);
text-align: justify;
hyphens: auto;
}
.column__body p {
margin: 0 0 1.25em;
}
.column__body strong {
color: var(--ink);
}
.column__body em {
font-style: italic;
}
.lead::first-letter {
float: left;
font-family: var(--serif);
font-weight: 800;
font-size: 4.4em;
line-height: 0.74;
padding: 6px 12px 0 0;
color: var(--red);
}
.lead {
text-align: left;
}
/* ---------- Figures / press photos ---------- */
.figure {
margin: 28px 0;
}
.figure--inset {
float: right;
width: 46%;
margin: 8px 0 18px 28px;
}
.figure figcaption {
margin-top: 8px;
font: italic 500 13px/1.45 var(--serif);
color: var(--ink-3);
text-align: left;
}
.figure .credit {
display: block;
margin-top: 3px;
font: 600 10.5px/1.3 var(--sans);
font-style: normal;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
.press-photo {
width: 100%;
border-radius: var(--r-sm);
box-shadow: inset 0 0 0 1px var(--rule-2), inset 0 -40px 60px -30px rgba(0, 0, 0, 0.4);
position: relative;
}
.press-photo::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background-image: radial-gradient(rgba(22, 19, 15, 0.16) 1px, transparent 1.4px);
background-size: 4px 4px;
mix-blend-mode: multiply;
opacity: 0.5;
pointer-events: none;
}
.press-photo--street {
aspect-ratio: 16 / 9;
background:
radial-gradient(80% 60% at 50% 12%, rgba(244, 220, 200, 0.5), transparent 60%),
linear-gradient(180deg, #5a4634 0%, #6b5340 22%, #2c2620 60%, #14110d 100%),
linear-gradient(95deg, rgba(180, 41, 31, 0.18), transparent 40%);
}
.press-photo--portrait {
aspect-ratio: 4 / 5;
background:
radial-gradient(70% 55% at 42% 28%, rgba(243, 220, 217, 0.55), transparent 55%),
radial-gradient(120% 120% at 80% 100%, var(--red-d), transparent 58%),
linear-gradient(160deg, #463a2e 0%, #241d17 55%, #110e0a 100%);
}
/* ---------- Pull quotes ---------- */
.pullquote {
margin: 30px 0;
padding: 0 0 0 22px;
border-left: 3px solid var(--red);
font-family: var(--serif);
font-weight: 600;
font-style: italic;
font-size: clamp(22px, 3.4vw, 30px);
line-height: 1.28;
color: var(--ink);
text-align: left;
}
.pullquote--right {
border-left: 0;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
padding: 22px 0;
text-align: center;
color: var(--red-d);
}
/* ---------- Reactions ---------- */
.reactions {
margin: 30px 0 4px;
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.clap,
.share {
font: 600 14px/1 var(--sans);
cursor: pointer;
border-radius: var(--r-sm);
transition: transform 0.12s, background 0.15s, color 0.15s, border-color 0.15s;
}
.clap {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 11px 18px;
background: var(--ink);
color: var(--cream);
border: 1px solid var(--ink);
}
.clap:hover {
background: var(--red-d);
border-color: var(--red-d);
}
.clap:active {
transform: scale(0.96);
}
.clap.is-clapped {
background: var(--red);
border-color: var(--red);
}
.clap__icon {
font-size: 17px;
}
.clap__count {
padding-left: 10px;
margin-left: 2px;
border-left: 1px solid rgba(244, 239, 228, 0.3);
font-variant-numeric: tabular-nums;
}
.clap.is-bumped {
animation: bump 0.3s ease;
}
@keyframes bump {
40% { transform: scale(1.06); }
}
.share {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 16px;
background: var(--paper);
color: var(--ink-2);
border: 1px solid var(--rule-2);
}
.share:hover {
border-color: var(--ink);
color: var(--ink);
}
.share:active {
transform: scale(0.96);
}
.share--ghost {
background: transparent;
}
/* ---------- Editor's note ---------- */
.editors-note {
background: var(--newsprint);
border: 1px solid var(--rule);
border-radius: var(--r-md);
padding: 18px 20px;
}
.editors-note__label {
margin: 0 0 8px;
font: 700 11px/1 var(--sans);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--red);
}
.editors-note__body {
margin: 0;
font: italic 500 14.5px/1.6 var(--serif);
color: var(--ink-3);
}
/* ---------- Sidebar: more ---------- */
.more {
position: sticky;
top: 24px;
}
.more__title {
margin: 0 0 4px;
padding-bottom: 12px;
border-bottom: 2px solid var(--ink);
font-family: var(--serif);
font-weight: 700;
font-size: 21px;
line-height: 1.15;
color: var(--ink);
}
.more__list {
margin: 0;
padding: 0;
list-style: none;
counter-reset: more;
}
.more__list li {
border-bottom: 1px solid var(--rule-hair);
}
.more__list a {
display: grid;
gap: 4px;
padding: 14px 0;
text-decoration: none;
position: relative;
}
.more__list a:hover .more__hl {
color: var(--red-d);
}
.more__kicker {
font: 700 10.5px/1 var(--sans);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--red);
}
.more__hl {
font-family: var(--serif);
font-weight: 600;
font-size: 17px;
line-height: 1.22;
color: var(--ink);
transition: color 0.15s;
}
.more__date {
font: 500 12px/1 var(--sans);
color: var(--muted);
}
/* ---------- Newsletter ---------- */
.newsletter {
margin-top: 26px;
padding: 20px;
background: var(--ink);
color: var(--cream);
border-radius: var(--r-md);
}
.newsletter__title {
margin: 0;
font-family: var(--serif);
font-weight: 700;
font-size: 19px;
line-height: 1.2;
}
.newsletter__sub {
margin: 6px 0 14px;
font: 400 13px/1.45 var(--sans);
color: rgba(244, 239, 228, 0.7);
}
.newsletter__form {
display: flex;
gap: 8px;
}
.newsletter__form input {
flex: 1;
min-width: 0;
padding: 10px 12px;
border: 1px solid rgba(244, 239, 228, 0.25);
border-radius: var(--r-sm);
background: rgba(244, 239, 228, 0.06);
color: var(--cream);
font: 500 14px/1 var(--sans);
}
.newsletter__form input::placeholder {
color: rgba(244, 239, 228, 0.45);
}
.newsletter__form input:focus-visible {
outline-color: var(--red);
border-color: var(--red);
}
.newsletter__form button {
padding: 10px 16px;
border: 0;
border-radius: var(--r-sm);
background: var(--red);
color: var(--white);
font: 600 14px/1 var(--sans);
cursor: pointer;
transition: background 0.15s;
}
.newsletter__form button:hover {
background: var(--red-d);
}
/* ---------- Page foot ---------- */
.page-foot {
border-top: 1px solid var(--rule);
background: var(--paper);
text-align: center;
}
.page-foot p {
max-width: 1180px;
margin: 0 auto;
padding: 20px 24px;
font: 500 12px/1.5 var(--sans);
letter-spacing: 0.03em;
color: var(--muted);
}
/* ---------- Toast ---------- */
.toast {
position: fixed;
left: 50%;
bottom: 28px;
transform: translate(-50%, 24px);
background: var(--ink);
color: var(--cream);
padding: 12px 20px;
border-radius: var(--r-sm);
font: 600 14px/1 var(--sans);
box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s, transform 0.2s;
z-index: 60;
max-width: calc(100vw - 32px);
}
.toast.is-visible {
opacity: 1;
transform: translate(-50%, 0);
}
/* ---------- Responsive ---------- */
@media (max-width: 960px) {
.wrap {
grid-template-columns: minmax(0, 1fr);
gap: 44px;
}
.column {
max-width: 720px;
}
.more {
position: static;
max-width: 720px;
margin: 0 auto;
width: 100%;
}
}
@media (max-width: 720px) {
body {
font-size: 16px;
}
.column__body {
font-size: 17px;
text-align: left;
hyphens: manual;
}
.figure--inset {
float: none;
width: 100%;
margin: 24px 0;
}
.byline {
flex-direction: column;
}
}
@media (max-width: 400px) {
.masthead__inner {
padding: 16px 16px 12px;
}
.wrap {
padding: 28px 16px 40px;
}
.newsletter__form {
flex-direction: column;
}
.lead::first-letter {
font-size: 3.8em;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
}
}(function () {
"use strict";
/* ---------- Toast helper ---------- */
var toastEl = document.getElementById("toast");
var toastTimer = null;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("is-visible");
window.clearTimeout(toastTimer);
toastTimer = window.setTimeout(function () {
toastEl.classList.remove("is-visible");
}, 2600);
}
function formatCount(n) {
return n.toLocaleString("en-US");
}
/* ---------- Clap / recommend counter ---------- */
var clapBtn = document.getElementById("clapBtn");
var clapCount = document.getElementById("clapCount");
if (clapBtn && clapCount) {
var base = parseInt(clapCount.textContent.replace(/[^0-9]/g, ""), 10) || 0;
var added = 0;
var bumpTimer = null;
clapBtn.addEventListener("click", function () {
added += 1;
var total = base + added;
clapCount.textContent = formatCount(total);
clapBtn.classList.add("is-clapped");
clapBtn.classList.remove("is-bumped");
void clapBtn.offsetWidth; // restart animation
clapBtn.classList.add("is-bumped");
window.clearTimeout(bumpTimer);
bumpTimer = window.setTimeout(function () {
clapBtn.classList.remove("is-bumped");
}, 320);
var label = clapBtn.querySelector(".clap__label");
if (label) label.textContent = "Recommended";
if (added === 1) {
toast("Thanks — your recommendation was counted.");
} else {
toast("+" + added + " from you. The desk appreciates it.");
}
});
}
/* ---------- Share ---------- */
var shareBtn = document.getElementById("shareBtn");
var copyBtn = document.getElementById("copyBtn");
var shareData = {
title: "The Quiet Architecture of a City That Forgot to Look Up",
text: "Eleanor Hartwell on the unremarkable infrastructure of being together.",
url: (window.location && window.location.href) || "https://example.com/opinion"
};
function copyLink() {
var url = shareData.url;
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(url).then(
function () {
toast("Link copied to clipboard.");
},
function () {
fallbackCopy(url);
}
);
} else {
fallbackCopy(url);
}
}
function fallbackCopy(text) {
try {
var ta = document.createElement("textarea");
ta.value = text;
ta.setAttribute("readonly", "");
ta.style.position = "absolute";
ta.style.left = "-9999px";
document.body.appendChild(ta);
ta.select();
document.execCommand("copy");
document.body.removeChild(ta);
toast("Link copied to clipboard.");
} catch (e) {
toast("Copy this link: " + text);
}
}
if (shareBtn) {
shareBtn.addEventListener("click", function () {
if (navigator.share) {
navigator.share(shareData).then(
function () {
toast("Shared. Thank you for passing it on.");
},
function () {
/* user dismissed — stay quiet */
}
);
} else {
copyLink();
}
});
}
if (copyBtn) {
copyBtn.addEventListener("click", copyLink);
}
/* ---------- Newsletter signup ---------- */
var signup = document.getElementById("signup");
if (signup) {
signup.addEventListener("submit", function (e) {
e.preventDefault();
var input = signup.querySelector("input[type='email']");
var value = input ? input.value.trim() : "";
var valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
if (!valid) {
toast("Please enter a valid email address.");
if (input) input.focus();
return;
}
toast("You're on the list. The Commons arrives Thursdays.");
signup.reset();
});
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>The Meridian Review — Opinion</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;0,900;1,500;1,600;1,700&family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#column">Skip to article</a>
<header class="masthead" role="banner">
<div class="masthead__inner">
<p class="masthead__dateline">Thursday, June 4, 2026 · Weekend Edition · No. 4,118</p>
<p class="masthead__title">The Meridian Review</p>
<p class="masthead__tag">Independent Opinion & Argument Since 1971</p>
</div>
<nav class="subnav" aria-label="Sections">
<ul>
<li><a href="#column">Opinion</a></li>
<li><a href="#column">Editorial Board</a></li>
<li><a href="#column">Letters</a></li>
<li><a href="#more">Columnists</a></li>
<li class="subnav__cta"><a href="#column">Subscribe</a></li>
</ul>
</nav>
</header>
<main class="wrap">
<article class="column" id="column" aria-labelledby="headline">
<header class="column__head">
<p class="kicker">Opinion · The Commons</p>
<h1 class="headline" id="headline">
The Quiet Architecture of a City That Forgot to Look Up
</h1>
<p class="deck">
We poured a generation of ambition into towers of glass and rentable
air. What we never funded was the unremarkable infrastructure of simply
being together.
</p>
<div class="byline" role="group" aria-label="Author and article details">
<figure class="byline__portrait" aria-hidden="true">
<span class="byline__initials">EH</span>
</figure>
<div class="byline__meta">
<p class="byline__name">By Eleanor Hartwell</p>
<p class="byline__title">Columnist, Urban Life & Civic Affairs</p>
<p class="byline__bio">
Hartwell has written about cities, housing, and public space for
the Review for eleven years. She lives in the Old Foundry district.
</p>
</div>
</div>
<p class="column__meta">
<span>June 4, 2026</span>
<span aria-hidden="true">·</span>
<span>7 min read</span>
<span aria-hidden="true">·</span>
<span class="column__meta-updated">Updated 9:14 a.m.</span>
</p>
</header>
<hr class="rule" />
<div class="column__body">
<p class="lead">
There is a bench on Calder Street that nobody designed and everybody
uses. It is just a low granite ledge at the foot of an old bank, warmed
by the morning sun, and on any given Tuesday you will find a retired
machinist, two nurses between shifts, and a teenager waiting for a bus
that runs late. None of them planned to meet. The bench simply made it
easy. I have come to believe that the health of a city can be measured
by how many accidents like this it still permits.
</p>
<p>
For two decades our planning commissions have spoken a fluent and
confident language of growth. We approved the towers. We rezoned the
waterfront. We celebrated each ribbon-cutting as proof that the city
was, at last, becoming serious. And it was a kind of seriousness — the
seriousness of a balance sheet. But somewhere between the renderings and
the ribbon, we stopped funding the things that have no tenant and no
line item: the wide sidewalk, the shaded square, the library that stays
open past six, the corner where it is pleasant to stand and do nothing
in particular.
</p>
<figure class="figure figure--wide">
<div class="press-photo press-photo--street" role="img"
aria-label="A wide boulevard at dusk lined with glass towers, the street below empty of people."></div>
<figcaption>
The new Harbor Promenade at dusk: engineered for the photograph,
emptied by the hour.
<span class="credit">— Illustration, M. Okafor / The Review</span>
</figcaption>
</figure>
<p>
The economists will tell you, and they are not wrong, that none of this
appears in the figures we usually consult. A square where strangers
linger does not raise the assessed value of the parcel beneath it. A
generous sidewalk widens nothing on the ledger. So we built, instead,
for the metrics we could see — density, yield, throughput — and we
quietly assumed the rest would take care of itself. It did not. The
unremarkable infrastructure of being together is not a byproduct of
prosperity. It is a thing you choose, and pay for, and defend.
</p>
<blockquote class="pullquote">
A city is not the sum of its addresses. It is the sum of its
unplanned encounters — and those require somewhere to happen.
</blockquote>
<p>
Consider what we lost on the Cassin block. Twelve years ago it held a
hardware store, a laundromat, a stubborn diner, and a stretch of
pavement wide enough for a folding table. People knew one another there,
not as friends exactly, but as the familiar furniture of a daily life.
When the block was assembled and sold, the proposal promised
<em>activated ground-floor retail</em> — a phrase that should make any
honest person wince. What arrived was a lobby, a bank branch open
bankers' hours, and a faintly hostile arrangement of planters designed,
one suspects, to keep anyone from sitting too long.
</p>
<p>
I do not write this as nostalgia. The diner was not good. The laundromat
flooded. Nobody should romanticize a leaking pipe. The point is narrower
and more stubborn than nostalgia: those buildings, for all their flaws,
were <strong>permeable</strong>. You could enter them without a reason.
You could loiter without a purchase. They asked nothing of you but your
presence, and in return they offered the city's oldest and most
undervalued service — the company of people you did not choose.
</p>
<figure class="figure figure--inset">
<div class="press-photo press-photo--portrait" role="img"
aria-label="Duotone portrait of an older man seated on a stone ledge in morning light."></div>
<figcaption>
A regular on the Calder Street ledge, where no architect ever intended
a gathering place.
<span class="credit">— Illustration, R. Vance / The Review</span>
</figcaption>
</figure>
<p>
There is a cheaper fix here than the one we usually reach for, and that
is the trouble with it — cheap things are hard to announce. You cannot
hold a press conference for a bench. But a bench, a tree, a working
drinking fountain, a sidewalk wide enough for two strollers to pass: this
is the connective tissue of public life, and it costs a rounding error of
what we spend subsidizing the towers that look down on it. We have the
money. We have lacked, more precisely, the imagination to spend it on
anything we cannot photograph from a helicopter.
</p>
<blockquote class="pullquote pullquote--right">
You cannot hold a press conference for a bench. That, in the end,
is exactly why we keep failing to build them.
</blockquote>
<p>
So here is my modest, unfundable proposal. Before we approve the next
tower, let the commission walk the block at the hour when nothing is
scheduled — a Sunday, perhaps, in the soft middle of the afternoon. Let
them ask not what the parcel will yield, but what a tired person might do
there for free. If the honest answer is <em>nothing, and then leave</em>,
we have not built a piece of a city. We have built a very expensive place
to pass through on the way to somewhere that still remembers how.
</p>
<p>
The bench on Calder Street will outlast every rendering in the planning
office. Nobody designed it. Everybody uses it. We should be embarrassed
that, after twenty years and a skyline's worth of ambition, it remains
the best public space we have built — and prouder still to build the next
one on purpose.
</p>
</div>
<div class="reactions" role="group" aria-label="Reader reactions">
<button class="clap" id="clapBtn" type="button" aria-live="polite">
<span class="clap__icon" aria-hidden="true">❧</span>
<span class="clap__label">Recommend</span>
<span class="clap__count" id="clapCount">1,284</span>
</button>
<button class="share" id="shareBtn" type="button">
<span aria-hidden="true">↗</span> Share
</button>
<button class="share share--ghost" id="copyBtn" type="button">
<span aria-hidden="true">⎘</span> Copy link
</button>
</div>
<hr class="rule" />
<footer class="editors-note" aria-label="Editor's note">
<p class="editors-note__label">Editor's Note</p>
<p class="editors-note__body">
Eleanor Hartwell's column appears every Thursday. The views expressed are
her own and do not represent the position of the Editorial Board. A
version of this piece will run in Sunday's print edition under the
headline "The City We Forgot to Sit In." Letters in response may be sent
to the Commons desk and are edited for length and clarity.
</p>
</footer>
</article>
<aside class="more" id="more" aria-labelledby="more-title">
<h2 class="more__title" id="more-title">More from Eleanor Hartwell</h2>
<ol class="more__list">
<li>
<a href="#column">
<span class="more__kicker">Housing</span>
<span class="more__hl">The Math That Keeps Your Rent High Is Not a Law of Nature</span>
<span class="more__date">May 28, 2026</span>
</a>
</li>
<li>
<a href="#column">
<span class="more__kicker">Transit</span>
<span class="more__hl">A Bus That Comes Is Worth More Than a Train We Cannot Afford</span>
<span class="more__date">May 21, 2026</span>
</a>
</li>
<li>
<a href="#column">
<span class="more__kicker">The Commons</span>
<span class="more__hl">Who Owns the Sidewalk? On the Slow Privatization of Standing Still</span>
<span class="more__date">May 14, 2026</span>
</a>
</li>
<li>
<a href="#column">
<span class="more__kicker">Civic Affairs</span>
<span class="more__hl">In Praise of the Boring Meeting, Where Cities Are Actually Decided</span>
<span class="more__date">May 7, 2026</span>
</a>
</li>
</ol>
<div class="newsletter">
<p class="newsletter__title">The Commons, in your inbox</p>
<p class="newsletter__sub">Hartwell's weekly column, plus one thing worth arguing about.</p>
<form class="newsletter__form" id="signup" novalidate>
<label class="sr-only" for="email">Email address</label>
<input id="email" name="email" type="email" placeholder="[email protected]" autocomplete="email" required />
<button type="submit">Subscribe</button>
</form>
</div>
</aside>
</main>
<footer class="page-foot">
<p>The Meridian Review · Opinion Desk · A fictional publication for demonstration only.</p>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Opinion / Editorial Column
A complete single-author opinion page in the tradition of a serious print broadsheet. A double-rule masthead and uppercase section nav sit above a red OPINION kicker, a Playfair Display headline, and an italic deck. A columnist byline card pairs a CSS-gradient portrait with the writer’s name, beat, and a short bio, followed by a dateline and read-time meta line.
The article itself is a single justified reading column with a red drop cap on the lead paragraph, hairline rules between sections, two captioned “press photo” figures rendered entirely from layered CSS gradients with halftone texture, and two oversized serif pull quotes. An editor’s note closes the piece, and a sticky sidebar lists more columns from the same writer plus a newsletter sign-up.
Interactions are vanilla JS: a clap/recommend button increments a tabular-numbered counter with a little bump animation, a share button uses the Web Share API with a clipboard copy-link fallback, the newsletter form validates the email, and every action surfaces through a small reusable toast() helper. The layout collapses from two columns to one under 720px and stays readable down to 360px.
Illustrative UI only — masthead, headlines, bylines, and articles are fictional; not a real news publication.