/*
Theme Name: Marginalia
Theme URI: https://www.sajjadbd.com/
Author: Mohammed Sajjad
Author URI: https://www.sajjadbd.com/
Description: A research-ledger theme for writers who document what they build. Numbered entries, hairline rules, monospace margin notes, and warm paper instead of stark white. Fast, SEO-first, fully customizable, and mobile-friendly.
Version: 1.5.2
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: marginalia
Tags: blog, one-column, two-columns, custom-colors, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks, editor-style, accessibility-ready
*/

/* ==========================================================================
   MARGINALIA — Design tokens
   ========================================================================== */

:root {
	/* Palette — overridable via Customizer */
	--mg-paper:        #faf8f3;
	--mg-paper-deep:   #f2eee4;
	--mg-ink:          #1a1712;
	--mg-ink-soft:     #554d40;
	--mg-ink-faint:    #8b8171;
	--mg-accent:       #b4441f;
	--mg-rule:         #e0d9c9;
	--mg-rule-strong:  #c9c0ac;

	/* Type */
	--mg-display: "Fraunces", "Iowan Old Style", Georgia, serif;
	--mg-body:    "Newsreader", Georgia, "Times New Roman", serif;
	--mg-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

	--mg-scale: 1;
	--mg-user-scale: 1;
	--mg-base:  calc(1.135rem * var(--mg-scale) * var(--mg-user-scale));

	/* Buttons */
	--mg-btn-bg: #b4441f;
	--mg-btn-fg: #ffffff;
	--mg-btn-radius: 6px;

	/* Rhythm */
	--mg-gap:      clamp(1.25rem, 3vw, 2.25rem);
	--mg-bay:      clamp(2rem, 4.5vw, 3.75rem);
	--mg-measure:  68ch;
	--mg-shell:    82rem;
	--mg-rail:     11.5rem;

	--mg-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

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

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

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

body {
	margin: 0;
	background: var(--mg-paper);
	color: var(--mg-ink);
	transition: background-color .3s var(--mg-ease), color .3s var(--mg-ease);
	font-family: var(--mg-body);
	font-size: var(--mg-base);
	line-height: 1.68;
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* Paper grain — atmosphere without weight */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: .035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
	mix-blend-mode: multiply;
}

img, svg, video, iframe, embed, object, canvas {
	max-width: 100%;
	display: block;
}

img, svg, video { height: auto; }

/* Long URLs and unbroken strings must never widen a column. */
h1, h2, h3, h4, h5, h6, p, li, td, th, dd, dt, figcaption, blockquote {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

a { color: inherit; }

::selection { background: var(--mg-accent); color: var(--mg-paper); }

:focus-visible {
	outline: 2px solid var(--mg-accent);
	outline-offset: 3px;
	border-radius: 1px;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--mg-display);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -.018em;
	margin: 0 0 .5em;
	font-variation-settings: "SOFT" 0, "WONK" 1;
	text-wrap: balance;
}

h1 { font-size: clamp(2.35rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-top: 2em; }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); margin-top: 1.8em; }
h4 { font-size: 1.15rem; margin-top: 1.6em; }

p { margin: 0 0 1.35em; }

/* The mono voice: labels, numbers, metadata */
.mg-mono,
.mg-rail,
.mg-eyebrow,
.mg-num,
.mg-crumbs,
.mg-colophon {
	font-family: var(--mg-mono);
	font-size: .775rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 500;
	line-height: 1.5;
}

.mg-eyebrow { color: var(--mg-accent); }
.mg-num     { color: var(--mg-ink-faint); font-variant-numeric: tabular-nums; }

blockquote {
	margin: 2.2em 0;
	padding: 0 0 0 1.6rem;
	border-left: 2px solid var(--mg-accent);
	font-size: 1.18em;
	line-height: 1.5;
	font-style: italic;
	color: var(--mg-ink-soft);
}

blockquote cite {
	display: block;
	margin-top: .8em;
	font: 500 .7rem/1.5 var(--mg-mono);
	letter-spacing: .14em;
	text-transform: uppercase;
	font-style: normal;
	color: var(--mg-ink-faint);
}

code, kbd, pre, samp { font-family: var(--mg-mono); font-size: .875em; }

code {
	background: var(--mg-paper-deep);
	padding: .12em .38em;
	border-radius: 2px;
}

pre {
	background: var(--mg-ink);
	color: #f5f1e8;
	padding: 1.4rem 1.5rem;
	overflow-x: auto;
	line-height: 1.6;
	border-radius: 2px;
	margin: 2em 0;
}

pre code { background: none; padding: 0; color: inherit; }

hr {
	border: 0;
	height: 1px;
	background: var(--mg-rule);
	margin: var(--mg-bay) 0;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin: 2em 0;
	font-size: .94em;
}

th, td {
	text-align: left;
	padding: .7rem .9rem;
	border-bottom: 1px solid var(--mg-rule);
}

th {
	font: 500 .7rem/1.5 var(--mg-mono);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mg-ink-faint);
}

/* ==========================================================================
   Shell & skip link
   ========================================================================== */

.mg-shell {
	width: min(100% - 2.5rem, var(--mg-shell));
	margin-inline: auto;
	min-width: 0;
}

@media (min-width: 48rem) {
	.mg-shell { width: min(100% - 5rem, var(--mg-shell)); }
}

.mg-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	background: var(--mg-ink);
	color: var(--mg-paper);
	padding: .8rem 1.2rem;
	font-family: var(--mg-mono);
	font-size: .75rem;
}

.mg-skip:focus { left: 1rem; top: 1rem; }

.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;
}

/* ==========================================================================
   Reading progress — the top rule fills as you read
   ========================================================================== */

.mg-progress {
	position: fixed;
	top: 0; left: 0;
	height: 2px;
	width: 0;
	background: var(--mg-accent);
	z-index: 200;
	transition: width .12s linear;
}

/* ==========================================================================
   Masthead
   ========================================================================== */

.mg-masthead {
	border-bottom: 1px solid var(--mg-rule);
	background: var(--mg-paper);
	position: relative;
	z-index: 100;
}

/* Journal strip — the small caps line above the title */
.mg-strip {
	border-bottom: 1px solid var(--mg-rule);
	color: var(--mg-ink-faint);
	font-family: var(--mg-mono);
	font-size: .72rem;
	letter-spacing: .15em;
	text-transform: uppercase;
	padding: .6rem 0;
}

.mg-strip__inner {
	display: flex;
	justify-content: space-between;
	gap: .5rem 1.2rem;
	align-items: center;
	flex-wrap: wrap;
}

.mg-strip__left { flex: 1 1 auto; min-width: 0; }

.mg-strip__right { color: var(--mg-ink-faint); }

@media (max-width: 40rem) {
	.mg-strip__right { display: none; }
}

.mg-masthead__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .9rem var(--mg-gap);
	padding: clamp(1.1rem, 3vw, 1.9rem) 0;
	flex-wrap: wrap;
}

.mg-brand {
	font-family: var(--mg-display);
	font-size: clamp(1.5rem, 3.2vw, 2.05rem);
	line-height: 1;
	letter-spacing: -.03em;
	font-variation-settings: "SOFT" 0, "WONK" 1;
	text-decoration: none;
	color: var(--mg-ink);
}

.mg-brand:hover { color: var(--mg-accent); }

.mg-brand__tag {
	display: block;
	margin-top: .5rem;
	font-family: var(--mg-mono);
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mg-ink-faint);
}

.mg-logo img {
	max-height: var(--mg-logo-mobile, 44px);
	width: auto;
	transition: max-height .3s var(--mg-ease);
}

