/**
 * Sovereign Terminal — main.css
 *
 * A classic editorial newspaper layout. The page is a centred white column on
 * a dark page surround. Sections alternate between white and a pale blue wash,
 * each opening with a centred serif section title over a hairline rule.
 *
 * Serif (Playfair-like) carries the big headlines; a humanist sans carries
 * every card title, byline and date; category eyebrows are small blue caps.
 *
 * Contents
 *   1.  Tokens
 *   2.  Reset & base
 *   3.  Layout shell
 *   4.  Header / masthead
 *   5.  Navigation
 *   6.  Sections (bands)
 *   7.  Cards & post lists
 *   8.  Hero / lead
 *   9.  Single post
 *   10. Archive & pagination
 *   11. Sidebar & panels
 *   12. Newsletter (opt-in)
 *   13. Footer
 *   14. Widgets (ported)
 *   15. Utilities & responsive
 */

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

:root {
	/* Surfaces. The site sits as a white sheet on a near-black surround,
	   exactly as the reference does — the dark edge is the page, not a band. */
	--surround: #131417;
	/* The drafting grid drawn on the surround. Kept very low-contrast: it is
	   texture behind the sheet, and anything stronger competes with the page. */
	--grid-line: rgba(255, 255, 255, .032);
	--grid-line-bold: rgba(255, 255, 255, .055);
	--sheet: #ffffff;
	--wash: #d6e4f7;        /* the pale blue section band */
	--wash-soft: #e8f0fb;
	--footer-bg: #16171a;
	--footer-panel: #202227;

	/* Ink */
	--ink: #14161a;
	--ink-soft: #3d4450;
	--ink-mute: #6b7280;
	--ink-faint: #9aa1ac;
	--ink-invert: #ffffff;

	/* Accent — the editorial blue used for category eyebrows and links. */
	--accent: #1c5fc4;
	--accent-deep: #14458f;
	--accent-soft: #e6effb;

	/* Party colours for the political-control widget. */
	--rep: #d7282f;
	--dem: #1c69d4;
	--rep-wash: #fdeced;
	--dem-wash: #eaf1fd;
	--pos: #1a8a4b;
	--neg: #d7282f;

	/* Rules */
	--rule: #dfe3e8;
	--rule-strong: #c3c9d2;
	--rule-dark: #2c2e34;

	/* Type */
	--font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
	--font-sans: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
	--font-ui: "Barlow", "Segoe UI", system-ui, sans-serif;

	/* Measure */
	--sheet-w: 1200px;
	--gutter: 2.5rem;
	--radius: 0;

	--logo-h: 40px;

	/* Rhythm */
	--band-y: 3.25rem;
	--card-gap: 1.75rem;
}

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

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

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

/* The surround carries a drafting grid: a fine 20px mesh with a heavier line
   every fifth cell, so the margins read as squared drawing paper rather than
   flat black. Drawn in gradients rather than an image — four stops cost
   nothing to download and stay crisp at any zoom.

   Both layers are pinned to the same origin so the coarse lines land exactly
   on a fine one instead of drifting half a pixel off it. */
body {
	margin: 0;
	background-color: var(--surround);
	background-image:
		linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px),
		linear-gradient(to right, var(--grid-line-bold) 1px, transparent 1px),
		linear-gradient(to bottom, var(--grid-line-bold) 1px, transparent 1px);
	background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
	background-position: 0 0;
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

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

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-weight: 700;
	line-height: 1.2;
}

p { margin: 0 0 1em; }

ul, ol { margin: 0; padding: 0; list-style: none; }

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

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.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: -9999px;
	top: 0;
	z-index: 999;
	background: var(--ink);
	color: #fff;
	padding: .75rem 1.25rem;
	font-size: .8rem;
	font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ═══ 3. Layout shell ═════════════════════════════════════════════════════ */

/* The white sheet. Everything editorial lives inside it; the footer sits
   outside on the dark surround. */
.site-sheet {
	max-width: var(--sheet-w);
	margin: 0 auto;
	background: var(--sheet);
}

.container {
	max-width: calc(var(--sheet-w) - (var(--gutter) * 2));
	margin: 0 auto;
	padding: 0 1.25rem;
}

.site-main { display: block; }

/* ═══ 4. Header / masthead ════════════════════════════════════════════════ */

.site-header {
	background: var(--sheet);
	position: relative;
	z-index: 60;
}

/* Row 1 — the brand, centred, as in the reference.
   The third column holds the burger on mobile; it is empty on desktop, where
   the symmetry is what keeps the logo optically centred. */
.masthead {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
	padding: 1.5rem 0 1.4rem;
}

.masthead__brand {
	grid-column: 2;
	justify-self: center;
}

/* The burger sits in the right-hand cell, beside the logo rather than on a
   row of its own. Hidden on desktop — see .menu-toggle below. */
.masthead .menu-toggle {
	grid-column: 3;
	justify-self: end;
}

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

