/**
 * The Maestro's Listening Guide — article styling.
 *
 * A 1:1 port of the stylesheet Kevin sent with the first installment
 * (2026-09-09, docs/client-requests/2026-09-09/). His file was a standalone
 * light-mode document: Georgia/Arial, paper background, its own masthead and
 * footer. The site is dark (midnight ground, parchment text, Cormorant
 * Garamond / Public Sans), so every rule here is scoped under `.fso-mlg` and
 * the guide carries its own light ground as an island between the real site
 * header and footer.
 *
 * Two deliberate departures from the file he sent:
 *
 * 1. His `.masthead` bar is dropped. It was there because his document had no
 *    navigation of its own; the real FSO header does that job, and two bars
 *    stacked would read as a mistake. Ben's call, 2026-09-15 — the guide is
 *    linked from Mailchimp and from a printed QR code, so a visitor landing
 *    cold needs a way into the rest of the site. A page with no nav is the
 *    orphan defect the IA pass already fixed once.
 *
 * 2. His `<footer>` sources note becomes article content (`.mlg-sources`),
 *    sitting above the real site footer rather than standing in for it.
 *
 * His palette is close to the theme's but not identical (his gold #c9971f
 * against the theme's #C5A059, his muted #5b6376 against a warm #ADA795).
 * The values below are HIS, on purpose: this is a signed letter from the
 * Music Director and it is meant to read as its own object. That is why the
 * tokens are local variables here instead of theme.json presets — the usual
 * "no hardcoded colors" rule assumes a section that belongs to the site's
 * visual system, and this one deliberately does not. Same reasoning as
 * assets/css/checkout.css and assets/css/flashbang.css.
 */

.fso-mlg {
	--mlg-navy: #111a3b;
	--mlg-navy-2: #17203b;
	--mlg-gold: #c9971f;
	--mlg-gold-soft: #d3a329;
	--mlg-paper: #faf7f0;
	--mlg-paper-2: #f3efe4;
	--mlg-ink: #20263a;
	--mlg-muted: #5b6376;
	--mlg-rule: #e2ddd0;

	background: var(--mlg-paper);
	color: var(--mlg-ink);
	font-family: Georgia, 'Times New Roman', serif;
	-webkit-font-smoothing: antialiased;
}

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

.fso-mlg .mlg-wrap {
	max-width: 700px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ---- Hero ---- */

.fso-mlg .mlg-hero {
	padding: 64px 0 40px;
	text-align: center;
}

.fso-mlg .mlg-kicker {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	letter-spacing: 2.4px;
	color: var(--mlg-gold);
	font-weight: 700;
	text-transform: uppercase;
	margin: 0;
}

.fso-mlg .mlg-hero h1 {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 44px;
	line-height: 1.12;
	margin: 14px 0 10px;
	color: var(--mlg-navy-2);
	font-weight: 700;
	letter-spacing: normal;
}

.fso-mlg .mlg-subtitle {
	font-style: italic;
	font-size: 20px;
	color: var(--mlg-muted);
	margin: 0 0 34px;
}

.fso-mlg .mlg-byline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	text-align: left;
	max-width: 520px;
	margin: 0 auto 34px;
	padding: 20px;
	background: var(--mlg-paper-2);
	border-radius: 2px;
}

.fso-mlg .mlg-byline img {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px var(--mlg-rule);
}

.fso-mlg .mlg-byline .mlg-name {
	font-weight: 700;
	font-size: 17px;
	color: var(--mlg-navy-2);
}

.fso-mlg .mlg-byline .mlg-role {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12.5px;
	color: var(--mlg-muted);
	margin-top: 2px;
}

.fso-mlg .mlg-byline .mlg-concert {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12.5px;
	color: var(--mlg-muted);
	margin-top: 10px;
	line-height: 1.5;
}

.fso-mlg .mlg-byline .mlg-concert strong {
	color: var(--mlg-ink);
}

.fso-mlg .mlg-no-homework {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14.5px;
	color: var(--mlg-muted);
	max-width: 440px;
	margin: 0 auto 40px;
	line-height: 1.6;
}

.fso-mlg .mlg-cover-quote {
	font-style: italic;
	font-size: 24px;
	line-height: 1.45;
	color: var(--mlg-navy-2);
	max-width: 520px;
	margin: 0 auto;
	padding: 0 10px;
}

.fso-mlg .mlg-cover-quote cite {
	display: block;
	margin-top: 14px;
	font-style: normal;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11.5px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--mlg-gold);
}

.fso-mlg hr.mlg-div {
	border: none;
	border-top: 1px solid var(--mlg-rule);
	margin: 48px 0;
	background: none;
	height: 0;
	opacity: 1;
}

/* ---- Body ---- */

.fso-mlg .mlg-article {
	padding-bottom: 20px;
}

.fso-mlg .mlg-article h2 {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 26px;
	color: var(--mlg-navy-2);
	margin: 0 0 18px;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: normal;
}

.fso-mlg .mlg-article h2.mlg-spaced {
	margin-top: 56px;
}

.fso-mlg .mlg-movement-head {
	margin: 64px 0 18px;
}

.fso-mlg .mlg-movement-head h2 {
	margin-top: 0;
}

.fso-mlg .mlg-movement-num {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	letter-spacing: 2px;
	color: var(--mlg-gold);
	font-weight: 700;
	display: block;
	margin-bottom: 6px;
}

.fso-mlg .mlg-movement-tempo {
	font-style: italic;
	color: var(--mlg-muted);
	font-size: 16px;
	display: block;
	margin-top: 4px;
}

