/*
Theme Name: Morning Gradient
Theme URI: https://morninggradient.com/
Author: Morning Gradient
Description: A broadsheet newspaper theme for a weekly digest of AI, automation and technology. Fixed-width front page on aged ivory stock; readers zoom into columns as they would a real paper.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: morning-gradient
*/

/* ==========================================================================
   Tokens — warm minimal: ivory stock, ink, muted navy, terracotta
   ========================================================================== */
:root {
	--paper: #f2e9d4;
	--paper-light: #f7f0df;
	--paper-dark: #e6d9bb;
	--ink: #29231f;
	--ink-soft: #4a4039;
	--ink-faint: #7a6d61;
	--rule: #3a322c;
	--navy: #2f3655;
	--navy-soft: #56628a;
	--terracotta: #b0553a;
	--terracotta-deep: #8f3f28;
	--brown: #683d2a;
	--stone: #cac4ba;
	--desk: #23273a;

	--f-mast: "UnifrakturMaguntia", "Old English Text MT", serif;
	--f-head: "Old Standard TT", "Libre Caslon Text", Georgia, serif;
	--f-fell: "IM Fell English", "Old Standard TT", Georgia, serif;
	--f-fell-sc: "IM Fell English SC", "Old Standard TT", Georgia, serif;
	--f-body: "Libre Caslon Text", "Old Standard TT", Georgia, serif;
	--f-wood: "Rye", "Playfair Display SC", serif;
	--f-display-sc: "Playfair Display SC", "Old Standard TT", serif;

	--sheet-w: 1360px;
	--gutter: 15px;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: #23273a; min-height: 100%; }
body { min-height: 100vh; }

body {
	margin: 0;
	min-width: 1440px;
	background-color: var(--desk);
	background-image:
		radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .06), transparent 60%),
		repeating-linear-gradient(90deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 7px);
	color: var(--ink);
	font-family: var(--f-body);
	font-size: 13.5px;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-kerning: normal;
}

a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 .55em; }

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

/* ==========================================================================
   The sheet — aged newsprint
   ========================================================================== */
.mg-desk { padding: 40px 0 70px; }

.mg-sheet {
	position: relative;
	width: var(--sheet-w);
	margin: 0 auto;
	padding: 30px 38px 34px;
	background-color: var(--paper);
	/* fibres + foxing + darkened edges */
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .24 0 0 0 0 .14 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
		radial-gradient(circle at 12% 8%, rgba(150, 105, 50, .10), transparent 22%),
		radial-gradient(circle at 88% 64%, rgba(150, 105, 50, .08), transparent 18%),
		radial-gradient(circle at 30% 92%, rgba(150, 105, 50, .07), transparent 20%),
		radial-gradient(ellipse at center, transparent 55%, rgba(120, 85, 40, .22) 100%);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .25) inset,
		0 30px 60px rgba(0, 0, 0, .45),
		0 6px 14px rgba(0, 0, 0, .35);
	transform-origin: 0 0;
}

/* faint fold line across the middle of a broadsheet */
.mg-sheet::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 50%;
	height: 22px;
	transform: translateY(-50%);
	background: linear-gradient(to bottom, transparent, rgba(90, 60, 25, .07) 45%, rgba(255, 255, 255, .18) 52%, transparent);
	pointer-events: none;
}

/* ==========================================================================
   Masthead
   ========================================================================== */
.mg-masthead { text-align: center; }

.mg-mast-row {
	display: grid;
	grid-template-columns: 210px 1fr 210px;
	align-items: center;
	gap: 22px;
}

.mg-ear {
	border: 1px solid var(--rule);
	padding: 7px 10px 8px;
	font-family: var(--f-fell);
	font-size: 11.5px;
	line-height: 1.3;
	text-align: center;
	outline: 1px solid var(--rule);
	outline-offset: 2px;
}
.mg-ear-title {
	display: block;
	font-family: var(--f-display-sc);
	font-weight: 900;
	font-size: 13px;
	letter-spacing: .12em;
	border-bottom: 1px solid var(--rule);
	margin-bottom: 4px;
	padding-bottom: 2px;
}
.mg-ear-big {
	display: block;
	font-family: var(--f-head);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.05;
	color: var(--terracotta-deep);
	margin: 2px 0 3px;
}
.mg-ear em { color: var(--ink-soft); }

.mg-nameplate {
	margin: 0;
	font-family: var(--f-mast);
	font-weight: 400;
	font-size: 104px;
	line-height: 1;
	letter-spacing: .005em;
	color: var(--ink);
	text-shadow: 0 0 1px rgba(41, 35, 31, .6);
	white-space: nowrap;
}
.mg-nameplate a { text-decoration: none; }