.site-logo {
	font-family: var(--font-serif);
	font-size: 2rem;
	font-weight: 900;
	letter-spacing: -.02em;
	color: var(--ink);
}

/* Row 2 — the utility bar: date, nav, subscribe. */
.utilbar {
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	background: var(--sheet);
}

.utilbar__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1.25rem;
	min-height: 56px;
}

/* Quieter than the desks beside it: this is a dateline, not a control, so it
   sits a step down in size and colour rather than competing with the nav. */
.utilbar__date {
	font-size: .74rem;
	font-weight: 500;
	color: var(--ink-mute);
	white-space: nowrap;
	justify-self: start;
}

/* The subscribe control — the one filled button in the design, standing in
   for the burger the desktop bar no longer needs. */
.utilbar__cta {
	justify-self: end;
	display: inline-flex;
	align-items: center;
	padding: .5rem 1.1rem;
	background: var(--accent);
	color: #fff;
	font-size: .76rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	white-space: nowrap;
	transition: background .16s ease;
}
.utilbar__cta:hover { background: var(--accent-deep); color: #fff; }

/* Sticky compact bar that appears on scroll — the reference's condensed
   header with the logo at the left and the nav beside it. */
/* Boxed to the sheet's width like the rest of the page, rather than spanning
   the window: a full-bleed bar over a centred sheet reads as a different site
   arriving on scroll.

   left/right:0 with an auto margin rather than a left:50% translate, because
   the element already owns a transform for the slide-in — a second one on the
   same property would cancel it. */
.site-header--sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	max-width: var(--sheet-w);
	margin: 0 auto;
	background: #fff;
	border-bottom: 1px solid var(--rule);
	box-shadow: 0 2px 14px rgba(0, 0, 0, .09);
	transform: translateY(-100%);
	transition: transform .28s ease;
	z-index: 200;
}
.site-header--sticky.is-visible { transform: translateY(0); }

.stickybar {
	max-width: calc(var(--sheet-w) - (var(--gutter) * 2));
	margin: 0 auto;
	padding: 0 1.25rem;
	display: flex;
	align-items: center;
	gap: 2rem;
	min-height: 58px;
}

.stickybar__brand img { max-height: 32px; width: auto; }
.stickybar__brand .site-logo { font-size: 1.3rem; }

/* ═══ 5. Navigation ═══════════════════════════════════════════════════════ */

/* nowrap, not wrap: the utility bar is a single rule-bounded row, and a menu
   that spills onto a second line breaks that line and pushes the bar's height
   around. Below the breakpoint where the desks stop fitting, the whole nav
   moves into the drawer instead — see the 1000px block. */
.nav-list {
	display: flex;
	align-items: center;
	gap: 1.9rem;
	flex-wrap: nowrap;
}

.nav-primary {
	justify-self: center;
	min-width: 0;
}

/* Set in caps, with the tracking caps always need to stay readable.
   Targeted on .nav-list rather than on #menu-main-menu: that id is generated
   from the menu's NAME, so renaming the menu in wp-admin would silently drop
   the styling. */
.nav-list a {
	font-size: .8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--ink);
	padding: .35rem 0;
	display: inline-block;
	position: relative;
	transition: color .16s ease;
}

.nav-list a:hover,
.nav-list .current-menu-item > a,
.nav-list .current-menu-parent > a {
	color: var(--accent);
}

.nav-list a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .18s ease;
}
.nav-list a:hover::after,
.nav-list .current-menu-item > a::after { transform: scaleX(1); }

/* Sub-menus */
.nav-list li { position: relative; }

.nav-list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: #fff;
	border: 1px solid var(--rule);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
	padding: .4rem 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
	z-index: 80;
}
.nav-list li:hover > .sub-menu,
.nav-list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
/* Dropdown entries stay sentence-case: caps are the top row's signal, and a
   whole panel of them reads as shouting rather than as structure. */
.nav-list .sub-menu a {
	display: block;
	padding: .5rem 1rem;
	font-size: .85rem;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	white-space: nowrap;
}
.nav-list .sub-menu a::after { display: none; }
.nav-list .sub-menu a:hover { background: var(--accent-soft); }

/* The burger — MOBILE ONLY. Above the breakpoint the desks are already in
   the utility bar, so a control that reveals the same list is redundant; the
   subscribe button takes that slot instead. Revealed in the 860px block. */
.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 34px;
	height: 34px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}
.menu-toggle span {
	display: block;
	height: 2px;
	width: 22px;
	background: var(--ink);
	transition: transform .2s ease, opacity .2s ease;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Drawer */
.nav-drawer {
	position: fixed;
	top: 0; left: 0; bottom: 0;
	width: min(340px, 86vw);
	background: #fff;
	padding: 1.5rem 1.5rem 3rem;
	transform: translateX(-100%);
	transition: transform .28s cubic-bezier(.4, 0, .2, 1);
	overflow-y: auto;
	z-index: 300;
}
.nav-drawer.is-open { transform: translateX(0); }

.nav-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--rule);
}
.nav-drawer__title {
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--ink-mute);
}
.nav-close {
	background: none;
	border: 0;
	padding: .25rem;
	cursor: pointer;
	line-height: 0;
}
.nav-close svg { width: 22px; height: 22px; stroke: var(--ink); stroke-width: 2; fill: none; }

