@charset "UTF-8";
/* ==========================================================================
   Sovereign Terminal — main stylesheet
   --------------------------------------------------------------------------
   A private-bank finance newsroom: white ground, deep navy plates, one warm
   gold accent. Headlines and figures are set in Newsreader, everything else
   in Hanken Grotesk. Panels are soft-cornered, buttons are pills, and the
   navy is spent on the few blocks that should read as a change of gear —
   the feature desk, the newsletter, the footer.

    1. Tokens
    2. Reset & base
    3. Shared controls (pills, round buttons, icons, eyebrow)
    4. Header & sticky bar
    5. Navigation & drawer
    6. Bands & section heads
    7. Hero lead
    8. Figures row
    9. Cards
   10. Section layouts (feature, split)
   11. Single post
   12. Archive, pages & pagination
   13. Sidebar
   14. Newsletter band, opt-in form & modal
   15. Footer
   16. Widgets (political control, century, market history)
   17. Utilities & responsive
   ========================================================================== */

/* ═══ 1. Tokens ═══════════════════════════════════════════════════════════ */

:root {
	--navy: #0f2140;
	--navy-2: #1a3056;
	--navy-3: #2c4570;
	--gold: #b08a4e;
	--gold-soft: #d6b98a;      /* gold text on navy */
	--gold-ink: #86632f;       /* gold text on white — passes 4.5:1 */
	--gold-btn: #9a7440;       /* gold button ground under white text */
	--gold-tint: #f6efe3;

	--ink: #14203a;
	--ink-2: #3b4760;
	--muted: #5b6679;
	--on-navy: #c3ccdd;
	--on-navy-2: #95a2ba;

	--bg: #ffffff;
	--mist: #f2f5f9;
	--mist-2: #e9eef5;
	--line: #e3e7ee;
	--line-2: #d0d7e2;

	--up: #1e7a52;
	--down: #b23a32;

	--font-display: "Newsreader", Georgia, "Times New Roman", serif;
	--font-body: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;

	--r-xl: 32px;
	--r-lg: 24px;
	--r-md: 20px;
	--r-sm: 14px;

	--container: 1320px;
	--gutter: 2rem;
	--band-y: 4.5rem;
	--gap: 1.25rem;

	--shadow-lift: 0 22px 50px -28px rgba(15, 33, 64, .45);
	--ease: cubic-bezier(.2, .7, .2, 1);

	--logo-h: 40px;
}

/* ═══ 2. Reset & base ═════════════════════════════════════════════════════ */

*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
svg,
video,
canvas { display: block; max-width: 100%; }
img { height: auto; }

a {
	color: inherit;
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 500;
	line-height: 1.15;
	color: var(--navy);
	font-optical-sizing: auto;
	text-wrap: balance;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; }

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button { cursor: pointer; }

:focus-visible {
	outline: 2px solid var(--navy);
	outline-offset: 3px;
	border-radius: 6px;
}

::selection { background: var(--gold-tint); color: var(--navy); }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: 1rem;
	top: -100px;
	z-index: 1100;
	padding: .75rem 1.25rem;
	background: var(--navy);
	color: #fff;
	border-radius: 999px;
	font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.container,
.band__inner,
.site-footer__inner {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.site-main { display: block; }

/* ═══ 3. Shared controls ══════════════════════════════════════════════════ */

.icon {
	width: 20px;
	height: 20px;
	flex: none;
}

/* The pill: every button-shaped link on the site. */
.pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	padding: .78rem 1.35rem;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--font-body);
	font-size: .93rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.pill .icon { width: 18px; height: 18px; }

.pill--sm { padding: .58rem 1.05rem; font-size: .86rem; }
.pill--lg { padding: .95rem 1.7rem; font-size: 1rem; }
.pill--block { display: flex; width: 100%; }

.pill--navy { background: var(--navy); color: #fff; }
.pill--navy:hover { background: var(--navy-2); }

.pill--gold { background: var(--gold-btn); color: #fff; }
.pill--gold:hover { background: #87652f; }

.pill--light {
	background: #fff;
	border-color: var(--line);
	color: var(--navy);
	box-shadow: 0 8px 22px -16px rgba(15, 33, 64, .4);
}
.pill--light:hover { border-color: var(--line-2); }

.pill--ghost {
	border-color: var(--line-2);
	color: var(--navy);
}
.pill--ghost:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

/* The round button: the "+" and arrow controls that close a card. */
.round-btn {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 50%;
	background: #fff;
	color: var(--navy);
	box-shadow: 0 10px 24px -14px rgba(15, 33, 64, .55);
	transition: background-color .2s var(--ease), color .2s var(--ease);
}
.round-btn .icon { width: 18px; height: 18px; }
.round-btn:hover { background: var(--gold-btn); color: #fff; }

.round-btn--navy { background: var(--navy); color: #fff; box-shadow: none; }

/* The desk marker above every headline. Sentence case, gold, no box. */
.eyebrow {
	display: inline-block;
	font-family: var(--font-body);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--gold-ink);
	line-height: 1.3;
}
.eyebrow:hover { color: var(--navy); }

/* ═══ 4. Header & sticky bar ══════════════════════════════════════════════ */

.site-header {
	position: relative;
	z-index: 50;
	background: #fff;
	border-bottom: 1px solid var(--line);
}

.masthead {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 2rem;
	min-height: 86px;
}

.masthead__brand,
.stickybar__brand,
.nav-drawer__brand { display: flex; align-items: center; min-width: 0; }

.custom-logo-link { display: block; line-height: 0; }

.custom-logo {
	max-height: var(--logo-h);
	width: auto;
	object-fit: contain;
}

.site-logo {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem);
	letter-spacing: -0.015em;
	line-height: 1;
	color: var(--navy);
	white-space: nowrap;
}

.masthead__nav { justify-self: center; }
.masthead__action { justify-self: end; }

.menu-toggle {
	display: none;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: #fff;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
}
.menu-toggle span {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: var(--navy);
}
.menu-toggle span:last-child { width: 12px; margin-left: 6px; }

/* ── The condensed bar that slides in on scroll ───────────────────────── */

.site-header--sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 90;
	background: rgba(255, 255, 255, .94);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--line);
	transform: translateY(-105%);
	visibility: hidden;
	transition: transform .3s var(--ease), visibility .3s;
}
.site-header--sticky.is-visible { transform: none; visibility: visible; }

.stickybar {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 2rem;
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	min-height: 64px;
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.stickybar .custom-logo { max-height: min(calc(var(--logo-h) * .8), 36px); }
.stickybar .site-logo { font-size: 1.25rem; }
.stickybar .nav-primary { justify-self: center; }
.stickybar__action { justify-self: end; }

/* ═══ 5. Navigation & drawer ══════════════════════════════════════════════ */

.nav-list {
	display: flex;
	align-items: center;
	gap: clamp(1.1rem, .2rem + 1.4vw, 2.1rem);
	list-style: none;
}

.nav-list li { position: relative; }

.nav-list > li > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: .55rem 0;
	font-size: .95rem;
	font-weight: 600;
	color: var(--ink);
	transition: color .2s var(--ease);
}

.nav-list > li > a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: var(--gold);
	transform: translateX(-50%) scaleX(0);
	transition: transform .25s var(--ease);
}

.nav-list > li > a:hover { color: var(--gold-ink); }

.nav-list > .current-menu-item > a,
.nav-list > .current-menu-ancestor > a,
.nav-list > .current-post-ancestor > a { color: var(--gold-ink); }

.nav-list > .current-menu-item > a::after,
.nav-list > .current-menu-ancestor > a::after,
.nav-list > .current-post-ancestor > a::after { transform: translateX(-50%) scaleX(1); }

/* A small chevron on items that own a sub-menu. */
.nav-primary .menu-item-has-children > a { padding-right: 1rem; }
.nav-primary .menu-item-has-children > a::before {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
}

.nav-primary .sub-menu {
	position: absolute;
	top: calc(100% + .6rem);
	left: -1rem;
	z-index: 20;
	min-width: 230px;
	padding: .5rem;
	list-style: none;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	box-shadow: var(--shadow-lift);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.nav-primary .sub-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -.7rem;
	height: .7rem;
}
.nav-primary li:hover > .sub-menu,
.nav-primary li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.nav-primary .sub-menu a {
	display: block;
	padding: .6rem .8rem;
	border-radius: 10px;
	font-size: .9rem;
	color: var(--ink);
}
.nav-primary .sub-menu a:hover { background: var(--mist); color: var(--navy); }

/* ── The drawer ───────────────────────────────────────────────────────── */

.nav-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 200;
	display: flex;
	flex-direction: column;
	width: min(420px, 90vw);
	padding: 1.1rem 1.5rem 1.5rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #fff;
	border-radius: var(--r-xl) 0 0 var(--r-xl);
	box-shadow: -30px 0 60px -30px rgba(15, 33, 64, .45);
	transform: translateX(105%);
	visibility: hidden;
	transition: transform .35s var(--ease), visibility .35s;
}
.nav-drawer.is-open {
	transform: none;
	visibility: visible;
	/* Visible at once when opening, so the close button can take focus in
	   the same frame; the delay only applies on the way out. */
	transition: transform .35s var(--ease), visibility 0s;
}

.nav-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--line);
}
.nav-drawer__brand .custom-logo { max-height: min(var(--logo-h), 36px); }
.nav-drawer__brand .site-logo { font-size: 1.3rem; }

.nav-close {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex: none;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--mist);
	color: var(--navy);
}
.nav-close svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
}
.nav-close:hover { background: var(--navy); color: #fff; }

.nav-drawer__nav { padding-top: .5rem; }

.nav-drawer .nav-list {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}
.nav-drawer .nav-list > li { border-bottom: 1px solid var(--line); }
.nav-drawer .nav-list > li > a {
	display: flex;
	padding: 1rem 0;
	font-family: var(--font-display);
	font-size: 1.45rem;
	font-weight: 500;
	color: var(--navy);
}
.nav-drawer .nav-list > li > a::after { display: none; }
.nav-drawer .nav-list > li > a:hover,
.nav-drawer .nav-list > .current-menu-item > a { color: var(--gold-ink); }

.nav-drawer .sub-menu {
	list-style: none;
	padding: 0 0 .9rem 1rem;
}
.nav-drawer .sub-menu a {
	display: block;
	padding: .4rem 0;
	font-size: .98rem;
	color: var(--muted);
}
.nav-drawer .sub-menu a:hover { color: var(--navy); }

.nav-drawer__card {
	margin-top: auto;
	padding: 1.35rem;
	border-radius: var(--r-md);
	background: var(--mist);
}
.nav-drawer__nav + .nav-drawer__card { margin-top: 2rem; }
@media (min-height: 700px) {
	.nav-drawer__nav + .nav-drawer__card { margin-top: auto; }
	.nav-drawer__nav { margin-bottom: 2rem; }
}
.nav-drawer__pitch {
	font-size: .92rem;
	line-height: 1.55;
	color: var(--ink-2);
	margin-bottom: 1rem;
}

.nav-scrim {
	position: fixed;
	inset: 0;
	z-index: 190;
	background: rgba(9, 18, 36, .45);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s var(--ease), visibility .3s;
}
.nav-scrim.is-open { opacity: 1; visibility: visible; }

/* ═══ 6. Bands & section heads ════════════════════════════════════════════ */

.band { padding-block: var(--band-y) 0; }
.band--hero { padding-top: 1.5rem; }
.band--tight { padding-top: 2.5rem; }
.site-main > .band:last-child { padding-bottom: var(--band-y); }

.band__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-bottom: 2rem;
}