.mg-motto {
	margin: 2px 0 8px;
	font-family: var(--f-fell);
	font-style: italic;
	font-size: 15px;
	color: var(--ink-soft);
}
.mg-motto::before,
.mg-motto::after { content: " \2767 "; color: var(--terracotta); font-style: normal; }

.mg-dateline {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 3px double var(--rule);
	border-bottom: 3px double var(--rule);
	padding: 4px 4px 3px;
	font-family: var(--f-fell-sc);
	font-size: 12.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.mg-dateline .mg-date { font-family: var(--f-head); font-weight: 700; letter-spacing: .14em; }

/* ==========================================================================
   Front-page grid
   ========================================================================== */
.mg-front {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	column-gap: 0;
	margin-top: 10px;
}

.cell {
	padding: 0 var(--gutter) 10px;
	min-width: 0;
}
.cell.rule-l { border-left: 1px solid var(--rule); }
.cell.edge-l { padding-left: 0; }
.cell.edge-r { padding-right: 0; }

.span-1 { grid-column: span 1; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.row-2 { grid-row: span 2; }
.row-3 { grid-row: span 3; }

/* horizontal band dividing tiers of the page */
.band {
	grid-column: 1 / -1;
	border-top: 1px solid var(--rule);
	margin: 6px 0 12px;
	position: relative;
}
.band.heavy { border-top: 4px double var(--rule); }
.band-label {
	position: absolute;
	top: -0.82em;
	left: 50%;
	transform: translateX(-50%);
	background: var(--paper);
	padding: 0 14px;
	font-family: var(--f-display-sc);
	font-weight: 900;
	font-size: 15px;
	letter-spacing: .22em;
	white-space: nowrap;
}

.stack > * + * {
	border-top: 1px solid var(--rule);
	margin-top: 10px;
	padding-top: 10px;
}

/* ==========================================================================
   Stories
   ========================================================================== */
.mg-story { position: relative; }

.kicker {
	display: block;
	font-family: var(--f-fell-sc);
	font-size: 11.5px;
	letter-spacing: .14em;
	color: var(--terracotta-deep);
	margin-bottom: 3px;
}
.kicker::before { content: "\2014\00a0"; }

.hed {
	margin: 0;
	font-family: var(--f-head);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -.005em;
	color: var(--ink);
	font-size: 25px;
	text-wrap: balance;
}
.hed a { text-decoration: none; }
.hed a:hover { color: var(--navy); }

.mg-lead .hed { font-size: 50px; line-height: .98; letter-spacing: -.015em; }
.mg-story.second .hed { font-size: 30px; }
.mg-story.caps .hed {
	text-transform: uppercase;
	font-size: 21px;
	line-height: 1.06;
	letter-spacing: .01em;
	text-align: center;
}
.mg-story.small .hed { font-size: 18px; }

.deck {
	margin: 6px 0 0;
	font-family: var(--f-fell);
	font-style: italic;
	font-size: 15.5px;
	line-height: 1.22;
	color: var(--ink-soft);
}
.mg-lead .deck { font-size: 19px; }
.mg-story.caps .deck { text-align: center; font-size: 14px; }

/* the short centred rule between deck and body on old front pages */
.dash {
	display: block;
	width: 64px;
	margin: 8px auto 7px;
	border-top: 1px solid var(--rule);
}

.byline {
	display: block;
	font-family: var(--f-fell-sc);
	font-size: 11px;
	letter-spacing: .1em;
	text-align: center;
	margin-bottom: 6px;
	color: var(--ink-soft);
}

.body {
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
	font-size: 13.5px;
	line-height: 1.42;
}
.body.cols-2 { column-count: 2; column-gap: 26px; column-rule: 1px solid rgba(58, 50, 44, .55); }
.body.cols-3 { column-count: 3; column-gap: 26px; column-rule: 1px solid rgba(58, 50, 44, .55); }
.body.cols-4 { column-count: 4; column-gap: 24px; column-rule: 1px solid rgba(58, 50, 44, .55); }
.body > *:first-child { margin-top: 0; }
.body p { text-indent: 1.1em; }
.body p.hook,
.body p.noindent { text-indent: 0; }

.hook {
	font-style: italic;
	font-family: var(--f-fell);
	font-size: 14.5px;
	line-height: 1.32;
}
.dropcap::first-letter {
	float: left;
	font-family: var(--f-head);
	font-weight: 700;
	font-style: normal;
	font-size: 54px;
	line-height: .82;
	padding: 5px 6px 0 0;
	color: var(--navy);
}

/* McKinsey-style structure, set in period type */
.mck { margin: 6px 0 4px; }
.mck .answer {
	font-weight: 700;
	text-indent: 0;
	margin-bottom: .4em;
}
.mck ol {
	list-style: none;
	margin: 0 0 .4em;
	padding: 0;
	counter-reset: mck;
}
.mck ol li {
	counter-increment: mck;
	position: relative;
	padding-left: 1.75em;
	margin-bottom: .35em;
	break-inside: avoid;
}
.mck ol li::before {
	content: counter(mck, upper-roman) ".";
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--f-head);
	font-weight: 700;
	color: var(--terracotta-deep);
}
.mck ol li b,
.mck ol li strong { font-family: var(--f-head); }
.sowhat {
	text-indent: 0 !important;
	border-top: 1px dotted var(--rule);
	padding-top: 4px;
	margin-top: 5px;
	font-style: italic;
	break-inside: avoid;
}
.sowhat::before {
	content: "\261E\00a0So what? ";
	font-style: normal;
	font-weight: 700;
	font-family: var(--f-head);
	color: var(--navy);
}

.sources {
	margin-top: 6px;
	padding-top: 4px;
	border-top: 1px solid rgba(58, 50, 44, .45);
	font-family: var(--f-fell);
	font-size: 11.5px;
	line-height: 1.35;
	text-align: left;
	text-indent: 0;
	break-inside: avoid;
}
.sources::before {
	content: "Sources: ";
	font-family: var(--f-fell-sc);
	letter-spacing: .08em;
	color: var(--terracotta-deep);
}
.sources a,
.body a,
.brief a {
	color: var(--navy);
	text-decoration: underline;
	text-decoration-style: dotted;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
.sources a:hover,
.body a:hover,
.brief a:hover { color: var(--terracotta-deep); text-decoration-style: solid; }
.sources a + a::before {
	content: " \00b7 ";
	color: var(--ink-faint);
	display: inline-block;
	padding: 0 .25em;
	text-decoration: none;
}

.jump {
	display: block;
	margin-top: 4px;
	font-family: var(--f-fell);
	font-style: italic;
	font-size: 11.5px;
	text-align: right;
	text-indent: 0;
}

/* ==========================================================================
   Photographs — colour, with a whisper of halftone and age
   ========================================================================== */
.mg-photo { margin: 2px 0 9px; break-inside: avoid; }
.mg-photo .frame {
	position: relative;
	display: block;
	border: 1px solid var(--rule);
	overflow: hidden;
	background: var(--paper-dark);
}
.mg-photo img {
	width: 100%;
	object-fit: cover;
	filter: sepia(.14) saturate(.92) contrast(1.04) brightness(.98);
}
.mg-photo .frame::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(41, 35, 31, .16) 0.6px, transparent 1.1px);
	background-size: 3px 3px;
	mix-blend-mode: multiply;
	pointer-events: none;
}
.mg-photo figcaption {
	margin-top: 4px;
	font-family: var(--f-fell);
	font-style: italic;
	font-size: 12px;
	line-height: 1.28;
	color: var(--ink-soft);
	text-align: left;
}
.mg-photo .credit {
	display: block;
	text-align: right;
	font-style: normal;
	font-family: var(--f-fell-sc);
	font-size: 9.5px;
	letter-spacing: .08em;
	color: var(--ink-faint);
	margin-top: 1px;
}
.mg-photo .credit a { text-decoration: none; }