/* The drawer stacks its items, so it needs the wrapping the horizontal bar
   suppresses — without it a long label is squeezed rather than laid out. */
.nav-drawer .nav-list {
	flex-direction: column;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 0;
}
.nav-drawer .nav-list > li { border-bottom: 1px solid var(--rule); }
/* The drawer inherits the caps from .nav-list; a touch smaller than the
   sentence-case size it replaced, since caps set wider at the same value. */
.nav-drawer .nav-list a {
	display: block;
	padding: .8rem 0;
	font-size: .92rem;
}
.nav-drawer .nav-list a::after { display: none; }
.nav-drawer .sub-menu {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	border: 0;
	box-shadow: none;
	padding: 0 0 .5rem .9rem;
}

.nav-scrim {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .45);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s;
	z-index: 250;
}
.nav-scrim.is-open { opacity: 1; visibility: visible; }

/* ═══ 6. Sections (bands) ═════════════════════════════════════════════════ */

/* A band is a full-width strip inside the sheet. Alternating bands take the
   pale blue wash; the rest stay white. */
.band {
	padding: var(--band-y) 0;
	background: var(--sheet);
}

.band--wash { background: var(--wash); }
.band--tight { padding: 2rem 0; }
.band--flush-top { padding-top: 0; }

/* The lead band. Its story already ends on a date line, and the band below
   opens with its own centred title, so the default padding stacked two
   generous gaps into one oversized gutter between them. */
.band--lead { padding-bottom: .75rem; }
.band--lead .lead { margin-bottom: 0; }

.band__inner {
	max-width: calc(var(--sheet-w) - (var(--gutter) * 2));
	margin: 0 auto;
	padding: 0 1.25rem;
}

/* The centred serif section title over a full-width hairline. */
.band__head {
	text-align: center;
	margin-bottom: 2rem;
}

.band__title {
	font-family: var(--font-serif);
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
	font-weight: 700;
	color: var(--ink);
	letter-spacing: -.01em;
	margin-bottom: 1.1rem;
}

.band__title a { color: inherit; }
.band__title a:hover { color: var(--accent); }

.band__rule {
	display: block;
	height: 1px;
	background: var(--rule-strong);
}

.band--wash .band__rule { background: rgba(20, 22, 26, .16); }

/* ═══ 7. Cards & post lists ═══════════════════════════════════════════════ */

/* The category eyebrow — small blue caps above every headline. */
.eyebrow {
	display: inline-block;
	font-size: .68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--accent);
	margin-bottom: .45rem;
}
.eyebrow:hover { color: var(--accent-deep); }

.posted-on,
.card__date {
	display: block;
	font-size: .78rem;
	color: var(--ink-mute);
	margin-top: .45rem;
}

/* The standard card: image on top, eyebrow, sans headline, date. */
.card { display: block; }

.card__media {
	display: block;
	overflow: hidden;
	margin-bottom: .7rem;
	background: #eef1f4;
}

.card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
.card__media:hover .card__img { transform: scale(1.04); }

/* A fixed ratio keeps a grid row's images aligned regardless of source crop. */
.card__media--4x3 { aspect-ratio: 4 / 3; }
.card__media--16x9 { aspect-ratio: 16 / 9; }
.card__media--1x1 { aspect-ratio: 1 / 1; }

.card__title {
	font-family: var(--font-sans);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.32;
	color: var(--ink);
}
.card__title a:hover { color: var(--accent); }

/* Clamped to two lines, so a long excerpt cannot push one card in a row
   taller than its neighbours. The overflow is cut with an ellipsis rather
   than trimmed server-side: the clamp reflows with the column width, where a
   fixed word count would leave a ragged last line at some breakpoints. */
.card__excerpt {
	margin: .5rem 0 0;
	font-size: .88rem;
	color: var(--ink-soft);
	line-height: 1.55;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

/* Grids */
.grid { display: grid; gap: var(--card-gap); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }

/* The horizontal row card — thumbnail left, text right. */
.rowcard {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: 1rem;
	align-items: start;
}

.rowcard__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #eef1f4;
}
.rowcard__media img { width: 100%; height: 100%; object-fit: cover; }

.rowcard__title {
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.32;
}
.rowcard__title a:hover { color: var(--accent); }

/* A compact row with no image — used in the footer and sidebar lists. */
.minilist { display: grid; gap: 1rem; }

.minilist__item {
	display: grid;
	grid-template-columns: 74px 1fr;
	gap: .8rem;
	align-items: start;
}