.band__title {
	font-size: clamp(1.85rem, 1.35rem + 1.4vw, 2.6rem);
	letter-spacing: -0.015em;
	line-height: 1.1;
}
.band__title a:hover { color: var(--gold-ink); }

.band__rule,
.page-header__mark,
.century__mark {
	display: block;
	width: 52px;
	height: 3px;
	border-radius: 3px;
	background: var(--gold);
}
.band__rule { margin-top: .9rem; }

.band__more { flex: none; }

/* ═══ 7. Hero slider ══════════════════════════════════════════════════════ */

/* A navy stage with the story tabs along its foot. Slides are stacked in one
   grid cell, so the stage takes the height of the tallest and never jumps
   as they change. */
.hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--r-xl);
	background: var(--navy);
	color: #fff;
}
.hero :focus-visible { outline-color: var(--gold-soft); }

.hero__stage {
	display: grid;
	min-height: 580px;
}

.hero-slide {
	grid-area: 1 / 1;
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
	opacity: 0;
	visibility: hidden;
	transition: opacity .7s var(--ease), visibility .7s;
}
.hero-slide.is-active {
	z-index: 1;
	opacity: 1;
	visibility: visible;
}

/* The photograph fills the right of the stage and dissolves into the navy,
   so the headline sits on a calm ground without a hard seam. */
.hero-slide__media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 64%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 18%, #000 42%);
	mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 18%, #000 42%);
}
.hero-slide__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.06);
	transition: transform 7s cubic-bezier(.2, .6, .3, 1);
}
.hero-slide.is-active .hero-slide__media img { transform: scale(1); }

/* A floor of navy under the photograph, so the tabs below read cleanly. */
.hero-slide__media::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 30%;
	background: linear-gradient(180deg, rgba(15, 33, 64, 0) 0%, rgba(15, 33, 64, .7) 100%);
}

.hero-slide__body {
	position: relative;
	z-index: 1;
	grid-column: 1;
	align-self: center;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: clamp(2rem, 1rem + 3.5vw, 4.5rem);
}

/* The copy arrives a beat after the photograph. */
.hero-slide__body > * {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.hero-slide.is-active .hero-slide__body > * { opacity: 1; transform: none; }
.hero-slide.is-active .hero-slide__body > :nth-child(2) { transition-delay: .08s; }
.hero-slide.is-active .hero-slide__body > :nth-child(3) { transition-delay: .16s; }
.hero-slide.is-active .hero-slide__body > :nth-child(4) { transition-delay: .24s; }

.hero-slide__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1.1rem;
	margin-bottom: 1.4rem;
	font-size: .86rem;
	color: var(--on-navy-2);
}
.hero-slide__meta .eyebrow {
	padding: .38rem .85rem;
	border-radius: 999px;
	background: rgba(214, 185, 138, .16);
	color: var(--gold-soft);
}
.hero-slide__meta .eyebrow:hover { background: var(--gold-btn); color: #fff; }

.hero-slide__title {
	max-width: 15ch;
	font-size: clamp(2.3rem, 1.2rem + 3.3vw, 4.2rem);
	line-height: 1.04;
	letter-spacing: -0.02em;
	color: #fff;
}
.hero-slide.lead--medium .hero-slide__title { max-width: 18ch; font-size: clamp(2.05rem, 1.15rem + 2.5vw, 3.35rem); line-height: 1.07; }
.hero-slide.lead--long .hero-slide__title { max-width: 22ch; font-size: clamp(1.8rem, 1.1rem + 1.9vw, 2.7rem); line-height: 1.1; }
.hero-slide__title a:hover { color: var(--gold-soft); }

.hero-slide__excerpt {
	max-width: 34rem;
	margin: 1.3rem 0 0;
	font-size: 1.04rem;
	line-height: 1.65;
	color: var(--on-navy);
}

.hero-slide__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 2rem;
}

/* A translucent pill for the secondary action on a dark photograph. */
.pill--glass {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .2);
	color: #fff;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.pill--glass:hover { background: rgba(255, 255, 255, .18); }

/* ── Controls: counter, previous, pause, next ─────────────────────────── */

.hero__controls {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: .3rem;
	padding: .3rem .3rem .3rem 1rem;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 999px;
	background: rgba(15, 33, 64, .55);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.hero__controls[hidden] { display: none; }

.hero__counter {
	margin-right: .45rem;
	font-family: var(--font-display);
	font-size: 1.05rem;
	color: #fff;
	font-variant-numeric: lining-nums tabular-nums;
}
.hero__total { color: var(--on-navy-2); }

.hero__btn {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	transition: background-color .2s var(--ease), color .2s var(--ease);
}
.hero__btn:hover { background: #fff; color: var(--navy); }
.hero__btn svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.hero__btn .hero__icon-play { fill: currentColor; stroke: none; }
.hero__btn .hero__icon-play,
.hero__btn.is-paused .hero__icon-pause { display: none; }
.hero__btn.is-paused .hero__icon-play { display: block; }

/* ── The story tabs ───────────────────────────────────────────────────── */

.hero__tabs {
	position: relative;
	z-index: 2;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	border-top: 1px solid rgba(255, 255, 255, .1);
	background: rgba(9, 20, 40, .55);
}

.hero-tab {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: .9rem;
	padding: 1.3rem 1.5rem 1.45rem;
	color: #fff;
	opacity: .58;
	transition: opacity .25s var(--ease), background-color .25s var(--ease);
}
.hero-tab + .hero-tab { border-left: 1px solid rgba(255, 255, 255, .08); }
.hero-tab:hover { opacity: .9; background: rgba(255, 255, 255, .03); }
.hero-tab.is-active { opacity: 1; }

.hero-tab__bar {
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 3px;
	overflow: hidden;
}
.hero-tab__fill {
	display: block;
	height: 100%;
	background: var(--gold);
	transform: scaleX(0);
	transform-origin: left center;
}

/* Static: the active tab is simply marked. Rotating: its bar fills over the
   interval, and main.js advances when the fill completes. */
.hero-tab.is-active .hero-tab__fill { transform: scaleX(1); }
.hero.is-running .hero-tab.is-active .hero-tab__fill {
	transform: scaleX(0);
	animation: hero-fill var(--hero-interval, 7000ms) linear forwards;
}
.hero.is-held .hero-tab.is-active .hero-tab__fill { animation-play-state: paused; }

@keyframes hero-fill {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

.hero-tab__index {
	font-family: var(--font-display);
	font-size: 1.35rem;
	line-height: 1;
	color: var(--gold-soft);
	font-variant-numeric: lining-nums tabular-nums;
}

.hero-tab__text {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	min-width: 0;
}

.hero-tab__cat {
	font-size: .74rem;
	font-weight: 600;
	color: var(--on-navy-2);
}

.hero-tab__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: var(--font-display);
	font-size: 1rem;
	line-height: 1.3;
}

/* ═══ 8. The long view ════════════════════════════════════════════════════ */

.band--figures { padding-top: 1.25rem; }

.longview {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 3.3fr);
	align-items: center;
	gap: clamp(1.5rem, 1rem + 2vw, 3rem);
	padding: clamp(1.5rem, 1rem + 1.6vw, 2.4rem);
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	background: #fff;
}

.longview__title {
	font-size: clamp(1.6rem, 1.3rem + .9vw, 2.15rem);
	line-height: 1.1;
}

.longview__text {
	max-width: 30ch;
	margin: 1rem 0 0;
	font-size: .94rem;
	line-height: 1.6;
	color: var(--ink-2);
}

.longview__figures {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
}

.figure {
	/* Padding as variables, so the hover wash (below) can be drawn from the
	   same numbers and always sit evenly around the text, whatever the
	   layout does to each side. */
	--pt: .25rem;
	--pb: .25rem;
	--pl: clamp(1rem, .5rem + 1vw, 1.6rem);
	--pr: clamp(1rem, .5rem + 1vw, 1.6rem);
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: var(--pt) var(--pr) var(--pb) var(--pl);
	border-left: 1px solid var(--line);
}
.figure dd { margin: 0; }

.figure__value {
	order: 1;
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.5rem + 1.2vw, 2.65rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--navy);
	font-variant-numeric: lining-nums tabular-nums;
	white-space: nowrap;
}

.figure__label {
	order: 2;
	min-height: 2.8em;
	margin-top: .5rem;
	font-size: .84rem;
	line-height: 1.4;
	color: var(--muted);
}

.figure__viz { order: 3; margin-top: .9rem; }

.figure__chart {
	width: 100%;
	height: 56px;
	overflow: visible;
}

