Pages Medium
Science — Popular-Science Article
A friendly, credible popular-science explainer page about deep-ocean mixing, built as a self-contained static demo. It pairs a serif reading column with a sticky glossary card, an animated SVG lead figure, an interactive CSS how-it-works stepper, a pull quote, a LaTeX-style equation block, save and share chips, a sepia reading mode, a live reading-progress bar, and a related-articles footer grid.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--bg: #ffffff;
--bg-alt: #f6f8fb;
--ink: #0f1b2d;
--ink-2: #33445c;
--muted: #697892;
--accent: #1a4f8a;
--accent-d: #123a66;
--accent-50: #e9f0f9;
--teal: #0f7d78;
--teal-50: #e4f3f1;
--line: rgba(15, 27, 45, 0.12);
--line-2: rgba(15, 27, 45, 0.2);
--ok: #2f9e6f;
--warn: #c9821f;
--danger: #cf4538;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 16px;
--shadow-sm: 0 1px 2px rgba(15, 27, 45, 0.06), 0 1px 3px rgba(15, 27, 45, 0.08);
--shadow-md: 0 6px 24px rgba(15, 27, 45, 0.1);
--serif: "Source Serif 4", Georgia, serif;
--sans: "Inter", system-ui, sans-serif;
--mono: "JetBrains Mono", ui-monospace, monospace;
}
:root[data-theme="sepia"] {
--bg: #f7f1e6;
--bg-alt: #efe6d4;
--ink: #2a2116;
--ink-2: #4d4231;
--muted: #7a6e57;
--accent: #9a5b22;
--accent-d: #76411466;
--accent-50: #f1e4d2;
--line: rgba(42, 33, 22, 0.14);
--line-2: rgba(42, 33, 22, 0.24);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--serif);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background 0.3s ease, color 0.3s ease;
}
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.skip-link {
position: absolute;
left: -999px;
top: 0;
background: var(--accent);
color: #fff;
padding: 10px 16px;
border-radius: var(--r-sm);
font-family: var(--sans);
z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 3px;
}
/* ---- Site bar ---- */
.site-bar {
position: sticky;
top: 0;
z-index: 30;
background: color-mix(in srgb, var(--bg) 88%, transparent);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
}
.site-bar__inner {
display: flex;
align-items: center;
gap: 20px;
height: 60px;
}
.brand {
display: flex;
align-items: baseline;
gap: 8px;
text-decoration: none;
color: var(--ink);
font-family: var(--sans);
}
.brand__mark { color: var(--accent); font-size: 22px; transform: translateY(2px); }
.brand__name { font-weight: 700; letter-spacing: 0.14em; font-size: 18px; }
.brand__tag { font-size: 11px; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; }
.site-nav {
display: flex;
gap: 22px;
margin-left: auto;
font-family: var(--sans);
font-size: 14px;
font-weight: 500;
}
.site-nav a { color: var(--ink-2); text-decoration: none; position: relative; padding: 4px 0; }
.site-nav a::after {
content: "";
position: absolute; left: 0; bottom: -2px;
width: 0; height: 2px; background: var(--accent);
transition: width 0.2s ease;
}
.site-nav a:hover { color: var(--accent); }
.site-nav a:hover::after { width: 100%; }
.theme-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
border: 1px solid var(--line-2);
background: var(--bg);
color: var(--ink-2);
border-radius: 999px;
padding: 6px 12px;
cursor: pointer;
transition: all 0.15s ease;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle__icon { color: var(--accent); }
/* ---- Reading progress ---- */
.progress {
position: sticky;
top: 60px;
z-index: 25;
height: 3px;
background: transparent;
}
.progress__bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--accent), var(--teal));
transition: width 0.1s linear;
}
/* ---- Layout ---- */
main.wrap {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 48px;
align-items: start;
padding-top: 40px;
padding-bottom: 64px;
}
/* ---- Hero ---- */
.kicker {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--sans);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--teal);
margin: 0 0 16px;
}
.kicker__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px var(--teal-50); }
.headline {
font-family: var(--serif);
font-weight: 700;
font-size: clamp(2rem, 5vw, 3.1rem);
line-height: 1.08;
letter-spacing: -0.01em;
margin: 0 0 16px;
}
.dek {
font-size: clamp(1.1rem, 2.4vw, 1.4rem);
color: var(--ink-2);
line-height: 1.45;
max-width: 38ch;
margin: 0 0 28px;
}
.byline {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
flex-wrap: wrap;
}
.byline__avatar {
width: 44px; height: 44px;
border-radius: 50%;
display: grid; place-items: center;
background: var(--accent);
color: #fff;
font-family: var(--sans);
font-weight: 700;
font-size: 14px;
flex-shrink: 0;
}
.byline__meta { font-family: var(--sans); }
.byline__name { margin: 0; font-size: 14px; color: var(--ink); }
.byline__sub { margin: 2px 0 0; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.byline__sub .dot { color: var(--line-2); }
.readtime { font-family: var(--mono); font-size: 12px; }
.byline__actions { display: flex; gap: 8px; margin-left: auto; }
.chip {
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
border: 1px solid var(--line-2);
background: var(--bg);
color: var(--ink-2);
border-radius: 999px;
padding: 7px 14px;
cursor: pointer;
transition: all 0.15s ease;
}
.chip:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.chip:active { transform: translateY(0); }
.chip[aria-pressed="true"] { background: var(--accent-50); border-color: var(--accent); color: var(--accent-d); }
/* ---- Lead figure ---- */
.lead-figure { margin: 32px 0 8px; }
.lead-figure__img {
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
aspect-ratio: 40 / 21;
}
.lead-figure__img svg { display: block; width: 100%; height: 100%; }
.plumes path { stroke-dasharray: 6 8; animation: drift 9s linear infinite; }
@keyframes drift { to { stroke-dashoffset: -56; } }
@media (prefers-reduced-motion: reduce) { .plumes path { animation: none; } }
figcaption {
font-family: var(--sans);
font-size: 13px;
color: var(--muted);
line-height: 1.5;
margin-top: 10px;
padding-left: 2px;
}
figcaption strong { color: var(--ink-2); }
.credit { display: block; font-style: italic; opacity: 0.85; margin-top: 2px; }
/* ---- Prose ---- */
.prose { font-size: 1.18rem; max-width: 64ch; }
.prose p { margin: 0 0 1.3em; color: var(--ink); }
.prose .lede { font-size: 1.3rem; }
.prose .lede::first-letter {
float: left;
font-weight: 700;
font-size: 3.4em;
line-height: 0.78;
padding: 6px 10px 0 0;
color: var(--accent);
}
.prose h2 {
font-family: var(--serif);
font-weight: 700;
font-size: 1.6rem;
margin: 2em 0 0.6em;
letter-spacing: -0.01em;
}
.prose em { color: var(--ink-2); }
.num { font-family: var(--mono); font-size: 0.92em; color: var(--accent-d); background: var(--accent-50); padding: 1px 6px; border-radius: var(--r-sm); white-space: nowrap; }
.pullquote {
margin: 1.8em 0;
padding: 4px 0 4px 24px;
border-left: 4px solid var(--teal);
}
.pullquote p {
font-size: 1.5rem;
font-weight: 600;
line-height: 1.3;
color: var(--ink);
margin: 0 0 0.4em;
}
.pullquote cite { font-family: var(--sans); font-size: 0.85rem; font-style: normal; color: var(--muted); }
.endmark { text-align: center; color: var(--accent); font-size: 1.6rem; margin: 1.6em 0 0; }
/* ---- Stepper ---- */
.stepper {
list-style: none;
margin: 1.6em 0 1em;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
counter-reset: none;
}
.step {
display: flex;
gap: 12px;
padding: 16px;
border: 1px solid var(--line);
border-radius: var(--r-md);
background: var(--bg-alt);
transition: all 0.2s ease;
position: relative;
cursor: pointer;
}
.step:hover { border-color: var(--line-2); }
.step.is-active {
border-color: var(--accent);
background: var(--accent-50);
box-shadow: var(--shadow-sm);
}
.step__num {
width: 30px; height: 30px;
flex-shrink: 0;
border-radius: 50%;
display: grid; place-items: center;
font-family: var(--mono);
font-weight: 500;
font-size: 14px;
background: var(--bg);
color: var(--muted);
border: 1px solid var(--line-2);
transition: all 0.2s ease;
}
.step.is-active .step__num { background: var(--accent); color: #fff; border-color: var(--accent); }
.step__title { font-family: var(--sans); font-size: 0.95rem; font-weight: 600; margin: 2px 0 4px; color: var(--ink); }
.step__body p { font-family: var(--sans); font-size: 0.85rem; line-height: 1.45; color: var(--ink-2); margin: 0; }
.stepper__controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 1.4em;
}
.stepper__count { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.btn {
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
border: 1px solid var(--accent);
background: var(--accent);
color: #fff;
border-radius: var(--r-sm);
padding: 9px 16px;
cursor: pointer;
transition: all 0.15s ease;
}
.btn:hover { background: var(--accent-d); border-color: var(--accent-d); }
.btn--ghost { background: transparent; color: var(--accent); }
.btn--ghost:hover { background: var(--accent-50); color: var(--accent-d); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* ---- Equation ---- */
.eqn { margin: 1.8em 0; }
.eqn__body {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 22px 56px 22px 24px;
background: var(--bg-alt);
border: 1px solid var(--line);
border-radius: var(--r-md);
}
.eqn__expr { font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--ink); }
.eqn__expr i { font-style: italic; }
.eqn__expr sub, .eqn__expr sup { font-family: var(--mono); font-style: normal; font-size: 0.62em; }
.eqn__expr .paren { font-style: normal; }
.eqn__num { position: absolute; right: 20px; font-family: var(--mono); font-style: normal; color: var(--muted); font-size: 0.95rem; }
/* ---- Sidebar / glossary ---- */
.sidebar { position: sticky; top: 88px; }
.card {
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.glossary__head {
padding: 18px 20px;
background: linear-gradient(135deg, var(--accent), var(--accent-d));
color: #fff;
}
.glossary__head h2 { font-family: var(--sans); font-size: 1.1rem; margin: 0 0 4px; }
.glossary__head p { font-family: var(--sans); font-size: 0.82rem; margin: 0; color: rgba(255,255,255,0.82); }
.glossary__list { margin: 0; padding: 8px 10px; }
.term { border-bottom: 1px solid var(--line); }
.term:last-child { border-bottom: none; }
.term__btn {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
background: none;
border: none;
font-family: var(--sans);
font-weight: 600;
font-size: 0.95rem;
color: var(--ink);
padding: 12px 8px;
cursor: pointer;
text-align: left;
}
.term__btn:hover { color: var(--accent); }
.term__chev { color: var(--accent); transition: transform 0.2s ease; font-size: 0.85em; }
.term__btn[aria-expanded="true"] .term__chev { transform: rotate(90deg); }
.term__def {
margin: 0;
font-family: var(--sans);
font-size: 0.88rem;
line-height: 1.5;
color: var(--ink-2);
max-height: 0;
overflow: hidden;
padding: 0 8px;
transition: max-height 0.25s ease, padding 0.25s ease;
}
.term__def.is-open { max-height: 220px; padding: 0 8px 14px; }
.glossary__stat {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
background: var(--teal-50);
border-top: 1px solid var(--line);
}
.glossary__stat .num { font-size: 1.6rem; font-weight: 700; background: none; color: var(--teal); padding: 0; }
.glossary__stat span:last-child { font-family: var(--sans); font-size: 0.82rem; color: var(--ink-2); line-height: 1.4; }
/* ---- Related ---- */
.related-wrap { border-top: 1px solid var(--line); background: var(--bg-alt); padding: 48px 0 64px; }
.related-head { font-family: var(--sans); font-size: 1.4rem; margin: 0 0 24px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rel-card {
display: block;
text-decoration: none;
color: var(--ink);
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 20px;
transition: all 0.18s ease;
}
.rel-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.rel-card__tag {
display: inline-block;
font-family: var(--sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--teal);
margin-bottom: 8px;
}
.rel-card h3 { font-family: var(--serif); font-size: 1.18rem; margin: 0 0 8px; line-height: 1.25; }
.rel-card p { font-family: var(--sans); font-size: 0.88rem; color: var(--ink-2); margin: 0 0 12px; line-height: 1.45; }
.rel-card__meta { font-family: var(--mono); font-size: 12px; color: var(--muted); }
/* ---- Toast ---- */
.toast {
position: fixed;
left: 50%;
bottom: 24px;
transform: translate(-50%, 16px);
background: var(--ink);
color: #fff;
font-family: var(--sans);
font-size: 14px;
padding: 11px 18px;
border-radius: var(--r-sm);
box-shadow: var(--shadow-md);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 60;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
/* ---- Responsive ---- */
@media (max-width: 900px) {
main.wrap { grid-template-columns: 1fr; gap: 32px; }
.sidebar { position: static; }
.related-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.wrap { padding: 0 16px; }
.site-nav { display: none; }
.theme-toggle__label { display: none; }
main.wrap { padding-top: 28px; }
.prose { font-size: 1.08rem; }
.stepper { grid-template-columns: 1fr; }
.pullquote p { font-size: 1.25rem; }
.eqn__expr { font-size: 1.05rem; }
.byline__actions { margin-left: 0; width: 100%; }
.eqn__body { overflow-x: auto; }
}(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-on");
window.clearTimeout(toastTimer);
toastTimer = window.setTimeout(function () {
toastEl.classList.remove("is-on");
}, 2200);
}
/* ---------- Estimated read time ---------- */
(function readTime() {
var prose = document.getElementById("prose");
var out = document.getElementById("readTime");
if (!prose || !out) return;
var words = (prose.innerText.trim().match(/\S+/g) || []).length;
var mins = Math.max(1, Math.round(words / 220));
out.textContent = mins + " min read";
})();
/* ---------- Reading progress bar ---------- */
(function progress() {
var bar = document.getElementById("progressBar");
var track = bar ? bar.parentElement : null;
if (!bar) return;
var raf = false;
function update() {
raf = false;
var doc = document.documentElement;
var scrollable = doc.scrollHeight - doc.clientHeight;
var pct = scrollable > 0 ? (window.scrollY / scrollable) * 100 : 0;
pct = Math.min(100, Math.max(0, pct));
bar.style.width = pct.toFixed(1) + "%";
if (track) track.setAttribute("aria-valuenow", Math.round(pct));
}
window.addEventListener("scroll", function () {
if (!raf) { raf = true; window.requestAnimationFrame(update); }
}, { passive: true });
window.addEventListener("resize", update);
update();
})();
/* ---------- Theme (sepia) toggle ---------- */
(function theme() {
var btn = document.getElementById("themeToggle");
if (!btn) return;
var label = btn.querySelector(".theme-toggle__label");
btn.addEventListener("click", function () {
var on = document.documentElement.getAttribute("data-theme") === "sepia";
if (on) {
document.documentElement.removeAttribute("data-theme");
btn.setAttribute("aria-pressed", "false");
if (label) label.textContent = "Sepia";
toast("Daylight reading mode");
} else {
document.documentElement.setAttribute("data-theme", "sepia");
btn.setAttribute("aria-pressed", "true");
if (label) label.textContent = "Daylight";
toast("Sepia reading mode");
}
});
})();
/* ---------- Save / Share chips ---------- */
(function actions() {
var save = document.getElementById("btnSave");
if (save) {
save.addEventListener("click", function () {
var on = save.getAttribute("aria-pressed") === "true";
save.setAttribute("aria-pressed", on ? "false" : "true");
save.innerHTML = on
? '<span aria-hidden="true">☆</span> Save'
: '<span aria-hidden="true">★</span> Saved';
toast(on ? "Removed from your reading list" : "Saved to your reading list");
});
}
var share = document.getElementById("btnShare");
if (share) {
share.addEventListener("click", function () {
var data = { title: document.title, text: "The Quiet Engines That Stir the Deep Sea", url: location.href };
if (navigator.share) {
navigator.share(data).then(function () { toast("Shared"); }).catch(function () {});
} else if (navigator.clipboard) {
navigator.clipboard.writeText(location.href).then(function () { toast("Link copied to clipboard"); }).catch(function () { toast("Could not copy link"); });
} else {
toast("Sharing not supported here");
}
});
}
})();
/* ---------- "How it works" stepper ---------- */
(function stepper() {
var root = document.getElementById("stepper");
if (!root) return;
var steps = Array.prototype.slice.call(root.querySelectorAll(".step"));
var prev = document.getElementById("stepPrev");
var next = document.getElementById("stepNext");
var count = document.getElementById("stepCount");
var idx = 0;
function render() {
steps.forEach(function (s, i) { s.classList.toggle("is-active", i === idx); });
if (count) count.textContent = "Step " + (idx + 1) + " of " + steps.length;
if (prev) prev.disabled = idx === 0;
if (next) next.textContent = idx === steps.length - 1 ? "Start over" : "Next step ›";
}
function go(i) {
idx = (i + steps.length) % steps.length;
render();
}
steps.forEach(function (s, i) {
s.setAttribute("tabindex", "0");
s.setAttribute("role", "button");
s.addEventListener("click", function () { go(i); });
s.addEventListener("keydown", function (e) {
if (e.key === "Enter" || e.key === " ") { e.preventDefault(); go(i); }
});
});
if (prev) prev.addEventListener("click", function () { go(idx - 1); });
if (next) next.addEventListener("click", function () { go(idx + 1); });
render();
})();
/* ---------- Glossary accordion ---------- */
(function glossary() {
var list = document.getElementById("glossary");
if (!list) return;
var btns = Array.prototype.slice.call(list.querySelectorAll(".term__btn"));
btns.forEach(function (btn) {
var def = btn.parentElement.parentElement.querySelector(".term__def");
btn.addEventListener("click", function () {
var open = btn.getAttribute("aria-expanded") === "true";
btn.setAttribute("aria-expanded", open ? "false" : "true");
if (def) def.classList.toggle("is-open", !open);
});
});
})();
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>The Quiet Engines of the Deep — Quanta Explainer</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=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#main">Skip to article</a>
<header class="site-bar">
<div class="wrap site-bar__inner">
<a class="brand" href="#main" aria-label="Strata — popular science">
<span class="brand__mark" aria-hidden="true">◐</span>
<span class="brand__name">STRATA</span>
<span class="brand__tag">popular science</span>
</a>
<nav class="site-nav" aria-label="Sections">
<a href="#main">Oceans</a>
<a href="#main">Climate</a>
<a href="#main">Physics</a>
<a href="#main">Life</a>
</nav>
<button class="theme-toggle" id="themeToggle" type="button" aria-pressed="false">
<span class="theme-toggle__icon" aria-hidden="true">◑</span>
<span class="theme-toggle__label">Sepia</span>
</button>
</div>
</header>
<!-- Reading progress -->
<div class="progress" role="progressbar" aria-label="Reading progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
<div class="progress__bar" id="progressBar"></div>
</div>
<main id="main" class="wrap">
<article class="article">
<header class="hero">
<p class="kicker"><span class="kicker__dot" aria-hidden="true"></span>Ocean Science · Deep Currents</p>
<h1 class="headline">The Quiet Engines That Stir the Deep Sea</h1>
<p class="dek">A faint, almost undetectable churning along the seafloor moves more water than every river on Earth combined. Scientists are finally learning how it works — and why it matters for the climate above.</p>
<div class="byline">
<div class="byline__avatar" aria-hidden="true">MR</div>
<div class="byline__meta">
<p class="byline__name">By <strong>Dr. Mara Renner</strong> · Science writer</p>
<p class="byline__sub">
<time datetime="2026-06-15">June 15, 2026</time>
<span class="dot" aria-hidden="true">·</span>
<span id="readTime" class="readtime">9 min read</span>
</p>
</div>
<div class="byline__actions">
<button class="chip" id="btnSave" type="button" aria-pressed="false">
<span aria-hidden="true">☆</span> Save
</button>
<button class="chip" id="btnShare" type="button">
<span aria-hidden="true">↗</span> Share
</button>
</div>
</div>
</header>
<figure class="lead-figure">
<div class="lead-figure__img" role="img" aria-label="Illustration of deep-ocean mixing: dark water layers stirred by upward plumes near a rugged seafloor ridge.">
<svg viewBox="0 0 800 420" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<defs>
<linearGradient id="seaGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#1f6fae" />
<stop offset="0.5" stop-color="#14507e" />
<stop offset="1" stop-color="#0b2c46" />
</linearGradient>
<radialGradient id="plume" cx="50%" cy="100%" r="80%">
<stop offset="0" stop-color="#3fb6ad" stop-opacity="0.55" />
<stop offset="1" stop-color="#3fb6ad" stop-opacity="0" />
</radialGradient>
</defs>
<rect width="800" height="420" fill="url(#seaGrad)" />
<g class="plumes" stroke="#bfe6ff" stroke-width="1.4" fill="none" opacity="0.5">
<path d="M120 420 C140 320 90 280 130 200 C160 150 110 110 150 40" />
<path d="M300 420 C330 330 270 300 320 220 C350 170 300 130 340 60" />
<path d="M520 420 C540 330 490 300 540 230 C570 180 520 140 560 70" />
<path d="M690 420 C720 340 660 300 700 220 C730 170 680 130 720 70" />
</g>
<ellipse cx="400" cy="430" rx="320" ry="90" fill="url(#plume)" />
<path d="M0 360 L120 320 L210 350 L330 300 L470 345 L600 305 L720 350 L800 330 L800 420 L0 420 Z" fill="#071f33" />
<g fill="#e9f0f9" opacity="0.85">
<circle cx="210" cy="120" r="3" /><circle cx="470" cy="90" r="2.4" />
<circle cx="640" cy="150" r="3.4" /><circle cx="360" cy="60" r="2" />
</g>
</svg>
</div>
<figcaption><strong>Figure 1.</strong> Artist's rendering of abyssal mixing: cold bottom water is lifted by turbulence over rough seafloor terrain, completing a loop that connects the deep ocean to the surface. <span class="credit">Illustration: Strata / fictional.</span></figcaption>
</figure>
<div class="prose" id="prose">
<p class="lede">Two kilometres below the surface, where sunlight never reaches and the pressure could crush a submarine, the ocean is not still. It breathes. A slow, planet-spanning overturning hauls cold water up from the abyss and sends warm water down — a circulation so vast it helps set the temperature of the entire planet. For decades, one part of that loop made no sense at all.</p>
<p>The puzzle is simple to state. Cold water is dense, so it sinks near the poles and pools at the bottom of the ocean. If nothing pushed it back up, the deep sea would fill with cold water and the whole circulation would grind to a halt within a few thousand years. Something has to lift that water again. The question is <em>what</em>.</p>
<h2>The mixing problem</h2>
<p>The leading suspect is turbulence — small-scale chaotic stirring that blends warm and cold water, making the deep water lighter so it can rise. But for half a century the numbers refused to add up. The open ocean, away from coasts, turned out to be remarkably calm. Measurements kept showing mixing rates roughly ten times too weak to close the loop.</p>
<blockquote class="pullquote">
<p>“The ocean was supposed to be mixing, and we kept measuring almost nothing. It felt like watching a kettle that refused to boil.”</p>
<cite>— Dr. Mara Renner, recalling early surveys</cite>
</blockquote>
<p>The resolution came from looking in the right place. Most of the mixing, it turns out, does not happen in the smooth open water at all. It happens in the rough country at the bottom — over mid-ocean ridges, seamounts, and fracture zones, where tides drag water back and forth across jagged terrain and shatter it into turbulence.</p>
<h2>How the deep ocean stirs itself</h2>
<p>The mechanism reads almost like a four-stroke engine. Follow a parcel of cold bottom water through one full cycle:</p>
<!-- How it works stepper -->
<ol class="stepper" id="stepper" aria-label="How abyssal mixing works">
<li class="step is-active" data-step="1">
<span class="step__num">1</span>
<div class="step__body">
<h3 class="step__title">Tides push</h3>
<p>Twice-daily tides drag deep water across a rough ridge, like wind over a mountain range.</p>
</div>
</li>
<li class="step" data-step="2">
<span class="step__num">2</span>
<div class="step__body">
<h3 class="step__title">Waves break</h3>
<p>The flow throws off internal waves that steepen and shatter into fine turbulence near the slope.</p>
</div>
</li>
<li class="step" data-step="3">
<span class="step__num">3</span>
<div class="step__body">
<h3 class="step__title">Water blends</h3>
<p>Turbulence mixes warm and cold layers, making the heavy bottom water a little lighter.</p>
</div>
</li>
<li class="step" data-step="4">
<span class="step__num">4</span>
<div class="step__body">
<h3 class="step__title">Water rises</h3>
<p>Now buoyant, the parcel drifts upward along the slope, feeding the global overturning loop.</p>
</div>
</li>
</ol>
<div class="stepper__controls">
<button class="btn btn--ghost" id="stepPrev" type="button">‹ Back</button>
<span class="stepper__count" id="stepCount" aria-live="polite">Step 1 of 4</span>
<button class="btn" id="stepNext" type="button">Next step ›</button>
</div>
<p>The scale is hard to picture. The overturning moves on the order of <span class="num">3.0 × 10<sup>7</sup> m³/s</span> of water — many times the combined flow of every river on Earth. Yet it is driven by stirring so gentle that, spread evenly, it would be almost impossible to feel.</p>
<figure class="eqn" aria-label="Diffusion equation for vertical mixing">
<div class="eqn__body">
<span class="eqn__expr">
<i>w</i><sub>up</sub> = −<sup>∂</sup>⁄<sub>∂z</sub>
<span class="paren">(</span><i>κ</i> <sup>∂<i>ρ</i></sup>⁄<sub>∂z</sub><span class="paren">)</span> ⁄ <sup>∂<i>ρ</i></sup>⁄<sub>∂z</sub>
</span>
<span class="eqn__num">(1)</span>
</div>
<figcaption><strong>Figure 2.</strong> A simplified buoyancy budget. The upward velocity <i>w</i><sub>up</sub> depends on how the mixing coefficient <i>κ</i> changes with depth <i>z</i>, not on <i>κ</i> itself — which is why concentrated mixing over ridges drives the rise.</figcaption>
</figure>
<h2>Why it matters above the waves</h2>
<p>This is not just bookkeeping for oceanographers. The same overturning loop carries heat and dissolved carbon dioxide into the deep ocean, where they can stay locked away for centuries. How fast the loop turns helps decide how much of the warming we cause gets buffered by the sea — and how much stays in the air we breathe.</p>
<p>Getting the mixing right, in other words, is part of getting the climate right. The newest seafloor surveys are now feeding sharper numbers into the models that project the coming decades, replacing a guess that stood, quietly wrong, for fifty years.</p>
<p class="endmark" aria-hidden="true">◐</p>
</div>
</article>
<!-- Sidebar glossary card -->
<aside class="sidebar" aria-label="The science, simplified">
<div class="card glossary">
<header class="glossary__head">
<h2>The science, simplified</h2>
<p>Tap a term to expand its plain-language definition.</p>
</header>
<dl class="glossary__list" id="glossary">
<div class="term">
<dt>
<button class="term__btn" type="button" aria-expanded="false">
<span>Overturning circulation</span><span class="term__chev" aria-hidden="true">▸</span>
</button>
</dt>
<dd class="term__def">The planet-scale loop in which water sinks near the poles, spreads along the seafloor, and slowly rises again elsewhere — moving heat and carbon as it goes.</dd>
</div>
<div class="term">
<dt>
<button class="term__btn" type="button" aria-expanded="false">
<span>Turbulence</span><span class="term__chev" aria-hidden="true">▸</span>
</button>
</dt>
<dd class="term__def">Chaotic, small-scale stirring of a fluid. In the deep sea it blends warm and cold layers and is the missing ingredient that lets cold water rise.</dd>
</div>
<div class="term">
<dt>
<button class="term__btn" type="button" aria-expanded="false">
<span>Buoyancy</span><span class="term__chev" aria-hidden="true">▸</span>
</button>
</dt>
<dd class="term__def">The tendency of lighter water to float upward. Mixing reduces a parcel's density, giving it the buoyancy to rise.</dd>
</div>
<div class="term">
<dt>
<button class="term__btn" type="button" aria-expanded="false">
<span>Internal wave</span><span class="term__chev" aria-hidden="true">▸</span>
</button>
</dt>
<dd class="term__def">A wave that travels <em>within</em> the ocean, along the boundary between layers of different density — invisible from the surface but powerful below.</dd>
</div>
</dl>
<div class="glossary__stat">
<span class="num">10×</span>
<span>the mixing measured near rough seafloor versus the calm open ocean.</span>
</div>
</div>
</aside>
</main>
<!-- Related articles -->
<footer class="related-wrap">
<div class="wrap">
<h2 class="related-head">Keep reading</h2>
<div class="related-grid">
<a class="rel-card" href="#main">
<span class="rel-card__tag">Climate</span>
<h3>The Carbon the Sea Forgets</h3>
<p>How dissolved CO₂ slips below the waves and stays there for a thousand years.</p>
<span class="rel-card__meta">7 min · Dr. Aiko Vance</span>
</a>
<a class="rel-card" href="#main">
<span class="rel-card__tag">Physics</span>
<h3>Why the Abyss Is Never Truly Dark</h3>
<p>A faint glow from chemistry and biology lights up a world without sun.</p>
<span class="rel-card__meta">6 min · Tomás Eldridge</span>
</a>
<a class="rel-card" href="#main">
<span class="rel-card__tag">Life</span>
<h3>The Map of Every Seamount</h3>
<p>An ocean of mountains we have only just begun to chart — and what lives on them.</p>
<span class="rel-card__meta">8 min · Dr. Mara Renner</span>
</a>
</div>
</div>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Popular-Science Article
A single-column popular-science explainer that reads like a polished magazine feature. The hero stacks a teal kicker, a large serif headline, a friendly dek, and a byline row with avatar, publish date, and an auto-computed read-time. A wide SVG lead image animates gentle upwelling plumes and carries a numbered “Figure 1.” caption, setting the visual-discipline tone for the rest of the page.
The body is a comfortable serif reading column with a drop cap, subheads, a teal pull quote, and a LaTeX-style display equation numbered (1). An inline “How it works” stepper — four CSS cards — walks through the mechanism one stage at a time, advanced by Next/Back buttons or by clicking any card, with the active step highlighted. A sticky “The science, simplified” sidebar card offers an expandable glossary accordion of plain-language definitions.
Interactions are vanilla JS: a sepia reading-mode toggle that re-themes the page, Save and Share chips (Web Share API with clipboard fallback), a scroll-driven reading-progress bar, the keyboard-accessible stepper and glossary, and a small toast helper for feedback. The layout collapses to one column and a static sidebar below 900px and stays usable down to 360px.
Illustrative UI only — fictional authors, data, and figures; not real scientific results.