.minilist__media {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #eef1f4;
}
.minilist__img { width: 100%; height: 100%; object-fit: cover; }

.minilist__title {
	font-size: .85rem;
	font-weight: 600;
	line-height: 1.34;
}
.minilist__title a:hover { color: var(--accent); }

.minilist__date {
	display: block;
	font-size: .74rem;
	color: var(--ink-mute);
	margin-top: .3rem;
}

/* ═══ 8. Hero / lead ══════════════════════════════════════════════════════ */

/* The front page lead: a wide photograph, then the eyebrow, a big centred
   serif headline and the date — exactly the reference's opening block. */
.lead { margin-bottom: 2.25rem; }

.lead__media {
	display: block;
	aspect-ratio: 16 / 7.4;
	overflow: hidden;
	background: #eef1f4;
	margin-bottom: 1.1rem;
}
.lead__media img { width: 100%; height: 100%; object-fit: cover; }

.lead__body { text-align: center; }

.lead__title {
	font-family: var(--font-serif);
	font-size: clamp(1.7rem, 1.1rem + 2.1vw, 2.6rem);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -.015em;
	margin-bottom: .55rem;
}
.lead__title a:hover { color: var(--accent); }

.lead__date { font-size: .82rem; color: var(--ink-mute); }

.lead__excerpt {
	max-width: 62ch;
	margin: .8rem auto 0;
	color: var(--ink-soft);
	font-size: .95rem;
}

/* The section lead used inside category bands: big photo left, serif
   headline under it; a stacked list of secondary items on the right. */
.section-split {
	display: grid;
	grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
}

.section-split__lead .lead__media { aspect-ratio: 16 / 9; }
.section-split__lead .lead__body { text-align: left; }
.section-split__lead .lead__title {
	font-size: clamp(1.4rem, 1rem + 1.5vw, 2rem);
}

/* The split band's lead is a feature-scale item beside a tall side column,
   so it keeps a fuller standfirst than the two lines a grid card gets. */
.section-split__lead .card__excerpt {
	-webkit-line-clamp: 4;
	line-clamp: 4;
	font-size: .92rem;
}

.section-split__side { display: grid; gap: 1.5rem; }

/* The feature band — a wide wash strip with the photo left and a large serif
   headline plus excerpt on the right (reference: the Investing band). */
.feature {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	gap: 2rem;
	align-items: start;
}

.feature__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #dfe7f3;
}
.feature__media img { width: 100%; height: 100%; object-fit: cover; }

.feature__title {
	font-family: var(--font-serif);
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
	font-weight: 700;
	line-height: 1.16;
	margin-bottom: .5rem;
}
.feature__title a:hover { color: var(--accent); }

.feature__excerpt {
	margin-top: .9rem;
	color: var(--ink-soft);
	font-size: .95rem;
	line-height: 1.6;
}

/* The three-up rail that closes the feature band. */
.railrow {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
	margin-top: 2rem;
}

/* ═══ 9. Single post ══════════════════════════════════════════════════════ */

.entry-header { text-align: center; margin-bottom: 1.75rem; }

.entry-title {
	font-family: var(--font-serif);
	font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -.015em;
	margin-bottom: .7rem;
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .5rem .9rem;
	font-size: .82rem;
	color: var(--ink-mute);
}

.entry-meta__sep { color: var(--ink-faint); }

.entry-media {
	margin: 0 0 1.75rem;
	background: #eef1f4;
}
.entry-media img { width: 100%; height: auto; }

.entry-content {
	font-size: 1.02rem;
	line-height: 1.75;
	color: var(--ink-soft);
}

.entry-content > * + * { margin-top: 1.15em; }

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	font-family: var(--font-serif);
	color: var(--ink);
	margin-top: 1.9em;
	margin-bottom: .55em;
	line-height: 1.25;
}
.entry-content h2 { font-size: 1.6rem; }
.entry-content h3 { font-size: 1.32rem; }
.entry-content h4 { font-size: 1.12rem; }

.entry-content a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.entry-content a:hover { color: var(--accent-deep); }

.entry-content ul,
.entry-content ol {
	padding-left: 1.3rem;
	list-style: revert;
}
.entry-content li + li { margin-top: .4em; }

.entry-content blockquote {
	margin: 1.6em 0;
	padding: .3em 0 .3em 1.4rem;
	border-left: 3px solid var(--accent);
	font-family: var(--font-serif);
	font-size: 1.2rem;
	font-style: italic;
	color: var(--ink);
}

.entry-content img { margin-inline: auto; }

.entry-content figcaption {
	font-size: .8rem;
	color: var(--ink-mute);
	text-align: center;
	margin-top: .5rem;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: .92rem;
}
.entry-content th,
.entry-content td {
	border: 1px solid var(--rule);
	padding: .55rem .7rem;
	text-align: left;
}
.entry-content th { background: var(--accent-soft); font-weight: 700; }

/* The single-post layout: article beside the sidebar. */
.content-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 2.5rem;
	align-items: start;
}