.figure__range {
	display: flex;
	justify-content: space-between;
	margin-top: .45rem;
	font-size: .72rem;
	font-weight: 600;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

/* ── The figure as a whole ────────────────────────────────────────────── */

.figure {
	position: relative;
	transition: background-color .35s var(--ease);
}

/* A mist wash rises behind the figure being looked at: the text area grown
   by the same .65rem on every side, computed from the figure's own padding
   so it stays centred on the text and inside its cell in every layout. */
.figure::before {
	content: "";
	position: absolute;
	top: calc(var(--pt) - .65rem);
	right: calc(var(--pr) - .65rem);
	bottom: calc(var(--pb) - .65rem);
	left: calc(var(--pl) - .65rem);
	z-index: 0;
	border-radius: 18px;
	background: var(--mist);
	opacity: 0;
	transform: scale(.96);
	transition: opacity .35s var(--ease), transform .35s var(--ease);
	pointer-events: none;
}
/* Only where a pointer can hover: on touch screens the wash would flash on
   every tap and, with no side padding on phone columns, sit off the text. */
@media (hover: hover) {
	.figure:hover::before { opacity: 1; transform: none; }
	.figure:hover .figure__value { color: var(--gold-ink); }
}
.figure > * { position: relative; z-index: 1; }

.figure__value { transition: color .3s var(--ease); }

.figure__plot {
	position: relative;
	display: block;
}

.figure__chart { cursor: crosshair; }

/* The range labels give way to the readout while a mark is lit. */
.figure__range { position: relative; }
.figure__from,
.figure__to { transition: opacity .2s var(--ease); }
.figure__readout {
	position: absolute;
	inset: 0 auto 0 0;
	right: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-weight: 500;
	color: var(--ink-2);
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.figure__readout b { font-weight: 700; color: var(--navy); }
.figure.is-tracking .figure__from,
.figure.is-tracking .figure__to { opacity: 0; }
.figure.is-tracking .figure__readout { opacity: 1; transform: none; }

/* Before the panel is first on screen the charts wait, so their entrance
   starts from nothing rather than jumping back to it. */
.longview__figures.is-armed:not(.is-revealed) .figure__plot { opacity: 0; }

/* ── Shared marks ─────────────────────────────────────────────────────── */

.figure__chart line,
.figure__chart path { vector-effect: non-scaling-stroke; }

.fc-axis { stroke: var(--line-2); stroke-width: 1; }

/* Marks scale from their own base, not from the SVG's corner. */
.fc-tick,
.fc-bar,
.fc-drop,
.fc-area {
	transform-box: fill-box;
	transition: opacity .25s var(--ease), fill .25s var(--ease), stroke .25s var(--ease), stroke-width .25s var(--ease);
}

/* While a mark is lit, the rest of its chart steps back. */
.figure.is-tracking [data-idx]:not(.is-hot) { opacity: .32; }

.fc-dot {
	position: absolute;
	left: var(--x, 0%);
	top: var(--y, 0%);
	width: 9px;
	height: 9px;
	margin: -4.5px 0 0 -4.5px;
	border-radius: 50%;
	pointer-events: none;
}

/* ── years: ticks rise in turn, then a dot sweeps the century ─────────── */

.fc-tick {
	stroke: var(--navy);
	stroke-width: 2;
	stroke-linecap: round;
	transform-origin: 50% 100%;
}
.fc-mark { stroke: var(--gold); stroke-width: 3; }
.fc-tick.is-hot { stroke: var(--gold); stroke-width: 4; }

.figure.is-playing .fc-tick {
	animation: fc-rise .55s cubic-bezier(.34, 1.56, .64, 1) both;
	animation-delay: calc(var(--i) * 55ms);
}

.fc-dot--sweep {
	--x: 2%;
	background: var(--gold);
	box-shadow: 0 0 0 4px rgba(176, 138, 78, .22);
	opacity: 0;
}
.figure.is-playing .fc-dot--sweep {
	animation: fc-sweep 1.5s .45s cubic-bezier(.65, 0, .35, 1) both;
}

@keyframes fc-rise {
	from { transform: scaleY(0); }
}
@keyframes fc-sweep {
	0% { left: 2%; opacity: 0; }
	12% { opacity: 1; }
	88% { opacity: 1; }
	100% { left: 98%; opacity: 0; }
}

/* ── mean: bars spring up from zero, the average line marches ─────────── */

.fc-bar {
	fill: var(--navy);
	transform-origin: 50% 100%;
}
.fc-bar--down { fill: var(--down); transform-origin: 50% 0; }
.fc-bar.is-hot { fill: var(--gold); }
.fc-bar--down.is-hot { fill: #8e2c25; }

.figure.is-playing .fc-bar {
	animation: fc-grow .7s cubic-bezier(.34, 1.56, .64, 1) both;
	animation-delay: calc(var(--i) * 60ms);
}

.fc-mean {
	stroke: var(--gold);
	stroke-width: 1.5;
	stroke-dasharray: 4 3;
}
.figure.is-playing .fc-mean { animation: fc-fade .5s .75s both; }
@media (prefers-reduced-motion: no-preference) {
	.figure--mean:hover .fc-mean { animation: fc-fade .5s .75s both, fc-march .9s linear infinite; }
}

@keyframes fc-grow {
	from { transform: scaleY(0); }
}
@keyframes fc-fade {
	from { opacity: 0; }
}
@keyframes fc-march {
	to { stroke-dashoffset: -14; }
}

/* ── growth: the curve draws itself, the area fills, the end pulses ───── */

/* No non-scaling stroke here: the dash that draws the line is measured in
   pathLength units, which the non-scaling mode would throw off. */
.figure__chart .fc-line {
	vector-effect: none;
	fill: none;
	stroke: var(--navy);
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}
.figure.is-playing .fc-line { animation: fc-draw 1.3s cubic-bezier(.45, 0, .2, 1) both; }

.fc-area {
	fill: rgba(176, 138, 78, .16);
	transform-origin: 50% 100%;
}
.figure.is-playing .fc-area { animation: fc-fill .8s .75s var(--ease) both; }

.fc-dot--end {
	background: var(--gold);
	opacity: 1;
}
.figure.is-playing .fc-dot--end { animation: fc-pop .5s 1.15s cubic-bezier(.34, 1.56, .64, 1) both; }
.fc-dot--end::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--gold);
	opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
	.figure--growth:hover .fc-dot--end::after { animation: fc-pulse 1.6s 1.3s ease-out infinite; }
}

.fc-guide {
	stroke: var(--gold);
	stroke-width: 1;
	stroke-dasharray: 2 2;
	opacity: 0;
	transition: opacity .2s var(--ease);
}
.fc-dot--tracker {
	background: #fff;
	border: 2px solid var(--navy);
	opacity: 0;
	transition: left .18s var(--ease), top .18s var(--ease), opacity .2s var(--ease);
}
.figure--growth.is-tracking .fc-guide,
.figure--growth.is-tracking .fc-dot--tracker { opacity: 1; }
.figure--growth.is-tracking .fc-dot--end { opacity: .35; }

@keyframes fc-draw {
	from { stroke-dashoffset: 1; }
}
@keyframes fc-fill {
	from { opacity: 0; transform: scaleY(.3); }
}
@keyframes fc-pop {
	from { opacity: 0; transform: scale(0); }
}
@keyframes fc-pulse {
	0% { opacity: .55; transform: scale(1); }
	100% { opacity: 0; transform: scale(3.4); }
}

/* ── bears: each crash drops from the axis and bounces ────────────────── */

.fc-drop {
	stroke: var(--down);
	stroke-width: 3;
	stroke-linecap: round;
	transform-origin: 50% 0;
}
.fc-drop.is-hot { stroke: #8e2c25; stroke-width: 5; }

.figure.is-playing .fc-drop {
	animation: fc-fall .75s cubic-bezier(.34, 1.7, .64, 1) both;
	animation-delay: calc(.15s + var(--i) * 85ms);
}
.figure.is-playing .fc-axis--bears { animation: fc-flash .9s var(--ease); }

@keyframes fc-fall {
	from { transform: scaleY(0); }
}
@keyframes fc-flash {
	0%, 100% { stroke: var(--line-2); }
	30% { stroke: var(--down); }
}


/* ═══ 9. Cards ════════════════════════════════════════════════════════════ */

.grid {
	display: grid;
	gap: var(--gap);
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: .7rem;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: #fff;
	transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover { border-color: var(--line-2); box-shadow: var(--shadow-lift); }

.card__media {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--r-sm);
	background: var(--mist);
}
.card__media--4x3 { aspect-ratio: 4 / 3; }
.card__media--16x9 { aspect-ratio: 16 / 9; }
.card__media--1x1 { aspect-ratio: 1; }

.card__media img,
.rowcard__media img,
.side-card__media img,
.feature__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s var(--ease);
}
.card:hover .card__media img { transform: scale(1.04); }

/* Stands in for a missing featured image. */
.card__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(120% 90% at 100% 0%, var(--navy-3) 0%, transparent 60%),
		var(--navy);
	color: var(--gold-soft);
}
.card__placeholder .icon { width: 34px; height: 34px; opacity: .8; }

.card__body {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	flex: 1;
	padding: 1rem .45rem .45rem;
}

.card__title {
	font-size: 1.2rem;
	line-height: 1.28;
	letter-spacing: -0.005em;
}
.card__title a { transition: color .2s var(--ease); }
.card__title a:hover { color: var(--gold-ink); }

.card__excerpt {
	font-size: .92rem;
	line-height: 1.55;
	color: var(--muted);
	margin: 0;
}

.card__date {
	margin-top: auto;
	padding-top: .35rem;
	font-size: .82rem;
	color: var(--muted);
}

.sticky .card__title a::before {
	content: "";
	display: inline-block;
	width: .45em;
	height: .45em;
	margin: 0 .45em .12em 0;
	border-radius: 50%;
	background: var(--gold);
}

/* ═══ 10. Section layouts ═════════════════════════════════════════════════ */

/* ── grid: the expanding photo accordion ──────────────────────────────── */

/* Base: a 2×2 grid of photograph panels in a navy frame. Above 1080px the
   frame becomes a single row that expands whichever panel is pointed at. */
.accordion {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	padding: 10px;
	border-radius: var(--r-xl);
	background: var(--navy);
}

.acc-panel {
	position: relative;
	display: flex;
	min-width: 0;
	min-height: 340px;
	overflow: hidden;
	isolation: isolate;
	border-radius: calc(var(--r-xl) - 8px);
	background: var(--navy-2);
	color: #fff;
	transition: box-shadow .4s var(--ease);
}

.acc-panel__media {
	position: absolute;
	inset: 0;
	z-index: -3;
}
.acc-panel__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .9s var(--ease);
}
.acc-panel:hover .acc-panel__media img { transform: scale(1.04); }

/* Two layers over the photograph: a navy dim that closed panels carry, and
   the gradient that keeps the headline legible on any image. */
.acc-panel::before,
.acc-panel::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.acc-panel::before {
	z-index: -2;
	background: var(--navy);
	opacity: 0;
	transition: opacity .5s var(--ease);
}
.acc-panel::after {
	z-index: -1;
	background: linear-gradient(180deg,
		rgba(15, 33, 64, .7) 0%,
		rgba(15, 33, 64, 0) 28%,
		rgba(15, 33, 64, .15) 45%,
		rgba(15, 33, 64, .82) 72%,
		rgba(15, 33, 64, .97) 100%);
}

.acc-panel__body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 1.2rem 1.25rem 1.35rem;
}

.acc-panel__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .75rem;
	font-size: .8rem;
	font-weight: 600;
	color: #fff;
	text-shadow: 0 1px 10px rgba(9, 20, 40, .7);
}
.acc-panel__meta .eyebrow {
	text-shadow: none;
	position: relative;
	z-index: 2;
	padding: .32rem .75rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
}
.acc-panel__meta .eyebrow:hover { background: var(--gold-btn); color: #fff; }

.acc-panel__title {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: clamp(1.15rem, 1rem + .45vw, 1.4rem);
	line-height: 1.22;
	color: #fff;
}

/* The whole panel is the story's link; the desk marker sits above it. */
.acc-panel__title a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.acc-panel__title a:focus-visible { outline: 0; }
.acc-panel__title a:focus-visible::before {
	outline: 2px solid var(--gold-soft);
	outline-offset: -4px;
	border-radius: inherit;
}

/* The excerpt and the call to action, folded away on closed panels. The
   0fr → 1fr row animates the height without a guessed max-height. */
.acc-panel__more {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows .5s var(--ease);
}
.acc-panel__more > div { min-height: 0; overflow: hidden; }

.acc-panel__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-width: 42ch;
	margin: .7rem 0 0;
	font-size: .92rem;
	line-height: 1.55;
	color: var(--on-navy);
	transition: opacity .4s var(--ease);
}