.ratio-wide img { aspect-ratio: 16 / 9; }
.ratio-pano img { aspect-ratio: 2 / 1; }
.ratio-photo img { aspect-ratio: 3 / 2; }
.ratio-square img { aspect-ratio: 1 / 1; }
.ratio-tall img { aspect-ratio: 4 / 5; }

/* ==========================================================================
   Moving pictures (YouTube)
   ========================================================================== */
.mg-video { margin: 0; break-inside: avoid; }
.mg-video a { text-decoration: none; display: block; }
.mg-video .frame {
	display: block;
	position: relative;
	border: 1px solid var(--rule);
	overflow: hidden;
	background: #111;
}
.mg-video img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	filter: sepia(.12) saturate(.95) contrast(1.03);
	transition: transform .4s ease, filter .4s ease;
}
.mg-video a:hover img { transform: scale(1.035); filter: none; }
.mg-video .play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 50px;
	height: 50px;
	margin: -25px 0 0 -25px;
	border-radius: 50%;
	background: rgba(176, 85, 58, .92);
	box-shadow: 0 0 0 3px rgba(242, 233, 212, .85), 0 3px 10px rgba(0, 0, 0, .45);
}
.mg-video .play::after {
	content: "";
	position: absolute;
	left: 19px;
	top: 14px;
	border-style: solid;
	border-width: 11px 0 11px 17px;
	border-color: transparent transparent transparent var(--paper-light);
}
.mg-video .runtime {
	position: absolute;
	right: 6px;
	bottom: 6px;
	background: rgba(41, 35, 31, .85);
	color: var(--paper-light);
	font-family: var(--f-head);
	font-size: 11px;
	padding: 1px 5px;
}
.mg-video .v-title {
	display: block;
	margin-top: 6px;
	font-family: var(--f-head);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.12;
	color: var(--ink);
}
.mg-video a:hover .v-title { color: var(--navy); }
.mg-video .v-meta {
	display: block;
	margin-top: 2px;
	font-family: var(--f-fell-sc);
	font-size: 10.5px;
	letter-spacing: .08em;
	color: var(--terracotta-deep);
}
.mg-video .v-note {
	display: block;
	margin-top: 3px;
	font-family: var(--f-fell);
	font-style: italic;
	font-size: 12.5px;
	line-height: 1.28;
	color: var(--ink-soft);
}