/* Share row */
.share-row {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin: 2rem 0;
	padding: 1rem 0;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}

.share-row__label {
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--ink-mute);
	margin-right: .3rem;
}

.share-row__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--rule-strong);
	color: var(--ink-soft);
	transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.share-row__link svg { width: 16px; height: 16px; fill: currentColor; }
.share-row__link:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

/* Related posts */
.related { margin-top: 2.5rem; }

.related__title {
	font-family: var(--font-serif);
	font-size: 1.4rem;
	text-align: center;
	margin-bottom: 1rem;
}

/* Post navigation */
.post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	margin-top: 2.25rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--rule);
}

.post-nav__item--next { text-align: right; }

.post-nav__label {
	display: block;
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--ink-mute);
	margin-bottom: .35rem;
}

.post-nav__title {
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.34;
}
.post-nav__title:hover { color: var(--accent); }

/* ═══ 10. Archive & pagination ════════════════════════════════════════════ */

.page-header { text-align: center; margin-bottom: 2rem; }

.page-title {
	font-family: var(--font-serif);
	font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem);
	margin-bottom: .9rem;
}

.page-header .band__rule { margin-top: 1rem; }

.archive-description {
	max-width: 62ch;
	margin: .6rem auto 0;
	color: var(--ink-soft);
	font-size: .94rem;
}

.pagination {
	display: flex;
	justify-content: center;
	gap: .4rem;
	margin-top: 2.5rem;
	flex-wrap: wrap;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 .6rem;
	border: 1px solid var(--rule-strong);
	font-size: .88rem;
	font-weight: 600;
	color: var(--ink-soft);
	transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}
.pagination .dots { border-color: transparent; }
.pagination .dots:hover { background: none; color: var(--ink-soft); }

/* ═══ 11. Sidebar & panels ════════════════════════════════════════════════ */

.sidebar { display: grid; gap: 1.75rem; align-content: start; }

.panel {
	border: 1px solid var(--rule);
	background: #fff;
	padding: 1.25rem;
}

.panel__heading {
	font-family: var(--font-serif);
	font-size: 1.15rem;
	text-align: center;
	margin-bottom: 1rem;
	padding-bottom: .75rem;
	border-bottom: 1px solid var(--rule);
}

.panel--plain {
	border: 0;
	padding: 0;
}

/* Category list */
.cat-list { display: grid; gap: .1rem; }

.cat-list__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .6rem .1rem;
	border-bottom: 1px solid var(--rule);
	font-size: .9rem;
	font-weight: 600;
	transition: color .16s ease;
}
.cat-list__item:last-child .cat-list__link { border-bottom: 0; }
.cat-list__link:hover { color: var(--accent); }

.cat-list__count {
	font-size: .75rem;
	font-weight: 600;
	color: var(--ink-mute);
	background: var(--accent-soft);
	padding: .12rem .45rem;
	min-width: 26px;
	text-align: center;
}

/* ═══ 12. Newsletter (opt-in) ═════════════════════════════════════════════ */

/* The form itself is unchanged markup from inc/optin-form — only its skin is
   redesigned here to match the light editorial style. */

.st-optin { display: grid; gap: .7rem; }

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

.st-optin__input {
	width: 100%;
	padding: .7rem .85rem;
	border: 1px solid var(--rule-strong);
	background: #fff;
	font-size: .92rem;
	transition: border-color .16s ease, box-shadow .16s ease;
}
.st-optin__input::placeholder { color: var(--ink-faint); }
.st-optin__input:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

.st-optin__consent-label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .55rem;
	align-items: start;
	cursor: pointer;
}

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

.st-optin__consent-text {
	font-size: .76rem;
	line-height: 1.5;
	color: var(--ink-mute);
}
.st-optin__consent-text a {
	color: var(--accent);
	text-decoration: underline;
}

.st-optin__submit {
	width: 100%;
	padding: .75rem 1rem;
	background: var(--accent);
	border: 1px solid var(--accent);
	color: #fff;
	font-size: .82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	cursor: pointer;
	transition: background .16s ease, border-color .16s ease;
}
.st-optin__submit:hover:not(:disabled) {
	background: var(--accent-deep);
	border-color: var(--accent-deep);
}
.st-optin__submit:disabled { opacity: .6; cursor: default; }

.st-optin__message {
	margin: 0;
	font-size: .8rem;
	line-height: 1.5;
	min-height: 0;
}
.st-optin__message:empty { display: none; }
.st-optin__message.is-error { color: var(--neg); }
.st-optin__message.is-success { color: var(--pos); }

.st-optin__footer {
	display: grid;
	gap: .15rem;
	font-size: .68rem;
	line-height: 1.45;
	color: var(--ink-faint);
}

/* The address is entered as several lines (street, then city/state/ZIP/country).
   The grid above would otherwise run them together on one line. */
.st-optin__address { white-space: pre-line; }