@media (min-width: 48rem) {
	.mg-logo img { max-height: var(--mg-logo, 62px); }
}

/* Navigation */
.mg-nav ul {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	gap: clamp(.9rem, 2vw, 1.7rem);
	flex-wrap: wrap;
	align-items: center;
}

.mg-nav a {
	font-family: var(--mg-mono);
	font-size: .84rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mg-ink-soft);
	padding-bottom: 3px;
	position: relative;
	transition: color .2s var(--mg-ease);
}

.mg-nav a::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 0; height: 1px;
	background: var(--mg-accent);
	transition: width .3s var(--mg-ease);
}

.mg-nav a:hover,
.mg-nav .current-menu-item > a { color: var(--mg-ink); }

.mg-nav a:hover::after,
.mg-nav .current-menu-item > a::after { width: 100%; }

/* Sub-menus */
.mg-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%; left: 0;
	background: var(--mg-paper);
	border: 1px solid var(--mg-rule);
	padding: .6rem 0;
	min-width: 12rem;
	flex-direction: column;
	gap: 0;
	z-index: 60;
}

.mg-nav li { position: relative; }
.mg-nav li:hover > .sub-menu,
.mg-nav li:focus-within > .sub-menu { display: flex; }
.mg-nav .sub-menu a { display: block; padding: .5rem 1rem; }
.mg-nav .sub-menu a::after { display: none; }
.mg-nav .sub-menu a:hover { background: var(--mg-paper-deep); }

/* Mobile toggle */
.mg-burger {
	display: none;
	background: none;
	border: 1px solid var(--mg-rule-strong);
	cursor: pointer;
	padding: .5rem .8rem;
	font-family: var(--mg-mono);
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mg-ink);
	border-radius: 2px;
}

@media (max-width: 52rem) {
	.mg-burger { display: block; }

	.mg-nav {
		display: none;
		flex-basis: 100%;
		padding-top: 1.2rem;
		margin-top: 1.2rem;
		border-top: 1px solid var(--mg-rule);
	}

	.mg-nav.is-open { display: block; }

	.mg-nav ul { flex-direction: column; align-items: flex-start; gap: .1rem; }
	.mg-nav > ul > li { width: 100%; border-bottom: 1px solid var(--mg-rule); }
	.mg-nav > ul > li:last-child { border-bottom: 0; }
	.mg-nav a { display: block; padding: .8rem 0; font-size: .92rem; }
	.mg-nav .sub-menu { position: static; display: flex; border: 0; padding: 0 0 .5rem 1rem; }
}

/* ==========================================================================
   Page head (archives, search, 404)
   ========================================================================== */

.mg-pagehead {
	padding: clamp(1.8rem, 4vw, 2.8rem) 0 clamp(1.1rem, 2.2vw, 1.6rem);
	border-bottom: 1px solid var(--mg-rule);
}

.mg-pagehead h1 { margin-bottom: .3em; }

.mg-pagehead__desc {
	max-width: var(--mg-measure);
	color: var(--mg-ink-soft);
	font-size: 1.05em;
}

.mg-crumbs {
	color: var(--mg-ink-faint);
	margin-bottom: 1.4rem;
}

.mg-crumbs a { text-decoration: none; }
.mg-crumbs a:hover { color: var(--mg-accent); }
.mg-crumbs span[aria-hidden] { margin: 0 .5rem; opacity: .5; }

/* ==========================================================================
   THE LEDGER — entry list
   ========================================================================== */

.mg-ledger { list-style: none; margin: 0; padding: 0; }

.mg-entry {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	padding: clamp(1.9rem, 4vw, 2.8rem) 0;
	border-bottom: 2px solid var(--mg-rule);
	position: relative;
	min-width: 0;
}

/* Two-column ledger only once there is genuinely room for the rail.
   The rail occupies column one and spans the full height; the thumbnail and
   body stack in column two. */
@media (min-width: 53rem) {
	.mg-entry {
		grid-template-columns: var(--mg-rail) minmax(0, 1fr);
		gap: var(--mg-gap);
	}

	.mg-entry__rail  { grid-column: 1; grid-row: 1 / -1; }
	.mg-entry__thumb { grid-column: 2; }
	.mg-entry__body  { grid-column: 2; }

	/* Without an image the body should not be pushed into a second row. */
	.mg-entry--nothumb .mg-entry__body { grid-row: 1; }
}

/* The critical fix: grid children default to min-width:auto, which lets a
   wide image or long title blow the column past the viewport. */
.mg-entry > *,
.mg-entry__body {
	min-width: 0;
	max-width: 100%;
}

/* Entry number sits in the rail, tabular and quiet */
.mg-entry__rail {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: .45rem 1rem;
	padding-top: 0;
}

@media (min-width: 53rem) {
	.mg-entry__rail {
		flex-direction: column;
		align-items: flex-start;
		gap: .55rem;
		padding-top: .45rem;
	}
}

.mg-entry__rail time { color: var(--mg-ink-faint); }

.mg-entry__cats a {
	color: var(--mg-accent);
	text-decoration: none;
}

.mg-entry__cats a:hover { text-decoration: underline; text-underline-offset: 3px; }

.mg-entry__title {
	font-size: clamp(1.45rem, 5.2vw, 2.15rem);
	margin: 0 0 .45em;
	line-height: 1.16;
}

.mg-entry__title a {
	text-decoration: none;
	background-image: linear-gradient(var(--mg-accent), var(--mg-accent));
	background-size: 0% 1px;
	background-repeat: no-repeat;
	background-position: 0 92%;
	transition: background-size .4s var(--mg-ease), color .25s var(--mg-ease);
}

.mg-entry__title a:hover {
	background-size: 100% 1px;
	color: var(--mg-accent);
}

.mg-entry__excerpt {
	max-width: var(--mg-measure);
	color: var(--mg-ink-soft);
	margin-bottom: 1.1em;
}

.mg-entry__more {
	font-family: var(--mg-mono);
	font-size: .79rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mg-ink);
	border-bottom: 1px solid var(--mg-rule-strong);
	padding-bottom: 3px;
	transition: border-color .25s var(--mg-ease), color .25s var(--mg-ease);
}

.mg-entry__more:hover { color: var(--mg-accent); border-color: var(--mg-accent); }
.mg-entry__more span { transition: margin-left .25s var(--mg-ease); display: inline-block; }
.mg-entry__more:hover span { margin-left: .35rem; }

/* Thumb: small, restrained, never a card */
.mg-entry__thumb {
	display: block;
	width: 100%;
	max-width: 100%;
	margin-bottom: 1.25rem;
	overflow: hidden;
	background: var(--mg-paper-deep);
	aspect-ratio: 16 / 9;
}

.mg-entry__thumb img {
	width: 100%; height: 100%;
	object-fit: cover;
	filter: saturate(.9);
	transition: transform .7s var(--mg-ease), filter .5s var(--mg-ease);
}

.mg-entry:hover .mg-entry__thumb img { transform: scale(1.035); filter: saturate(1.05); }

/* Consistent image box across every style. */
.mg-entry__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Placeholder for entries with no featured image, so grid rows stay level. */
.mg-entry__thumb--empty {
	display: grid;
	place-items: center;
	background:
		repeating-linear-gradient(
			45deg,
			transparent 0 11px,
			var(--mg-rule) 11px 12px
		),
		var(--mg-paper-deep);
}

.mg-entry__placeholder {
	font-size: 1.1rem;
	letter-spacing: .2em;
	color: var(--mg-ink-faint);
	background: var(--mg-paper);
	padding: .45rem .85rem;
	border: 1px solid var(--mg-rule);
}

