UI Components Easy
Science — Author + Affiliation + ORCID
A scholarly author byline block in the institutional house style — names carry superscript affiliation numbers, equal-contribution daggers, a corresponding-author asterisk, and a green ORCID iD that opens orcid.org. Hovering or focusing any author lights up their matching numbered affiliations, and hovering an affiliation row highlights every author who belongs to it. The corresponding-author asterisk reveals a copyable email popover, and a segmented control switches between an expanded byline and a compact single-line variant.
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;
--orcid: #a6ce39;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 16px;
--shadow: 0 1px 2px rgba(15, 27, 45, 0.06), 0 8px 24px rgba(15, 27, 45, 0.06);
--serif: "Source Serif 4", Georgia, serif;
--ui: "Inter", system-ui, sans-serif;
--mono: "JetBrains Mono", ui-monospace, monospace;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--serif);
line-height: 1.6;
}
.mono {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
}
.muted {
color: var(--muted);
}
.page {
max-width: 860px;
margin: 0 auto;
padding: clamp(20px, 4vw, 48px) clamp(16px, 4vw, 40px) 56px;
}
/* ---------- Masthead ---------- */
.masthead {
border-bottom: 1px solid var(--line);
padding-bottom: 22px;
}
.kicker {
font-family: var(--ui);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 10px;
}
.title {
font-family: var(--serif);
font-weight: 700;
font-size: clamp(24px, 4.4vw, 36px);
line-height: 1.22;
letter-spacing: -0.01em;
margin: 0 0 14px;
max-width: 46ch;
}
.doc-meta {
font-family: var(--ui);
font-size: 13px;
color: var(--ink-2);
margin: 0 0 18px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.doc-meta .mono {
font-size: 12.5px;
color: var(--muted);
}
.badge {
font-family: var(--ui);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.03em;
text-transform: uppercase;
padding: 3px 9px;
border-radius: 999px;
border: 1px solid transparent;
}
.badge-oa {
background: var(--teal-50);
color: var(--teal);
border-color: rgba(15, 125, 120, 0.25);
}
.badge-art {
background: var(--accent-50);
color: var(--accent-d);
border-color: rgba(26, 79, 138, 0.22);
}
/* ---------- Variant bar ---------- */
.variant-bar {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.variant-label {
font-family: var(--ui);
font-size: 12px;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.seg {
display: inline-flex;
background: var(--bg-alt);
border: 1px solid var(--line);
border-radius: 999px;
padding: 3px;
}
.seg-btn {
font-family: var(--ui);
font-size: 13px;
font-weight: 600;
color: var(--ink-2);
background: transparent;
border: 0;
border-radius: 999px;
padding: 6px 16px;
cursor: pointer;
transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.seg-btn:hover {
color: var(--ink);
}
.seg-btn.is-active {
background: var(--bg);
color: var(--accent-d);
box-shadow: var(--shadow);
}
.seg-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* ---------- Byline block ---------- */
.byline-block {
margin: 26px 0 8px;
}
.authors {
list-style: none;
margin: 0 0 18px;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 2px;
font-family: var(--ui);
}
.author {
display: inline-flex;
align-items: center;
gap: 5px;
}
.author:not(:last-child) .author-btn::after {
content: ",";
color: var(--ink-2);
font-weight: 500;
margin-left: 1px;
}
.author-btn {
font-family: var(--ui);
font-size: 16px;
font-weight: 600;
color: var(--ink);
background: transparent;
border: 0;
padding: 4px 4px 4px 5px;
border-radius: var(--r-sm);
cursor: pointer;
transition: background 0.15s, color 0.15s;
position: relative;
}
.author-btn:hover,
.author-btn:focus-visible {
background: var(--accent-50);
color: var(--accent-d);
outline: none;
}
.author.is-active .author-btn {
background: var(--accent-50);
color: var(--accent-d);
}
.author-name {
white-space: nowrap;
}
.sups {
font-size: 0.62em;
font-weight: 600;
margin-left: 1px;
color: var(--accent);
vertical-align: super;
line-height: 0;
}
.aff-ref {
transition: color 0.15s;
}
.author.is-active .aff-ref {
color: var(--accent-d);
}
.mark-equal {
color: var(--teal);
margin-left: 1px;
}
.corr-star {
font: inherit;
color: var(--danger);
background: transparent;
border: 0;
padding: 0 0 0 1px;
cursor: pointer;
font-weight: 700;
}
.corr-star:hover {
color: #a8362c;
}
.corr-star:focus-visible {
outline: 2px solid var(--danger);
outline-offset: 1px;
border-radius: 2px;
}
/* ORCID iD mark */
.orcid {
display: inline-grid;
place-items: center;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--orcid);
text-decoration: none;
transition: transform 0.15s, box-shadow 0.15s;
}
.orcid:hover {
transform: scale(1.12);
box-shadow: 0 0 0 3px rgba(166, 206, 57, 0.28);
}
.orcid:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.orcid-mark {
font-family: var(--ui);
font-weight: 700;
font-size: 9px;
color: #fff;
letter-spacing: -0.02em;
line-height: 1;
}
.orcid--none {
background: transparent;
cursor: default;
border: 1px dashed var(--line-2);
}
.orcid-mark--off {
color: var(--line-2);
}
/* ---------- Affiliations list ---------- */
.affiliations {
list-style: none;
margin: 0 0 18px;
padding: 16px 18px;
background: var(--bg-alt);
border: 1px solid var(--line);
border-radius: var(--r-md);
font-family: var(--ui);
font-size: 13.5px;
color: var(--ink-2);
display: grid;
gap: 8px;
}
.aff {
display: grid;
grid-template-columns: 22px 1fr;
gap: 8px;
align-items: start;
padding: 4px 6px;
border-radius: var(--r-sm);
transition: background 0.15s, box-shadow 0.15s;
}
.aff.is-active {
background: var(--accent-50);
box-shadow: inset 3px 0 0 var(--accent);
}
.aff-num {
color: var(--accent);
font-weight: 600;
font-size: 12px;
text-align: right;
padding-top: 1px;
}
.aff.is-active .aff-num {
color: var(--accent-d);
}
/* ---------- Legend ---------- */
.legend {
list-style: none;
margin: 0;
padding: 0;
font-family: var(--ui);
font-size: 12.5px;
color: var(--ink-2);
display: grid;
gap: 6px;
}
.legend .lg-mark {
display: inline-block;
width: 1.1em;
color: var(--teal);
font-weight: 700;
}
.legend li:nth-child(2) .lg-mark {
color: var(--danger);
}
.lg-orcid {
display: inline-grid;
place-items: center;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--orcid);
color: #fff;
font-size: 8px;
font-weight: 700;
vertical-align: -2px;
margin-right: 2px;
}
/* ---------- Email reveal popover ---------- */
.email-pop {
position: absolute;
z-index: 30;
font-family: var(--ui);
font-size: 13px;
background: var(--ink);
color: #fff;
border-radius: var(--r-sm);
padding: 8px 10px;
box-shadow: 0 10px 30px rgba(15, 27, 45, 0.28);
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.email-pop::after {
content: "";
position: absolute;
top: -5px;
left: 16px;
width: 10px;
height: 10px;
background: var(--ink);
transform: rotate(45deg);
}
.email-pop a {
color: #cfe1f7;
text-decoration: none;
font-family: var(--mono);
font-size: 12.5px;
}
.email-pop a:hover {
text-decoration: underline;
}
.email-pop button {
font-family: var(--ui);
font-size: 11px;
font-weight: 600;
color: var(--ink);
background: #fff;
border: 0;
border-radius: 4px;
padding: 3px 8px;
cursor: pointer;
}
.email-pop button:hover {
background: #e9eef5;
}
/* ---------- Compact variant ---------- */
.byline-block[data-variant="compact"] .affiliations,
.byline-block[data-variant="compact"] .legend {
display: none;
}
.byline-block[data-variant="compact"] .authors {
margin-bottom: 6px;
}
.byline-block[data-variant="compact"] .author-btn {
font-size: 14px;
font-weight: 500;
}
.byline-block[data-variant="compact"]::after {
content: attr(data-affsummary);
display: block;
font-family: var(--ui);
font-size: 12.5px;
color: var(--muted);
margin-top: 4px;
line-height: 1.5;
}
/* ---------- Abstract ---------- */
.abstract {
margin-top: 26px;
padding: 20px 22px;
border: 1px solid var(--line);
border-left: 3px solid var(--accent);
border-radius: var(--r-md);
background: var(--bg);
}
.abstract h2 {
font-family: var(--ui);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 10px;
}
.abstract p {
margin: 0 0 12px;
font-size: 16px;
color: var(--ink-2);
}
.abstract .kw {
font-size: 13.5px;
font-family: var(--ui);
color: var(--muted);
margin: 0;
}
.abstract .kw strong {
color: var(--ink-2);
}
/* ---------- Footer ---------- */
.foot {
margin-top: 30px;
padding-top: 16px;
border-top: 1px solid var(--line);
font-family: var(--ui);
font-size: 12px;
color: var(--muted);
}
.foot .mono {
font-size: 12px;
color: var(--ink-2);
}
/* ---------- Toast ---------- */
.toast {
position: fixed;
left: 50%;
bottom: 28px;
transform: translateX(-50%) translateY(16px);
background: var(--ink);
color: #fff;
font-family: var(--ui);
font-size: 13.5px;
font-weight: 500;
padding: 10px 16px;
border-radius: var(--r-md);
box-shadow: 0 12px 32px rgba(15, 27, 45, 0.32);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s, transform 0.2s;
z-index: 50;
}
.toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ---------- Responsive ---------- */
@media (max-width: 640px) {
.page {
padding: 20px 16px 44px;
}
.authors {
gap: 6px 4px;
}
.author-btn {
font-size: 15px;
}
.affiliations {
font-size: 12.5px;
}
.abstract p {
font-size: 15px;
}
.variant-bar {
gap: 8px;
}
}
@media (prefers-reduced-motion: reduce) {
* {
transition: none !important;
}
}(function () {
"use strict";
var byline = document.getElementById("byline");
var authorList = document.getElementById("authorList");
var affList = document.getElementById("affList");
var toastEl = document.getElementById("toast");
if (!byline || !authorList || !affList) return;
var toastTimer = null;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("show");
}, 2200);
}
var authors = Array.prototype.slice.call(authorList.querySelectorAll(".author"));
var affs = Array.prototype.slice.call(affList.querySelectorAll(".aff"));
function affsOf(authorEl) {
var raw = authorEl.getAttribute("data-affs") || "";
return raw.split(",").map(function (s) { return s.trim(); }).filter(Boolean);
}
function clearHighlight() {
affs.forEach(function (a) { a.classList.remove("is-active"); });
authors.forEach(function (a) { a.classList.remove("is-active"); });
}
function highlight(authorEl) {
clearHighlight();
authorEl.classList.add("is-active");
var ids = affsOf(authorEl);
affs.forEach(function (a) {
if (ids.indexOf(a.getAttribute("data-aff")) !== -1) {
a.classList.add("is-active");
}
});
}
// Hover + focus: highlight matching affiliations
authors.forEach(function (authorEl) {
var btn = authorEl.querySelector(".author-btn");
if (!btn) return;
authorEl.addEventListener("mouseenter", function () { highlight(authorEl); });
authorEl.addEventListener("mouseleave", clearHighlight);
btn.addEventListener("focus", function () { highlight(authorEl); });
btn.addEventListener("blur", clearHighlight);
// Click name = scroll affiliations into view + sticky highlight toggle
btn.addEventListener("click", function (e) {
// ignore clicks that originate on the corresponding-author star
if (e.target.closest(".corr-star")) return;
var ids = affsOf(authorEl);
var name = authorEl.querySelector(".author-name").textContent;
var label = ids.length > 1 ? "affiliations " : "affiliation ";
toast(name + " — " + label + ids.join(", "));
});
});
// Hovering an affiliation row also highlights the authors who belong to it
affs.forEach(function (affEl) {
var id = affEl.getAttribute("data-aff");
affEl.addEventListener("mouseenter", function () {
clearHighlight();
affEl.classList.add("is-active");
authors.forEach(function (a) {
if (affsOf(a).indexOf(id) !== -1) a.classList.add("is-active");
});
});
affEl.addEventListener("mouseleave", clearHighlight);
});
// ---------- Corresponding-author email reveal ----------
var openPop = null;
function closePop() {
if (openPop) { openPop.remove(); openPop = null; }
document.removeEventListener("click", onDocClick, true);
document.removeEventListener("keydown", onEsc);
}
function onDocClick(e) {
if (openPop && !openPop.contains(e.target) && !e.target.closest(".corr-star")) {
closePop();
}
}
function onEsc(e) { if (e.key === "Escape") closePop(); }
authorList.addEventListener("click", function (e) {
var star = e.target.closest(".corr-star");
if (!star) return;
e.preventDefault();
e.stopPropagation();
var authorEl = star.closest(".author");
var email = authorEl ? authorEl.getAttribute("data-corr") : null;
if (!email) return;
var wasThis = openPop && openPop.dataset.email === email;
closePop();
if (wasThis) return;
var pop = document.createElement("div");
pop.className = "email-pop";
pop.dataset.email = email;
var link = document.createElement("a");
link.href = "mailto:" + email;
link.textContent = email;
var copyBtn = document.createElement("button");
copyBtn.type = "button";
copyBtn.textContent = "Copy";
copyBtn.addEventListener("click", function (ev) {
ev.stopPropagation();
var done = function () { toast("Email copied: " + email); closePop(); };
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(email).then(done, done);
} else {
done();
}
});
pop.appendChild(link);
pop.appendChild(copyBtn);
byline.style.position = "relative";
byline.appendChild(pop);
var sr = star.getBoundingClientRect();
var br = byline.getBoundingClientRect();
var left = sr.left - br.left - 12;
var top = sr.bottom - br.top + 8;
var maxLeft = byline.clientWidth - pop.offsetWidth - 4;
pop.style.left = Math.max(4, Math.min(left, maxLeft)) + "px";
pop.style.top = top + "px";
openPop = pop;
setTimeout(function () {
document.addEventListener("click", onDocClick, true);
document.addEventListener("keydown", onEsc);
}, 0);
});
// ---------- ORCID feedback ----------
authorList.querySelectorAll(".orcid:not(.orcid--none)").forEach(function (a) {
a.addEventListener("click", function () {
var label = a.getAttribute("aria-label") || "ORCID";
toast("Opening " + label.replace(" (opens in new tab)", ""));
});
});
// ---------- Variant toggle (expanded / compact) ----------
function buildCompactSummary() {
var parts = affs.map(function (a) {
var num = a.querySelector(".aff-num").textContent.trim();
var txt = a.querySelector(".aff-text").textContent.trim();
// keep first clause (institution) for the compact footnote
var inst = txt.split(",").slice(0, 2).join(",").trim();
return num + " " + inst;
});
return parts.join(" · ");
}
byline.setAttribute("data-affsummary", buildCompactSummary());
var segBtns = Array.prototype.slice.call(document.querySelectorAll(".seg-btn"));
function setVariant(variant, focusIdx) {
byline.setAttribute("data-variant", variant);
closePop();
segBtns.forEach(function (b, i) {
var on = b.getAttribute("data-variant") === variant;
b.classList.toggle("is-active", on);
b.setAttribute("aria-checked", on ? "true" : "false");
b.tabIndex = on ? 0 : -1;
if (focusIdx != null && i === focusIdx) b.focus();
});
}
segBtns.forEach(function (b, i) {
b.tabIndex = b.classList.contains("is-active") ? 0 : -1;
b.addEventListener("click", function () { setVariant(b.getAttribute("data-variant")); });
b.addEventListener("keydown", function (e) {
if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
e.preventDefault();
var next = e.key === "ArrowRight"
? (i + 1) % segBtns.length
: (i - 1 + segBtns.length) % segBtns.length;
setVariant(segBtns[next].getAttribute("data-variant"), next);
}
});
});
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Author + Affiliation + ORCID</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=JetBrains+Mono:wght@400;500&family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="page">
<header class="masthead">
<p class="kicker">Journal of Computational Geophysics · Vol. 48, No. 3</p>
<h1 class="title">Stochastic inversion of mantle viscosity from joint
geoid and plate-motion constraints</h1>
<p class="doc-meta">
<span class="badge badge-oa">Open Access</span>
<span class="badge badge-art">Research Article</span>
<span class="mono">doi:10.4521/jcg.2026.0488</span>
</p>
<div class="variant-bar" role="group" aria-label="Byline variant">
<span class="variant-label">Byline variant</span>
<div class="seg" role="radiogroup" aria-label="Choose byline density">
<button class="seg-btn is-active" role="radio" aria-checked="true" data-variant="expanded">Expanded</button>
<button class="seg-btn" role="radio" aria-checked="false" data-variant="compact">Compact</button>
</div>
</div>
</header>
<main>
<!-- ====== BYLINE ====== -->
<section class="byline-block" id="byline" data-variant="expanded" aria-label="Authors and affiliations">
<ol class="authors" id="authorList">
<li class="author" data-affs="1" data-corr="elara.voss@uppsala-geo.se" data-orcid="0000-0002-4915-7733" data-equal="A">
<button class="author-btn" type="button">
<span class="author-name">Elara M. Voss</span><sup class="sups"><span class="aff-ref" data-aff="1">1</span><span class="mark mark-equal" title="Equal contribution">†</span><button class="corr-star" type="button" aria-label="Corresponding author — reveal email" title="Corresponding author">∗</button></sup>
</button>
<a class="orcid" href="https://orcid.org/0000-0002-4915-7733" target="_blank" rel="noopener" aria-label="ORCID 0000-0002-4915-7733 (opens in new tab)">
<span class="orcid-mark" aria-hidden="true">iD</span>
</a>
</li>
<li class="author" data-affs="1,2" data-orcid="0000-0001-8842-2210" data-equal="A">
<button class="author-btn" type="button">
<span class="author-name">Tobias R. Lindqvist</span><sup class="sups"><span class="aff-ref" data-aff="1">1</span>,<span class="aff-ref" data-aff="2">2</span><span class="mark mark-equal" title="Equal contribution">†</span></sup>
</button>
<a class="orcid" href="https://orcid.org/0000-0001-8842-2210" target="_blank" rel="noopener" aria-label="ORCID 0000-0001-8842-2210 (opens in new tab)">
<span class="orcid-mark" aria-hidden="true">iD</span>
</a>
</li>
<li class="author" data-affs="3">
<button class="author-btn" type="button">
<span class="author-name">Priya N. Raghavan</span><sup class="sups"><span class="aff-ref" data-aff="3">3</span></sup>
</button>
<a class="orcid orcid--none" aria-hidden="true" title="No ORCID provided">
<span class="orcid-mark orcid-mark--off">iD</span>
</a>
</li>
<li class="author" data-affs="2,4" data-orcid="0000-0003-3097-5561">
<button class="author-btn" type="button">
<span class="author-name">Mateus A. Cardoso</span><sup class="sups"><span class="aff-ref" data-aff="2">2</span>,<span class="aff-ref" data-aff="4">4</span></sup>
</button>
<a class="orcid" href="https://orcid.org/0000-0003-3097-5561" target="_blank" rel="noopener" aria-label="ORCID 0000-0003-3097-5561 (opens in new tab)">
<span class="orcid-mark" aria-hidden="true">iD</span>
</a>
</li>
<li class="author" data-affs="4" data-corr="h.nakamura@tohoku-eps.ac.jp" data-orcid="0000-0002-7710-9043">
<button class="author-btn" type="button">
<span class="author-name">Hana Nakamura</span><sup class="sups"><span class="aff-ref" data-aff="4">4</span><button class="corr-star" type="button" aria-label="Corresponding author — reveal email" title="Corresponding author">∗</button></sup>
</button>
<a class="orcid" href="https://orcid.org/0000-0002-7710-9043" target="_blank" rel="noopener" aria-label="ORCID 0000-0002-7710-9043 (opens in new tab)">
<span class="orcid-mark" aria-hidden="true">iD</span>
</a>
</li>
</ol>
<ol class="affiliations" id="affList">
<li class="aff" data-aff="1"><span class="aff-num mono">1</span><span class="aff-text">Department of Earth Sciences, Uppsala University, Villavägen 16, SE-752 36 Uppsala, Sweden</span></li>
<li class="aff" data-aff="2"><span class="aff-num mono">2</span><span class="aff-text">Centre for Geodynamic Modelling, ETH Zürich, Sonneggstrasse 5, 8092 Zürich, Switzerland</span></li>
<li class="aff" data-aff="3"><span class="aff-num mono">3</span><span class="aff-text">Indian Institute of Geomagnetism, New Panvel, Navi Mumbai 410218, India</span></li>
<li class="aff" data-aff="4"><span class="aff-num mono">4</span><span class="aff-text">Department of Earth & Planetary Sciences, Tohoku University, Aoba 6-3, Sendai 980-8578, Japan</span></li>
</ol>
<ul class="legend">
<li><span class="lg-mark">†</span> These authors contributed equally to this work.</li>
<li><span class="lg-mark">∗</span> Corresponding author. <span class="muted">Click the asterisk to reveal email.</span></li>
<li><span class="lg-orcid" aria-hidden="true">iD</span> Author has a verified ORCID iD <span class="muted">(opens orcid.org in a new tab).</span></li>
</ul>
</section>
<!-- ====== ABSTRACT (context for the byline) ====== -->
<section class="abstract" aria-label="Abstract">
<h2>Abstract</h2>
<p>We present a probabilistic framework that jointly inverts long-wavelength
geoid anomalies and present-day plate velocities to recover the radial
viscosity structure of the mantle. Using a Markov-chain Monte Carlo sampler
across <span class="mono">2.4 × 10⁶</span> forward evaluations, we constrain the
lower-mantle viscosity to <span class="mono">(1.8 ± 0.3) × 10²² Pa·s</span>,
a factor of <span class="mono">38±6</span> above the upper mantle. The recovered
profile is robust to lateral temperature heterogeneity below
<span class="mono">660 km</span> depth.</p>
<p class="kw"><strong>Keywords:</strong> mantle viscosity · geoid inversion · plate kinematics · Bayesian inference</p>
</section>
</main>
<footer class="foot">
<span class="mono">Received 4 Mar 2026</span> ·
<span class="mono">Accepted 28 May 2026</span> ·
<span class="mono">Published 15 Jun 2026</span>
</footer>
</div>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Author + Affiliation + ORCID
A complete journal-style byline rendered in the institutional house style — Inter for the author names and chrome, Source Serif 4 for the abstract prose, and JetBrains Mono for the DOI, dates, and figures. Each author name carries superscript affiliation numbers, a teal dagger for equal contribution, a red asterisk for corresponding authors, and a small green ORCID iD that links out to orcid.org in a new tab. Below the names sits a numbered affiliations card and a legend explaining every mark.
The block is wired for fast scanning. Hovering or keyboard-focusing an author highlights exactly the affiliations they are attached to, with an accent rule down the side of each matching row; conversely, hovering an affiliation row lights up every author who belongs to it. Clicking the corresponding-author asterisk reveals a small dark popover with a mailto: link and a Copy button, dismissible by clicking away or pressing Escape, and confirmed with a transient toast.
A segmented radiogroup toggles between two presentations: an expanded byline with the full affiliations list and legend, and a compact variant that collapses everything to a single muted institution line beneath the names — the pattern used for dense reference lists and search results. The control is arrow-key navigable, the layout reflows cleanly to ~360px, and reduced-motion preferences are honoured.
Illustrative UI only — fictional authors, data, and figures; not real scientific results.