/* ==========================================================================
   Boxes: briefs, index, roundups
   ========================================================================== */
.box-title {
	margin: 0 0 6px;
	font-family: var(--f-display-sc);
	font-weight: 900;
	font-size: 15px;
	letter-spacing: .14em;
	text-align: center;
	border-top: 2px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	padding: 3px 0 2px;
}
.box-title small {
	display: block;
	font-family: var(--f-fell);
	font-style: italic;
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0;
	text-transform: none;
}

.brief {
	padding: 6px 0 7px;
	border-bottom: 1px dotted var(--rule);
	font-size: 12.5px;
	line-height: 1.36;
	text-align: justify;
	hyphens: auto;
}
.brief:last-child { border-bottom: 0; }
.brief b,
.brief strong {
	font-family: var(--f-head);
	font-weight: 700;
	font-size: 13.5px;
}
.brief .tag {
	font-family: var(--f-fell-sc);
	font-size: 10px;
	letter-spacing: .1em;
	color: var(--terracotta-deep);
	margin-right: 3px;
}

.mg-roundup .entry {
	display: grid;
	grid-template-columns: 26px 1fr;
	gap: 0 6px;
	padding: 6px 0 7px;
	border-bottom: 1px dotted var(--rule);
	font-size: 12.5px;
	line-height: 1.34;
}
.mg-roundup .entry:last-child { border-bottom: 0; }
.mg-roundup .num {
	font-family: var(--f-head);
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
	color: var(--terracotta-deep);
	text-align: center;
}
.mg-roundup .title {
	font-family: var(--f-head);
	font-weight: 700;
	font-size: 13.5px;
	line-height: 1.15;
}
.mg-roundup .title a { text-decoration: none; color: var(--ink); }
.mg-roundup .title a:hover { color: var(--navy); text-decoration: underline; }
.mg-roundup .meta {
	display: block;
	font-family: var(--f-fell-sc);
	font-size: 10px;
	letter-spacing: .08em;
	color: var(--ink-faint);
	margin: 1px 0 2px;
}
.mg-roundup .why { display: block; text-align: justify; hyphens: auto; }

.mg-index {
	border: 1px solid var(--rule);
	outline: 1px solid var(--rule);
	outline-offset: 2px;
	padding: 6px 9px 8px;
	margin: 4px 2px 6px;
}
.mg-index ul { list-style: none; margin: 0; padding: 0; }
.mg-index li {
	display: flex;
	justify-content: space-between;
	gap: 6px;
	font-size: 12px;
	padding: 2px 0;
	border-bottom: 1px dotted rgba(58, 50, 44, .5);
}
.mg-index li:last-child { border-bottom: 0; }
.mg-index li span:last-child { font-family: var(--f-fell-sc); color: var(--terracotta-deep); }

.mg-numbers .stat {
	text-align: center;
	padding: 6px 0;
	border-bottom: 1px dotted var(--rule);
}
.mg-numbers .stat:last-child { border-bottom: 0; }
.mg-numbers .figure {
	display: block;
	font-family: var(--f-head);
	font-weight: 700;
	font-size: 30px;
	line-height: 1;
	color: var(--navy);
}
.mg-numbers .label {
	display: block;
	font-family: var(--f-fell);
	font-style: italic;
	font-size: 12px;
	line-height: 1.25;
	margin-top: 2px;
}
.mg-numbers .label a { color: var(--ink-soft); }

.mg-quote {
	text-align: center;
	padding: 8px 6px;
	font-family: var(--f-fell);
	font-style: italic;
	font-size: 18px;
	line-height: 1.24;
}
.mg-quote::before {
	content: "\201C";
	display: block;
	font-family: var(--f-head);
	font-size: 46px;
	line-height: .6;
	color: var(--terracotta);
	margin-bottom: 4px;
}
.mg-quote cite {
	display: block;
	margin-top: 6px;
	font-family: var(--f-fell-sc);
	font-style: normal;
	font-size: 11px;
	letter-spacing: .1em;
	color: var(--ink-soft);
}