/* Lead entry gets more air */
.mg-entry--lead .mg-entry__title { font-size: clamp(1.75rem, 6vw, 3.1rem); }
.mg-entry--lead .mg-entry__excerpt { font-size: 1.1em; }

/* Staggered reveal.
   Written so the DEFAULT state is visible — if animations are blocked or
   unsupported, entries still render. Only opt in when motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
	.mg-entry {
		opacity: 0;
		transform: translateY(14px);
		animation: mg-rise .7s var(--mg-ease) forwards;
	}

	.mg-entry:nth-child(1) { animation-delay: .04s; }
	.mg-entry:nth-child(2) { animation-delay: .10s; }
	.mg-entry:nth-child(3) { animation-delay: .16s; }
	.mg-entry:nth-child(4) { animation-delay: .22s; }
	.mg-entry:nth-child(n+5) { animation-delay: .28s; }
}

@keyframes mg-rise {
	to { opacity: 1; transform: none; }
}

/* ==========================================================================
   Single entry
   ========================================================================== */

.mg-article { padding: clamp(1.8rem, 4vw, 3rem) 0; }

.mg-article__head {
	max-width: min(var(--mg-measure), 100%);
	margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
	min-width: 0;
}

.mg-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.3rem;
	align-items: center;
	margin-bottom: 1.5rem;
	color: var(--mg-ink-faint);
}

.mg-article__meta a { color: var(--mg-accent); text-decoration: none; }
.mg-article__meta a:hover { text-decoration: underline; text-underline-offset: 3px; }

.mg-article__lede {
	font-size: 1.18em;
	line-height: 1.55;
	color: var(--mg-ink-soft);
	margin-top: 1.1em;
}

.mg-article__figure {
	margin: 0 0 clamp(2rem, 5vw, 3.2rem);
	background: var(--mg-paper-deep);
}

.mg-article__figure img { width: 100%; height: auto; }

.mg-article__figure figcaption {
	font-family: var(--mg-mono);
	font-size: .74rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--mg-ink-faint);
	padding-top: .7rem;
}

/* Body: the measure is sacred */
.mg-prose {
	max-width: min(var(--mg-measure), 100%);
	font-size: 1.06em;
	min-width: 0;
}

.mg-prose img,
.mg-prose figure,
.mg-prose video,
.mg-prose iframe { max-width: 100%; }

/* Tables and code are the usual overflow offenders — let them scroll. */
.mg-prose table { display: block; overflow-x: auto; white-space: nowrap; }
.mg-prose pre { max-width: 100%; }

.mg-prose > * { margin-inline: 0; }

.mg-prose a {
	color: var(--mg-ink);
	text-decoration: underline;
	text-decoration-color: var(--mg-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	transition: color .2s var(--mg-ease);
}

.mg-prose a:hover { color: var(--mg-accent); }

.mg-prose ul, .mg-prose ol { padding-left: 1.3rem; margin: 0 0 1.35em; }
.mg-prose li { margin-bottom: .5em; }

.mg-prose h2 {
	padding-top: .6em;
	border-top: 1px solid var(--mg-rule);
}

.mg-prose img, .mg-prose figure { margin-block: 2em; }

.mg-prose figcaption {
	font-family: var(--mg-mono);
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mg-ink-faint);
	padding-top: .6rem;
}

/* Drop cap — optional, editorial */
.mg-prose--cap > p:first-of-type::first-letter {
	float: left;
	font-family: var(--mg-display);
	font-size: 3.9em;
	line-height: .82;
	padding: .06em .1em 0 0;
	color: var(--mg-accent);
	font-variation-settings: "SOFT" 0, "WONK" 1;
}

/* Marginalia — the signature move.
   Wrap a note in .mg-note and on wide screens it floats into the margin. */
.mg-note {
	font-family: var(--mg-mono);
	font-size: .74rem;
	line-height: 1.65;
	letter-spacing: .01em;
	text-transform: none;
	color: var(--mg-ink-faint);
	border-left: 1px solid var(--mg-accent);
	padding-left: .9rem;
	margin: 2em 0;
}

@media (min-width: 82rem) {
	.mg-note {
		float: right;
		clear: right;
		width: 15rem;
		margin: .4em -18rem .8em 0;
		border-left: 1px solid var(--mg-rule-strong);
	}
}

/* Wide/full blocks escape the measure — but only where there is room. */
.mg-prose .alignwide,
.mg-prose .alignfull { max-width: 100%; }

@media (min-width: 53rem) {
	.mg-prose .alignwide {
		width: min(100vw - 3rem, 68rem);
		max-width: none;
		margin-inline: calc(50% - min(50vw - 1.5rem, 34rem));
	}

	.mg-prose .alignfull {
		width: 100vw;
		max-width: none;
		margin-inline: calc(50% - 50vw);
	}

	.mg-prose .alignleft  { float: left; margin: .4em 1.6rem 1.2rem 0; max-width: 42%; }
	.mg-prose .alignright { float: right; margin: .4em 0 1.2rem 1.6rem; max-width: 42%; }
}
.mg-prose .aligncenter { margin-inline: auto; }

/* Tags */
.mg-tags {
	max-width: var(--mg-measure);
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-top: 1.4rem;
	border-top: 1px solid var(--mg-rule);
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
}

.mg-tags a {
	font-family: var(--mg-mono);
	font-size: .74rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mg-ink-soft);
	border: 1px solid var(--mg-rule);
	padding: .36rem .7rem;
	border-radius: 2px;
	transition: all .22s var(--mg-ease);
}

.mg-tags a:hover {
	color: var(--mg-accent);
	border-color: var(--mg-accent);
}

/* Author card */
.mg-author {
	max-width: var(--mg-measure);
	margin-top: 2.5rem;
	padding-top: 1.6rem;
	border-top: 1px solid var(--mg-rule);
	display: flex;
	gap: 1.1rem;
	align-items: flex-start;
}

.mg-author img { border-radius: 50%; flex-shrink: 0; }
.mg-author__name { font-family: var(--mg-display); font-size: 1.2rem; margin: 0 0 .25em; }
.mg-author__bio { font-size: .94em; color: var(--mg-ink-soft); margin: 0; }

/* Prev / next — two ledger cells */
.mg-adjacent {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid var(--mg-rule);
	margin-top: var(--mg-bay);
}

.mg-adjacent__cell {
	padding: clamp(1.4rem, 3vw, 2.2rem) 0;
	text-decoration: none;
	display: block;
	transition: background .3s var(--mg-ease);
}

.mg-adjacent__cell:first-child { padding-right: var(--mg-gap); border-right: 1px solid var(--mg-rule); }
.mg-adjacent__cell:last-child  { padding-left: var(--mg-gap); text-align: right; }
.mg-adjacent__cell:only-child  { border-right: 0; text-align: left; padding-left: 0; }

.mg-adjacent__label { display: block; color: var(--mg-ink-faint); margin-bottom: .6rem; }

.mg-adjacent__title {
	font-family: var(--mg-display);
	font-size: 1.22rem;
	line-height: 1.25;
	transition: color .25s var(--mg-ease);
}

.mg-adjacent__cell:hover .mg-adjacent__title { color: var(--mg-accent); }

@media (max-width: 40rem) {
	.mg-adjacent { grid-template-columns: 1fr; }
	.mg-adjacent__cell:first-child { border-right: 0; border-bottom: 1px solid var(--mg-rule); padding-right: 0; }
	.mg-adjacent__cell:last-child { text-align: left; padding-left: 0; }
}

/* ==========================================================================
   Layout with sidebar
   ========================================================================== */