.acc-panel__cta {
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	margin-top: 1rem;
	font-size: .88rem;
	font-weight: 600;
	color: var(--gold-soft);
}
.acc-panel__go {
	width: 38px;
	height: 38px;
	background: var(--gold-btn);
	color: #fff;
	box-shadow: none;
}
.acc-panel:hover .acc-panel__go { background: #fff; color: var(--navy); }

/* ── Desktop: one row that expands the panel being pointed at ─────────── */

@media (min-width: 1081px) {
	.accordion {
		display: flex;
		height: 500px;
	}

	.acc-panel {
		flex: 1 1 0;
		min-height: 0;
		transition: flex-grow .65s var(--ease), box-shadow .4s var(--ease);
	}
	.acc-panel::before { opacity: .26; }
	.acc-panel__more { grid-template-rows: 0fr; }
	.acc-panel__excerpt { opacity: 0; }

	/* Open: the first panel by default, or whichever is pointed at or holds
	   keyboard focus. */
	.acc-panel:first-child,
	.acc-panel:hover,
	.acc-panel:focus-within {
		flex-grow: 2.1;
		box-shadow: inset 0 -3px 0 var(--gold);
	}
	:is(.acc-panel:first-child, .acc-panel:hover, .acc-panel:focus-within)::before { opacity: 0; }
	:is(.acc-panel:first-child, .acc-panel:hover, .acc-panel:focus-within) .acc-panel__more { grid-template-rows: 1fr; }
	:is(.acc-panel:first-child, .acc-panel:hover, .acc-panel:focus-within) .acc-panel__excerpt { opacity: 1; }

	/* Closed again: the default panel once another is pointed at. Keyed on
	   a hovered PANEL rather than the row, so the pointer crossing the gap
	   between two panels does not snap every panel shut. Keyboard focus
	   outranks the pointer, so a resting mouse cannot close the panel a
	   keyboard user has moved into. */
	.accordion:has(.acc-panel:hover):not(:has(.acc-panel:focus-within)) .acc-panel:not(:hover),
	.accordion:has(.acc-panel:focus-within) .acc-panel:not(:focus-within) {
		flex-grow: 1;
		box-shadow: none;
	}
	:is(.accordion:has(.acc-panel:hover):not(:has(.acc-panel:focus-within)) .acc-panel:not(:hover), .accordion:has(.acc-panel:focus-within) .acc-panel:not(:focus-within))::before { opacity: .26; }
	:is(.accordion:has(.acc-panel:hover):not(:has(.acc-panel:focus-within)) .acc-panel:not(:hover), .accordion:has(.acc-panel:focus-within) .acc-panel:not(:focus-within)) .acc-panel__more { grid-template-rows: 0fr; }
	:is(.accordion:has(.acc-panel:hover):not(:has(.acc-panel:focus-within)) .acc-panel:not(:hover), .accordion:has(.acc-panel:focus-within) .acc-panel:not(:focus-within)) .acc-panel__excerpt { opacity: 0; }
}

/* ── feature: one navy panel ──────────────────────────────────────────── */

.feature-panel {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
	gap: clamp(1.25rem, .5rem + 2vw, 2.5rem);
	padding: clamp(1rem, .4rem + 2vw, 2.25rem);
	border-radius: var(--r-xl);
	background: var(--navy);
	color: #fff;
}
.feature-panel--solo { grid-template-columns: minmax(0, 1fr); }

.feature-panel :focus-visible { outline-color: var(--gold-soft); }

.feature {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	min-width: 0;
}

.feature__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--r-lg);
	background: var(--navy-2);
}
.feature__media:hover img { transform: scale(1.03); }

.feature__body {
	display: flex;
	flex-direction: column;
	gap: .8rem;
	padding: 0 .5rem .5rem;
}
.feature__body .eyebrow { color: var(--gold-soft); }
.feature__body .eyebrow:hover { color: #fff; }

.feature__title {
	font-size: clamp(1.6rem, 1.15rem + 1.3vw, 2.3rem);
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: #fff;
}
.feature__title a:hover { color: var(--gold-soft); }

.feature__excerpt {
	max-width: 38rem;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--on-navy);
	margin: 0;
}

.feature__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1.25rem;
	margin-top: .6rem;
}
.feature__date { font-size: .86rem; color: var(--on-navy-2); }

.railrow {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1rem;
	min-width: 0;
}

.rowcard {
	display: grid;
	grid-template-columns: 124px minmax(0, 1fr) auto;
	align-items: center;
	gap: 1.1rem;
	padding: .7rem 1.1rem .7rem .7rem;
	border-radius: var(--r-md);
	background: #fff;
	color: var(--ink);
}

.rowcard__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--r-sm);
	background: var(--mist);
}
.rowcard:hover .rowcard__media img { transform: scale(1.05); }

.rowcard__body {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	min-width: 0;
}

.rowcard__title {
	font-size: 1.1rem;
	line-height: 1.28;
}
.rowcard__title a:hover { color: var(--gold-ink); }

.rowcard__date { font-size: .8rem; color: var(--muted); }

.rowcard .round-btn:focus-visible { outline-color: var(--navy); }

/* ── split: overlay lead + two side cards ─────────────────────────────── */

.section-split {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: var(--gap);
}
.section-split--solo { grid-template-columns: minmax(0, 1fr); }

.overlay-card {
	position: relative;
	display: flex;
	min-height: 480px;
	overflow: hidden;
	border-radius: var(--r-xl);
	background: var(--navy);
	isolation: isolate;
}

.overlay-card__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.overlay-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s var(--ease);
}
.overlay-card:hover .overlay-card__media img { transform: scale(1.03); }

.overlay-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(15, 33, 64, 0) 22%, rgba(15, 33, 64, .72) 58%, rgba(15, 33, 64, .96) 100%),
		linear-gradient(90deg, rgba(15, 33, 64, .45) 0%, rgba(15, 33, 64, 0) 60%);
}
.overlay-card--plain::after {
	background: radial-gradient(90% 80% at 100% 0%, var(--navy-3) 0%, transparent 65%);
}

.overlay-card__body {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: .8rem;
	width: 100%;
	max-width: 44rem;
	padding: clamp(1.5rem, 1rem + 1.8vw, 2.6rem);
	color: #fff;
}
.overlay-card__body .eyebrow {
	position: relative;
	z-index: 2;
	align-self: flex-start;
	padding: .35rem .8rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
}
.overlay-card__body .eyebrow:hover { background: var(--gold-btn); color: #fff; }

.overlay-card__title {
	font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.55rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: #fff;
}
.overlay-card.lead--long .overlay-card__title { font-size: clamp(1.45rem, 1.1rem + 1vw, 2rem); }

/* The whole card is the story's link; the desk marker sits above it. */
.overlay-card__title a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}
.overlay-card__title a:focus-visible { outline: 0; }
.overlay-card__title a:focus-visible::before {
	outline: 2px solid var(--gold-soft);
	outline-offset: -6px;
	border-radius: var(--r-xl);
}

.overlay-card__excerpt {
	max-width: 36rem;
	font-size: .98rem;
	line-height: 1.6;
	color: var(--on-navy);
	margin: 0;
}
.overlay-card__date { font-size: .85rem; color: var(--on-navy-2); }

.section-split__side {
	display: grid;
	grid-auto-rows: 1fr;
	gap: var(--gap);
	min-width: 0;
}

.side-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
	gap: 1.25rem;
	padding: 1.1rem;
	border-radius: var(--r-lg);
	background: var(--mist);
	min-width: 0;
}

.side-card__body {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	padding: .6rem 0 .3rem .5rem;
	min-width: 0;
}

.side-card__title {
	font-size: clamp(1.15rem, 1rem + .4vw, 1.4rem);
	line-height: 1.22;
}
.side-card__title a:hover { color: var(--gold-ink); }

.side-card__date {
	margin-top: auto;
	font-size: .82rem;
	color: var(--muted);
}

.side-card__media {
	display: block;
	min-height: 170px;
	overflow: hidden;
	border-radius: var(--r-md);
	background: var(--mist-2);
}
.side-card:hover .side-card__media img { transform: scale(1.04); }

.section-split__row { margin-top: var(--gap); }

/* ── latest: the closing timeline ─────────────────────────────────────── */

.latest {
	display: grid;
	grid-template-columns: minmax(0, .75fr) minmax(0, 2fr);
	gap: clamp(2rem, 1rem + 3vw, 4.5rem);
	padding: clamp(1.5rem, .8rem + 3vw, 3.5rem);
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	background: #fff;
}

.latest__intro {
	align-self: start;
	position: sticky;
	top: 88px;
}

.latest__title {
	font-size: clamp(1.85rem, 1.35rem + 1.4vw, 2.6rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
}

.latest__text {
	max-width: 30ch;
	margin: 1.25rem 0 1.5rem;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ink-2);
}

.latest__desks {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.latest__desk {
	padding: .45rem .95rem;
	border: 1px solid var(--line-2);
	border-radius: 999px;
	font-size: .88rem;
	font-weight: 500;
	color: var(--navy);
	transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.latest__desk:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

.latest__list { list-style: none; }

/* when | dot on the rail | headline | thumbnail */
.latest-item {
	position: relative;
	display: grid;
	grid-template-columns: 5.5rem 22px minmax(0, 1fr) 104px;
	align-items: center;
	column-gap: 1.25rem;
	padding: 1.1rem 0;
}
.latest-item + .latest-item { border-top: 1px solid var(--line); }

/* The rail runs through the dot column, from the first dot to the last. */
.latest-item::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(5.5rem + 1.25rem + 10px);
	width: 2px;
	background: var(--line);
}
.latest-item:first-child::before { top: 50%; }
.latest-item:last-child::before { bottom: 50%; }

.latest-item__when {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	text-align: right;
}
.latest-item__day {
	font-family: var(--font-display);
	font-size: 1.15rem;
	line-height: 1.1;
	color: var(--navy);
}
.latest-item__time {
	font-size: .78rem;
	color: var(--muted);
	white-space: nowrap;
}

.latest-item__dot {
	position: relative;
	z-index: 1;
	justify-self: center;
	width: 14px;
	height: 14px;
	border: 2px solid var(--gold);
	border-radius: 50%;
	background: #fff;
}
.latest-item:first-child .latest-item__dot {
	border-color: var(--navy);
	background: var(--navy);
	box-shadow: 0 0 0 5px rgba(15, 33, 64, .1);
}

.latest-item__body {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	min-width: 0;
}

.latest-item__title {
	font-size: clamp(1.08rem, 1rem + .3vw, 1.25rem);
	line-height: 1.3;
}
.latest-item__title a:hover { color: var(--gold-ink); }

.latest-item__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 12px;
	background: var(--mist);
}
.latest-item__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s var(--ease);
}
.latest-item:hover .latest-item__media img { transform: scale(1.05); }
.latest-item__media .card__placeholder .icon { width: 24px; height: 24px; }

/* ═══ 11. Single post ═════════════════════════════════════════════════════ */

.content-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: clamp(2rem, 1rem + 3vw, 4rem);
	align-items: start;
}

.entry-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.1rem;
	max-width: 50rem;
}
.entry-header .eyebrow {
	padding: .38rem .85rem;
	border-radius: 999px;
	background: var(--gold-tint);
}

.entry-title {
	font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.6rem);
	line-height: 1.07;
	letter-spacing: -0.02em;
}
.lead--medium .entry-title { font-size: clamp(1.95rem, 1.3rem + 2vw, 3.05rem); }
.lead--long .entry-title { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1.12; }

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.5rem;
	font-size: .9rem;
	color: var(--muted);
}
.entry-meta__item { display: inline-flex; align-items: center; gap: .45rem; }
.entry-meta__item .icon { width: 17px; height: 17px; color: var(--gold); }

.entry-media {
	margin: 2rem 0 2.5rem;
	overflow: hidden;
	border-radius: var(--r-lg);
	background: var(--mist);
}
.entry-media img { width: 100%; }

.entry-content {
	max-width: 46rem;
	font-size: 1.1rem;
	line-height: 1.78;
	color: var(--ink-2);
	overflow-wrap: break-word;
}
.entry-content > * + * { margin-top: 1.4rem; }
.entry-content > * { margin-bottom: 0; }

.entry-content h2,
.entry-content h3,
.entry-content h4 { margin-top: 2.6rem; }
.entry-content h2 { font-size: clamp(1.6rem, 1.3rem + .9vw, 2.05rem); }
.entry-content h3 { font-size: 1.45rem; }
.entry-content h4 { font-size: 1.2rem; }

.entry-content a {
	color: var(--navy);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.entry-content a:hover { color: var(--gold-ink); }

.entry-content strong { color: var(--ink); }

.entry-content ul,
.entry-content ol { padding-left: 1.4rem; }
.entry-content ul { list-style: none; padding-left: 1.3rem; }
.entry-content ul li { position: relative; }
.entry-content ul li::before {
	content: "";
	position: absolute;
	left: -1.15rem;
	top: .72em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--gold);
}
.entry-content ol li::marker { color: var(--gold-ink); font-weight: 600; }
.entry-content li + li { margin-top: .5rem; }