/* The newsletter band — a wash strip with the pitch left, the form right. */
.newsletter-band {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	gap: 2.5rem;
	align-items: center;
}

.newsletter-band__title {
	font-family: var(--font-serif);
	font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem);
	margin-bottom: .6rem;
}

.newsletter-band__text {
	color: var(--ink-soft);
	font-size: .95rem;
	margin-bottom: 0;
}

.newsletter-band__features {
	display: grid;
	gap: .5rem;
	margin-top: 1.1rem;
}

.newsletter-band__features li {
	position: relative;
	padding-left: 1.3rem;
	font-size: .87rem;
	color: var(--ink-soft);
}
.newsletter-band__features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .5em;
	width: 7px;
	height: 7px;
	background: var(--accent);
	border-radius: 50%;
}
.newsletter-band__features strong {
	color: var(--ink);
	font-weight: 700;
}

.newsletter-band__form {
	background: #fff;
	border: 1px solid var(--rule-strong);
	padding: 1.5rem;
}

/* Modal — markup comes from inc/optin-form/optin-form.php, which toggles the
   `hidden` attribute rather than a class. */
.st-modal {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	z-index: 400;
}
.st-modal[hidden] { display: none; }

.st-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(12, 14, 18, .62);
}

/* Stops the page behind the modal scrolling under it. */
body.st-modal-open { overflow: hidden; }

.st-modal__dialog {
	position: relative;
	width: min(440px, 100%);
	max-height: 90vh;
	overflow-y: auto;
	background: #fff;
	padding: 2rem 1.75rem 1.75rem;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}

.st-modal__close {
	position: absolute;
	top: .4rem;
	right: .65rem;
	width: 32px;
	height: 32px;
	background: none;
	border: 0;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	color: var(--ink-mute);
}
.st-modal__close:hover { color: var(--ink); }

.st-modal__kicker {
	font-size: .68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	text-align: center;
	color: var(--accent);
	margin-bottom: .4rem;
}

.st-modal__title {
	font-family: var(--font-serif);
	font-size: 1.5rem;
	text-align: center;
	margin-bottom: .5rem;
}

.st-modal__sub {
	text-align: center;
	font-size: .9rem;
	color: var(--ink-soft);
	margin-bottom: 1.25rem;
}

/* ═══ 13. Footer ══════════════════════════════════════════════════════════ */

/* The footer is BOXED like the sheet above it: the same width, sitting on the
   surround rather than bleeding to the window edges, so the page reads as one
   column throughout instead of ending in a full-width slab.

   The dark plate is drawn on .site-footer__box; .site-footer itself is only
   the centring wrapper, which is what lets the surround's grid pattern show
   in the margins beside it. */
.site-footer {
	max-width: var(--sheet-w);
	margin: 0 auto;
	color: #c9ced6;
}

.site-footer__box {
	background: var(--footer-bg);
	padding: 3rem 0 0;
}

.footer__grid {
	max-width: calc(var(--sheet-w) - (var(--gutter) * 2));
	margin: 0 auto;
	padding: 0 2.25rem;
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr);
	gap: 2.5rem;
	align-items: start;
}

.footer-col__heading {
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .13em;
	color: #fff;
	margin-bottom: 1.1rem;
}

.footer-brand__mark { margin-bottom: 1rem; }

/* The Customizer logo is drawn for the white masthead, so on the dark footer
   plate its coloured marks go muddy. brightness(0) crushes it to a solid
   black silhouette, then invert(1) flips that to pure white — the pair works
   on any source artwork, where a plain invert() would only shift the hues. */
.footer-brand__mark img {
	max-width: 220px;
	height: auto;
	filter: brightness(0) invert(1);
}

.footer-brand .site-logo { color: #fff; font-size: 1.5rem; }

.footer-brand__text {
	font-size: .9rem;
	line-height: 1.75;
	color: #a7aeb8;
	margin: 0;
}

.footer-links { display: grid; gap: .65rem; }
.footer-links a {
	font-size: .9rem;
	color: #a7aeb8;
	transition: color .16s ease;
}
.footer-links a:hover { color: #fff; }

.footer-base {
	margin-top: 3rem;
	border-top: 1px solid var(--rule-dark);
}

.footer-base__inner {
	max-width: calc(var(--sheet-w) - (var(--gutter) * 2));
	margin: 0 auto;
	padding: 1.4rem 2.25rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .75rem 1.5rem;
	text-align: center;
}

.footer-copy {
	margin: 0;
	font-size: .84rem;
	color: #8d949e;
}

.footer-legal__menu {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
}
.footer-legal__menu a {
	font-size: .84rem;
	color: #8d949e;
}
.footer-legal__menu a:hover { color: #fff; }

/* Back to top */
.to-top {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--accent);
	border: 0;
	color: #fff;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s, background .16s ease;
	z-index: 180;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--accent-deep); }
.to-top svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.4; fill: none; }