.mg-layout {
	display: grid;
	gap: var(--mg-bay) clamp(2rem, 5vw, 4.5rem);
	grid-template-columns: minmax(0, 1fr);
}

.mg-layout > * { min-width: 0; max-width: 100%; }

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

@media (min-width: 64rem) {
	.mg-layout--sidebar { grid-template-columns: minmax(0, 1fr) 17rem; }
}

.mg-sidebar { align-self: start; }

@media (min-width: 64rem) {
	.mg-sidebar { position: sticky; top: 2rem; }
}

.mg-widget { margin-bottom: 2.4rem; }

.mg-widget__title,
.mg-sidebar .widget-title,
.mg-sidebar h2 {
	font-family: var(--mg-mono);
	font-size: .76rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--mg-ink-faint);
	padding-bottom: .6rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--mg-rule);
}

.mg-sidebar ul { list-style: none; margin: 0; padding: 0; }
.mg-sidebar li { padding: .48rem 0; font-size: 1em; }
.mg-sidebar a { text-decoration: none; }
.mg-sidebar a:hover { color: var(--mg-accent); }

/* ==========================================================================
   Search form
   ========================================================================== */

.mg-search { display: flex; gap: .5rem; }

.mg-search input[type="search"] {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--mg-rule-strong);
	padding: .6rem 0;
	font-family: var(--mg-mono);
	font-size: .8rem;
	color: var(--mg-ink);
}

.mg-search input[type="search"]:focus {
	outline: none;
	border-bottom-color: var(--mg-accent);
}

.mg-search button {
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--mg-mono);
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mg-accent);
	padding: 0 .2rem;
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.mg-pagination {
	display: flex;
	gap: .4rem;
	flex-wrap: wrap;
	align-items: center;
	padding: var(--mg-bay) 0;
}

.mg-pagination .page-numbers {
	font-family: var(--mg-mono);
	font-size: .8rem;
	letter-spacing: .07em;
	text-decoration: none;
	padding: .55rem .85rem;
	border: 1px solid var(--mg-rule);
	color: var(--mg-ink-soft);
	border-radius: 2px;
	transition: all .22s var(--mg-ease);
}

.mg-pagination .page-numbers:hover {
	border-color: var(--mg-accent);
	color: var(--mg-accent);
}

.mg-pagination .page-numbers.current {
	background: var(--mg-ink);
	border-color: var(--mg-ink);
	color: var(--mg-paper);
}

.mg-pagination .dots { border-color: transparent; }

/* ==========================================================================
   Comments
   ========================================================================== */

.mg-comments {
	max-width: var(--mg-measure);
	margin-top: var(--mg-bay);
	padding-top: 2rem;
	border-top: 1px solid var(--mg-rule);
}

.mg-comments__title { font-size: 1.5rem; margin-bottom: 1.5rem; }

.comment-list { list-style: none; margin: 0 0 2.5rem; padding: 0; }
.comment-list ol.children { list-style: none; padding-left: 1.5rem; }

.comment-body {
	padding: 1.3rem 0;
	border-bottom: 1px solid var(--mg-rule);
}

.comment-author { display: flex; align-items: center; gap: .7rem; margin-bottom: .5rem; }
.comment-author img { border-radius: 50%; }
.comment-author .fn { font-style: normal; font-weight: 500; }

.comment-metadata {
	font-family: var(--mg-mono);
	font-size: .66rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mg-ink-faint);
	margin-bottom: .7rem;
}

.comment-metadata a { text-decoration: none; }

.comment-reply-link {
	font-family: var(--mg-mono);
	font-size: .66rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mg-accent);
}

.comment-form label {
	display: block;
	font-family: var(--mg-mono);
	font-size: .68rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mg-ink-faint);
	margin-bottom: .4rem;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	background: transparent;
	border: 1px solid var(--mg-rule);
	padding: .7rem .85rem;
	font-family: var(--mg-body);
	font-size: 1rem;
	color: var(--mg-ink);
	margin-bottom: 1.1rem;
	border-radius: 2px;
}

.comment-form input:focus, .comment-form textarea:focus {
	outline: none;
	border-color: var(--mg-accent);
}

.comment-form .submit,
.mg-btn {
	background: var(--mg-btn-bg);
	color: var(--mg-btn-fg);
	border: 1px solid var(--mg-btn-bg);
	padding: .85rem 1.7rem;
	font-family: var(--mg-body);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.2;
	cursor: pointer;
	border-radius: var(--mg-btn-radius);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	transition: filter .25s var(--mg-ease), transform .25s var(--mg-ease);
}

.comment-form .submit:hover,
.mg-btn:hover {
	filter: brightness(1.12);
	transform: translateY(-1px);
}

.comment-form .submit:active,
.mg-btn:active { transform: translateY(0); }

/* Outline variant for secondary actions. */
.mg-btn--ghost {
	background: transparent;
	color: var(--mg-btn-bg);
	border-color: var(--mg-btn-bg);
}

.mg-btn--ghost:hover { background: var(--mg-btn-bg); color: var(--mg-btn-fg); }

/* ==========================================================================
   Footer
   ========================================================================== */

.mg-footer {
	border-top: 1px solid var(--mg-rule);
	margin-top: var(--mg-bay);
	background: var(--mg-paper-deep);
}

.mg-footer__widgets {
	display: grid;
	gap: var(--mg-gap) clamp(1.5rem, 4vw, 3.5rem);
	grid-template-columns: minmax(0, 1fr);
	padding: clamp(2.2rem, 5vw, 3.5rem) 0;
}

@media (min-width: 34rem) {
	.mg-footer__widgets {
		grid-template-columns: repeat(min(2, var(--mg-footer-cols, 3)), minmax(0, 1fr));
	}
}

@media (min-width: 56rem) {
	.mg-footer__widgets {
		grid-template-columns: repeat(var(--mg-footer-cols, 3), minmax(0, 1fr));
	}
}

.mg-footer__col { min-width: 0; }
.mg-footer__col .mg-widget:last-child { margin-bottom: 0; }

/* Hairlines between footer columns, in keeping with the ledger. */
@media (min-width: 56rem) {
	.mg-footer__col + .mg-footer__col {
		border-left: 1px solid var(--mg-rule);
		padding-left: clamp(1.5rem, 3vw, 2.5rem);
	}
}

.mg-footer__widgets:empty { display: none; }

.mg-colophon {
	border-top: 1px solid var(--mg-rule);
	padding: 1.4rem 0;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	color: var(--mg-ink-faint);
	font-size: .72rem;
}

.mg-colophon a { text-decoration: none; }
.mg-colophon a:hover { color: var(--mg-accent); }

/* ==========================================================================
   404 / empty states
   ========================================================================== */

.mg-empty {
	padding: var(--mg-bay) 0;
	max-width: var(--mg-measure);
}

.mg-empty__code {
	font-family: var(--mg-display);
	font-size: clamp(5rem, 16vw, 11rem);
	line-height: .85;
	color: var(--mg-rule-strong);
	margin-bottom: .2em;
	font-variation-settings: "SOFT" 0, "WONK" 1;
}

/* ==========================================================================
   Back to top
   ========================================================================== */

.mg-top {
	position: fixed;
	right: 1.3rem; bottom: 1.3rem;
	width: 2.6rem; height: 2.6rem;
	display: grid;
	place-items: center;
	background: var(--mg-paper);
	border: 1px solid var(--mg-rule-strong);
	color: var(--mg-ink);
	border-radius: 50%;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px);
	transition: all .3s var(--mg-ease);
	z-index: 150;
	font-size: .8rem;
}