.entry-content blockquote {
	margin-inline: 0;
	padding: 1.75rem 2rem;
	border-left: 3px solid var(--gold);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	background: var(--mist);
}
.entry-content blockquote p {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.35rem;
	line-height: 1.5;
	color: var(--navy);
}
.entry-content blockquote cite {
	display: block;
	margin-top: .8rem;
	font-style: normal;
	font-size: .88rem;
	color: var(--muted);
}

.entry-content img,
.entry-content .wp-block-image img { border-radius: var(--r-sm); }

.entry-content figure { margin-inline: 0; }

.entry-content code {
	padding: .1em .4em;
	border-radius: 6px;
	background: var(--mist);
	font-size: .9em;
}

.entry-content pre {
	padding: 1.25rem;
	overflow-x: auto;
	border-radius: var(--r-sm);
	background: var(--navy);
	color: #fff;
	font-size: .9rem;
}
.entry-content pre code { background: none; padding: 0; }

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
	display: block;
	overflow-x: auto;
}
.entry-content th,
.entry-content td {
	padding: .75rem 1rem;
	border-bottom: 1px solid var(--line);
	text-align: left;
}
.entry-content th { background: var(--mist); color: var(--navy); font-weight: 600; }

.entry-content hr {
	border: 0;
	height: 1px;
	background: var(--line);
	margin-block: 2.5rem;
}

/* ── Share ────────────────────────────────────────────────────────────── */

.share-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
	margin-top: 2.75rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--line);
}
.share-row__label {
	margin-right: .5rem;
	font-size: .9rem;
	font-weight: 600;
	color: var(--navy);
}
.share-row__link {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--line);
	border-radius: 50%;
	color: var(--navy);
	transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.share-row__link svg { width: 17px; height: 17px; fill: currentColor; }
.share-row__link:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ── Previous / next ──────────────────────────────────────────────────── */

.post-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gap);
	margin-top: 2.5rem;
}

.post-nav__item {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 1.5rem 1.6rem;
	border-radius: var(--r-md);
	background: var(--mist);
}
.post-nav__item--next {
	grid-column: 2;
	text-align: right;
	background: var(--navy);
}

.post-nav__label {
	font-size: .82rem;
	font-weight: 600;
	color: var(--gold-ink);
}
.post-nav__item--next .post-nav__label { color: var(--gold-soft); }

.post-nav__title {
	font-family: var(--font-display);
	font-size: 1.18rem;
	line-height: 1.3;
	color: var(--navy);
}
.post-nav__item--next .post-nav__title { color: #fff; }
.post-nav__title:hover { color: var(--gold-ink); }
.post-nav__item--next .post-nav__title:hover { color: var(--gold-soft); }

/* ── Related ──────────────────────────────────────────────────────────── */

.related { margin-top: 3.5rem; }

.related__title {
	font-size: clamp(1.6rem, 1.3rem + .9vw, 2.1rem);
	margin-bottom: 1.6rem;
}
.related__title::after {
	content: "";
	display: block;
	width: 52px;
	height: 3px;
	margin-top: .8rem;
	border-radius: 3px;
	background: var(--gold);
}

/* ═══ 12. Archive, pages & pagination ═════════════════════════════════════ */

.page-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-bottom: 2.5rem;
	padding: clamp(2rem, 1.2rem + 3vw, 3.75rem);
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	background: linear-gradient(112deg, #ffffff 0%, #ffffff 30%, var(--mist) 65%, var(--mist-2) 100%);
}
.page-header__mark { order: 2; margin-top: 1.25rem; }
.page-header .archive-description { order: 3; }

.page-title {
	font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.6rem);
	line-height: 1.06;
	letter-spacing: -0.02em;
}
.lead--medium .page-title { font-size: clamp(1.95rem, 1.35rem + 2vw, 3rem); }
.lead--long .page-title { font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); }

.archive-description {
	max-width: 60ch;
	margin-top: 1.25rem;
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--ink-2);
}
.archive-description p { margin: 0; }

.archive-list { min-width: 0; }

.page-article {
	max-width: 52rem;
	margin-inline: auto;
}
.page-article .entry-content { margin-inline: auto; }

.page-back { margin-top: 2.5rem; }

.no-results {
	padding: 2rem;
	border-radius: var(--r-md);
	background: var(--mist);
	color: var(--ink-2);
}

.pagination { margin-top: 2.75rem; }
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
}
.pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 1rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: .92rem;
	font-weight: 600;
	color: var(--navy);
	transition: background-color .2s var(--ease), color .2s var(--ease);
}
.pagination .page-numbers:hover { border-color: var(--navy); }
.pagination .page-numbers.current { background: var(--navy); border-color: var(--navy); color: #fff; }
.pagination .page-numbers.dots { border-color: transparent; }

/* ═══ 13. Sidebar ═════════════════════════════════════════════════════════ */

.sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	min-width: 0;
}

.panel {
	padding: 1.6rem;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: #fff;
}

.panel__heading {
	font-size: 1.35rem;
	margin-bottom: 1rem;
}

.panel__text {
	font-size: .93rem;
	line-height: 1.6;
	color: var(--muted);
}

.panel--dark {
	border-color: var(--navy);
	background: var(--navy);
	color: #fff;
}
.panel--dark .panel__heading { color: #fff; margin-bottom: .6rem; }
.panel--dark .panel__text { color: var(--on-navy); margin-bottom: 1.25rem; }
.panel--dark :focus-visible { outline-color: var(--gold-soft); }

/* ── The category table ───────────────────────────────────────────────── */

.cat-list { list-style: none; }
.cat-row + .cat-row { border-top: 1px solid var(--line); }
.cat-row__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .75rem 0;
}
.cat-row__name { font-weight: 500; color: var(--ink); transition: color .2s var(--ease); }
.cat-row__count {
	min-width: 34px;
	padding: .15rem .6rem;
	border-radius: 999px;
	background: var(--mist);
	font-size: .78rem;
	font-weight: 600;
	text-align: center;
	color: var(--muted);
	transition: background-color .2s var(--ease), color .2s var(--ease);
}
.cat-row__link:hover .cat-row__name { color: var(--gold-ink); }
.cat-row__link:hover .cat-row__count { background: var(--navy); color: #fff; }

/* ═══ 14. Newsletter band, opt-in form & modal ════════════════════════════ */

.newsletter-band {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	align-items: center;
	gap: clamp(2rem, 1rem + 3vw, 4rem);
	padding: clamp(1.5rem, .8rem + 3vw, 3.75rem);
	border-radius: var(--r-xl);
	background: var(--navy);
	color: #fff;
}
.newsletter-band :focus-visible { outline-color: var(--gold-soft); }
.newsletter-band__form :focus-visible { outline-color: var(--navy); }

.newsletter-band__icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin-bottom: 1.6rem;
	border: 1.5px solid var(--gold);
	border-radius: 50%;
	color: var(--gold-soft);
}
.newsletter-band__icon .icon { width: 28px; height: 28px; }

.newsletter-band__title {
	font-size: clamp(2rem, 1.3rem + 2.2vw, 3.1rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: #fff;
	margin-bottom: 1rem;
}

.newsletter-band__text {
	max-width: 34rem;
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--on-navy);
	margin-bottom: 1.75rem;
}

.newsletter-band__features {
	display: grid;
	gap: .8rem;
	list-style: none;
}
.newsletter-band__features li {
	display: flex;
	align-items: center;
	gap: .8rem;
	font-size: .98rem;
	color: #fff;
}
.newsletter-band__features .icon {
	width: 28px;
	height: 28px;
	padding: 6px;
	border-radius: 50%;
	background: rgba(214, 185, 138, .16);
	color: var(--gold-soft);
}

.newsletter-band__form {
	padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
	border-radius: var(--r-lg);
	background: #fff;
	color: var(--ink);
}

.newsletter-band__form-title {
	font-size: 1.6rem;
	margin-bottom: .3rem;
}
.newsletter-band__form-note {
	font-size: .9rem;
	color: var(--muted);
	margin-bottom: 1.4rem;
}

/* ── The form skin ────────────────────────────────────────────────────── */

.st-optin {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.st-optin__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.st-optin__field { margin: 0; }

.st-optin__input {
	width: 100%;
	height: 54px;
	padding: 0 1.2rem;
	border: 1px solid var(--line-2);
	border-radius: 999px;
	background: var(--mist);
	font-size: 1rem;
	color: var(--ink);
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
	-webkit-appearance: none;
	appearance: none;
}
.st-optin__input::placeholder { color: #7d879a; }
.st-optin__input:focus {
	outline: 0;
	border-color: var(--navy);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(15, 33, 64, .12);
}

.st-optin__consent-label {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	cursor: pointer;
}

.st-optin__checkbox {
	flex: none;
	width: 19px;
	height: 19px;
	margin: .15rem 0 0;
	accent-color: var(--navy);
	cursor: pointer;
}

.st-optin__consent-text {
	font-size: .8rem;
	line-height: 1.55;
	color: var(--muted);
}
.st-optin__consent-text a {
	color: var(--navy);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--gold);
	text-underline-offset: 2px;
}
.st-optin__consent-text a:hover { color: var(--gold-ink); }

.st-optin__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 54px;
	padding: 0 1.5rem;
	border: 0;
	border-radius: 999px;
	background: var(--navy);
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	transition: background-color .2s var(--ease);
}
.st-optin__submit:hover:not(:disabled) { background: var(--navy-2); }
.st-optin__submit:disabled { opacity: .6; cursor: not-allowed; }

.st-optin__message {
	margin: 0;
	font-size: .88rem;
	font-weight: 500;
	line-height: 1.5;
}
.st-optin__message:empty { display: none; }
.st-optin__message.is-success { color: var(--up); }
.st-optin__message.is-error { color: var(--down); }

.st-optin__footer {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	padding-top: .9rem;
	border-top: 1px solid var(--line);
	font-size: .7rem;
	line-height: 1.5;
	color: #7d879a;
}
.st-optin__footer:empty { display: none; }
.st-optin__company { font-weight: 600; color: var(--muted); }

/* ── The modal ────────────────────────────────────────────────────────── */

body.st-modal-open { overflow: hidden; }

.st-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: 1rem;
	overflow-y: auto;
}
.st-modal[hidden] { display: none; }

.st-modal__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(9, 18, 36, .6);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	animation: st-fade .25s var(--ease);
}

.st-modal__dialog {
	position: relative;
	width: min(480px, 100%);
	margin: auto;
	overflow: hidden;
	border-radius: var(--r-xl);
	background: #fff;
	box-shadow: 0 40px 90px -30px rgba(9, 18, 36, .6);
	animation: st-rise .35s var(--ease);
}

.st-modal__head {
	padding: 2.25rem 2.25rem 2rem;
	background: var(--navy);
	color: #fff;
}

.st-modal__icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: 1.25rem;
	border: 1.5px solid var(--gold);
	border-radius: 50%;
	color: var(--gold-soft);
}
.st-modal__icon svg {
	width: 25px;
	height: 25px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.st-modal__title {
	font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem);
	line-height: 1.12;
	color: #fff;
	margin-bottom: .6rem;
	padding-right: 2rem;
}

.st-modal__sub {
	font-size: .95rem;
	line-height: 1.55;
	color: var(--on-navy);
	margin: 0;
}

.st-modal__body { padding: 1.75rem 2.25rem 2.25rem; }