/* ==========================================================================
   Advertisements — spoof notices and the real Tool of the Week
   ========================================================================== */
.mg-ad {
	position: relative;
	border: 2px solid var(--ink);
	outline: 1px solid var(--ink);
	outline-offset: 3px;
	margin: 4px 4px 8px;
	padding: 12px 12px 10px;
	text-align: center;
	background:
		radial-gradient(circle at 50% 40%, rgba(255, 250, 235, .55), transparent 70%);
	break-inside: avoid;
}
.mg-ad .ad-label {
	position: absolute;
	top: -8px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--paper);
	padding: 0 6px;
	font-family: var(--f-fell-sc);
	font-size: 9.5px;
	letter-spacing: .18em;
	color: var(--ink-faint);
	white-space: nowrap;
}
.mg-ad .ad-pre {
	display: block;
	font-family: var(--f-fell-sc);
	font-size: 11.5px;
	letter-spacing: .14em;
}
.mg-ad .ad-head {
	display: block;
	margin: 3px 0 2px;
	font-family: var(--f-wood);
	font-size: 31px;
	line-height: .98;
	letter-spacing: .01em;
	color: var(--ink);
}
.mg-ad.terracotta .ad-head { color: var(--terracotta-deep); }
.mg-ad.navy .ad-head { color: var(--navy); }
.mg-ad .ad-sub {
	display: block;
	font-family: var(--f-fell);
	font-style: italic;
	font-size: 14px;
	line-height: 1.2;
	margin-bottom: 6px;
}
.mg-ad .ad-orn {
	display: block;
	font-size: 15px;
	letter-spacing: .5em;
	color: var(--terracotta);
	margin: 4px 0;
}
.mg-ad .ad-copy {
	font-size: 12px;
	line-height: 1.35;
	text-align: center;
	margin: 0 0 6px;
}
.mg-ad ul.ad-list {
	list-style: none;
	margin: 0 0 6px;
	padding: 0;
	font-family: var(--f-fell-sc);
	font-size: 12px;
	letter-spacing: .04em;
}
.mg-ad ul.ad-list li { border-bottom: 1px dotted var(--rule); padding: 2px 0; }
.mg-ad .ad-price {
	display: inline-block;
	font-family: var(--f-head);
	font-weight: 700;
	font-size: 22px;
	border: 1px solid var(--ink);
	border-radius: 50%;
	padding: 8px 12px;
	margin: 2px 0 6px;
	transform: rotate(-6deg);
	color: var(--terracotta-deep);
}
.mg-ad .ad-foot {
	display: block;
	font-family: var(--f-fell-sc);
	font-size: 10.5px;
	letter-spacing: .12em;
	border-top: 1px solid var(--rule);
	padding-top: 4px;
	margin-top: 4px;
}
.mg-ad .ad-cta {
	display: inline-block;
	margin-top: 2px;
	font-family: var(--f-fell-sc);
	font-size: 12px;
	letter-spacing: .12em;
	text-decoration: none;
	color: var(--paper-light);
	background: var(--navy);
	padding: 4px 10px 3px;
}
.mg-ad .ad-cta:hover { background: var(--terracotta-deep); }
.mg-ad .ad-photo {
	border: 1px solid var(--ink);
	margin: 4px auto 6px;
	filter: sepia(.2) saturate(.9);
}
.mg-ad.tool { border-color: var(--navy); outline-color: var(--navy); }
.mg-ad.house { border-style: dashed; outline-style: dashed; }

/* ==========================================================================
   Newsletter sign-up: masthead ear, in-issue box, slide-in
   ========================================================================== */
.mg-sub { margin: 0; text-align: left; }
.mg-sub-row { display: flex; gap: 0; }
.mg-sub input[type="email"] {
	flex: 1 1 auto;
	min-width: 0;
	font: inherit;
	font-family: var(--f-body);
	color: var(--ink);
	background: var(--paper-light);
	border: 1px solid var(--ink);
	border-right: 0;
	padding: 5px 7px;
}
.mg-sub input[type="email"]::placeholder { color: var(--ink-faint); font-style: italic; }
.mg-sub input[type="email"]:focus { outline: 2px solid var(--navy); outline-offset: 0; }
.mg-sub button {
	flex: 0 0 auto;
	font-family: var(--f-display-sc);
	font-weight: 900;
	letter-spacing: .1em;
	color: var(--paper-light);
	background: var(--navy);
	border: 1px solid var(--ink);
	padding: 5px 12px 4px;
	cursor: pointer;
}
.mg-sub button:hover,
.mg-sub button:focus-visible { background: var(--terracotta-deep); }
.mg-sub button:disabled { opacity: .6; cursor: progress; }
.mg-sub-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mg-sub-msg {
	display: block;
	min-height: 0;
	margin-top: 4px;
	font-family: var(--f-fell);
	font-style: italic;
	font-size: 12px;
	line-height: 1.25;
}
.mg-sub-msg:empty { display: none; }
.mg-sub-msg.is-ok { color: var(--navy); }
.mg-sub-msg.is-error { color: var(--terracotta-deep); }
.mg-sub.is-done .mg-sub-row { display: none; }