.mg-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.mg-top:hover { border-color: var(--mg-accent); color: var(--mg-accent); }

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
	body::before, .mg-masthead, .mg-footer, .mg-top, .mg-adjacent, .mg-sidebar, .mg-progress { display: none !important; }
	body { background: #fff; color: #000; font-size: 11pt; }
	.mg-prose a { text-decoration: none; color: #000; }
	.mg-prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}

/* ==========================================================================
   Masthead clock
   ========================================================================== */

.mg-clock {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: var(--mg-ink-faint);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.mg-clock__time {
	color: var(--mg-accent);
	font-variant-numeric: tabular-nums;
	min-width: 4.6em;
}

.mg-clock__time::before {
	content: "·";
	margin-right: .5rem;
	color: var(--mg-rule-strong);
}

@media (max-width: 34rem) {
	.mg-clock__date { display: none; }
}

/* ==========================================================================
   More entries — end of post
   ========================================================================== */

.mg-more {
	max-width: min(var(--mg-measure), 100%);
	margin-top: var(--mg-bay);
	padding-top: 1.8rem;
	border-top: 2px solid var(--mg-rule);
}

.mg-more__title {
	font-family: var(--mg-mono);
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mg-ink-faint);
	margin-bottom: 1.1rem;
}

.mg-more__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: mg-more;
}

.mg-more__item { border-top: 1px solid var(--mg-rule); }
.mg-more__item:last-child { border-bottom: 1px solid var(--mg-rule); }

.mg-more__link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem;
	padding: .95rem .2rem;
	text-decoration: none;
	transition: background .25s var(--mg-ease), padding-left .25s var(--mg-ease);
}

.mg-more__link:hover {
	background: var(--mg-paper-deep);
	padding-left: .7rem;
}

.mg-more__num {
	display: block;
	margin-bottom: .25rem;
	font-size: .7rem;
}

.mg-more__text { min-width: 0; }

.mg-more__headline {
	display: block;
	font-family: var(--mg-display);
	font-size: 1.18rem;
	line-height: 1.3;
	letter-spacing: -.012em;
	font-variation-settings: "SOFT" 0, "WONK" 1;
	transition: color .25s var(--mg-ease);
	overflow-wrap: break-word;
}

.mg-more__link:hover .mg-more__headline { color: var(--mg-accent); }

.mg-more__meta {
	display: block;
	margin-top: .32rem;
	font-size: .7rem;
	color: var(--mg-ink-faint);
}

.mg-more__arrow {
	color: var(--mg-rule-strong);
	font-size: .95rem;
	transition: color .25s var(--mg-ease), transform .25s var(--mg-ease);
}

.mg-more__link:hover .mg-more__arrow {
	color: var(--mg-accent);
	transform: translateX(3px);
}

/* On wide screens with room, show numbers in a rail like the main ledger. */
@media (min-width: 53rem) {
	.mg-more__link { grid-template-columns: 5.5rem minmax(0, 1fr) auto; }
	.mg-more__num { margin-bottom: 0; align-self: center; }
	.mg-more__num:empty { display: none; }
}

/* ==========================================================================
   Advertisements
   ========================================================================== */

.mg-ad {
	display: block;
	margin: 2.4rem 0;
	padding: 1rem 0;
	border-top: 1px solid var(--mg-rule);
	border-bottom: 1px solid var(--mg-rule);
	text-align: center;
	max-width: 100%;
	overflow: hidden;
	/* Reserve space so ads don't shove text around as they load. */
	min-height: 100px;
}

.mg-ad__label {
	display: block;
	font-family: var(--mg-mono);
	font-size: .58rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--mg-ink-faint);
	margin-bottom: .7rem;
	opacity: .8;
}

.mg-ad .adsbygoogle { display: block; margin-inline: auto; }

.mg-ad--top { margin-top: 0; }

.mg-ad--sidebar {
	border: 0;
	padding: 0;
	margin: 0 0 2.4rem;
	min-height: 250px;
}

.mg-prose .mg-ad { margin-inline: 0; }

/* ==========================================================================
   SITE STYLES
   Four looks driven by one Customizer choice. The ledger is the base; each
   style below is a considered variation, not a different theme.
   ========================================================================== */

/* --- Columns: a three-up grid of entries --------------------------------- */

@media (min-width: 40rem) {
	.mg-style-columns .mg-ledger {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 var(--mg-gap);
		border-top: 1px solid var(--mg-rule);
	}
}