.st-modal__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	transition: background-color .2s var(--ease), color .2s var(--ease);
}
.st-modal__close svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
}
.st-modal__close:hover { background: #fff; color: var(--navy); }
.st-modal__close:focus-visible { outline-color: var(--gold-soft); }

@keyframes st-fade { from { opacity: 0; } }
@keyframes st-rise { from { opacity: 0; transform: translateY(18px) scale(.98); } }

/* ═══ 15. Footer ══════════════════════════════════════════════════════════ */

.site-footer {
	/* The last band on every template already closes with --band-y. The top
	   corners turn the footer into a sheet the page rests on. */
	position: relative;
	background: var(--navy);
	color: var(--on-navy);
	border-radius: 40px 40px 0 0;
}
.site-footer :focus-visible { outline-color: var(--gold-soft); }

.site-footer__inner { padding-block: clamp(3rem, 2rem + 3vw, 5rem) 1.75rem; }

/* ── Tier 1 ───────────────────────────────────────────────────────────── */

.footer-main {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .6fr);
	gap: clamp(2rem, 1rem + 3vw, 4.5rem);
	align-items: start;
	padding-bottom: clamp(2.5rem, 1.5rem + 2vw, 3.5rem);
}

.footer-brand__mark .custom-logo {
	max-height: 44px;
	max-width: 240px;
	width: auto;
	filter: brightness(0) invert(1);
}
.footer-brand__mark .site-logo {
	color: #fff;
	font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
}

.footer-lede__title {
	max-width: 17ch;
	margin: 1.75rem 0 1rem;
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.35rem + 2.1vw, 3.2rem);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: #fff;
	text-wrap: balance;
}

.footer-lede__text {
	max-width: 44ch;
	margin-bottom: 1.75rem;
	font-size: 1rem;
	line-height: 1.65;
}

.footer-heading {
	margin-bottom: .9rem;
	font-family: var(--font-body);
	font-size: .86rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--gold-soft);
}

.footer-desks__list { list-style: none; }
.footer-desks__list li { border-top: 1px solid var(--navy-3); }
.footer-desks__list li:last-child { border-bottom: 1px solid var(--navy-3); }

.footer-desk {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .8rem 0;
	font-family: var(--font-display);
	font-size: 1.3rem;
	line-height: 1.2;
	color: #fff;
	transition: color .2s var(--ease);
}
.footer-desk .icon {
	width: 18px;
	height: 18px;
	color: var(--gold-soft);
	opacity: .45;
	transition: opacity .2s var(--ease), transform .25s var(--ease);
}
.footer-desk:hover { color: var(--gold-soft); }
.footer-desk:hover .icon { opacity: 1; transform: translateX(4px); }

.footer-links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .8rem;
	font-size: .95rem;
}
.footer-links a { transition: color .2s var(--ease); }
.footer-links a:hover { color: #fff; }

/* ── Tier 2: trading sessions ─────────────────────────────────────────── */

.sessions {
	display: grid;
	grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
	align-items: center;
	gap: 1.25rem 2rem;
	padding: 1.25rem;
	border-radius: var(--r-lg);
	background: var(--navy-2);
}

.sessions__head { padding-left: .5rem; }

.sessions__title {
	font-size: 1.35rem;
	color: #fff;
	margin-bottom: .35rem;
}

.sessions__note {
	margin: 0;
	font-size: .8rem;
	line-height: 1.5;
	color: var(--on-navy-2);
}

.sessions__list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: .6rem;
	list-style: none;
}

.session {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"place state"
		"time  time";
	align-items: start;
	gap: .7rem .5rem;
	padding: .9rem 1rem 1rem;
	border: 1px solid var(--navy-3);
	border-radius: 16px;
	background: rgba(15, 33, 64, .45);
	transition: border-color .3s var(--ease);
}
.session.is-open { border-color: rgba(127, 211, 168, .4); }

.session__place {
	grid-area: place;
	display: flex;
	flex-direction: column;
	gap: .1rem;
	min-width: 0;
}
.session__city {
	font-family: var(--font-display);
	font-size: 1.05rem;
	line-height: 1.2;
	color: #fff;
}
.session__exchange {
	font-size: .74rem;
	color: var(--on-navy-2);
}

.session__time {
	grid-area: time;
	font-family: var(--font-display);
	font-size: 1.75rem;
	line-height: 1;
	color: #fff;
	font-variant-numeric: lining-nums tabular-nums;
}

.session__state {
	grid-area: state;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .2rem .6rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	font-size: .72rem;
	font-weight: 600;
	white-space: nowrap;
	color: var(--on-navy-2);
}
.session__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}
.session.is-open .session__state { background: rgba(127, 211, 168, .12); color: #7fd3a8; }
.session.is-open .session__dot { box-shadow: 0 0 0 3px rgba(127, 211, 168, .2); }

/* ── Tier 3: base ─────────────────────────────────────────────────────── */

.footer-base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .5rem 2rem;
	margin-top: 1.75rem;
	/* Room for the fixed back-to-top button, which rests over this row once
	   the page is scrolled to the end. */
	padding-right: 4.5rem;
	font-size: .84rem;
	color: var(--on-navy-2);
}
.footer-base p { margin: 0; }

.to-top {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 80;
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--navy);
	color: #fff;
	box-shadow: 0 16px 34px -14px rgba(15, 33, 64, .7);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s, background-color .2s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--gold-btn); }

/* ═══ 16. Widgets ═════════════════════════════════════════════════════════ */

/* ── Political Control Over Time ──────────────────────────────────────── */

.political-control-widget {
	padding: 1.6rem;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: #fff;
}

.political-control-widget h3 {
	font-size: 1.35rem;
	margin-bottom: 1.1rem;
}
.political-control-widget h3::after {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	margin-top: .7rem;
	border-radius: 3px;
	background: var(--gold);
}

.political-timeline {
	display: grid;
	gap: .5rem;
}

.political-period {
	padding: .75rem .9rem;
	border-radius: var(--r-sm);
	background: var(--mist);
	border-left: 3px solid var(--line-2);
}
.political-period--republican { border-left-color: var(--down); }
.political-period--democrat { border-left-color: #2f5da8; }

.political-period__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
}

.political-period__years {
	font-family: var(--font-display);
	font-size: 1.02rem;
	font-weight: 500;
	color: var(--navy);
}

.political-period__party {
	padding: .15rem .55rem;
	border-radius: 999px;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .04em;
	white-space: nowrap;
	background: var(--line);
	color: var(--ink-2);
}
.political-period--republican .political-period__party { background: #f7e4e2; color: #8e2c25; }
.political-period--democrat .political-period__party { background: #e2eaf7; color: #244a8a; }

.political-period__return {
	display: flex;
	align-items: baseline;
	gap: .45rem;
	margin-top: .25rem;
	font-size: .8rem;
	color: var(--muted);
}

.political-period__value {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.political-period__value--pos { color: var(--up); }
.political-period__value--neg { color: var(--down); }
.political-period__value--tbd { color: var(--muted); }

.political-control-widget .widget-footer {
	margin-top: 1rem;
	padding-top: .8rem;
	border-top: 1px solid var(--line);
}
.political-control-widget .disclaimer {
	font-size: .74rem;
	line-height: 1.5;
	color: var(--muted);
	margin: 0;
}

/* ── What patience paid ───────────────────────────────────────────────── */

.patience {
	padding: 1.6rem;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: #fff;
}

.patience__title { font-size: 1.35rem; }
.patience__title::after {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	margin-top: .7rem;
	border-radius: 3px;
	background: var(--gold);
}

.patience__lede {
	margin: .9rem 0 1.25rem;
	font-size: .88rem;
	line-height: 1.55;
	color: var(--muted);
}

.patience__amounts {
	margin: 0 0 1.2rem;
	padding: 0;
	border: 0;
	min-width: 0;
}

.patience__legend {
	display: flex;
	align-items: baseline;
	gap: .4rem;
	margin-bottom: .55rem;
	padding: 0;
	font-size: .8rem;
	font-weight: 600;
	color: var(--navy);
}

.patience__chips {
	display: flex;
	gap: .25rem;
	padding: 4px;
	border-radius: 999px;
	background: var(--mist);
}

.patience__chip {
	position: relative;
	flex: 1;
}
.patience__chip input {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	cursor: pointer;
}
.patience__chip span {
	display: block;
	padding: .5rem .3rem;
	border-radius: 999px;
	font-size: .8rem;
	font-weight: 600;
	text-align: center;
	color: var(--ink-2);
	transition: background-color .2s var(--ease), color .2s var(--ease);
}
.patience__chip:hover span { color: var(--navy); }
.patience__chip input:checked + span { background: var(--navy); color: #fff; }
.patience__chip input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: 2px; }

.patience__decade {
	font-family: var(--font-display);
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--gold-ink);
}

.patience__range {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 6px;
	margin: .6rem 0 .5rem;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--gold) var(--fill, 78%), var(--line) var(--fill, 78%));
	cursor: pointer;
}
.patience__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	border: 4px solid var(--navy);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 10px -4px rgba(15, 33, 64, .6);
}
.patience__range::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border: 4px solid var(--navy);
	border-radius: 50%;
	background: #fff;
}
.patience__range:focus-visible { outline: 2px solid var(--navy); outline-offset: 6px; }

.patience__scale {
	display: flex;
	justify-content: space-between;
	font-size: .72rem;
	color: var(--muted);
}

.patience__result {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	margin-top: 1.3rem;
	padding: 1.15rem 1.25rem 1.2rem;
	border-radius: 16px;
	background: var(--navy);
	color: #fff;
}

.patience__label {
	font-size: .76rem;
	font-weight: 600;
	color: var(--on-navy-2);
}

.patience__value {
	font-family: var(--font-display);
	font-size: 2.3rem;
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-variant-numeric: lining-nums tabular-nums;
}

.patience__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	font-size: .82rem;
	color: var(--on-navy);
}

.patience__multiple {
	padding: .12rem .55rem;
	border-radius: 999px;
	background: rgba(214, 185, 138, .18);
	font-weight: 700;
	color: var(--gold-soft);
	font-variant-numeric: tabular-nums;
}