/* ═══ 14. Widgets (ported from soledad-child) ═════════════════════════════ */

/* ── Political Control Over Time ─────────────────────────────────────────
   Restyled to the light editorial palette: a bordered plate with a serif
   heading, then one tinted row per administration with a party pill. */

.political-control-widget {
	border: 1px solid var(--rule);
	background: #fff;
	padding: 1.25rem;
}

.political-control-widget h3 {
	font-family: var(--font-serif);
	font-size: 1.15rem;
	font-weight: 700;
	text-align: center;
	color: var(--ink);
	margin-bottom: 1.1rem;
}

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

.political-period {
	position: relative;
	padding: .6rem .75rem .6rem 1rem;
	border-left: 4px solid var(--rule-strong);
	background: #f6f8fa;
}

.political-period--republican {
	border-left-color: var(--rep);
	background: var(--rep-wash);
}
.political-period--democrat {
	border-left-color: var(--dem);
	background: var(--dem-wash);
}

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

.political-period__years {
	font-size: .88rem;
	font-weight: 700;
	color: var(--ink);
}

.political-period__party {
	font-size: .62rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #fff;
	padding: .18rem .5rem;
	white-space: nowrap;
}
.political-period--republican .political-period__party { background: var(--rep); }
.political-period--democrat .political-period__party { background: var(--dem); }

.political-period__return {
	display: flex;
	align-items: baseline;
	gap: .4rem;
	margin-top: .3rem;
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--ink-mute);
}

.political-period__value {
	font-size: .84rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}
.political-period__value--pos { color: var(--pos); }
.political-period__value--neg { color: var(--neg); }
.political-period__value--tbd { color: var(--ink-mute); }

.political-control-widget .widget-footer {
	margin-top: 1rem;
	padding-top: .8rem;
	border-top: 1px solid var(--rule);
}

.political-control-widget .disclaimer {
	font-size: .7rem;
	font-style: italic;
	line-height: 1.5;
	text-align: center;
	color: var(--ink-faint);
}

/* ── Cost of Waiting ─────────────────────────────────────────────────────
   Lives in the footer on the dark surround, so it carries its own dark
   plate rather than inheriting the light panel treatment. */

.cost-waiting-widget {
	background: var(--footer-panel);
	border: 1px solid var(--rule-dark);
	padding: 1.15rem;
	color: #e7eaee;
}

.cost-waiting-widget .loading {
	font-size: .82rem;
	color: #8d949e;
	text-align: center;
	padding: 1.5rem 0;
}

.cost-waiting__title {
	font-family: var(--font-serif);
	font-size: 1.05rem;
	font-weight: 700;
	text-align: center;
	color: #fff;
	margin-bottom: .9rem;
}

.cost-waiting__slider { margin-bottom: .5rem; }

.cost-waiting__range {
	width: 100%;
	accent-color: var(--pos);
	cursor: pointer;
}

.cost-waiting__years {
	display: block;
	text-align: center;
	font-size: .8rem;
	font-weight: 600;
	color: #5fd08a;
	margin-bottom: .75rem;
}

.cost-waiting__chart {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .75rem;
	align-items: end;
	height: 96px;
	margin-bottom: .5rem;
}

.cost-waiting__bar-wrap {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	text-align: center;
}

.cost-waiting__amount {
	font-size: .66rem;
	font-weight: 700;
	color: #e7eaee;
	margin-bottom: .25rem;
}

.cost-waiting__bar {
	width: 58%;
	margin: 0 auto;
	background: var(--pos);
	transition: height .3s ease;
	min-height: 4px;
}
.cost-waiting__bar--wait { background: var(--neg); }

.cost-waiting__label {
	font-size: .64rem;
	color: #9aa1ac;
	margin-top: .3rem;
}

.cost-waiting__result {
	background: rgba(215, 40, 47, .12);
	border: 1px solid rgba(215, 40, 47, .3);
	padding: .6rem;
	text-align: center;
}

.cost-waiting__loss {
	font-size: .84rem;
	font-weight: 700;
	color: #ff6b6b;
	display: block;
}

.cost-waiting__note {
	font-size: .66rem;
	color: #9aa1ac;
	margin-top: .15rem;
	display: block;
}

/* ── 100 Years of the Stock Market ───────────────────────────────────────
   The full-width page-template dashboard. */

.market-history-dashboard {
	display: grid;
	gap: 1.75rem;
}

.market-history__header { text-align: center; }

.market-history__title {
	font-family: var(--font-serif);
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
	margin-bottom: .5rem;
}

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

.market-history__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1rem;
}

.market-stat {
	border: 1px solid var(--rule);
	background: #fff;
	padding: 1rem;
	text-align: center;
}

.market-stat__value {
	display: block;
	font-family: var(--font-serif);
	font-size: 1.7rem;
	font-weight: 700;
	color: var(--accent);
	line-height: 1.1;
}

.market-stat__label {
	display: block;
	font-size: .72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--ink-mute);
	margin-top: .35rem;
}