@media (min-width: 62rem) {
	.mg-style-columns .mg-ledger {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.mg-style-columns .mg-entry {
	grid-template-columns: minmax(0, 1fr);
	gap: .85rem;
	padding: 1.8rem 0;
}

.mg-style-columns .mg-entry__rail {
	flex-direction: row;
	align-items: center;
	gap: .4rem .8rem;
	padding-top: 0;
}

.mg-style-columns .mg-entry__title,
.mg-style-columns .mg-entry--lead .mg-entry__title {
	font-size: clamp(1.15rem, 2.1vw, 1.4rem);
	line-height: 1.22;
}

.mg-style-columns .mg-entry__excerpt,
.mg-style-columns .mg-entry--lead .mg-entry__excerpt {
	font-size: .93em;
	margin-bottom: .9em;
}

/* Vertical hairlines between columns read like a newspaper gutter. */
@media (min-width: 40rem) {
	.mg-style-columns .mg-entry { padding-inline: 0; }
	.mg-style-columns .mg-entry::after {
		content: "";
		position: absolute;
		top: 1.8rem; bottom: 1.8rem;
		right: calc(var(--mg-gap) / -2);
		width: 1px;
		background: var(--mg-rule);
	}
	.mg-style-columns .mg-entry:nth-child(2n)::after { display: none; }
}

@media (min-width: 62rem) {
	.mg-style-columns .mg-entry:nth-child(2n)::after { display: block; }
	.mg-style-columns .mg-entry:nth-child(3n)::after { display: none; }
}

/* --- Magazine: a commanding lead, then a denser grid --------------------- */

@media (min-width: 44rem) {
	.mg-style-magazine .mg-ledger {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 var(--mg-gap);
		border-top: 1px solid var(--mg-rule);
	}

	.mg-style-magazine .mg-entry--lead {
		grid-column: 1 / -1;
		border-bottom: 2px solid var(--mg-ink);
		padding-bottom: 2.6rem;
	}
}

@media (min-width: 68rem) {
	.mg-style-magazine .mg-ledger { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	/* The lead keeps the two-column ledger arrangement: rail beside the story. */
	.mg-style-magazine .mg-entry--lead {
		grid-template-columns: var(--mg-rail) minmax(0, 1fr);
		gap: var(--mg-gap);
	}

	.mg-style-magazine .mg-entry--lead .mg-entry__rail {
		flex-direction: column;
		align-items: flex-start;
		gap: .55rem;
		padding-top: .45rem;
	}
}

.mg-style-magazine .mg-entry:not(.mg-entry--lead) {
	grid-template-columns: minmax(0, 1fr);
	gap: .8rem;
	padding: 1.7rem 0;
}

.mg-style-magazine .mg-entry:not(.mg-entry--lead) .mg-entry__rail {
	flex-direction: row;
	align-items: center;
	gap: .4rem .8rem;
	padding-top: 0;
}

.mg-style-magazine .mg-entry:not(.mg-entry--lead) .mg-entry__title {
	font-size: clamp(1.1rem, 2vw, 1.32rem);
	line-height: 1.24;
}

.mg-style-magazine .mg-entry:not(.mg-entry--lead) .mg-entry__excerpt {
	font-size: .9em;
	margin-bottom: .8em;
}

/* Lead story gets a full-bleed-feeling image and an oversized headline. */
@media (min-width: 44rem) {
	.mg-style-magazine .mg-entry--lead .mg-entry__thumb { aspect-ratio: 21 / 9; }
	.mg-style-magazine .mg-entry--lead .mg-entry__title { font-size: clamp(2.1rem, 5vw, 3.4rem); }
	.mg-style-magazine .mg-entry--lead .mg-entry__excerpt { font-size: 1.14em; max-width: 52ch; }
}

/* Hide thumbnails on the smaller magazine cards so the grid stays tight. */
@media (min-width: 68rem) {
	.mg-style-magazine .mg-entry:not(.mg-entry--lead) .mg-entry__thumb { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   Grid alignment
   In the columns and magazine styles every cell is a flex column: image at
   the top, metadata beneath it, and the read link pinned to the bottom edge,
   so images and links line up across all three columns no matter how much
   text each entry carries.
   ========================================================================== */

.mg-style-columns .mg-entry,
.mg-style-magazine .mg-entry:not(.mg-entry--lead) {
	display: flex;
	flex-direction: column;
	gap: .85rem;
}

.mg-style-columns .mg-entry__thumb,
.mg-style-magazine .mg-entry:not(.mg-entry--lead) .mg-entry__thumb {
	order: 1;
	margin-bottom: 0;
	flex: 0 0 auto;
}

.mg-style-columns .mg-entry__rail,
.mg-style-magazine .mg-entry:not(.mg-entry--lead) .mg-entry__rail {
	order: 2;
	flex: 0 0 auto;
}

.mg-style-columns .mg-entry__body,
.mg-style-magazine .mg-entry:not(.mg-entry--lead) .mg-entry__body {
	order: 3;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

/* Push the read link to the foot of the cell. */
.mg-style-columns .mg-entry__more,
.mg-style-magazine .mg-entry:not(.mg-entry--lead) .mg-entry__more {
	margin-top: auto;
	align-self: flex-start;
	padding-top: .4rem;
}

.mg-style-columns .mg-entry__excerpt,
.mg-style-magazine .mg-entry:not(.mg-entry--lead) .mg-entry__excerpt {
	margin-bottom: 1rem;
}

/* Grid cells should stretch to a common height so the pinning works. */
.mg-style-columns .mg-ledger,
.mg-style-magazine .mg-ledger { align-items: stretch; }

/* On mobile the ledger is also image-first, which reads better than
   metadata-first on a narrow screen. */
@media (max-width: 52.9375rem) {
	.mg-entry { display: flex; flex-direction: column; gap: .9rem; }
	.mg-entry__thumb { order: 1; margin-bottom: 0; }
	.mg-entry__rail  { order: 2; }
	.mg-entry__body  { order: 3; }
}

/* ==========================================================================
   Masthead tools & search
   ========================================================================== */

.mg-masthead__tools {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-left: auto;
}

/*
 * Menu and controls belong on the same row.
 * The tools sit before the nav in the markup so the search and mode toggles
 * stay reachable early in the tab order — but visually the nav should lead and
 * the controls follow it, wrapping together as one group.
 */
@media (min-width: 53rem) {
	.mg-nav            { order: 2; margin-left: auto; }
	.mg-masthead__tools { order: 3; margin-left: .75rem; }
}

/* One height for every control in the header, so the pills, the A-/A+ group
   and the search button all sit on the same line. */
:root { --mg-ctl-h: 2.4rem; }

.mg-masthead__tools .mg-reader__group,
.mg-searchbtn {
	height: var(--mg-ctl-h);
	box-sizing: border-box;
}

.mg-searchbtn { width: var(--mg-ctl-h); }

.mg-reader--header .mg-reader__btn {
	padding-block: 0;
	height: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Pill menu items match that height, so the whole row lines up. */
.mg-menu-pill .mg-nav > ul > li > a {
	min-height: var(--mg-ctl-h);
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
}

/* When the menu is pill-shaped, the controls follow suit. */
.mg-menu-pill .mg-reader--header .mg-reader__group { border-radius: 999px; }

@media (max-width: 52.9375rem) {
	.mg-masthead__tools { gap: .45rem; }
	:root { --mg-ctl-h: 2.25rem; }
}

.mg-searchbtn {
	display: inline-grid;
	place-items: center;
	width: 2.3rem;
	height: 2.3rem;
	background: none;
	border: 1px solid var(--mg-rule-strong);
	border-radius: 50%;
	color: var(--mg-ink-soft);
	cursor: pointer;
	transition: color .25s var(--mg-ease), border-color .25s var(--mg-ease);
}

.mg-searchbtn:hover,
.mg-searchbtn[aria-expanded="true"] {
	color: var(--mg-accent);
	border-color: var(--mg-accent);
}

.mg-searchbtn__icon { display: block; line-height: 0; }

/* Toggle panel */
.mg-searchpanel {
	border-top: 1px solid var(--mg-rule);
	background: var(--mg-paper-deep);
	padding: 1.1rem 0;
	animation: mg-drop .28s var(--mg-ease);
}

.mg-searchpanel[hidden] { display: none; }

.mg-searchpanel .mg-search input[type="search"] {
	font-size: 1rem;
	padding: .5rem 0;
}

@keyframes mg-drop {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

/* Inline search inside the nav row */
.mg-nav__search {
	min-width: 11rem;
	max-width: 15rem;
	flex: 0 1 auto;
}

@media (min-width: 53rem) {
	.mg-nav {
		display: flex;
		align-items: center;
		gap: clamp(1rem, 2.5vw, 2rem);
	}
}

@media (max-width: 52.9375rem) {
	.mg-nav__search {
		max-width: none;
		width: 100%;
		padding-top: .9rem;
		margin-top: .6rem;
		border-top: 1px solid var(--mg-rule);
	}
}

/* ==========================================================================
   MENU STYLES
   ========================================================================== */

/* --- Serif: larger, lowercase, editorial ------------------------------- */

.mg-menu-serif .mg-nav a {
	font-family: var(--mg-display);
	font-size: 1.02rem;
	letter-spacing: -.01em;
	text-transform: none;
	color: var(--mg-ink);
	font-variation-settings: "SOFT" 0, "WONK" 1;
}

.mg-menu-serif .mg-nav a:hover { color: var(--mg-accent); }
.mg-menu-serif .mg-nav .current-menu-item > a { color: var(--mg-accent); }
.mg-menu-serif .mg-nav .current-menu-item > a::after { background: var(--mg-accent); }

@media (max-width: 52.9375rem) {
	.mg-menu-serif .mg-nav a { font-size: 1.15rem; }
}

/* --- Pill: bordered, filled when current ------------------------------- */

.mg-menu-pill .mg-nav > ul { gap: .4rem; }

.mg-menu-pill .mg-nav > ul > li > a {
	border: 1px solid var(--mg-rule);
	border-radius: 999px;
	padding: .42rem .95rem;
	color: var(--mg-ink-soft);
	transition: all .25s var(--mg-ease);
}

.mg-menu-pill .mg-nav > ul > li > a::after { display: none; }

.mg-menu-pill .mg-nav > ul > li > a:hover {
	border-color: var(--mg-accent);
	color: var(--mg-accent);
}

.mg-menu-pill .mg-nav .current-menu-item > a,
.mg-menu-pill .mg-nav .current_page_item > a {
	background: var(--mg-ink);
	border-color: var(--mg-ink);
	color: var(--mg-paper);
}

@media (max-width: 52.9375rem) {
	.mg-menu-pill .mg-nav > ul { gap: .45rem; }
	.mg-menu-pill .mg-nav > ul > li { border-bottom: 0; width: auto; }
	.mg-menu-pill .mg-nav > ul { flex-direction: row; flex-wrap: wrap; }
	.mg-menu-pill .mg-nav > ul > li > a { display: inline-block; padding: .42rem .9rem; }
}

/* ==========================================================================
   HERO PAGE TEMPLATE
   ========================================================================== */

.mg-hero {
	padding: clamp(2rem, 4.5vw, 3.5rem) 0 clamp(1.6rem, 3.5vw, 2.6rem);
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	border-bottom: 1px solid var(--mg-rule);
}

@media (min-width: 60rem) {
	.mg-hero--image { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}

.mg-hero__text { min-width: 0; }

.mg-hero__eyebrow {
	display: block;
	color: var(--mg-accent);
	margin-bottom: 1.2rem;
}

.mg-hero__title {
	font-size: clamp(2.6rem, 7.5vw, 5.2rem);
	line-height: 1.02;
	letter-spacing: -.028em;
	margin-bottom: .4em;
}

.mg-hero__lede {
	font-size: clamp(1.08rem, 2vw, 1.32rem);
	line-height: 1.5;
	color: var(--mg-ink-soft);
	max-width: 46ch;
	margin-bottom: 1.5rem;
}

.mg-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.8rem;
}

.mg-hero__link {
	font-family: var(--mg-mono);
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mg-ink);
	border-bottom: 1px solid var(--mg-rule-strong);
	padding-bottom: 3px;
	transition: color .25s var(--mg-ease), border-color .25s var(--mg-ease);
}

.mg-hero__link:hover { color: var(--mg-accent); border-color: var(--mg-accent); }

.mg-hero__figure {
	margin: 0;
	background: var(--mg-paper-deep);
	position: relative;
}

.mg-hero__figure img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* A hairline frame, offset — a printer's registration mark rather than a shadow. */
@media (min-width: 60rem) {
	.mg-hero__figure::after {
		content: "";
		position: absolute;
		inset: 1.1rem -1.1rem -1.1rem 1.1rem;
		border: 1px solid var(--mg-rule-strong);
		pointer-events: none;
		z-index: -1;
	}
}

/* --- Facts strip -------------------------------------------------------- */

.mg-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 0;
	margin: 0;
	border-bottom: 1px solid var(--mg-rule);
}

.mg-facts__item {
	padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1rem, 2vw, 1.6rem) clamp(1.1rem, 2.4vw, 1.6rem) 0;
	border-right: 1px solid var(--mg-rule);
}

.mg-facts__item:last-child { border-right: 0; }

.mg-facts__label {
	color: var(--mg-ink-faint);
	margin-bottom: .5rem;
}

.mg-facts__value {
	margin: 0;
	font-family: var(--mg-display);
	font-size: clamp(1.6rem, 3.5vw, 2.4rem);
	line-height: 1;
	letter-spacing: -.02em;
	font-variation-settings: "SOFT" 0, "WONK" 1;
}

/* --- Hero content & latest ---------------------------------------------- */

.mg-hero__content { padding: clamp(1.8rem, 4vw, 3rem) 0 0; }

.mg-hero__latest { padding-top: clamp(1.8rem, 4vw, 3rem); }

.mg-hero__latest-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	flex-wrap: wrap;
	padding-bottom: 1rem;
	border-bottom: 2px solid var(--mg-ink);
	margin-bottom: 0;
}

.mg-hero__latest-title {
	font-size: .8rem;
	font-weight: 500;
	letter-spacing: .15em;
	color: var(--mg-ink);
	margin: 0;
}

/* The hero's entry grid, independent of the site style setting. */
.mg-ledger--grid { display: grid; grid-template-columns: minmax(0, 1fr); }

@media (min-width: 40rem) {
	.mg-ledger--grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 var(--mg-gap);
	}
}

@media (min-width: 62rem) {
	.mg-ledger--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.mg-ledger--grid .mg-entry {
	display: flex;
	flex-direction: column;
	gap: .85rem;
	padding: 1.8rem 0;
}

.mg-ledger--grid .mg-entry__thumb { order: 1; margin-bottom: 0; }
.mg-ledger--grid .mg-entry__rail  { order: 2; flex-direction: row; align-items: center; gap: .4rem .8rem; padding-top: 0; }
.mg-ledger--grid .mg-entry__body  { order: 3; display: flex; flex-direction: column; flex: 1 1 auto; }
.mg-ledger--grid .mg-entry__more  { margin-top: auto; align-self: flex-start; padding-top: .4rem; }

.mg-ledger--grid .mg-entry__title,
.mg-ledger--grid .mg-entry--lead .mg-entry__title {
	font-size: clamp(1.15rem, 2.1vw, 1.38rem);
	line-height: 1.22;
}

.mg-ledger--grid .mg-entry__excerpt,
.mg-ledger--grid .mg-entry--lead .mg-entry__excerpt {
	font-size: .93em;
	margin-bottom: 1rem;
}

/* ==========================================================================
   Reader controls — text size and colour mode
   ========================================================================== */

.mg-reader {
	position: fixed;
	left: 1.3rem;
	bottom: 1.3rem;
	z-index: 150;
	display: flex;
	gap: .5rem;
	align-items: center;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity .3s var(--mg-ease), transform .3s var(--mg-ease);
}

.mg-reader.is-visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/* Always available on large screens, where there is room. */
@media (min-width: 62rem) {
	.mg-reader { opacity: 1; transform: none; pointer-events: auto; }
}

.mg-reader__group {
	display: flex;
	align-items: stretch;
	background: var(--mg-paper);
	border: 1px solid var(--mg-rule-strong);
	border-radius: 8px;
	overflow: hidden;
}

.mg-reader__btn {
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--mg-ink-soft);
	font-family: var(--mg-body);
	font-size: .95rem;
	line-height: 1;
	padding: .6rem .8rem;
	display: grid;
	place-items: center;
	min-width: 2.5rem;
	transition: background .2s var(--mg-ease), color .2s var(--mg-ease);
}

.mg-reader__btn:hover { background: var(--mg-paper-deep); color: var(--mg-accent); }
.mg-reader__btn:disabled { opacity: .35; cursor: default; }
.mg-reader__btn:disabled:hover { background: none; color: var(--mg-ink-soft); }

.mg-reader__btn + .mg-reader__btn { border-left: 1px solid var(--mg-rule); }

.mg-reader__btn--small { font-size: .82rem; }
.mg-reader__btn--large { font-size: 1.12rem; }

.mg-reader__mode svg { display: block; }

/* Keep the back-to-top button clear of the reader cluster on small screens. */
@media (max-width: 30rem) {
	.mg-reader { left: 1rem; bottom: 1rem; gap: .4rem; }
	.mg-reader__btn { min-width: 2.2rem; padding: .55rem .65rem; }
}

/* Dark mode refinements that cannot be expressed as token swaps. */
html[data-mg-theme="dark"] .mg-entry__thumb,
html[data-mg-theme="dark"] .mg-article__figure,
html[data-mg-theme="dark"] .mg-hero__figure {
	background: var(--mg-paper-deep);
}

html[data-mg-theme="dark"] .mg-ad { border-color: var(--mg-rule); }

html[data-mg-theme="dark"] ::selection {
	background: var(--mg-accent);
	color: var(--mg-paper);
}

/* Respect a reader who has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
	body { transition: none; }
	.mg-btn:hover { transform: none; }
}

/* ==========================================================================
   Brand block — logo and name together
   ========================================================================== */

.mg-brandblock__inner {
	display: flex;
	align-items: center;
	gap: .9rem;
	min-width: 0;
}

.mg-brandblock--both .mg-brand {
	font-size: clamp(1.15rem, 2.2vw, 1.5rem);
	padding-left: .9rem;
	border-left: 1px solid var(--mg-rule);
}

@media (max-width: 30rem) {
	.mg-brandblock__inner { gap: .6rem; }
	.mg-brandblock--both .mg-brand {
		font-size: 1rem;
		padding-left: .6rem;
	}
}

/* ==========================================================================
   Reader controls in the header
   ========================================================================== */

.mg-reader--header {
	position: static;
	opacity: 1;
	transform: none;
	pointer-events: auto;
	gap: .4rem;
}

.mg-reader--header .mg-reader__group { border-radius: 6px; }

.mg-reader--header .mg-reader__btn {
	min-width: 2.35rem;
	padding: .48rem .7rem;
	font-size: .95rem;
}

.mg-reader--header .mg-reader__btn--large { font-size: 1.1rem; }

@media (max-width: 30rem) {
	.mg-reader--header .mg-reader__btn { min-width: 1.9rem; padding: .38rem .48rem; }
}

/* ==========================================================================
   Subscribe block
   ========================================================================== */

.mg-subscribe {
	margin-top: var(--mg-bay);
	padding: clamp(1.8rem, 4vw, 2.8rem) 0;
	border-top: 2px solid var(--mg-ink);
	border-bottom: 1px solid var(--mg-rule);
}

.mg-subscribe__inner {
	display: grid;
	gap: clamp(1.4rem, 3vw, 2.6rem);
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
}

@media (min-width: 56rem) {
	.mg-subscribe__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }
}

.mg-subscribe__title {
	font-size: clamp(1.45rem, 3vw, 2rem);
	margin: .35rem 0 .5rem;
}

.mg-subscribe__blurb {
	color: var(--mg-ink-soft);
	max-width: 44ch;
	margin: 0;
	font-size: .98em;
}

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

.mg-subscribe__row input[type="email"],
.mg-subscribe .mg-subscribe__form input[type="email"] {
	flex: 1 1 11rem;
	min-width: 0;
	background: var(--mg-paper);
	border: 1px solid var(--mg-rule-strong);
	border-radius: var(--mg-btn-radius);
	padding: .8rem .9rem;
	font-family: var(--mg-body);
	font-size: 1rem;
	color: var(--mg-ink);
}

.mg-subscribe__row input[type="email"]:focus {
	outline: none;
	border-color: var(--mg-btn-bg);
}

.mg-subscribe__note {
	margin: .8rem 0 0;
	font-size: .62rem;
	color: var(--mg-ink-faint);
	letter-spacing: .1em;
}

/* Tame Jetpack's own subscription markup so it matches the theme. */
.mg-subscribe .wp-block-jetpack-subscriptions__container,
.mg-subscribe #subscribe-email { width: 100%; }

.mg-subscribe #subscribe-email input {
	width: 100% !important;
	background: var(--mg-paper) !important;
	border: 1px solid var(--mg-rule-strong) !important;
	border-radius: var(--mg-btn-radius) !important;
	padding: .8rem .9rem !important;
	font-family: var(--mg-body) !important;
	font-size: 1rem !important;
	color: var(--mg-ink) !important;
}

.mg-subscribe #subscribe-submit button,
.mg-subscribe .wp-block-button__link {
	background: var(--mg-btn-bg) !important;
	color: var(--mg-btn-fg) !important;
	border: 1px solid var(--mg-btn-bg) !important;
	border-radius: var(--mg-btn-radius) !important;
	padding: .82rem 1.5rem !important;
	font-family: var(--mg-body) !important;
	font-size: 1rem !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	margin-top: .5rem !important;
	width: 100%;
}

.mg-subscribe #subscribe-submit button:hover { filter: brightness(1.12); }
.mg-subscribe .subscribe-description { display: none; }

/* ==========================================================================
   Header banner
   ========================================================================== */

.mg-banner {
	border-bottom: 1px solid var(--mg-rule);
	background: var(--mg-paper-deep);
}

.mg-banner__frame {
	display: block;
	width: 100%;
	height: var(--mg-banner-h-mobile, 150px);
	overflow: hidden;
	position: relative;
	text-decoration: none;
}

@media (min-width: 48rem) {
	.mg-banner__frame { height: var(--mg-banner-h, 260px); }
}

.mg-banner__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center var(--mg-banner-pos, center);
	display: block;
	transition: transform .8s var(--mg-ease);
}