.fso-mlg p {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 18px;
	line-height: 1.68;
	color: var(--mlg-ink);
	margin: 0 0 22px;
}

.fso-mlg .mlg-listen-for {
	border-left: 3px solid var(--mlg-gold-soft);
	padding: 2px 0 2px 20px;
	margin: 28px 0;
}

.fso-mlg .mlg-listen-for .mlg-lf-label {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11.5px;
	letter-spacing: 1.6px;
	font-weight: 700;
	color: var(--mlg-gold);
	text-transform: uppercase;
	display: block;
	margin-bottom: 6px;
}

.fso-mlg .mlg-listen-for p {
	font-style: italic;
	font-size: 17px;
	margin: 0;
	color: var(--mlg-navy-2);
}

.fso-mlg blockquote {
	margin: 36px 0;
	padding: 0 8px;
	text-align: center;
	border: none;
}

.fso-mlg blockquote p {
	font-style: italic;
	font-size: 21px;
	line-height: 1.5;
	color: var(--mlg-navy-2);
	margin: 0;
}

.fso-mlg blockquote cite {
	display: block;
	margin-top: 10px;
	font-style: normal;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11.5px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--mlg-gold);
}

.fso-mlg .mlg-three-moments {
	margin: 16px 0 8px;
}

.fso-mlg .mlg-moment {
	margin: 0 0 28px;
}

.fso-mlg .mlg-moment .mlg-m-title {
	font-weight: 700;
	font-size: 19px;
	color: var(--mlg-navy-2);
	margin-bottom: 6px;
}

.fso-mlg .mlg-signoff {
	margin-top: 56px;
}

.fso-mlg .mlg-sig-name {
	font-family: Georgia, serif;
	font-style: italic;
	font-size: 22px;
	color: var(--mlg-navy-2);
	margin: 26px 0 2px;
}

.fso-mlg .mlg-sig-role {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: var(--mlg-muted);
}

/* ---- Concert CTA ---- */

.fso-mlg .mlg-hear-live {
	background: var(--mlg-navy);
	color: #fff;
	margin: 64px 0 0;
	padding: 44px 24px 48px;
	text-align: center;
}

.fso-mlg .mlg-hear-live .mlg-inner {
	max-width: 700px;
	margin: 0 auto;
}

.fso-mlg .mlg-hear-live .mlg-kicker {
	color: var(--mlg-gold-soft);
}

.fso-mlg .mlg-hear-live h3 {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 28px;
	margin: 12px 0 6px;
	color: #fff;
	font-weight: 700;
	letter-spacing: normal;
}

.fso-mlg .mlg-hear-live .mlg-program {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.8;
	color: #d9ddeb;
	margin: 18px 0 8px;
}

.fso-mlg .mlg-hear-live .mlg-details {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #f0d88c;
	font-weight: 700;
	margin: 14px 0 26px;
}

.fso-mlg .mlg-btn {
	display: inline-block;
	background: var(--mlg-gold-soft);
	color: #111b38;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.4px;
	padding: 15px 30px;
	border-radius: 3px;
}

.fso-mlg .mlg-btn:hover,
.fso-mlg .mlg-btn:focus {
	background: var(--mlg-gold);
	color: #111b38;
}

/* ---- Sources note (was his <footer>) ---- */

.fso-mlg .mlg-sources {
	text-align: center;
	padding: 30px 24px 50px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: var(--mlg-muted);
	line-height: 1.7;
}

.fso-mlg .mlg-sources a {
	color: var(--mlg-muted);
}

@media (max-width: 600px) {
	.fso-mlg .mlg-hero h1 {
		font-size: 33px;
	}

	.fso-mlg .mlg-subtitle {
		font-size: 17px;
	}

	.fso-mlg .mlg-cover-quote {
		font-size: 20px;
	}

	.fso-mlg p {
		font-size: 17px;
	}

	.fso-mlg .mlg-byline {
		flex-direction: column;
		text-align: center;
	}

	.fso-mlg .mlg-byline .mlg-concert {
		text-align: center;
	}
}

/* ---- Series landing page ---- */

.fso-mlg-index .mlg-card {
	display: flex;
	gap: 22px;
	align-items: flex-start;
	text-align: left;
	padding: 26px 0;
	border-top: 1px solid var(--wp--preset--color--border);
}

.fso-mlg-index .mlg-card:last-child {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.fso-mlg-index .mlg-card img {
	width: 76px;
	height: 76px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.fso-mlg-index .mlg-card-concert {
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin: 0 0 6px;
}

.fso-mlg-index .mlg-card-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
	margin: 0 0 8px;
}

.fso-mlg-index .mlg-card-title a {
	color: var(--wp--preset--color--parchment);
	text-decoration: none;
}

.fso-mlg-index .mlg-card-title a:hover,
.fso-mlg-index .mlg-card-title a:focus {
	color: var(--wp--preset--color--gold);
}

.fso-mlg-index .mlg-card-teaser {
	color: var(--wp--preset--color--muted);
	margin: 0 0 10px;
}

.fso-mlg-index .mlg-card-link {
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	text-decoration: none;
}

.fso-mlg-index .mlg-card-link:hover,
.fso-mlg-index .mlg-card-link:focus {
	text-decoration: underline;
}

.fso-mlg-index .mlg-upcoming {
	color: var(--wp--preset--color--muted);
	opacity: 0.75;
}

.fso-mlg-index .mlg-upcoming .mlg-card-title {
	color: var(--wp--preset--color--muted);
}

@media (max-width: 600px) {
	.fso-mlg-index .mlg-card {
		flex-direction: column;
		gap: 14px;
	}
}