.patience__real {
	margin-top: .35rem;
	padding-top: .6rem;
	border-top: 1px solid var(--navy-3);
	font-size: .8rem;
	line-height: 1.5;
	color: var(--on-navy);
}
.patience__real strong { color: #fff; font-weight: 700; }

/* The balance as it grew, one bar per decade held; the last is today. */
.patience__bars {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	height: 64px;
	margin-top: 1rem;
	padding-bottom: 2px;
	border-bottom: 1px solid var(--line-2);
}
.patience__bar {
	flex: 1;
	height: var(--h, 10%);
	border-radius: 3px 3px 0 0;
	background: var(--navy);
	transition: height .35s var(--ease);
}
.patience__bar:last-child { background: var(--gold); }

.patience__note {
	margin: .9rem 0 0;
	font-size: .7rem;
	line-height: 1.5;
	color: var(--muted);
}

/* ── A Century of Decades ─────────────────────────────────────────────── */

.century {
	padding: clamp(1.5rem, .8rem + 3vw, 3.5rem);
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	background: #fff;
}

.century__head {
	display: flex;
	flex-direction: column;
	max-width: 62ch;
	margin-bottom: 2.75rem;
}
.century__mark { order: 2; margin: .9rem 0 1.1rem; }
.century__standfirst { order: 3; }

.century__title {
	font-size: clamp(1.85rem, 1.35rem + 1.5vw, 2.7rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
}

.century__standfirst {
	font-size: 1.02rem;
	line-height: 1.6;
	color: var(--ink-2);
	margin: 0;
}

/* The chart is a <dl> laid out as a grid — one auto-sized track per decade,
   so adding or removing a decade from the dataset needs no change here. */
.century__chart {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: .6rem;
	margin: 0;
}

.century-col {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: .55rem;
	min-width: 0;
}
.century-col dd { margin: 0; }

.century-col__value {
	font-size: .82rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.century-col--up .century-col__value { color: var(--up); }
.century-col--down .century-col__value { color: var(--down); }

/* The track is a fixed-height box with the zero line drawn across it at 76%:
   gains grow up from it, losses hang below. PHP folds that split into each
   bar's inline height. */
.century-col__track {
	position: relative;
	height: 200px;
	border-radius: 10px;
	background: linear-gradient(180deg, var(--mist) 0%, var(--mist) 76%, #fbf5f4 76%, #fbf5f4 100%);
}

.century-col__track::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 76%;
	height: 1px;
	background: var(--line-2);
}

.century-col__bar {
	position: absolute;
	left: 18%;
	width: 64%;
	background: var(--navy);
	transition: background-color .2s var(--ease);
}

.century-col--up .century-col__bar {
	bottom: 24%;
	border-radius: 8px 8px 2px 2px;
}

.century-col--down .century-col__bar {
	top: 76%;
	background: var(--down);
	border-radius: 2px 2px 8px 8px;
}

.century-col:hover .century-col__bar { background: var(--gold); }
.century-col--down:hover .century-col__bar { background: #8e2c25; }

.century-col__label {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 500;
	color: var(--navy);
}

.century-col__note {
	font-size: .72rem;
	line-height: 1.4;
	color: var(--muted);
}

.century__foot {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
	gap: var(--gap);
	align-items: stretch;
	margin-top: 2.5rem;
}

.century-fact {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	min-width: 0;
	padding: 1.25rem 1.4rem;
	border-radius: var(--r-md);
	background: var(--mist);
}

.century-fact__label {
	font-size: .82rem;
	font-weight: 600;
	color: var(--muted);
}

.century-fact__value {
	display: flex;
	flex-wrap: wrap;
	gap: 0 .6rem;
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 1.1rem + .9vw, 1.9rem);
	font-weight: 500;
	line-height: 1.15;
	color: var(--navy);
	font-variant-numeric: lining-nums tabular-nums;
}
.century-fact__value--up span:last-child { color: var(--up); }
.century-fact__value--down span:last-child { color: var(--down); }

.century-fact__note { font-size: .86rem; color: var(--ink-2); }

.century__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	align-self: center;
	padding: .95rem 1.6rem;
	border-radius: 999px;
	background: var(--navy);
	color: #fff;
	font-weight: 600;
	font-size: .95rem;
	white-space: nowrap;
	transition: background-color .2s var(--ease);
}
.century__more:hover { background: var(--gold-btn); }
.century__more svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.century__disclaimer {
	margin: 1.5rem 0 0;
	font-size: .78rem;
	line-height: 1.5;
	color: var(--muted);
	max-width: 72ch;
}

/* ── 100 Years of the Stock Market ────────────────────────────────────── */

/* minmax(0, 1fr): Chart.js writes a pixel width onto its canvas, and a default
   track would take its minimum from it and push every sibling wider than the
   page. */
.market-history-dashboard {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
}

.market-history__loading {
	padding: 3rem 2rem;
	border-radius: var(--r-md);
	background: var(--mist);
	font-size: .95rem;
	color: var(--muted);
	margin: 0;
}

.market-history__header { max-width: 60ch; }

.market-history__title {
	font-size: clamp(1.7rem, 1.3rem + 1.3vw, 2.4rem);
	margin-bottom: .6rem;
}

.market-history__subtitle {
	color: var(--ink-2);
	font-size: 1rem;
	margin: 0;
}

.market-history__stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--gap);
}

.market-stat {
	padding: 1.5rem;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: #fff;
}
.market-stat:last-child { background: var(--navy); border-color: var(--navy); }