a.mg-banner__frame:hover .mg-banner__img { transform: scale(1.02); }

/* A hairline sits over the foot of the image, tying it to the rule system. */
.mg-banner__frame::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 1px;
	background: var(--mg-rule-strong);
	opacity: .5;
}

.mg-banner__caption {
	margin: 0;
	padding: .7rem 0;
	color: var(--mg-ink-faint);
	font-size: .72rem;
}

/* --- Backdrop mode ------------------------------------------------------
   The image sits behind the masthead under a wash of the paper colour, so
   the menu keeps its contrast instead of fighting the photograph. */

.mg-masthead--backdrop {
	position: relative;
	isolation: isolate;
}

.mg-masthead--backdrop::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--mg-banner-url);
	background-size: cover;
	background-position: center var(--mg-banner-pos, center);
	background-repeat: no-repeat;
}

.mg-masthead--backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--mg-paper);
	opacity: var(--mg-banner-wash, .78);
}

.mg-masthead--backdrop .mg-strip {
	background: transparent;
	border-bottom-color: var(--mg-rule-strong);
}

/* Dark mode: the wash uses the dark paper colour, so it darkens rather than
   washing out. Nudge it up slightly since photographs read brighter. */
html[data-mg-theme="dark"] .mg-masthead--backdrop::after {
	opacity: calc(var(--mg-banner-wash, .78) + .06);
}

