228 lines
12 KiB
HTML
228 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Kontra — The Quiet Reshaping of the Southern Harbor</title>
|
|
<link href="https://fonts.googleapis.com" rel="preconnect">
|
|
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,300;0,7..72,400;0,7..72,500;0,7..72,600;1,7..72,400&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400&family=Work+Sans:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/kontra.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ================= MASTHEAD ================= -->
|
|
<header class="masthead">
|
|
<div class="container">
|
|
|
|
<div class="meta-line">
|
|
<span>Wednesday, 24 Sep • Vol. I</span>
|
|
<span class="edition">Morning Edition</span>
|
|
</div>
|
|
|
|
<div class="brand-row">
|
|
<div aria-hidden="true"></div>
|
|
<div class="brand">
|
|
<a href="index.html" class="display-masthead">Kontra</a>
|
|
</div>
|
|
<div class="brand-tools">
|
|
<a href="#" aria-label="Search archive"><span class="material-symbols-outlined" style="font-size:22px;">search</span></a>
|
|
<a href="#" class="brand-avatar" aria-label="Account">S</a>
|
|
</div>
|
|
</div>
|
|
|
|
<nav aria-label="Sections" class="ribbon">
|
|
<div class="nav-item"><a href="index.html">Front Page</a></div>
|
|
<div class="nav-item active">
|
|
<a href="#world">World</a>
|
|
<div class="nav-drop">
|
|
<a class="drop-item" href="#world"><span class="drop-kicker">World • Lead</span><span class="drop-title">The Quiet Reshaping of the Southern Harbor</span></a>
|
|
<a class="drop-item" href="#world"><span class="drop-kicker">North Sea</span><span class="drop-title">Forty Nights in High Solitude on the Fastnet Rock</span></a>
|
|
<a class="drop-item" href="#world"><span class="drop-kicker">World</span><span class="drop-title">The River Border Nobody Can Agree Where It Is</span></a>
|
|
<a class="drop-all" href="#world">All World →</a>
|
|
</div>
|
|
</div>
|
|
<div class="nav-item">
|
|
<a href="#politics">Politics</a>
|
|
<div class="nav-drop">
|
|
<a class="drop-item" href="#politics"><span class="drop-kicker">Politics</span><span class="drop-title">The Two-Party Primary That Never Had a Crowd</span></a>
|
|
<a class="drop-item" href="#politics"><span class="drop-kicker">Analysis</span><span class="drop-title">How Voter Lists Rose While Enthusiasm Fell</span></a>
|
|
<a class="drop-all" href="#politics">All Politics →</a>
|
|
</div>
|
|
</div>
|
|
<div class="nav-item">
|
|
<a href="#culture">Culture</a>
|
|
<div class="nav-drop">
|
|
<a class="drop-item" href="#culture"><span class="drop-kicker">Books</span><span class="drop-title">A Micro-Press Keeps the Long Essay Alive at 16 Pages</span></a>
|
|
<a class="drop-item" href="#culture"><span class="drop-kicker">Photography</span><span class="drop-title">Notes from a Darkroom That Still Develops Film</span></a>
|
|
<a class="drop-all" href="#culture">All Culture →</a>
|
|
</div>
|
|
</div>
|
|
<div class="nav-item">
|
|
<a href="#opinion">Opinion</a>
|
|
<div class="nav-drop">
|
|
<a class="drop-item" href="#opinion"><span class="drop-kicker">Opinion</span><span class="drop-title">Why I'm Done Arguing About the Font</span></a>
|
|
<a class="drop-all" href="#opinion">All Opinion →</a>
|
|
</div>
|
|
</div>
|
|
<div class="nav-item accent">
|
|
<a href="#tech">Tech</a>
|
|
<div class="nav-drop">
|
|
<a class="drop-item" href="#tech"><span class="drop-kicker">Tech</span><span class="drop-title">The Local AI Box That Runs Entirely on a Tennis Ball</span></a>
|
|
<a class="drop-item" href="#tech"><span class="drop-kicker">Tech</span><span class="drop-title">What a 1972 Field Radio Teaches Us About New Data Stacks</span></a>
|
|
<a class="drop-all" href="#tech">All Tech →</a>
|
|
</div>
|
|
</div>
|
|
<div class="nav-item">
|
|
<a href="#business">Business</a>
|
|
<div class="nav-drop">
|
|
<a class="drop-item" href="#business"><span class="drop-kicker">Business</span><span class="drop-title">The Corner Bank That Trades in Hours, Not Percent</span></a>
|
|
<a class="drop-all" href="#business">All Business →</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container">
|
|
|
|
<article class="content-column">
|
|
|
|
<!-- Article header -->
|
|
<header class="article-header">
|
|
<div class="kicker">World Dispatch • Southern Port Desk</div>
|
|
<h1>The Quiet Reshaping of the Southern Harbor: How Old Wharves Found New Hands</h1>
|
|
<div class="deck">After decades of decline, the docklands cooperative is being rebuilt from the waterline up — and the tide of labour is turning with it.</div>
|
|
<div class="meta"><strong>By M. Kestrel</strong> · Harbor Desk · Saint-Malo Port, Brittany · 6 min read</div>
|
|
</header>
|
|
|
|
<!-- Hero plate -->
|
|
<figure class="plate" style="margin:24px 0 8px;">
|
|
<img src="https://picsum.photos/seed/harbor2/1600/900" alt="Fog over the harbour at dawn" style="max-height:72vh;">
|
|
<figcaption class="body-sm" style="padding:12px 16px;color:var(--ink-muted);display:flex;justify-content:space-between;gap:12px;">
|
|
<span><span class="label-caps" style="color:var(--ink);">Fig. 1</span> Morning trawlers returning to the basin under heavy October fog.</span>
|
|
<span class="label-meta" style="color:var(--ink-faint);white-space:nowrap;">Plate No. 12-A • M. Kestrel / Kontra</span>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<!-- Body -->
|
|
<div class="body-lead" style="color:var(--ink);">
|
|
<p>Before the lighthouse beam cuts clean through the channel mist, the smell of damp pine and brine settles into the stones. For three centuries, the tidal basin has kept the same tempo: boats lurching over black water with diesel thrums, their gunwales caked in white rime, unloading timber and cold silver mackerel while the town above still sleeps behind shuttered granite facades.</p>
|
|
</div>
|
|
|
|
<div class="body-md" style="color:var(--ink-muted);">
|
|
<p>Yet the men and women working these slips are acutely aware of the narrowing wake behind them. Modern mechanized refrigeration terminals forty leagues south have hollowed out the regional cooperative. Here, where hand-mended nets dry on weathered oak bollards and weights are tallied in battered tin notebooks, maritime trade remains tactile, punishing, and inextricably tied to the low spring tides.</p>
|
|
|
|
<p>Sitting in the coop office on a Tuesday, the new harbour-mistress, Elena Voss, lays three charts flat: one of the old auction floor, one of the cold store, and one of a ten-year forecast showing the pier's fresh tenants — a rope-maker, a sail loft, a small brewery that ages stout in seawater — none of them fishing. "We stopped pretending the town could live on the herring alone," she says. "The question was whether the harbour itself could live."</p>
|
|
</div>
|
|
|
|
<!-- Pull quote -->
|
|
<aside class="pullquote" style="margin:32px 0;">
|
|
<span class="mark">“</span>
|
|
<blockquote class="quote-display" style="color:var(--ink);margin:0;">The ocean takes everything you give it and asks for another hour. If the tide leaves you high, you scrape hulls; if it surges, you pray the knots hold.</blockquote>
|
|
<cite class="label-meta hairline-t" style="color:var(--accent);display:block;padding-top:8px;margin-top:8px;">— Marcel Gouëlou, 42 years shipwright & seine netting foreman</cite>
|
|
</aside>
|
|
|
|
<div class="body-md" style="color:var(--ink-muted);">
|
|
<p>By noon, the diesel fumes thin out, replaced by steam whistling from the fishermen's canteen on Rue des Cordiers. Copper pots boil potatoes alongside salted hake. Here, the talk shifts from tonnage to fuel subsidies, offshore regulations, and the young people who prefer train commutes to the city over seventy-hour sea weeks.</p>
|
|
<p>Still, as evening pulls the waters outward into the English Channel, the moorings creak in unison. The old fleet may be diminishing in number, but those remaining harbour stones bear the polish of generations who knew how to listen to the tide long before the radar could tell them what was coming.</p>
|
|
</div>
|
|
|
|
<!-- Field notes -->
|
|
<section class="field-notes">
|
|
<div class="fn-head">
|
|
<span class="l">Field Notes & Plate Studies</span>
|
|
<span class="r">2 of 8 Archival Exposures</span>
|
|
</div>
|
|
<div class="fn-grid">
|
|
<figure class="gridplate">
|
|
<img src="https://picsum.photos/seed/harbor3/900/600" alt="Net menders on the pier">
|
|
<figcaption><span class="cap-kicker">Fig. 2 • Netting Repair Slip</span><br>Seine menders splicing weathered nylon cord at low ebb.</figcaption>
|
|
</figure>
|
|
<figure class="gridplate">
|
|
<img src="https://picsum.photos/seed/harbor4/900/600" alt="Calloused hands splicing rope">
|
|
<figcaption><span class="cap-kicker">Fig. 3 • The Weaver's Knot</span><br>Hands of Émile Laurent, 68. A three-strand tuck unchanged since the 1890s.</figcaption>
|
|
</figure>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Save -->
|
|
<div class="save-module">
|
|
<div class="l">
|
|
<div class="t">Dispatch Status</div>
|
|
<div class="s">Filed from Southern Harbor Wharf</div>
|
|
</div>
|
|
<button class="btn-primary" type="button">Save Story</button>
|
|
</div>
|
|
|
|
</article>
|
|
|
|
<!-- Related + newsletter -->
|
|
<section class="related">
|
|
<div class="container">
|
|
<div class="r-head">
|
|
<span class="l">Related Dispatches</span>
|
|
<span class="r">From the Field Archives</span>
|
|
</div>
|
|
|
|
<div style="margin-top:16px;">
|
|
<a href="article.html" class="feed-row">
|
|
<span class="f-kicker">North Sea • Dispatches</span>
|
|
<span class="f-head">The Keepers of the Fastnet Rock: Forty Nights in High Solitude</span>
|
|
<span class="f-meta">By Henri Laurent • 8 min read</span>
|
|
</a>
|
|
<a href="article.html" class="feed-row">
|
|
<span class="f-kicker">Commerce • Longform</span>
|
|
<span class="f-head">The Wooden Slate: How Daily Port Bidding Resists the Algorithm</span>
|
|
<span class="f-meta">By Sophie Varenne • 6 min read</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="newsletter-card">
|
|
<span class="t">The Kontra Registry</span>
|
|
<p>Sunday editions, curated by our roaming field correspondents. Delivered straight to your reader feed.</p>
|
|
<form>
|
|
<input class="field" type="email" placeholder="reader@kontra.day" required>
|
|
<button class="btn-primary" type="submit">Subscribe</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<!-- ================= MOBILE BOTTOM NAV ================= -->
|
|
<nav class="bottom-nav" aria-label="Mobile navigation">
|
|
<div class="bottom-nav-inner">
|
|
<a class="bn-item" href="index.html"><span class="material-symbols-outlined ic">newspaper</span><span>Edition</span></a>
|
|
<details class="bn-sections">
|
|
<summary><span class="material-symbols-outlined ic">segment</span><span>Sections</span></summary>
|
|
<div class="sections-drawer">
|
|
<a href="index.html">Front Page</a>
|
|
<a href="article.html">World</a>
|
|
<a href="article.html">Politics</a>
|
|
<a href="article.html">Culture</a>
|
|
<a href="article.html">Opinion</a>
|
|
<a href="article.html">Tech</a>
|
|
<a href="article.html">Business</a>
|
|
<a href="index.html" class="dr-all">All Sections</a>
|
|
</div>
|
|
</details>
|
|
<a class="bn-item active" href="article.html"><span class="material-symbols-outlined ic">format_size</span><span>Reader</span></a>
|
|
<a class="bn-item" href="article.html"><span class="material-symbols-outlined ic">bookmark_border</span><span>Saved</span></a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- ================= FOOTER ================= -->
|
|
<footer class="site-footer">
|
|
<div class="container">
|
|
<div class="t">Kontra</div>
|
|
<div class="tag">A daily broadsheet for the wide world. Independent • Printed in your browser.</div>
|
|
<div class="copy">© 2026 Kontra</div>
|
|
</div>
|
|
</footer>
|
|
|
|
</body>
|
|
</html> |