/* masthead ear */
.mg-ear .mg-sub { margin-top: 5px; }
.mg-sub-ear input[type="email"] { font-size: 11.5px; padding: 3px 5px; }
.mg-sub-ear button { font-size: 13px; padding: 2px 8px; }

/* box inside the issue */
.mg-sub-box {
	position: relative;
	border: 2px solid var(--navy);
	outline: 1px solid var(--navy);
	outline-offset: 3px;
	margin: 8px 4px 6px;
	padding: 14px 16px 12px;
	text-align: center;
	background: radial-gradient(circle at 50% 30%, rgba(255, 250, 235, .7), transparent 75%);
}
.mg-sub-box .ad-label {
	position: absolute;
	top: -8px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--paper);
	padding: 0 6px;
	font-family: var(--f-fell-sc);
	font-size: 9.5px;
	letter-spacing: .18em;
	color: var(--navy);
	white-space: nowrap;
}
.mg-sub-box .sub-pre {
	display: block;
	font-family: var(--f-fell-sc);
	font-size: 12px;
	letter-spacing: .14em;
}
.mg-sub-box .sub-head {
	display: block;
	font-family: var(--f-mast);
	font-size: 34px;
	line-height: 1.05;
	color: var(--ink);
}
.mg-sub-box .sub-sub {
	display: block;
	font-family: var(--f-fell);
	font-style: italic;
	font-size: 14px;
	line-height: 1.25;
}
.mg-sub-box .ad-orn { display: block; font-size: 14px; letter-spacing: .5em; color: var(--terracotta); margin: 5px 0 3px; }
.mg-sub-box .sub-copy { font-size: 12.5px; line-height: 1.35; margin: 0 0 8px; }
.mg-sub-box input[type="email"] { font-size: 13px; }
.mg-sub-box button { font-size: 14px; }
.mg-sub-box .mg-sub-msg { text-align: center; font-size: 13.5px; }