.market-history__controls {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
}

.market-history__btn {
	padding: .5rem .95rem;
	border: 1px solid var(--rule-strong);
	background: #fff;
	font-size: .82rem;
	font-weight: 600;
	color: var(--ink-soft);
	cursor: pointer;
	transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.market-history__btn:hover { border-color: var(--accent); color: var(--accent); }
.market-history__btn.is-active {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

.market-history__chart {
	border: 1px solid var(--rule);
	background: #fff;
	padding: 1.25rem;
	min-height: 320px;
	position: relative;
}

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

.market-event {
	display: grid;
	grid-template-columns: 82px 1fr;
	gap: 1rem;
	align-items: start;
	border-left: 3px solid var(--accent);
	background: var(--accent-soft);
	padding: .75rem 1rem;
}

.market-event--crash {
	border-left-color: var(--neg);
	background: var(--rep-wash);
}
.market-event--boom {
	border-left-color: var(--pos);
	background: #e8f6ee;
}

.market-event__year {
	font-family: var(--font-serif);
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--ink);
}

.market-event__title {
	font-size: .92rem;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: .2rem;
}

.market-event__text {
	font-size: .84rem;
	color: var(--ink-soft);
	line-height: 1.55;
	margin: 0;
}

.market-event__change {
	font-size: .8rem;
	font-weight: 700;
	margin-top: .25rem;
}
.market-event__change--pos { color: var(--pos); }
.market-event__change--neg { color: var(--neg); }

.market-history__disclaimer {
	font-size: .76rem;
	font-style: italic;
	text-align: center;
	color: var(--ink-faint);
	margin: 0;
}

/* ═══ 15. Utilities & responsive ══════════════════════════════════════════ */

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

.no-results {
	text-align: center;
	padding: 3rem 0;
	color: var(--ink-soft);
}

/* WordPress core alignment classes */
.alignleft { float: left; margin: .4rem 1.5rem 1rem 0; }
.alignright { float: right; margin: .4rem 0 1rem 1.5rem; }
.aligncenter { margin-inline: auto; }
.alignwide { width: 100%; }
.alignfull { width: 100%; }
.wp-caption { max-width: 100%; }
.sticky .card__title::before { content: "★ "; color: var(--accent); }

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

@media (max-width: 1080px) {
	:root { --band-y: 2.5rem; --card-gap: 1.35rem; }

	.content-sidebar { grid-template-columns: 1fr; }
	.sidebar { grid-template-columns: repeat(2, 1fr); display: grid; }

	.footer__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }

	.section-split { grid-template-columns: 1fr; }
	.feature { grid-template-columns: 1fr; }
	.grid--5 { grid-template-columns: repeat(3, 1fr); }
}

/* ── The nav's own breakpoint ──────────────────────────────────────────
   Set by what the utility bar actually needs, not by a round device width:
   the desks measure ~663px, and with the dateline (92px), the subscribe
   control (107px), the grid gaps and the container padding the row needs
   roughly 940px to stay on one line.

   Below that the whole nav moves into the drawer rather than wrapping to a
   second row, which would break the bar's single-rule line and change its
   height. 1000px leaves headroom, so adding one more desk does not
   immediately reintroduce the wrap. */
@media (max-width: 1000px) {
	/* The burger appears beside the logo; the desks move into its drawer. */
	.menu-toggle { display: inline-flex; }

	.nav-primary { display: none; }

	/* Two cells left — the dateline and the subscribe control — so the bar
	   keeps both ends anchored rather than leaving a hole where the nav was. */
	.utilbar__inner { grid-template-columns: 1fr auto; }

	/* The logo can stop being optically centred once the burger shares the
	   row: a centred mark with a control on one side reads as off-centre. */
	.masthead { grid-template-columns: 1fr auto; }
	.masthead__brand { grid-column: 1; justify-self: start; }
	.masthead .menu-toggle { grid-column: 2; }

	/* The sticky bar carries the same nav, so it loses it at the same width;
	   what is left is the mark alone, which is still a useful home link. */
	.stickybar .nav-primary { display: none; }
}

@media (max-width: 860px) {
	.grid--4 { grid-template-columns: repeat(2, 1fr); }
	.railrow { grid-template-columns: 1fr; }
	.newsletter-band { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (max-width: 640px) {
	:root { --band-y: 2rem; --gutter: 1rem; }

	.grid--2,
	.grid--3,
	.grid--4,
	.grid--5 { grid-template-columns: 1fr; }

	.sidebar { grid-template-columns: 1fr; }
	.footer__grid { grid-template-columns: 1fr; }
	.post-nav { grid-template-columns: 1fr; }
	.post-nav__item--next { text-align: left; }

	.rowcard { grid-template-columns: 104px 1fr; gap: .8rem; }
	.market-event { grid-template-columns: 1fr; gap: .3rem; }

	.masthead { padding: 1.1rem 0 1rem; }
}

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