页面 簡單
News — Q&A / Interview Layout
A magazine Q&A spread for the fictional Meridian Review, opening on a duotone subject portrait, an oversized Playfair headline, an italic standfirst and a drop-cap intro, then the conversation set as styled Q/A pairs — bold red interviewer prompts against serif answers — broken by a full-width pull quote and a duotone harbour figure. A sticky reader bar offers a text-size stepper and a jump-to-question mini-nav, while a sidebar fact box carries the subject's bio, a side pull quote and a key-facts list. Pure vanilla JS, no frameworks.
在 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;
--reader-scale: 1;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--cream);
color: var(--ink);
font-family: var(--sans);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-d); text-decoration: underline; text-underline-offset: 2px; }
.skip-link {
position: absolute;
left: -999px;
top: 0;
background: var(--ink);
color: var(--paper);
padding: 10px 16px;
z-index: 100;
font-family: var(--sans);
font-size: 14px;
}
.skip-link:focus { left: 12px; top: 12px; }
:focus-visible {
outline: 2px solid var(--red);
outline-offset: 2px;
}
/* ---------- Masthead ---------- */
.masthead {
background: var(--paper);
border-bottom: 1px solid var(--ink);
padding: 18px 20px 0;
}
.masthead__inner {
max-width: 1120px;
margin: 0 auto;
text-align: center;
}
.masthead__dateline,
.masthead__tag {
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
margin: 0;
}
.masthead__title {
display: block;
font-family: var(--serif);
font-weight: 900;
font-size: clamp(2.4rem, 7vw, 4.4rem);
letter-spacing: 0.01em;
color: var(--ink);
margin: 4px 0 6px;
line-height: 1;
}
.masthead__title:hover { color: var(--ink); text-decoration: none; }
.subnav {
max-width: 1120px;
margin: 12px auto 0;
border-top: 1px solid var(--rule);
border-bottom: 3px double var(--rule-2);
padding: 8px 0;
text-align: center;
font-family: var(--sans);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
}
.subnav__kicker { color: var(--red); font-weight: 600; }
.subnav__sep { color: var(--muted); margin: 0 8px; }
/* ---------- Layout ---------- */
.wrap {
max-width: 1120px;
margin: 0 auto;
padding: 40px 20px 56px;
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 48px;
align-items: start;
}
/* ---------- Shared editorial bits ---------- */
.kicker {
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--red);
margin: 0 0 14px;
}
/* ---------- Feature opener ---------- */
.feature__title {
font-family: var(--serif);
font-weight: 800;
font-size: clamp(2.6rem, 6.5vw, 4.6rem);
line-height: 1.02;
letter-spacing: -0.01em;
margin: 0 0 18px;
color: var(--ink);
}
.standfirst {
font-family: var(--serif);
font-style: italic;
font-weight: 500;
font-size: clamp(1.15rem, 2.4vw, 1.55rem);
line-height: 1.35;
color: var(--ink-2);
margin: 0 0 28px;
max-width: 36ch;
}
.portrait {
margin: 0 0 22px;
}
.portrait__img {
aspect-ratio: 4 / 5;
border-radius: var(--r-sm);
border: 1px solid var(--rule);
}
.portrait__img--okonkwo {
background:
radial-gradient(120% 90% at 32% 22%, rgba(244, 239, 228, 0.55) 0%, rgba(244, 239, 228, 0) 42%),
radial-gradient(80% 70% at 70% 78%, rgba(180, 41, 31, 0.30) 0%, rgba(180, 41, 31, 0) 55%),
linear-gradient(155deg, #1d4a4a 0%, #16302f 38%, #0c1b1b 72%, #060d0d 100%);
}
.portrait__cap {
margin-top: 10px;
border-top: 2px solid var(--red);
padding-top: 8px;
}
.portrait__name {
display: block;
font-family: var(--serif);
font-weight: 700;
font-size: 1.25rem;
color: var(--ink);
}
.portrait__credit {
display: block;
font-family: var(--sans);
font-size: 11px;
font-style: italic;
color: var(--muted);
letter-spacing: 0.02em;
margin-top: 2px;
}
.byline {
font-family: var(--sans);
font-size: 13px;
color: var(--ink-3);
letter-spacing: 0.02em;
margin: 0 0 28px;
padding-bottom: 22px;
border-bottom: 3px double var(--rule-2);
}
.byline strong { color: var(--ink); font-weight: 600; }
.byline__sep { color: var(--muted); margin: 0 8px; }
.dateline { text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; }
.readtime { color: var(--muted); }
/* ---------- Reader bar ---------- */
.reader-bar {
display: flex;
flex-wrap: wrap;
gap: 14px 28px;
align-items: center;
justify-content: space-between;
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--r-md);
padding: 12px 16px;
margin: 0 0 32px;
position: sticky;
top: 0;
z-index: 20;
}
.reader-bar__group {
display: flex;
align-items: center;
gap: 10px;
}
.reader-bar__group--jump { flex: 1; min-width: 200px; justify-content: flex-end; }
.reader-bar__label {
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
font-weight: 600;
white-space: nowrap;
}
.textsize {
display: inline-flex;
align-items: center;
border: 1px solid var(--rule-2);
border-radius: var(--r-sm);
overflow: hidden;
}
.textsize__btn {
font-family: var(--serif);
font-weight: 700;
font-size: 14px;
background: var(--white);
color: var(--ink);
border: none;
padding: 6px 12px;
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease;
}
.textsize__btn:hover { background: var(--ink); color: var(--paper); }
.textsize__btn:active { background: var(--red); color: var(--paper); }
.textsize__value {
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
color: var(--ink-3);
padding: 0 12px;
border-left: 1px solid var(--rule);
border-right: 1px solid var(--rule);
min-width: 56px;
text-align: center;
}
.jump {
font-family: var(--sans);
font-size: 13px;
color: var(--ink);
background: var(--white);
border: 1px solid var(--rule-2);
border-radius: var(--r-sm);
padding: 7px 10px;
max-width: 260px;
cursor: pointer;
}
/* ---------- Body ---------- */
.body {
font-size: calc(1.075rem * var(--reader-scale));
line-height: 1.62;
color: var(--ink-2);
}
.body p { margin: 0 0 1.25em; }
.lead {
font-size: calc(1.15rem * var(--reader-scale));
color: var(--ink);
text-align: justify;
hyphens: auto;
}
.lead::first-letter {
float: left;
font-family: var(--serif);
font-weight: 800;
font-size: 4.6em;
line-height: 0.78;
padding: 6px 12px 0 0;
color: var(--red);
}
/* ---------- Q & A ---------- */
.qa {
margin: 0 0 1.9em;
padding-top: 1.6em;
border-top: 1px solid var(--rule-hair);
}
.qa:first-of-type { border-top: none; padding-top: 0; }
.q {
font-family: var(--sans);
font-weight: 600;
font-size: calc(1.02rem * var(--reader-scale));
color: var(--ink);
line-height: 1.5;
margin: 0 0 0.7em !important;
}
.q__mark {
font-family: var(--serif);
font-weight: 800;
color: var(--red);
margin-right: 8px;
}
.a {
font-family: var(--serif);
font-weight: 500;
font-size: calc(1.12rem * var(--reader-scale));
line-height: 1.6;
color: var(--ink-2);
text-align: justify;
hyphens: auto;
}
.a__mark {
font-family: var(--serif);
font-weight: 700;
font-style: italic;
color: var(--ink);
margin-right: 8px;
}
.qa--target {
animation: flash 1.4s ease;
}
@keyframes flash {
0%, 18% { background: var(--red-50); box-shadow: 0 0 0 8px var(--red-50); }
100% { background: transparent; box-shadow: 0 0 0 0 transparent; }
}
.body__close {
margin-top: 2em !important;
padding-top: 1.6em;
border-top: 1px solid var(--rule-hair);
font-family: var(--serif);
font-style: italic;
color: var(--ink-3);
}
/* ---------- Pull quotes ---------- */
.pullquote { margin: 0; }
.pullquote blockquote { margin: 0; }
.pullquote--full {
margin: 2.2em 0;
padding: 1.4em 0;
border-top: 2px solid var(--ink);
border-bottom: 2px solid var(--ink);
}
.pullquote--full p {
font-family: var(--serif);
font-weight: 700;
font-size: clamp(1.5rem, 3.4vw, 2.2rem);
line-height: 1.18;
color: var(--ink);
margin: 0;
text-align: center;
text-wrap: balance;
}
.pullquote--side {
margin: 18px 0 22px;
padding: 16px 0;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.pullquote--side p {
font-family: var(--serif);
font-style: italic;
font-weight: 600;
font-size: 1.35rem;
line-height: 1.25;
color: var(--red-d);
margin: 0;
}
/* ---------- Figures ---------- */
.figure { margin: 2.2em 0; }
.figure__img {
aspect-ratio: 16 / 9;
border-radius: var(--r-sm);
border: 1px solid var(--rule);
}
.figure__img--harbour {
background:
radial-gradient(90% 120% at 18% 12%, rgba(244, 239, 228, 0.42) 0%, rgba(244, 239, 228, 0) 45%),
linear-gradient(180deg, #6b7780 0%, #4a565f 30%, #313b43 60%, #1b2329 100%),
repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0 2px, rgba(255, 255, 255, 0.03) 2px 4px);
background-blend-mode: screen, normal, overlay;
}
.figure figcaption {
margin-top: 8px;
border-top: 2px solid var(--red);
padding-top: 7px;
font-family: var(--sans);
font-size: 12px;
line-height: 1.45;
}
.figure__cap { color: var(--ink-3); }
.figure__credit {
display: block;
font-style: italic;
color: var(--muted);
font-size: 11px;
margin-top: 2px;
}
/* ---------- Sidebar ---------- */
.sidebar { position: sticky; top: 76px; }
.factbox {
background: var(--paper);
border: 1px solid var(--rule-2);
border-top: 4px solid var(--red);
border-radius: var(--r-sm);
padding: 22px 22px 24px;
}
.factbox__kicker {
font-family: var(--sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--red);
margin: 0 0 8px;
}
.factbox__name {
font-family: var(--serif);
font-weight: 800;
font-size: 1.9rem;
line-height: 1.05;
margin: 0 0 4px;
color: var(--ink);
}
.factbox__role {
font-family: var(--sans);
font-size: 13px;
color: var(--ink-3);
margin: 0 0 4px;
}
.facts {
margin: 18px 0;
border-top: 1px solid var(--rule);
}
.facts__row {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 9px 0;
border-bottom: 1px solid var(--rule-hair);
}
.facts dt {
font-family: var(--sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
}
.facts dd {
margin: 0;
font-family: var(--serif);
font-size: 0.98rem;
color: var(--ink);
text-align: right;
}
.factbox__bio {
font-family: var(--sans);
font-size: 13px;
line-height: 1.6;
color: var(--ink-3);
margin: 0;
}
/* ---------- Footer ---------- */
.footer {
border-top: 1px solid var(--ink);
background: var(--paper);
}
.footer__inner {
max-width: 1120px;
margin: 0 auto;
padding: 26px 20px 34px;
text-align: center;
}
.footer__name {
font-family: var(--serif);
font-weight: 700;
font-size: 1.5rem;
margin: 0 0 4px;
color: var(--ink);
}
.footer__line {
font-family: var(--sans);
font-size: 12px;
color: var(--muted);
margin: 0 0 16px;
}
.totop {
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
background: var(--white);
color: var(--ink);
border: 1px solid var(--rule-2);
border-radius: var(--r-sm);
padding: 8px 16px;
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease;
}
.totop:hover { background: var(--ink); color: var(--paper); }
/* ---------- Toast ---------- */
.toast {
position: fixed;
left: 50%;
bottom: 26px;
transform: translate(-50%, 18px);
background: var(--ink);
color: var(--paper);
font-family: var(--sans);
font-size: 13px;
letter-spacing: 0.02em;
padding: 11px 18px;
border-radius: var(--r-sm);
border-left: 3px solid var(--red);
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease, transform 0.22s ease;
z-index: 200;
max-width: 90vw;
}
.toast.is-on {
opacity: 1;
transform: translate(-50%, 0);
}
/* ---------- Responsive ---------- */
@media (max-width: 920px) {
.wrap { grid-template-columns: 1fr; gap: 36px; }
.sidebar { position: static; }
}
@media (max-width: 720px) {
.wrap { padding: 28px 16px 44px; }
.reader-bar { flex-direction: column; align-items: stretch; }
.reader-bar__group--jump { justify-content: space-between; }
.jump { max-width: none; flex: 1; }
.portrait__img--okonkwo { aspect-ratio: 1 / 1; }
.lead::first-letter { font-size: 3.8em; }
.a, .lead { text-align: left; }
}
@media (max-width: 380px) {
.masthead { padding: 14px 12px 0; }
.wrap { padding: 22px 12px 36px; }
.factbox { padding: 18px 16px 20px; }
}
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
html { scroll-behavior: auto; }
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}(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");
toastEl.setAttribute("aria-hidden", "false");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("is-on");
toastEl.setAttribute("aria-hidden", "true");
}, 2400);
}
/* ---------- Text-size control ---------- */
var SCALES = [0.9, 1, 1.12, 1.25, 1.4];
var LABELS = ["90%", "100%", "112%", "125%", "140%"];
var idx = 1;
var root = document.documentElement;
var valueEl = document.getElementById("textsize-value");
function applyScale() {
root.style.setProperty("--reader-scale", String(SCALES[idx]));
if (valueEl) valueEl.textContent = LABELS[idx];
}
document.querySelectorAll(".textsize__btn").forEach(function (btn) {
btn.addEventListener("click", function () {
var dir = btn.getAttribute("data-size");
if (dir === "inc" && idx < SCALES.length - 1) {
idx++;
} else if (dir === "dec" && idx > 0) {
idx--;
} else {
toast(dir === "inc" ? "Largest text size" : "Smallest text size");
return;
}
applyScale();
toast("Text size " + LABELS[idx]);
});
});
applyScale();
/* ---------- Jump-to-question mini-nav ---------- */
var select = document.getElementById("jump-select");
var qaBlocks = Array.prototype.slice.call(
document.querySelectorAll(".qa[data-question]")
);
qaBlocks.forEach(function (block, i) {
var id = "q-" + (i + 1);
block.id = id;
if (select) {
var opt = document.createElement("option");
opt.value = id;
opt.textContent = (i + 1) + ". " + block.getAttribute("data-question");
select.appendChild(opt);
}
});
function jumpTo(id) {
var target = document.getElementById(id);
if (!target) return;
target.scrollIntoView({ behavior: "smooth", block: "start" });
qaBlocks.forEach(function (b) { b.classList.remove("qa--target"); });
// restart animation
void target.offsetWidth;
target.classList.add("qa--target");
}
if (select) {
select.addEventListener("change", function () {
if (!select.value) return;
jumpTo(select.value);
var label = select.options[select.selectedIndex].textContent;
toast("Jumped to: " + label.replace(/^\d+\.\s*/, ""));
select.value = "";
});
}
/* ---------- Keep jump-nav synced with scroll position ---------- */
if ("IntersectionObserver" in window && qaBlocks.length) {
var current = null;
var io = new IntersectionObserver(
function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) current = entry.target.id;
});
if (current && select && document.activeElement !== select) {
// reflect position without firing change
select.value = "";
}
},
{ rootMargin: "-45% 0px -45% 0px", threshold: 0 }
);
qaBlocks.forEach(function (b) { io.observe(b); });
}
/* ---------- Back to top ---------- */
var toTop = document.getElementById("to-top");
if (toTop) {
toTop.addEventListener("click", function () {
window.scrollTo({ top: 0, behavior: "smooth" });
var top = document.getElementById("top");
if (top) top.focus({ preventScroll: true });
});
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>The Meridian Review — The Long Game: A Conversation with Ada Okonkwo</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=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;0,900;1,500;1,600;1,700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#interview">Skip to interview</a>
<!-- Masthead -->
<header class="masthead" role="banner">
<div class="masthead__inner">
<p class="masthead__dateline">Vol. XLII · No. 188 · Saturday Edition</p>
<a class="masthead__title" href="#" aria-label="The Meridian Review — home">The Meridian Review</a>
<p class="masthead__tag">Interviews & Long Reads</p>
</div>
<nav class="subnav" aria-label="Sections">
<span class="subnav__kicker">The Interview</span>
<span class="subnav__sep" aria-hidden="true">·</span>
<span>Issue 188</span>
<span class="subnav__sep" aria-hidden="true">·</span>
<span>Profiles</span>
</nav>
</header>
<main id="top" class="wrap">
<!-- Feature opener -->
<article class="feature" id="interview" aria-labelledby="feature-title">
<header class="feature__head">
<p class="kicker">The Saturday Interview</p>
<h1 class="feature__title" id="feature-title">
The Long Game
</h1>
<p class="standfirst">
The marine biologist turned policy maverick on patience, cold water,
and why the slowest fix is usually the only one that holds.
</p>
<figure class="portrait">
<div class="portrait__img portrait__img--okonkwo" role="img"
aria-label="Portrait of Ada Okonkwo, lit from the side against a deep teal background."></div>
<figcaption class="portrait__cap">
<span class="portrait__name">Ada Okonkwo</span>
<span class="portrait__credit">Photograph by Iris Vandermeer for The Meridian Review</span>
</figcaption>
</figure>
<p class="byline">
Interview by <strong>Marcus Hale</strong>
<span class="byline__sep" aria-hidden="true">·</span>
<span class="dateline">Reykjavík</span>
<span class="byline__sep" aria-hidden="true">·</span>
<span class="readtime">14 min read</span>
</p>
</header>
<!-- Reader controls -->
<div class="reader-bar" role="region" aria-label="Reading controls">
<div class="reader-bar__group">
<span class="reader-bar__label">Text size</span>
<div class="textsize" role="group" aria-label="Adjust text size">
<button type="button" class="textsize__btn" data-size="dec" aria-label="Decrease text size">A−</button>
<span class="textsize__value" id="textsize-value" aria-live="polite">100%</span>
<button type="button" class="textsize__btn" data-size="inc" aria-label="Increase text size">A+</button>
</div>
</div>
<div class="reader-bar__group reader-bar__group--jump">
<label class="reader-bar__label" for="jump-select">Jump to question</label>
<select class="jump" id="jump-select" aria-label="Jump to a question in the interview">
<option value="">Choose a question…</option>
</select>
</div>
</div>
<!-- Interview body -->
<div class="body" id="interview-body">
<p class="lead">
Ada Okonkwo arrives twenty minutes early, soaked to the knees, and entirely
unbothered by it. She has been swimming — in the harbour, in November, in a country
where the locals consider that a personal choice rather than a medical event. We meet
in a low-ceilinged café near the old port, where she orders black coffee and a second
one before the first has cooled. For two decades she studied kelp forests off three
continents; for the last six she has been dragging fisheries ministers, by the lapels,
toward policies they would rather not sign. She is, by reputation, impossible to rush
and impossible to ignore.
</p>
<div class="qa" data-question="On leaving the lab">
<p class="q"><span class="q__mark">Q.</span> You spent twenty years as a scientist and then walked into politics. People said you'd been captured by the very system you criticised.</p>
<p class="a"><span class="a__mark">A.</span> They did, and I understood why. The lab is clean. You measure a thing, you publish, you move on. Policy is the opposite — it's the messy middle where measurements go to argue with each other. But I got tired of writing papers that ended with the phrase "further action is required" and then watching nobody require it. At some point you have to be the further action.</p>
</div>
<div class="qa" data-question="On patience">
<p class="q"><span class="q__mark">Q.</span> Your critics call you slow. Your allies call you patient. Which is fairer?</p>
<p class="a"><span class="a__mark">A.</span> Both, and they're describing the same thing from opposite chairs. A kelp forest doesn't recover in a news cycle. It recovers in seven, eight, ten years, and only if you stop doing the harmful thing for that entire time. So my whole instinct is built around the long horizon. The hard part isn't being patient — it's keeping everyone else patient with you, when every incentive they have is annual.</p>
</div>
<figure class="pullquote pullquote--full">
<blockquote>
<p>“The slowest fix is usually the only one that actually holds. Everything fast is just borrowing speed from later.”</p>
</blockquote>
</figure>
<div class="qa" data-question="On compromise">
<p class="q"><span class="q__mark">Q.</span> You've signed deals that disappointed people on your own side. How do you decide what to give up?</p>
<p class="a"><span class="a__mark">A.</span> I have a private rule. I'll trade away anything reversible to protect anything that isn't. You can always re-open a quota next year — you cannot un-collapse a fishery. So when I'm at the table I'm constantly sorting the demands into those two buckets. Reversible, I'll bend on all day. Irreversible, I'll lose the room over. It makes me look stubborn about strange small things, and flexible about things people assume I'd fight for.</p>
</div>
<div class="qa" data-question="On cold water">
<p class="q"><span class="q__mark">Q.</span> You swim in freezing water most mornings. Is that discipline, or something else?</p>
<p class="a"><span class="a__mark">A.</span> It's the cheapest honesty available. The water doesn't care about your title or your last interview. For four minutes there is nothing to manage and nothing to spin — there's just cold, and your decision to stay in it or not. I've made some of my worst negotiating mistakes on mornings I skipped the swim. I think I'd lost the habit of being uncomfortable on purpose.</p>
</div>
<figure class="figure">
<div class="figure__img figure__img--harbour" role="img"
aria-label="Duotone view of a grey northern harbour at dawn, fishing boats moored under a low sky."></div>
<figcaption>
<span class="figure__cap">The old harbour at first light, where Okonkwo swims most mornings before work.</span>
<span class="figure__credit">Iris Vandermeer / The Meridian Review</span>
</figcaption>
</figure>
<div class="qa" data-question="On hope">
<p class="q"><span class="q__mark">Q.</span> Do you allow yourself optimism, or is that a luxury in your line of work?</p>
<p class="a"><span class="a__mark">A.</span> I'm allergic to optimism — it's just pessimism that hasn't done the reading yet. What I allow myself is evidence. I've now watched two reefs come back. Not metaphorically, actually back, with the fish and the noise and the mess of it. That's not hope. That's a result you can put your hand in. Once you've seen one recovery you stop arguing about whether it's possible and start arguing about how fast.</p>
</div>
<div class="qa" data-question="On what's next">
<p class="q"><span class="q__mark">Q.</span> If you got everything you wanted in the next decade, what would the world actually look like?</p>
<p class="a"><span class="a__mark">A.</span> Boring, honestly. The goal is for none of this to be news. No dramatic collapses, no heroic recoveries, no interviews like this one. Just water that's a little colder, a little cleaner, and a generation that finds it completely unremarkable that we manage the sea on its timeline instead of ours. If I do my job, the most exciting thing that happens is nothing.</p>
</div>
<p class="body__close">
She finishes the second coffee, glances at the harbour through the fogged window, and
announces she has exactly enough daylight left to walk the long way home. At the door she
turns back. “Write it slow,” she says, and is gone before the irony lands.
</p>
</div>
</article>
<!-- Sidebar bio / fact box -->
<aside class="sidebar" aria-label="About Ada Okonkwo">
<section class="factbox">
<p class="factbox__kicker">The Subject</p>
<h2 class="factbox__name">Ada Okonkwo</h2>
<p class="factbox__role">Marine biologist & ocean-policy negotiator</p>
<figure class="pullquote pullquote--side">
<blockquote>
<p>“Optimism is just pessimism that hasn’t done the reading yet.”</p>
</blockquote>
</figure>
<dl class="facts">
<div class="facts__row"><dt>Born</dt><dd>Lagos, 1979</dd></div>
<div class="facts__row"><dt>Based</dt><dd>Reykjavík, Iceland</dd></div>
<div class="facts__row"><dt>Field</dt><dd>Kelp & reef ecology</dd></div>
<div class="facts__row"><dt>Known for</dt><dd>The 2021 Coldwater Accord</dd></div>
<div class="facts__row"><dt>Reading now</dt><dd>Sea logs, 1890s</dd></div>
</dl>
<p class="factbox__bio">
Okonkwo led field expeditions across three oceans before turning to policy in 2020.
Her 2021 Coldwater Accord bound nine nations to decade-long recovery targets and is
credited with the documented return of two reef systems. She swims daily, sleeps little,
and refuses to be quoted in a hurry.
</p>
</section>
</aside>
</main>
<footer class="footer">
<div class="footer__inner">
<p class="footer__name">The Meridian Review</p>
<p class="footer__line">A fictional newspaper · Illustrative UI demo · No real persons depicted.</p>
<button type="button" class="totop" id="to-top">Back to top ↑</button>
</div>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite" aria-hidden="true"></div>
<script src="script.js"></script>
</body>
</html>Q&A / Interview Layout
A feature interview spread for The Meridian Review, a fictional paper. The opener pairs a duotone
“press portrait” of the subject with an oversized Playfair Display headline, an italic standfirst, a
credited photo caption and a byline with dateline and reading time. A drop-capped intro paragraph
sets the scene before the transcript begins. The conversation runs as styled Q/A pairs — a bold red
Q. for the interviewer in tight Inter, serif answers led by an italic A. — with hairline rules
separating each exchange. A full-width serif pull quote and a captioned, duotone harbour figure break
the rhythm, and a right-hand fact box collects the subject’s bio, a side pull quote and a key-facts
list.
A sticky reader bar gives the page two controls. A text-size stepper scales the body copy through five
levels via a CSS custom property, announcing each change through an aria-live toast. A “jump to
question” select is built from the markup at load — each Q/A block is read for its data-question
label — and choosing one smooth-scrolls to that exchange and briefly flashes it. An IntersectionObserver
keeps the nav aware of the reader’s position, and a back-to-top control returns focus to the top of the
piece.
Everything is semantic and accessible: real <article>, <figure> and <dl> structure, a skip link,
visible focus rings, AA-contrast type, and full prefers-reduced-motion support. The layout is a
two-column grid that collapses to a single column under 920px and stays readable down to 360px. All copy —
masthead, headline, byline, questions and answers — is original, clearly-fictional editorial writing.
Illustrative UI only — masthead, headlines, bylines, and articles are fictional; not a real news publication.