/* slide-in card */
.mg-slide {
	position: fixed;
	left: 22px;
	bottom: 22px;
	z-index: 30;
	width: 360px;
	padding: 16px 18px 14px;
	color: var(--ink);
	background-color: var(--paper);
	background-image: radial-gradient(ellipse at center, transparent 55%, rgba(120, 85, 40, .18) 100%);
	border: 2px solid var(--ink);
	outline: 1px solid var(--ink);
	outline-offset: -6px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
	transform: translateY(140%);
	transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.mg-slide.is-open { transform: translateY(0); }
.mg-slide[hidden] { display: none; }
.mg-slide-close {
	position: absolute;
	top: 6px;
	right: 10px;
	font: 700 22px/1 var(--f-head);
	color: var(--ink-soft);
	background: none;
	border: 0;
	cursor: pointer;
	padding: 4px;
}
.mg-slide-close:hover { color: var(--terracotta-deep); }
.mg-slide-pre {
	display: block;
	font-family: var(--f-wood);
	font-size: 15px;
	letter-spacing: .06em;
	color: var(--terracotta-deep);
}
.mg-slide-title {
	display: block;
	margin: 2px 24px 4px 0;
	font-family: var(--f-head);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.1;
}
.mg-slide-copy {
	display: block;
	margin-bottom: 10px;
	font-family: var(--f-fell);
	font-style: italic;
	font-size: 14.5px;
	line-height: 1.3;
	color: var(--ink-soft);
}
.mg-sub-slide input[type="email"] { font-size: 14px; padding: 7px 9px; }
.mg-sub-slide button { font-size: 14px; padding: 7px 14px 6px; }

/* Phones render the 1440px sheet scaled down, so draw the card large there. */
@media (hover: none) {
	.mg-slide {
		left: 50%;
		bottom: 30px;
		width: 1100px;
		margin-left: -550px;
		padding: 46px 54px 44px;
		outline-offset: -14px;
		border-width: 5px;
	}
	.mg-slide-close { font-size: 64px; top: 14px; right: 28px; }
	.mg-slide-pre { font-size: 44px; }
	.mg-slide-title { font-size: 70px; margin-right: 70px; }
	.mg-slide-copy { font-size: 44px; margin-bottom: 30px; }
	.mg-sub-slide input[type="email"] { font-size: 46px; padding: 18px 22px; border-width: 3px; }
	.mg-sub-slide button { font-size: 44px; padding: 18px 34px; border-width: 3px; }
	.mg-sub-slide .mg-sub-msg { font-size: 40px; margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.mg-slide { transition: none; }
}
html.mg-snapshot .mg-slide,
html.mg-snapshot .mg-zoom-hint { display: none !important; }

/* ==========================================================================
   The Funny Pages — weekly comic strip
   ========================================================================== */
.mg-comic { margin: 2px 0 6px; }
.mg-comic .comic-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 6px;
	padding: 0 2px;
}
.mg-comic .comic-title {
	font-family: var(--f-head);
	font-weight: 700;
	font-style: italic;
	font-size: 22px;
	line-height: 1.1;
}
.mg-comic .comic-title::before,
.mg-comic .comic-title::after { content: "\201C"; color: var(--terracotta); }
.mg-comic .comic-title::after { content: "\201D"; }
.mg-comic .comic-byline {
	font-family: var(--f-fell-sc);
	font-size: 11px;
	letter-spacing: .12em;
	color: var(--ink-soft);
}
.mg-comic .comic-art {
	border: 2px solid var(--ink);
	outline: 1px solid var(--ink);
	outline-offset: 3px;
	padding: 6px;
	background: var(--paper-light);
}
.mg-comic svg {
	display: block;
	width: 100%;
	height: auto;
	filter: sepia(.08);
}

/* ==========================================================================
   Issue footer & colophon
   ========================================================================== */
.mg-issue-foot {
	margin-top: 10px;
	border-top: 4px double var(--rule);
	padding-top: 8px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 18px;
	font-family: var(--f-fell);
	font-size: 12.5px;
}
.mg-issue-foot .center { text-align: center; }
.mg-issue-foot .right { text-align: right; }
.mg-sponsor-link {
	display: inline-block;
	font-family: var(--f-display-sc);
	font-weight: 900;
	font-size: 15px;
	letter-spacing: .14em;
	text-decoration: none;
	border: 1px solid var(--rule);
	outline: 1px solid var(--rule);
	outline-offset: 2px;
	padding: 5px 16px 4px;
	color: var(--terracotta-deep);
}
.mg-sponsor-link:hover { background: var(--terracotta-deep); color: var(--paper-light); }
.mg-issue-foot small { display: block; font-style: italic; color: var(--ink-soft); }

/* ==========================================================================
   Archive strip (home) and archive grid
   ========================================================================== */
.mg-archive {
	width: var(--sheet-w);
	margin: 46px auto 0;
	color: var(--paper);
}
.mg-archive h2 {
	font-family: var(--f-mast);
	font-weight: 400;
	font-size: 44px;
	margin: 0 0 4px;
	text-align: center;
	color: var(--paper-light);
}
.mg-archive .sub {
	text-align: center;
	font-family: var(--f-fell);
	font-style: italic;
	font-size: 15px;
	color: var(--stone);
	margin-bottom: 22px;
}
.mg-archive-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 26px;
}
.mg-back-issue {
	display: block;
	text-decoration: none;
	color: var(--ink);
	background-color: var(--paper-dark);
	background-image: radial-gradient(ellipse at center, transparent 50%, rgba(110, 75, 30, .28) 100%);
	padding: 12px 12px 14px;
	box-shadow: 0 10px 22px rgba(0, 0, 0, .4);
	transform: rotate(-.6deg);
	transition: transform .25s ease, box-shadow .25s ease;
}
.mg-back-issue:nth-child(even) { transform: rotate(.7deg); }
.mg-back-issue:hover { transform: translateY(-4px) rotate(0); box-shadow: 0 16px 30px rgba(0, 0, 0, .5); }
.mg-back-issue .bi-name {
	display: block;
	font-family: var(--f-mast);
	font-size: 22px;
	text-align: center;
	border-bottom: 2px double var(--rule);
	padding-bottom: 2px;
}
.mg-back-issue .bi-line {
	display: flex;
	justify-content: space-between;
	font-family: var(--f-fell-sc);
	font-size: 9.5px;
	letter-spacing: .06em;
	border-bottom: 1px solid var(--rule);
	padding: 2px 0;
	margin-bottom: 6px;
}
.mg-back-issue img { border: 1px solid var(--rule); aspect-ratio: 3 / 2; object-fit: cover; filter: sepia(.3); }
.mg-back-issue .bi-hed {
	display: block;
	margin-top: 6px;
	font-family: var(--f-head);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.12;
}
.mg-archive-empty {
	text-align: center;
	font-family: var(--f-fell);
	font-style: italic;
	color: var(--stone);
}