.market-stat__value {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.5rem);
	font-weight: 500;
	line-height: 1;
	color: var(--navy);
	font-variant-numeric: lining-nums tabular-nums;
}
.market-stat:last-child .market-stat__value { color: #fff; }

.market-stat__label {
	display: block;
	margin-top: .55rem;
	font-size: .88rem;
	line-height: 1.4;
	color: var(--muted);
}
.market-stat:last-child .market-stat__label { color: var(--on-navy); }

.market-history__controls {
	display: inline-flex;
	flex-wrap: wrap;
	justify-self: start;
	gap: .25rem;
	padding: .3rem;
	border-radius: 999px;
	background: var(--mist);
}

.market-history__btn {
	padding: .65rem 1.2rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font-size: .9rem;
	font-weight: 600;
	color: var(--ink-2);
	transition: background-color .2s var(--ease), color .2s var(--ease);
}
.market-history__btn:hover { color: var(--navy); background: #fff; }
.market-history__btn.is-active { background: var(--navy); color: #fff; }

.market-history__chart {
	position: relative;
	min-height: 380px;
	padding: 1.5rem;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: #fff;
}

.market-history__events {
	display: grid;
	gap: .6rem;
}

.market-event {
	display: grid;
	grid-template-columns: 90px minmax(0, 1fr) auto;
	gap: 1.5rem;
	align-items: center;
	padding: 1.1rem 1.4rem;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: #fff;
}

.market-event__year {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--gold-ink);
}

.market-event__title {
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 500;
	color: var(--navy);
	margin-bottom: .2rem;
}

.market-event__text {
	font-size: .9rem;
	color: var(--muted);
	line-height: 1.5;
	margin: 0;
}

.market-event__change {
	padding: .3rem .8rem;
	border-radius: 999px;
	font-size: .92rem;
	font-weight: 700;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.market-event__change--pos { background: #e3f2ea; color: var(--up); }
.market-event__change--neg { background: #f8e7e5; color: var(--down); }

.market-history__disclaimer {
	font-size: .8rem;
	color: var(--muted);
	margin: 0;
	max-width: 70ch;
}

/* ═══ 17. Utilities & responsive ══════════════════════════════════════════ */

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

.alignleft { float: left; margin: .4rem 1.5rem 1rem 0; }
.alignright { float: right; margin: .4rem 0 1rem 1.5rem; }
.aligncenter { margin-inline: auto; }
.alignwide,
.alignfull { width: 100%; }
.wp-caption { max-width: 100%; }
.wp-caption-text,
.wp-block-image figcaption {
	margin-top: .6rem;
	font-size: .84rem;
	color: var(--muted);
}

/* ── Breakpoints ──────────────────────────────────────────────────────── */

@media (max-width: 1200px) {
	:root { --band-y: 4rem; }

	.sessions { grid-template-columns: minmax(0, 1fr); }
	.sessions__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; padding: .25rem .5rem 0; }
	.sessions__title { margin-bottom: 0; }
}

/* The nav's breakpoint: below this the desks and the action move into the
   drawer rather than wrapping the masthead onto a second row. */
@media (max-width: 1080px) {
	.menu-toggle { display: inline-flex; }

	.masthead__nav,
	.masthead__action,
	.stickybar .nav-primary { display: none; }

	.masthead,
	.stickybar { grid-template-columns: minmax(0, 1fr) auto; }

	.masthead { min-height: 76px; }

	.content-sidebar { grid-template-columns: minmax(0, 1fr); }

	/* The rail becomes a row of panels rather than a column under the
	   article, so it does not push the footer a full screen down. */
	.sidebar {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}

	.feature-panel { grid-template-columns: minmax(0, 1fr); }

	.section-split { grid-template-columns: minmax(0, 1fr); }
	.section-split__side { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
	.side-card { grid-template-columns: minmax(0, 1fr); }
	.side-card__media { order: -1; min-height: 0; aspect-ratio: 16 / 9; }
	.side-card__body { padding: .2rem .4rem .4rem; }

	.newsletter-band { grid-template-columns: minmax(0, 1fr); }

	.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
	.footer-main { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
	.footer-lede { grid-column: 1 / -1; }
	.footer-lede__title { max-width: 22ch; }

	/* One exchange per row: place, clock, state — a departures board. */
	.sessions { padding: 1rem .75rem .75rem; border-radius: 20px; }
	.sessions__list { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
	.session {
		grid-template-columns: minmax(0, 1fr) auto 5.6rem;
		grid-template-areas: "place time state";
		align-items: center;
		gap: 1rem;
		padding: .7rem 1rem;
		border-radius: 12px;
	}
	.session__place { flex-direction: row; align-items: baseline; gap: .6rem; }
	.session__time { font-size: 1.35rem; }
	.session__state { justify-self: end; }

	.grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.market-history__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.market-event { grid-template-columns: 70px minmax(0, 1fr); gap: .6rem 1rem; }
	.market-event__change { grid-column: 2; justify-self: start; }

	.century__foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.century__more { grid-column: 1 / -1; justify-self: start; }

	.latest { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
	.latest__intro { position: static; }
	.latest__text { max-width: 52ch; }
	.century-col__note { display: none; }
}

@media (max-width: 720px) {
	:root {
		--gutter: 1rem;
		--band-y: 3rem;
		--gap: 1rem;
		--r-xl: 26px;
	}

	.band--hero { padding-top: 1rem; }
	.band--figures { padding-top: 1rem; }

	.masthead { min-height: 68px; gap: 1rem; }
	.custom-logo { max-height: min(var(--logo-h), 34px); }

	.band__head { flex-wrap: wrap; align-items: flex-start; margin-bottom: 1.5rem; }
	.band__more { padding: .5rem .95rem; font-size: .85rem; }

	/* On a phone every four-up row turns into a compact list: a thumbnail
	   beside the headline, so a desk reads in one screen, not four. */
	.grid--4,
	.grid--3,
	.grid--2 { grid-template-columns: minmax(0, 1fr); gap: .75rem; }

	.grid--4 .card {
		display: grid;
		grid-template-columns: 112px minmax(0, 1fr);
		align-items: start;
		gap: .9rem;
		padding: .6rem;
	}
	.grid--4 .card__media { aspect-ratio: 1; border-radius: 12px; }
	.grid--4 .card__body { padding: .2rem .2rem .2rem 0; gap: .35rem; }
	.grid--4 .card__title { font-size: 1.05rem; }
	.grid--4 .card__date { font-size: .78rem; padding-top: 0; }

	.feature-panel { padding: .75rem; border-radius: var(--r-xl); }
	.feature__media { border-radius: 18px; }
	.feature__body { padding: 0 .6rem .6rem; }
	.railrow { gap: .6rem; }
	.rowcard {
		grid-template-columns: 92px minmax(0, 1fr);
		gap: .85rem;
		padding: .55rem;
	}
	.rowcard__media { aspect-ratio: 1; border-radius: 12px; }
	.rowcard__title { font-size: 1rem; }
	.rowcard__go { display: none; }

	.overlay-card { min-height: 420px; }
	.section-split__side { grid-template-columns: minmax(0, 1fr); }
	.side-card {
		grid-template-columns: minmax(0, 1fr) 112px;
		gap: .9rem;
		padding: .75rem;
	}
	.side-card__media { order: 0; aspect-ratio: 1; border-radius: 12px; }
	.side-card__body { padding: .3rem 0 .2rem .3rem; }
	.side-card__title { font-size: 1.08rem; }

	.newsletter-band { padding: 1.5rem 1.1rem 1.1rem; gap: 1.75rem; }
	.newsletter-band__pitch { padding: .5rem .5rem 0; }
	.newsletter-band__icon { width: 54px; height: 54px; margin-bottom: 1.2rem; }
	.newsletter-band__form { padding: 1.4rem 1.2rem; border-radius: 20px; }

	.sidebar { grid-template-columns: minmax(0, 1fr); }

	.entry-content { font-size: 1.04rem; }
	.entry-content blockquote { padding: 1.25rem 1.25rem; }
	.entry-media { margin: 1.5rem 0 1.75rem; border-radius: 18px; }

	.post-nav { grid-template-columns: minmax(0, 1fr); }
	.post-nav__item--next { grid-column: auto; text-align: left; }

	.page-header { margin-bottom: 1.75rem; }

	.site-footer { border-radius: 28px 28px 0 0; }
	.footer-lede__title { margin-top: 1.4rem; }
	.footer-desk { font-size: 1.18rem; padding: .7rem 0; }
	.footer-main { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
	.session { grid-template-columns: minmax(0, 1fr) auto 5.2rem; gap: .75rem; padding: .65rem .85rem; }
	.session__time { font-size: 1.2rem; }
	.footer-base { padding-right: 3.5rem; }


	.footer-base { flex-direction: column; }

	.st-modal { padding: .75rem; align-items: end; }
	.st-modal__dialog { border-radius: 24px; }
	.st-modal__head { padding: 1.75rem 1.5rem 1.5rem; }
	.st-modal__icon { width: 48px; height: 48px; margin-bottom: 1rem; }
	.st-modal__body { padding: 1.4rem 1.5rem 1.6rem; }

	.to-top { right: 1rem; bottom: 1rem; width: 46px; height: 46px; }

	.market-history__chart { padding: .75rem; min-height: 300px; }
	.market-history__controls { border-radius: 18px; }
	.market-event { padding: 1rem; }

	/* The time moves under the date column's dot, so the headline keeps the
	   row's width; the thumbnail shrinks to a square. */
	.latest { padding: 1.5rem 1rem 1rem; }
	.latest__intro { padding-inline: .25rem; }

	.latest-item {
		grid-template-columns: 22px minmax(0, 1fr) 64px;
		column-gap: .9rem;
		align-items: start;
		padding: 1rem 0;
	}
	.latest-item::before { left: 10px; }
	.latest-item:first-child::before { top: 1.45rem; }
	.latest-item:last-child::before { bottom: auto; height: 1.45rem; }
	.latest-item__when {
		grid-column: 2;
		grid-row: 1;
		flex-direction: row;
		gap: .5rem;
		text-align: left;
		align-items: baseline;
	}
	.latest-item__day { font-size: 1rem; }
	.latest-item__title { font-size: 1.05rem; }
	.latest-item__dot { grid-column: 1; grid-row: 1; margin-top: .3rem; }
	.latest-item__body { grid-column: 2; grid-row: 2; margin-top: .35rem; }
	.latest-item__media { grid-column: 3; grid-row: 1 / span 2; aspect-ratio: 1; }

	/* ── The century chart turns on its side ──────────────────────────
	   Eleven columns across a phone leaves each narrower than its figure.
	   Rotated into rows, each decade gets a full line: label, a bar growing
	   from a vertical zero line, and the figure. */
	.century__head { margin-bottom: 1.75rem; }

	.century__chart {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		gap: .35rem;
	}

	.century-col {
		display: grid;
		grid-template-columns: 3.4rem minmax(0, 1fr) 3.6rem;
		align-items: center;
		gap: .75rem;
	}

	.century-col__label { grid-column: 1; grid-row: 1; font-size: .95rem; }

	.century-col__track {
		grid-column: 2;
		grid-row: 1;
		height: 22px;
		border-radius: 6px;
		background: linear-gradient(90deg, #fbf5f4 0%, #fbf5f4 24%, var(--mist) 24%, var(--mist) 100%);
	}

	.century-col__track::after {
		top: 0;
		bottom: 0;
		left: 24%;
		right: auto;
		width: 1px;
		height: auto;
	}

	/* The inline height is a style attribute, which no selector outranks. */
	.century-col__bar {
		top: 4px;
		bottom: auto;
		width: var(--bar, 100%);
		height: calc(100% - 8px) !important;
	}
	.century-col--up .century-col__bar { left: 24%; bottom: auto; border-radius: 2px 6px 6px 2px; }
	.century-col--down .century-col__bar { left: auto; right: 76%; top: 4px; border-radius: 6px 2px 2px 6px; }

	.century-col__value { grid-column: 3; grid-row: 1; text-align: right; }

	.century__foot { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
	.century__more { justify-self: stretch; }
}

@media (max-width: 420px) {

	.market-history__stats { grid-template-columns: minmax(0, 1fr); }
}

/* ── Hero and long view: the stacked layouts ──────────────────────────── */

@media (max-width: 1080px) {
	.longview { grid-template-columns: minmax(0, 1fr); }
	.longview__intro { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.5rem; }
	.longview__intro .band__rule { display: none; }
	.longview__text { max-width: 52ch; margin: 0; }
	/* 0px, not 0: the value is used inside calc() for the hover wash, where
	   a unitless zero minus a length is invalid and drops the whole rule. */
	.figure:first-child { border-left: 0; --pl: 0px; }
	.figure__label { min-height: 4.2em; }
}

@media (max-width: 900px) {
	/* The photograph moves above the copy and fades into the navy below. */
	.hero__stage { min-height: 0; }

	/* Photo row, then a body row that fills the rest of the stage. The
	   stage takes the tallest slide's height, so without this the shorter
	   slides left an empty band under their buttons. */
	.hero-slide { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }

	.hero-slide__media {
		position: relative;
		width: 100%;
		aspect-ratio: 16 / 10;
		-webkit-mask-image: linear-gradient(180deg, #000 45%, rgba(0, 0, 0, .25) 82%, transparent 100%);
		mask-image: linear-gradient(180deg, #000 45%, rgba(0, 0, 0, .25) 82%, transparent 100%);
	}
	.hero-slide__media::after { display: none; }

	.hero-slide__body {
		align-self: stretch;
		margin-top: -1.5rem;
		padding: 0 1.75rem 2rem;
	}

	/* Pinned to the foot of the body: same place on every slide. */
	.hero-slide__actions { margin-top: auto; padding-top: 1.75rem; }

	.hero-slide__title,
	.hero-slide.lead--medium .hero-slide__title,
	.hero-slide.lead--long .hero-slide__title { max-width: none; }

	.hero__controls { top: 1rem; right: 1rem; }

	/* Tabs become compact segments: the bar, the number and the desk. */
	.hero-tab { grid-template-columns: minmax(0, 1fr); gap: .35rem; padding: 1rem 1rem 1.1rem; }
	.hero-tab__title { display: none; }
}

@media (max-width: 720px) {
	/* Stories-style: the segments run across the top of the photograph at
	   full width, and one row under the stage carries the counter and the
	   buttons. Nothing else sits over the photograph. */
	.hero {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"stage"
			"controls";
	}
	.hero__stage {
		grid-area: stage;
		border-bottom: 1px solid rgba(255, 255, 255, .08);
	}

	/* A taller photograph, framed from its upper part, where faces are. */
	.hero-slide__media { aspect-ratio: 4 / 3; }
	.hero-slide__media img { object-position: 50% 22%; }

	.hero-slide__meta { gap: .4rem .8rem; margin-bottom: .9rem; font-size: .8rem; }
	.hero-slide__read { display: none; }
	.hero-slide__body { margin-top: -1.1rem; padding: 0 1.1rem 1.35rem; }

	/* One size for every headline: at phone width the length steps are
	   what made some slides five lines tall. */
	.hero-slide__title,
	.hero-slide.lead--medium .hero-slide__title,
	.hero-slide.lead--long .hero-slide__title {
		font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2rem);
		line-height: 1.1;
	}

	.hero-slide__excerpt {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		margin-top: .8rem;
		font-size: .95rem;
		line-height: 1.55;
	}

	.hero-slide__actions { width: 100%; gap: .6rem; padding-top: 1.35rem; }
	.hero-slide__actions .pill { flex: 1 1 0; min-width: 0; padding: .85rem 1rem; font-size: .92rem; }
	.hero-slide__actions .pill--glass { overflow: hidden; text-overflow: ellipsis; }

	.hero__controls {
		grid-area: controls;
		position: static;
		padding: .55rem .8rem .55rem 1.1rem;
		border: 0;
		background: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.hero__counter { margin-right: auto; font-size: 1rem; }
	.hero__btn { width: 40px; height: 40px; }

	/* The tabs become story segments: a bar each, 44px tall to tap.
	   The number, desk and headline stay in the markup for screen readers. */
	.hero__tabs {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 3;
		display: flex;
		gap: 6px;
		padding: 0 1rem;
		border-top: 0;
		background: linear-gradient(180deg, rgba(9, 20, 40, .55) 0%, rgba(9, 20, 40, 0) 100%);
	}
	.hero-tab,
	.hero-tab + .hero-tab {
		flex: 1;
		display: block;
		height: 44px;
		padding: 0;
		border-left: 0;
		opacity: 1;
	}
	.hero-tab:hover { background: none; }
	.hero-tab__bar {
		top: 50%;
		height: 4px;
		margin-top: -2px;
		border-radius: 4px;
		background: rgba(255, 255, 255, .35);
	}
	.hero-tab__index,
	.hero-tab__text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
	.hero-tab:focus-visible { outline-offset: -2px; }

	/* The accordion as a stack of photo cards: headline and a two-line
	   excerpt, the call to action dropped. */
	.accordion { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 8px; }
	.acc-panel { min-height: 240px; }
	.acc-panel__body { padding: 1rem 1.05rem 1.1rem; }
	.acc-panel__title { -webkit-line-clamp: 3; }
	.acc-panel__excerpt { -webkit-line-clamp: 2; margin-top: .5rem; font-size: .88rem; }
	.acc-panel__cta { display: none; }

	.longview { padding: 1.4rem 1.1rem; }
	.longview__figures { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0; }
	/* Two rows: equal space either side of the divider between them, so a
	   washed figure never reaches across it. */
	.figure { --pt: 0px; --pb: 0px; --pl: .9rem; --pr: .9rem; }
	.figure:nth-child(odd) { border-left: 0; --pl: 0px; }
	.figure:nth-child(-n+2) { --pb: 1.2rem; }
	.figure:nth-child(n+3) { --pt: 1.2rem; border-top: 1px solid var(--line); }
	.figure__value { font-size: 1.75rem; }
	/* Room for three lines, so the charts in a row stay level. */
	.figure__label { min-height: 4.2em; font-size: .78rem; }
	.figure__chart { height: 44px; }

	/* A tapped readout wraps to two lines instead of cutting off: on a
	   phone it is the thing the reader asked to see. The range line keeps
	   room for both lines so nothing below moves. */
	.figure__range { min-height: 2.7em; align-items: flex-start; }
	.figure__readout {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		white-space: normal;
		line-height: 1.35;
	}
}

/* ── The long view: rows that line up at any width ────────────────────── */
/* Each figure spans three rows of the panel's grid and adopts them as its
   own (subgrid), so every number, every label and every chart in a visual
   row share one set of row lines. However a label wraps, the charts beside
   it stay level. Browsers without subgrid keep the min-height rules above. */
@supports (grid-template-rows: subgrid) {
	.longview__figures { row-gap: 0; }

	.figure {
		display: grid;
		grid-row: span 3;
		grid-template-rows: subgrid;
		align-content: start;
	}

	.longview__figures .figure__label { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}