@media print {
	.mg-banner { display: none !important; }
	.mg-masthead--backdrop::before,
	.mg-masthead--backdrop::after { display: none !important; }
}

/* ==========================================================================
   v1.5.1 — spacing corrections
   Removes dead air where two sections each contributed their own margin.
   ========================================================================== */

/* The facts strip sits directly under the hero, which already has bottom
   padding — no need for both. */
.mg-hero + .mg-facts { margin-top: 0; }

/* First heading inside prose should not push away from the element above it. */
.mg-prose > :first-child { margin-top: 0; }
.mg-prose h2:first-child { padding-top: 0; border-top: 0; }

/* The subscribe block and the more-entries block already carry a top border;
   the doubled bay above them read as a gap. */
.mg-subscribe { margin-top: clamp(1.8rem, 4vw, 3rem); }
.mg-more      { margin-top: clamp(1.8rem, 4vw, 3rem); }
.mg-adjacent  { margin-top: clamp(1.8rem, 4vw, 3rem); }

/* Footer sat too far from the last element on short pages. */
.mg-footer { margin-top: clamp(2rem, 4.5vw, 3.5rem); }

/* Pagination was floating in the middle of nowhere. */
.mg-pagination { padding: clamp(1.6rem, 3.5vw, 2.6rem) 0; }

/* Banner should meet the masthead cleanly, with no seam. */
.mg-banner { margin-top: 0; }

/* Give the reading measure a little more room now the type is larger. */
:root { --mg-measure: 70ch; }

/* Body copy inside entries benefits from the larger base too. */
.mg-entry__excerpt { font-size: 1em; }

/* Slightly more generous line height for the bigger body size. */
.mg-prose { line-height: 1.7; }