/* ==========================================================================
   Plain pages (Advertise, About)
   ========================================================================== */
.mg-page { max-width: 980px; margin: 18px auto 0; }
.mg-page .page-title {
	font-family: var(--f-head);
	font-weight: 700;
	font-size: 46px;
	line-height: 1;
	text-align: center;
	margin: 6px 0 4px;
}
.mg-page .page-deck {
	text-align: center;
	font-family: var(--f-fell);
	font-style: italic;
	font-size: 19px;
	color: var(--ink-soft);
	margin: 0 0 10px;
}
.mg-page .page-body {
	column-count: 2;
	column-gap: 34px;
	column-rule: 1px solid var(--rule);
	text-align: justify;
	hyphens: auto;
	font-size: 15px;
	line-height: 1.5;
}
.mg-page .page-body.single { column-count: 1; }

.mg-rates {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin: 18px 0;
}
.mg-rates .mg-ad { margin: 4px; }

.mg-form {
	border: 2px solid var(--ink);
	outline: 1px solid var(--ink);
	outline-offset: 3px;
	padding: 18px 24px 20px;
	margin: 20px 4px 10px;
}
.mg-form h3 {
	margin: 0 0 10px;
	font-family: var(--f-display-sc);
	font-weight: 900;
	letter-spacing: .14em;
	text-align: center;
	font-size: 19px;
}
.mg-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mg-form label {
	display: block;
	font-family: var(--f-fell-sc);
	font-size: 13px;
	letter-spacing: .08em;
	margin: 8px 0 3px;
}
.mg-form input,
.mg-form select,
.mg-form textarea {
	width: 100%;
	font: inherit;
	font-size: 15px;
	color: var(--ink);
	background: var(--paper-light);
	border: 0;
	border-bottom: 1px solid var(--ink);
	padding: 6px 4px;
}
.mg-form textarea { border: 1px solid var(--ink); min-height: 130px; resize: vertical; }
.mg-form input:focus,
.mg-form select:focus,
.mg-form textarea:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
.mg-form .hp { position: absolute; left: -9999px; }
.mg-form button {
	margin-top: 14px;
	font-family: var(--f-display-sc);
	font-weight: 900;
	font-size: 16px;
	letter-spacing: .16em;
	color: var(--paper-light);
	background: var(--navy);
	border: 0;
	padding: 9px 26px 8px;
	cursor: pointer;
}
.mg-form button:hover { background: var(--terracotta-deep); }
.mg-notice {
	text-align: center;
	font-family: var(--f-fell);
	font-style: italic;
	font-size: 17px;
	border: 1px solid var(--rule);
	padding: 8px;
	margin: 10px 0;
}
.mg-notice.ok { color: var(--navy); }
.mg-notice.err { color: var(--terracotta-deep); }

/* ==========================================================================
   Site footer (outside the sheet)
   ========================================================================== */
.mg-site-foot {
	width: var(--sheet-w);
	margin: 34px auto 0;
	text-align: center;
	font-family: var(--f-fell);
	font-size: 14px;
	color: var(--stone);
}
.mg-site-foot a { color: var(--paper-light); text-decoration: none; margin: 0 10px; }
.mg-site-foot a:hover { color: #e9a184; }
.mg-site-foot .fine { margin-top: 8px; font-size: 12.5px; font-style: italic; opacity: .8; }

/* ==========================================================================
   Zoom affordance
   ========================================================================== */
.mg-zoom-hint {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px 7px;
	background: var(--navy);
	color: var(--paper-light);
	font-family: var(--f-fell);
	font-style: italic;
	font-size: 14px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
	border: 1px solid rgba(242, 233, 212, .4);
}
.mg-zoom-hint button {
	font-family: var(--f-head);
	font-weight: 700;
	font-size: 15px;
	width: 28px;
	height: 28px;
	border: 1px solid rgba(242, 233, 212, .6);
	background: transparent;
	color: inherit;
	cursor: pointer;
}
.mg-zoom-hint button:hover { background: var(--terracotta); }
.mg-sheet.is-zoomed { cursor: zoom-out; }
.mg-sheet { cursor: zoom-in; }
.mg-sheet a,
.mg-sheet button,
.mg-sheet input,
.mg-sheet textarea,
.mg-sheet select { cursor: pointer; }
.mg-sheet input,
.mg-sheet textarea { cursor: text; }
@media (hover: none) { .mg-zoom-hint { display: none; } }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}

@media print {
	body { background: #fff; min-width: 0; }
	.mg-desk { padding: 0; }
	.mg-sheet { box-shadow: none; width: auto; }
	.mg-zoom-hint, .mg-archive, .mg-site-foot { display: none; }
}