/*
Theme Name: MSC 2026
Theme URI: https://www.mijentesupportcommittee.com/
Author: Kinetic Good
Author URI: https://kineticgood.com
Description: Lightweight block theme for Mijente Support Committee. No page builder, no framework, no external font or script calls. Brand tokens live in theme.json; staff edit everything in the core WordPress editor.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: msc-2026
Tags: one-column, block-patterns, full-site-editing, editor-style, custom-colors, accessibility-ready
*/

/* ---------------------------------------------------------------------------
   Almost everything is handled by theme.json. This file carries only the few
   layout behaviours the block editor cannot express as settings.
   Staff never need to touch this - it is theme code, not page content.
   --------------------------------------------------------------------------- */

/* Sharp corners are a brand trait: the live site has zero radius anywhere. */
.wp-block-button__link,
.wp-block-image img,
.wp-block-cover,
.wp-block-group { border-radius: 0; }

/* --- Equal-height cards ---------------------------------------------------
   Card grids (campaigns, resources, episodes) put a .msc-card group inside
   each column. The column stretches, the card fills it, and the buttons get
   pushed to the bottom so every row lines up regardless of text length.     */
.msc-cards > .wp-block-column { display: flex; }

.msc-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}
.msc-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.6rem;
}
.msc-card .wp-block-buttons { margin-top: auto; }

/* Media band: fixed height so every cover art in a row matches. */
.msc-card .wp-block-cover { min-height: 230px; }
@media (max-width: 781px) { .msc-card .wp-block-cover { min-height: 200px; } }

/* Document covers (resources) are posters whose title is part of the artwork,
   so they are contained rather than cropped. */
.msc-card--doc .wp-block-cover .wp-block-cover__image-background {
	object-fit: contain;
	background-color: #fff;
}

/* --- Video grid ----------------------------------------------------------- */
.msc-video figcaption,
.msc-video__title { min-height: 3.6em; }
.wp-block-embed__wrapper { position: relative; }

/* --- Section rhythm ------------------------------------------------------- */
.msc-section { padding-block: var(--wp--preset--spacing--60); }
@media (max-width: 781px) { .msc-section { padding-block: var(--wp--preset--spacing--40); } }

/* --- Skip link + focus ---------------------------------------------------- */
:where(a, button, input, select, textarea):focus-visible {
	outline: 3px solid var(--wp--preset--color--pink);
	outline-offset: 2px;
}

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

/* ---------------------------------------------------------------
 * Chips — the live site's .category-link-3 pattern.
 * Uppercase display face, flat colour block, no radius.
 * ------------------------------------------------------------- */
.msc-chip,
.msc-chip a,
.msc-chips .wp-block-post-terms a {
	display: inline-block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	/* Antarctican sits optically smaller than the Titling Gothic FB Compressed
	   this replaces: measured at the same nominal size its cap height is 11.6%
	   shorter. 14 x 1.116 = 15.6, rounded to a whole pixel so it hints cleanly. */
	font-size: 18px;
	line-height: 18px;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	text-decoration: none;
	padding: 6px;
	margin: 0;
	color: #fff;
	background: var(--wp--preset--color--black);
}

/* the terms block wraps links — kill its own spacing and colour */
.msc-chip.wp-block-post-terms { background: none; padding: 0; }
.msc-chip.wp-block-post-terms a:hover { opacity: .85; text-decoration: none; }
.msc-chip--tag a { background: var(--wp--preset--color--pink); }
.msc-chip--type a     { background: var(--wp--preset--color--turquoise); color: #00201f; }

/* Status chip colours. The class is on the chip, not on <body>, so a listing
   can show several chips with different statuses on one page. */
.msc-chip--status.msc-status--open     { background: #0a7d32; }
.msc-chip--status.msc-status--closed   { background: #6b6b6b; }
.msc-chip--status.msc-status--rolling  { background: #0a7d32; }   /* reads "Open", so it looks like Open */
.msc-chip--status.msc-status--upcoming { background: var(--wp--preset--color--violet); }

/* deadline sits next to the chips as quiet supporting text */
.msc-deadline {
	font-family: var(--wp--preset--font-family--body);
	letter-spacing: .04em;
	color: #8a2b52;
	margin: 0;
}
.msc-status-closed .msc-deadline,
.msc-row:has(.msc-status--closed) .msc-deadline { color: #6b6b6b; }

/* attribution line — hidden entirely when the binding returns empty */
.msc-offered {
	font-family: var(--wp--preset--font-family--body);
	color: #6b6675;
	border-top: 1px solid #e0dee6;
	padding-top: 10px;
}
.msc-offered:empty { display: none; }

/* the apply block */
.msc-action--closed,
.msc-action--upcoming {
	font-family: var(--wp--preset--font-family--body);
	background: var(--wp--preset--color--off-white);
	border-left: 4px solid var(--wp--preset--color--black);
	padding: 18px 20px;
	margin: 0;
}
.msc-action--link .wp-element-button {
	background: var(--wp--preset--color--pink);
	color: #fff;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 18px;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	border-radius: 0;
	padding: 10px 21px;
}

/* any empty bound paragraph should take up no space */
.wp-block-paragraph:empty { display: none; }

/* --- specificity fix -------------------------------------------------
 * `.msc-chips .wp-block-post-terms a` (0,2,1) was beating
 * `.msc-chip--tag a` (0,1,1), so chips in the footer group all came
 * out black. Match the modifiers at the same depth instead.
 * ------------------------------------------------------------------ */
.msc-chips .msc-chip--tag a,
.msc-chip--tag a { background: var(--wp--preset--color--pink); color: #fff; }

.msc-chips .msc-chip--type a,
.msc-chip--type a { background: var(--wp--preset--color--turquoise); color: #00201f; }

/* the apply column should not hold open empty space when there is no action */
.wp-block-column:has(> .wp-block-shortcode:empty) { display: none; }

/* Featured image on an opportunity. Matches the live site's
   .blog-detail-post-cover-pic.bottom-24: full container width, NATURAL aspect
   ratio (no crop), 24px below. Renders nothing when there is no image. */
.msc-featured { padding-top: 0; padding-bottom: 24px; }
.msc-featured .wp-block-post-featured-image { margin: 0; }
.msc-featured .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
}
/* No featured image? A placeholder from assets/img/placeholders/ is supplied by
   msc-launch.php, so nothing here needs to draw a stand-in. */

/* ===========================================================================
   Live-site design system
   Measured off the Webflow stylesheet rather than eyeballed, so the port
   matches. Class names are ours; the values are theirs.
   ======================================================================== */

/* Section heading — .title-box on the live site: a 3px rule under an
   Antarctican caps heading. This is the single strongest structural motif on
   the site; almost every section opens with one. */
.msc-title-box {
	border-bottom: 3px solid var(--wp--preset--color--black);
	margin-bottom: 25px;
	padding-bottom: 10px;
}
.msc-title-box > * { margin: 0; }

/* Listing row — .flex-wrapper.bottom-border: title, blurb, 40px gap, rule. */
.msc-row {
	border-bottom: 1px solid var(--wp--preset--color--black);
	margin-bottom: 40px;
	padding-bottom: 24px;
}
.msc-row:last-of-type { margin-bottom: 25px; border-bottom: 0; padding-bottom: 0; }
.msc-row a { text-decoration: none; color: inherit; }
.msc-row a:hover h2, .msc-row a:hover h3 { color: var(--wp--preset--color--pink); }

/* Outline button — .button-outline. 2px rule, inverts on hover. */
.msc-btn-outline .wp-element-button,
a.msc-btn-outline {
	background: transparent;
	color: var(--wp--preset--color--black);
	border: 2px solid var(--wp--preset--color--black);
	border-radius: 0;
	min-width: 200px;
	padding: 13px 21px 11px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 14px;
	font-weight: 800;
	line-height: 24px;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	transition: background-color .2s, color .2s;
}
.msc-btn-outline .wp-element-button:hover,
a.msc-btn-outline:hover {
	background: var(--wp--preset--color--black);
	color: #fff;
}

/* The rule above the "see all" button, as on the live site. */
.msc-seeall { padding-top: 0; }

/* --- Podcast card --------------------------------------------------------
   The live .side-column-item.pink-back is, despite the name, GOLD, with a
   mortar-and-pestle line drawing tiled behind it. Keeping that exactly, and
   giving Our Copa the same treatment so the two read as a pair.            */
.msc-podcast {
	background-color: var(--wp--preset--color--gold);
	background-image: url("assets/img/mortar-texture.svg");
	background-position: 0 0;
	background-repeat: repeat;
	padding: 24px;
	margin-bottom: 50px;
	text-align: center;
}
.msc-podcast img { display: block; width: 100%; height: auto; }
.msc-podcast__title {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--violet);
	text-transform: uppercase;
	margin: 18px 0 0;
	line-height: 1;
}
.msc-podcast__tagline {
	font-family: var(--wp--preset--font-family--script);
	color: var(--wp--preset--color--violet);
	text-transform: uppercase;
	text-align: center;
	line-height: 20px;
	margin: 0;
	padding: 18px 0;
}
.msc-podcast .wp-element-button,
.msc-podcast a.msc-btn {
	display: block;
	width: 100%;
	background: var(--wp--preset--color--pink);
	color: #fff;
	border: 0;
	border-radius: 0;
	margin-top: 24px;
	padding: 10px 21px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 14px;
	line-height: 24px;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	text-decoration: none;
}
.msc-podcast .wp-element-button:hover,
.msc-podcast a.msc-btn:hover { background: var(--wp--preset--color--black); }

/* --- Newsletter ----------------------------------------------------------
   Ported wholesale from the live site's own inline <style> on #CTA-Newsletter,
   not approximated: a gold panel, the email on a thick black underline, and a
   pink Antarctican submit. EveryAction ships its own blue button and a title
   and legend nobody wants; all three are suppressed here.             */
.msc-newsletter { margin-top: 0; }
.msc-newsletter-form .ngp-form { max-width: 100%; }
.msc-newsletter-form header.at-title,
.msc-newsletter-form .at fieldset legend { display: none; }

.msc-newsletter-form .at-inner form {
	background-color: var(--wp--preset--color--gold);
	padding: 40px;
}
@media (min-width: 768px) {
	.msc-newsletter-form .at-inner form {
		display: grid;
		grid-template-columns: 1fr auto;
		column-gap: 32px;
		align-items: end;
	}
}
.msc-newsletter-form .at-row > [class^="at-"] { margin: 0; }
.msc-newsletter-form .at-form-submit,
.msc-newsletter-form .at .at-fieldset { padding: 0; margin: 0; }

/* the field label is decorative on the live site; the placeholder carries it */
.msc-newsletter-form .at label.at-text.EmailAddress { color: rgba(0,0,0,0) !important; }

.msc-newsletter-form .at input[type="text"],
.msc-newsletter-form .at input[type="email"],
.msc-newsletter-form .at textarea { border-radius: 0; }

.msc-newsletter-form label.at-text.EmailAddress input {
	box-shadow: 0 6px 0 0 var(--wp--preset--color--black);
	color: var(--wp--preset--color--black) !important;
	background: transparent !important;
	border: 0 !important;
	letter-spacing: 2px;
	font-size: 24px !important;
	font-family: var(--wp--preset--font-family--body) !important;
	padding: 24px 0;
}
.msc-newsletter-form label.at-text.EmailAddress input::placeholder { color: rgba(0,0,0,.8) !important; }
.msc-newsletter-form label.at-text.EmailAddress input:focus,
.msc-newsletter-form input:focus {
	outline-width: 0;
	box-shadow: 0 6px 0 0 var(--wp--preset--color--turquoise) !important;
}
.msc-newsletter-form .at .error input[type="email"]:required {
	box-shadow: 0 6px 0 var(--wp--preset--color--pink) !important;
}

.msc-newsletter-form input.at-submit.btn-at.btn-at-primary {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background-color: var(--wp--preset--color--pink);
	color: #fff;
	font-family: var(--wp--preset--font-family--display);
	font-size: 17px;
	line-height: 22px;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 18px 29px;
	margin: 0;
	width: auto;
	white-space: normal;
	transition: background-color .2s ease-in-out;
}
.msc-newsletter-form input.at-submit.btn-at.btn-at-primary:hover { background-color: #ab0052; }

/* --- Donate band --------------------------------------------------------- */
.msc-donate .msc-title-box { border-bottom-color: #fff; }
.msc-btn-invert .wp-element-button {
	display: inline-block;
	background: var(--wp--preset--color--black);
	color: #fff;
	border: 0;
	border-radius: 0;
	padding: 16px 34px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 15px;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	text-decoration: none;
}
.msc-btn-invert .wp-element-button:hover { background: #fff; color: var(--wp--preset--color--black); }

/* --- Header / footer -----------------------------------------------------
   Nav is Antarctican caps. The logo is white line art on the black bar, set
   to the live site's 60px height rather than a width, because the mark is
   wordmark-shaped and height is what keeps the bar consistent.             */
.msc-header .wp-block-site-logo img { height: 60px; width: auto; max-width: none; }
.msc-header .wp-block-navigation a { text-decoration: none; }
.msc-header .wp-block-navigation a:hover { color: var(--wp--preset--color--pink); }
.msc-footer .wp-block-navigation a:hover { color: var(--wp--preset--color--pink); }

/* Empty query-loop results should say so rather than collapse silently. */
.msc-empty {
	font-family: var(--wp--preset--font-family--body);
	color: #6b6675;
	border-left: 4px solid var(--wp--preset--color--black);
	padding: 18px 20px;
	margin: 0 0 40px;
}

/* --- Listing search ------------------------------------------------------ */
.msc-search {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-bottom: 40px;
}
.msc-search input[type="search"] {
	flex: 1 1 260px;
	background: transparent;
	border: 0;
	border-bottom: 3px solid var(--wp--preset--color--black);
	border-radius: 0;
	padding: 10px 2px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 17px;
	letter-spacing: .04em;
}
.msc-search input[type="search"]:focus {
	outline: 0;
	border-bottom-color: var(--wp--preset--color--turquoise);
}
.msc-search button {
	background: var(--wp--preset--color--black);
	color: #fff;
	border: 0;
	border-radius: 0;
	padding: 12px 24px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 14px;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	cursor: pointer;
}
.msc-search button:hover { background: var(--wp--preset--color--pink); }
.msc-search__clear {
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	color: var(--wp--preset--color--body-gray);
}

/* --- Episode audio ------------------------------------------------------- */
.msc-action--audio { margin-top: 24px; }
.msc-action--audio audio { width: 100%; }

/* --- Resource download button -------------------------------------------- */
.msc-action--file .wp-element-button {
	display: inline-block;
	background: var(--wp--preset--color--pink);
	color: #fff;
	border-radius: 0;
	padding: 13px 28px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 14px;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	text-decoration: none;
}
.msc-action--file .wp-element-button:hover { background: var(--wp--preset--color--black); }

/* --- Campaign index ------------------------------------------------------ */
.msc-campaign__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 30px;
	line-height: 1.05;
	letter-spacing: .5px;
	text-transform: uppercase;
	margin: 0 0 10px;
}
.msc-campaign__desc {
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
}
.msc-campaign__count {
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	letter-spacing: .04em;
	color: var(--wp--preset--color--body-gray);
	margin: 12px 0 0;
}

/* --- Hero ----------------------------------------------------------------
   Photo under a dark wash, white Antarctican headline. Sizes from the spec:
   60/64 desktop, 36/37 on a phone, which is the same break the live site
   uses for its own display type. */
.msc-hero__title { max-width: 24ch; }
.msc-hero__lede  { max-width: 52ch; }
@media (max-width: 760px) {
	.msc-hero__title { font-size: 36px !important; line-height: 37px !important; }
}
.msc-btn-solid .wp-element-button {
	background: var(--wp--preset--color--pink);
	color: #fff;
	border-radius: 0;
	padding: 13px 28px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 14px;
	letter-spacing: 1.3px;
	text-transform: uppercase;
}
.msc-btn-solid .wp-element-button:hover { background: var(--wp--preset--color--black); }
/* On the hero the outline button sits on a photo, so it inverts to white. */
.msc-hero__buttons .msc-btn-outline .wp-element-button {
	color: #fff;
	border-color: #fff;
}
.msc-hero__buttons .msc-btn-outline .wp-element-button:hover {
	background: #fff;
	color: var(--wp--preset--color--black);
}

/* --- About + Find us ----------------------------------------------------
   Both live on the homepage: there is no separate About or Contact page. */
.msc-mission .msc-title-box { border-bottom-width: 3px; }
.msc-contact__email a {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--black);
	letter-spacing: .04em;
	text-transform: none;
	text-decoration: none;
	border-bottom: 3px solid var(--wp--preset--color--black);
}
.msc-contact__email a:hover { color: var(--wp--preset--color--pink); border-bottom-color: var(--wp--preset--color--pink); }

/* A constrained layout centres any child that carries its own max-width, which
   was pushing the hero headline into the middle of the photo. Pin them left. */
.msc-hero__title,
.msc-hero__lede { margin-left: 0; margin-right: auto; }

/* --- Footer -------------------------------------------------------------
   The logo is an SVG with a viewBox and no intrinsic width/height, so a
   width-only rule collapsed it to 0x0 and the footer rendered with no mark at
   all. Size it by height in both places, as the live site does (60px in the
   bar, larger in the footer). */
.msc-footer .wp-block-site-logo { line-height: 0; }
.msc-footer .wp-block-site-logo img {
	height: 78px;
	width: auto;
	max-width: 100%;
	margin: 0 auto;
	display: block;
}
.msc-footer .wp-block-navigation { justify-content: center; }
.msc-footer .wp-block-social-links { margin-block: 6px; }

/* Attribution on a listing row sits above the chips, with no rule of its own —
   the row already has one. */
.msc-offered--row { border-top: 0; padding-top: 0; }

/* --- Full-bleed bands butt against each other ------------------------------
 * The live site has no seam between coloured sections. WordPress applies its
 * default 24px block gap to every sibling in a flow layout, so the white page
 * background was showing through between the hero, the mission band, the
 * donate band and the contact band — and between the header, main and footer.
 * Vertical rhythm inside a band comes from that band's own padding, not from
 * sibling margins, so dropping the margin on the bands only is safe.
 * ------------------------------------------------------------------------ */
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer,
.entry-content > .alignfull,
main > .alignfull { margin-block-start: 0; margin-block-end: 0; }

/* --- Filter bar ------------------------------------------------------------
 * Search plus one dropdown per taxonomy worth filtering on. A plain GET form,
 * so it is bookmarkable, survives the back button, and works with JS off; the
 * submit-on-change script is a convenience layered on top.
 * ------------------------------------------------------------------------ */
.msc-search {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
	margin-bottom: 14px;
}
.msc-search__field { display: flex; }
.msc-search input[type="search"] { min-width: 260px; }
.msc-search input[type="search"],
.msc-search select {
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	padding: 11px 13px;
	border: 2px solid var(--wp--preset--color--black);
	border-radius: 0;
	background: #fff;
	color: var(--wp--preset--color--black);
}
.msc-search select { cursor: pointer; padding-right: 34px; }
.msc-search button[type="submit"] {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	padding: 11px 24px;
	border: 2px solid var(--wp--preset--color--black);
	border-radius: 0;
	background: var(--wp--preset--color--black);
	color: #fff;
	cursor: pointer;
}
.msc-search button[type="submit"]:hover { background: var(--wp--preset--color--pink); border-color: var(--wp--preset--color--pink); }
.msc-search__clear {
	display: flex;
	align-items: center;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	color: var(--wp--preset--color--black);
	text-decoration: underline;
	padding: 0 4px;
}
.msc-count {
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	color: #6b6675;
	border-bottom: 3px solid var(--wp--preset--color--black);
	padding-bottom: 8px;
	margin: 0 0 26px;
}
@media (max-width: 600px) {
	.msc-search { gap: 8px; }
	.msc-search__field, .msc-search input[type="search"], .msc-search select { width: 100%; min-width: 0; }
	.msc-search button[type="submit"] { width: 100%; }
}

/* --- Resource grid ---------------------------------------------------------
 * Two up with the document's own cover, matching the live site's
 * ._49-percent-column grid. Covers are posters whose title is part of the
 * artwork, so they are contained rather than cropped, on a white mat.
 * ------------------------------------------------------------------------ */
.msc-resgrid { gap: 40px 30px; }
.msc-rescard { display: flex; flex-direction: column; height: 100%; }
.msc-rescard__cover { margin: 0 0 4px; }
.msc-rescard__cover img {
	display: block;
	width: 100%;
	height: 260px;
	object-fit: contain;
	background: #fff;
	border: 1px solid #e6e4ec;
}
.msc-rescard .msc-offered { border-top: 0; padding-top: 0; }
.msc-rescard .msc-action { margin-top: auto; }
.msc-rescard .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--black); }
.msc-rescard .wp-block-post-title a:hover { color: var(--wp--preset--color--pink); }
@media (max-width: 600px) { .msc-rescard__cover img { height: 200px; } }

/* Card CTA. The button is bound to the resource's file URL; when a resource has
   no file (a video with an unsupported host, say) the binding returns empty and
   the button would render as a dead stub, so hide it. */
.msc-rescard__cta { margin-top: auto; padding-top: 12px; }
.msc-rescard__cta .wp-block-button__link {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	background: var(--wp--preset--color--pink);
	color: #fff;
	border-radius: 0;
	padding: 10px 21px;
}
.msc-rescard__cta .wp-block-button__link:hover { background: var(--wp--preset--color--black); }
.msc-rescard__cta:not(:has(a[href]:not([href=""]))) { display: none; }

/* Category is what a piece IS (the live site puts exactly one on every post);
   tag is what it belongs to. Different jobs, so different colours. */
.msc-chips .msc-chip--cat a,
.msc-chip--cat a { background: var(--wp--preset--color--violet); color: #fff; }

/* The show chip on an episode was borrowing the tag colour; give it its own. */
.msc-chips .msc-chip--show a,
.msc-chip--show a { background: var(--wp--preset--color--gold); color: #000; }

/* --- Video resources ------------------------------------------------------
   Documents are posters whose title is part of the artwork, so their covers are
   `contain`ed on white and must not be cropped. A video still is a photograph:
   it should fill the band like any photo. WordPress already puts
   `resource_type-video` on the card, so the two cases split without any markup
   change. */
.resource_type-video .msc-rescard__cover img {
	object-fit: cover;
	background: var(--wp--preset--color--black);
	border-color: var(--wp--preset--color--black);
}

/* A play badge, so a still reads as a video rather than a photo. Drawn in CSS —
   no image request, and it inherits the brand pink. */
.resource_type-video .msc-rescard__cover { position: relative; }
.resource_type-video .msc-rescard__cover::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 64px;
	height: 44px;
	background: var(--wp--preset--color--pink);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	pointer-events: none;
}
.resource_type-video .msc-rescard__cover::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	z-index: 1;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent #fff;
	transform: translateX(3px);
	pointer-events: none;
}
.msc-rescard:hover .msc-rescard__cover::after { background: var(--wp--preset--color--black); }

/* --- Blog listing rows ---------------------------------------------------
   The live site lists posts as a 50/50 row: image left, text right, with a
   category chip above the title and a Read More beneath. */
.msc-postrow { margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid #e0dee6; }
.msc-postrow:last-of-type { border-bottom: 0; }
.msc-postrow__media .wp-block-post-featured-image { margin: 0; }
.msc-postrow__media img {
	display: block; width: 100%; height: 260px;
	object-fit: cover; background: var(--wp--preset--color--off-white);
}
.msc-postrow__media:not(:has(img)) { display: none; }
.msc-postrow .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--black); }
.msc-postrow .wp-block-post-title a:hover { color: var(--wp--preset--color--pink); }
.msc-readmore a, a.msc-readmore {
	display: inline-block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800; font-size: 14px; letter-spacing: 1.3px; text-transform: uppercase;
	color: var(--wp--preset--color--pink); text-decoration: none;
	border-bottom: 2px solid var(--wp--preset--color--pink); padding-bottom: 2px;
}
.msc-readmore a:hover, a.msc-readmore:hover { color: var(--wp--preset--color--black); border-color: var(--wp--preset--color--black); }

/* --- Episode rows --------------------------------------------------------- */
.msc-eprow { margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid #e0dee6; }
.msc-eprow:last-of-type { border-bottom: 0; }
.msc-eprow__art .wp-block-post-featured-image { margin: 0; }
.msc-eprow__art img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.msc-eprow .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--black); }
.msc-eprow .wp-block-post-title a:hover { color: var(--wp--preset--color--pink); }
.msc-epdate { color: #6b6675; letter-spacing: .04em; margin: 0; }

@media (max-width: 781px) {
	.msc-postrow__media img { height: 200px; }
	.msc-eprow__art { max-width: 130px; }
}

/* --- Opportunity apply box -----------------------------------------------
   The form used to sit in a 42% column, which on desktop left a tall ragged
   gap beside short body copy. Stacked beneath the body it needs its own frame
   so it still reads as the action, not as more article. */
.msc-applybox {
	border-top: 3px solid var(--wp--preset--color--black);
	padding-top: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--40);
}
.msc-applybox .msc-action--form { max-width: 720px; }

/* Same correction for every other place the display face does button or pill
   duty, so the uplift is consistent rather than chip-only. */
.msc-readmore a, a.msc-readmore,
.msc-rescard .wp-element-button,
.msc-filter button,
.wp-block-button__link { font-size: 18px; }

/* --- Footer --------------------------------------------------------------
   Donate, Find us and the newsletter were three full-width bands stacked at the
   bottom of the homepage, which made the page trail off. They live here now, so
   they appear on every page and the homepage ends on content. Link columns are
   stacked like the live site's footer rather than running in one long line. */
.msc-footer__cols { margin-bottom: 0; }
.msc-footer__brand .wp-block-site-logo img { max-width: 210px; height: auto; }
.msc-footer__email a { color: var(--wp--preset--color--white); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); }
.msc-footer__email a:hover { color: var(--wp--preset--color--pink); border-color: var(--wp--preset--color--pink); }

/* stacked, left aligned, one per line */
.msc-footer__nav .wp-block-navigation__container { gap: 10px; }
.msc-footer__nav .wp-block-navigation-item__content { text-decoration: none; }
.msc-footer__nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--pink); }

.msc-footer__act .msc-newsletter-form { margin-top: 4px; }
.msc-footer__donate { border-top: 1px solid rgba(255,255,255,.22); padding-top: var(--wp--preset--spacing--30); }
.msc-btn-invert .wp-block-button__link {
	background: var(--wp--preset--color--pink);
	color: #fff;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800; font-size: 18px; letter-spacing: 1.3px; text-transform: uppercase;
	border-radius: 0; padding: 12px 26px;
}
.msc-btn-invert .wp-block-button__link:hover { background: var(--wp--preset--color--white); color: #000; }

.msc-footer__legal { color: rgba(255,255,255,.62); }
.msc-footer__legal a { color: rgba(255,255,255,.62); }
.msc-footer__legal a:hover { color: var(--wp--preset--color--pink); }

@media (max-width: 781px) {
	.msc-footer__cols { gap: 32px; }
	.msc-footer__donate { margin-top: var(--wp--preset--spacing--30); }
}

/* --- Newsletter band -----------------------------------------------------
   Full width, high on the page, straight after the mission statement: the
   moment a reader has just been told who MSC is. EveryAction renders its own
   form markup, so the work here is making that markup sit on the brand gold
   instead of looking like a bolted-on widget. */
.msc-newsletter .ngp-form,
.msc-newsletter .at { max-width: none; }
.msc-newsletter .at .at-form-submit input,
.msc-newsletter .at input[type="submit"] {
	background: var(--wp--preset--color--pink) !important;
	color: #fff !important;
	font-family: var(--wp--preset--font-family--display) !important;
	font-weight: 800 !important;
	font-size: 16px !important;
	letter-spacing: 1.3px !important;
	text-transform: uppercase !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 14px 28px !important;
}
.msc-newsletter .at label.at-text input,
.msc-newsletter .at input[type="email"],
.msc-newsletter .at input[type="text"] {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 3px solid #000 !important;
	border-radius: 0 !important;
	color: #000 !important;
	letter-spacing: 1px;
}
.msc-newsletter .at label.at-text input::placeholder { color: rgba(0,0,0,.65) !important; }

/* --- Nothing should scroll the page sideways ----------------------------- */
html, body { overflow-x: hidden; }
.wp-block-group.alignfull { max-width: 100%; }

/* --- Footer wordmark + sitemap -------------------------------------------
   The live footer leads with the org name set large in the display face, and
   sets the sitemap in the body face so the two do not compete. */
.msc-footer__wordmark a { color: inherit; text-decoration: none; }
.msc-footer__wordmark a:hover { color: var(--wp--preset--color--pink); }
.msc-footer__nav .wp-block-navigation-item__content {
	color: rgba(255,255,255,.72);
	font-weight: 400;
}
.msc-footer__nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--pink); }

/* --- Homepage listing rows ------------------------------------------------
   The opportunity and resource rows were text-only even though every entry has
   a cover. Media column collapses when an entry has no image, so a row without
   one closes up rather than leaving a hole. */
.msc-homerow { margin-bottom: 0; }
.msc-homerow__media .wp-block-post-featured-image { margin: 0; }
.msc-homerow__media img {
	display: block; width: 100%; height: 150px;
	object-fit: cover; background: var(--wp--preset--color--off-white);
}
.msc-homerow__media:not(:has(img)) { display: none; }
@media (max-width: 781px) { .msc-homerow__media img { height: 180px; } }

/* ===========================================================================
   October 2026 review pass
   ======================================================================== */

/* Phones were inflating long paragraphs on their own (16px rendered as 20px),
   which made every declared size a suggestion. Sizes are ours to set. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* --- Newsletter: field and button no longer collide ------------------------
   EveryAction's form carries clearfix pseudo-elements and an empty leading
   div. As grid items those took the first cells, so the field landed in a
   110px column and its fixed 200px input slid under the button. Remove the
   phantom items, let the field take the free space, and cap the button so its
   bilingual label wraps onto two lines instead of demanding 400px. Below
   1100px the column is too narrow for both, so the form stacks. */
.msc-newsletter-form .at-inner form::before,
.msc-newsletter-form .at-inner form::after,
.msc-newsletter-form .at-inner form > div:empty { display: none; }
.msc-newsletter-form .at-inner form { display: block; }
.msc-newsletter-form .at-fields,
.msc-newsletter-form .at-row,
.msc-newsletter-form .at-row > label { width: 100% !important; max-width: none !important; float: none !important; }
.msc-newsletter-form label.at-text.EmailAddress input { width: 100% !important; box-sizing: border-box; }
.msc-newsletter-form .at-form-submit { margin-top: 18px; }
.msc-newsletter-form .at-form-submit input.at-submit { float: none !important; width: 100% !important; }
.msc-newsletter .msc-newsletter-form .at-inner form { padding: 0; }
@media (min-width: 1100px) {
	.msc-newsletter-form .at-inner form {
		display: grid;
		grid-template-columns: minmax(0, 1fr) fit-content(250px);
		column-gap: 32px;
		align-items: end;
	}
	.msc-newsletter-form .at-form-submit { margin-top: 0; }
}

/* --- Page header band -------------------------------------------------------
   Inner pages opened on a bare black title. This is the band every page now
   starts with, and the same block staff get from the "Page header" pattern. */
/* The no-sideways-scroll rule caps full-width groups at 100%, which inside a
   padded <main> stops a band short of the right edge. Inside main, a full band
   is allowed its root-padding bleed. */
main.has-global-padding > .wp-block-group.alignfull,
main.has-global-padding > .entry-content > .wp-block-group.alignfull { max-width: none; }
.msc-pagehead { border-bottom: 6px solid var(--wp--preset--color--black); }
.msc-pagehead h1 { margin-top: 0; margin-bottom: 0; }
.msc-pagehead p { margin-top: 14px; margin-bottom: 0; }
.msc-pagehead--violet h1,
.msc-pagehead--violet p,
.msc-pagehead--black h1,
.msc-pagehead--black p { color: #fff; }
@media (max-width: 760px) {
	.msc-pagehead h1 { font-size: 40px !important; line-height: 40px !important; }
}
/* Pages whose content is plain paragraphs (privacy policy) need air under the
   band; pages built from padded sections bring their own. */
.msc-page-body > :first-child:not(.wp-block-group):not(.alignfull) { margin-top: var(--wp--preset--spacing--50); }
.msc-page-body > :last-child:not(.wp-block-group):not(.alignfull) { margin-bottom: var(--wp--preset--spacing--50); }

/* --- Hero: the words win ----------------------------------------------------
   A flat 70% wash left faces directly behind the headline. A directional wash
   is near-solid behind the text and opens up toward the far side, so the
   photo still reads as a crowd. On a phone the text spans the full width, so
   the wash runs top to bottom instead. */
.msc-hero .wp-block-cover__background {
	opacity: 1 !important;
	background: linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.78) 42%, rgba(0,0,0,.38) 100%) !important;
}
@media (max-width: 760px) {
	.msc-hero .wp-block-cover__background {
		background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.84) 45%, rgba(0,0,0,.84) 100%) !important;
	}
	.msc-hero { padding-top: 72px !important; padding-bottom: 64px !important; min-height: 0 !important; }
	.msc-hero .msc-hero__lede { font-size: 17px !important; }
}

/* --- Homepage on a phone ----------------------------------------------------
   Each listing row stacked a full-width image over its text, so four
   resources ran to seven screens and pushed the podcasts out of reach. Rows
   stay side by side with a small thumbnail, and the two podcast cards sit as
   a pair. */
@media (max-width: 781px) {
	/* Core stacks columns with a higher-specificity !important flex-basis, so
	   these have to out-rank it rather than merely follow it. */
	.wp-block-columns.msc-homerow:not(.is-not-stacked-on-mobile) { flex-wrap: nowrap !important; gap: 16px; align-items: flex-start; }
	.wp-block-columns.msc-homerow:not(.is-not-stacked-on-mobile) > .wp-block-column.msc-homerow__media { flex: 0 0 96px !important; }
	.wp-block-columns.msc-homerow:not(.is-not-stacked-on-mobile) > .wp-block-column:not(.msc-homerow__media) { flex: 1 1 0 !important; min-width: 0; }
	.msc-homerow__media img { height: 96px; }
	.msc-homerow .wp-block-post-title { font-size: 22px !important; }
	/* the blurb goes only where a thumbnail is doing its job */
	.msc-homerow:has(.msc-homerow__media img) .wp-block-post-excerpt { display: none; }
	.msc-row:has(.msc-homerow) { margin-bottom: 22px; padding-bottom: 22px; }

	.wp-block-column:has(> .msc-podcast) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 14px;
		align-items: stretch;
	}
	.wp-block-column:has(> .msc-podcast) > .msc-podcast {
		display: flex;
		flex-direction: column;
		margin: 0;
		padding: 14px;
	}
	.msc-podcast .msc-podcast__title { font-size: 24px !important; margin-top: 12px; }
	.msc-podcast .msc-podcast__tagline { font-size: 13px; line-height: 16px; padding: 10px 0; }
	.msc-podcast .wp-block-buttons { margin-top: auto; }
	.msc-podcast .wp-element-button { margin-top: 8px; font-size: 14px; padding: 8px 10px; }
}

/* --- Footer email -----------------------------------------------------------
   The address broke mid-word ("...committee.co / m"). It now breaks only at
   the <wbr> after the @, and only when it has to. */
.msc-footer__email { font-size: 16px; }
.msc-footer__email a { overflow-wrap: normal; word-break: normal; }

/* --- Mobile menu ------------------------------------------------------------
   Five links floated top-right in an otherwise empty black screen. They are
   now set large and left, with Donate as the button it is everywhere else. */
.msc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	padding-top: 72px;
}
.msc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
	gap: 22px;
	width: 100%;
}
.msc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 38px;
	line-height: 1;
	letter-spacing: 1px;
}
.msc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child {
	margin-top: 18px;
	width: 100%;
}
.msc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: var(--wp--preset--color--pink);
	color: #fff;
	text-align: center;
	font-size: 26px;
	padding: 16px 20px;
}

/* --- Article ----------------------------------------------------------------
   Single posts: a header band with category, title, byline and date; a
   reading column; then tags, share links and three related posts. */
.msc-article__meta { color: #4a4654; font-size: 15px; letter-spacing: .04em; }
.msc-article__meta p,
.msc-article__meta .wp-block-post-date { margin: 0; font-size: 15px; }
.msc-byline:empty { display: none; }
.msc-byline:not(:empty)::after { content: "\00b7"; margin-left: 10px; }
.msc-article__body { font-size: 18px; line-height: 1.75; }
.msc-article__body h2, .msc-article__body h3, .msc-article__body h4 { margin-top: 1.9em; margin-bottom: .5em; }
.msc-article__body h4 { font-size: 24px; line-height: 1.1; letter-spacing: .5px; }
.msc-article__body blockquote {
	margin: 2em 0;
	padding: 4px 0 4px 22px;
	border-left: 6px solid var(--wp--preset--color--pink);
	font-family: var(--wp--preset--font-family--display);
	font-size: 26px;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--wp--preset--color--black);
}
.msc-article__body img, .msc-article__body iframe { max-width: 100%; }
@media (max-width: 760px) {
	.msc-article__title { font-size: 36px !important; line-height: 37px !important; }
	.msc-article__body { font-size: 17px; line-height: 1.65; }
	.msc-article__body h4 { font-size: 21px; }
	.msc-article__body blockquote { font-size: 22px; padding-left: 16px; }
}

.msc-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	border-top: 3px solid var(--wp--preset--color--black);
	margin-top: var(--wp--preset--spacing--40);
	padding-top: 20px;
}
.msc-share__label {
	font-family: var(--wp--preset--font-family--display);
	font-size: 18px;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	color: var(--wp--preset--color--black);
	margin-right: 6px;
}
.msc-share a,
.msc-share button {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--black);
	background: transparent;
	border: 2px solid var(--wp--preset--color--black);
	border-radius: 0;
	padding: 9px 12px 8px;
	cursor: pointer;
}
.msc-share a:hover,
.msc-share button:hover { background: var(--wp--preset--color--black); color: #fff; }

.msc-related { margin-top: var(--wp--preset--spacing--50); }
.msc-related__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}
.msc-related__item a { display: block; text-decoration: none; color: var(--wp--preset--color--black); }
.msc-related__item img {
	display: block;
	width: 100%;
	aspect-ratio: 12 / 7;
	height: auto;
	object-fit: cover;
	background: var(--wp--preset--color--off-white);
	margin-bottom: 12px;
}
.msc-related__title {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 22px;
	line-height: 1.08;
	letter-spacing: .5px;
	text-transform: uppercase;
	margin: 0;
}
.msc-related__item a:hover .msc-related__title { color: var(--wp--preset--color--pink); }
@media (max-width: 760px) {
	.msc-related__grid { grid-template-columns: 1fr; gap: 18px; }
	.msc-related__item a { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; }
	.msc-related__item img { aspect-ratio: 1 / 1; margin: 0; }
	.msc-related__title { font-size: 20px; }
}

/* --- Staff patterns ---------------------------------------------------------
   Sections staff can drop into any page: a call-to-action band, text beside a
   photo, a three-card row and a pull quote. */
.msc-cta h2, .msc-cta p { color: #fff; }
.msc-cta--gold h2, .msc-cta--gold p { color: var(--wp--preset--color--black); }
.msc-cta h2 { margin: 0; }
.msc-split__media img { display: block; width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.msc-tile { border-top: 6px solid var(--wp--preset--color--black); padding-top: 18px; height: 100%; }
.msc-tile h3 { margin: 0 0 10px; }
.msc-quote {
	border-left: 8px solid var(--wp--preset--color--pink);
	padding-left: 26px;
}
.msc-quote p { color: var(--wp--preset--color--black); }

/* The EveryAction script now loads when its form nears the viewport, so the
   slot is held open to stop the page jumping when the form arrives. */
.msc-newsletter-form .ngp-form:empty { min-height: 130px; }

/* --- Our Copa card ------------------------------------------------------------
   The gold-and-mortar treatment belongs to La Cura alone. Our Copa gets the
   violet, no texture, so the two cards read as siblings rather than twins. */
.msc-podcast--copa {
	background-color: var(--wp--preset--color--violet);
	background-image: none;
}
.msc-podcast--copa .msc-podcast__title,
.msc-podcast--copa .msc-podcast__tagline { color: #fff; }
.msc-podcast--copa .wp-element-button:hover { background: #fff; color: var(--wp--preset--color--black); }

/* Placeholder featured images are photographs, so they fill like any photo.
   On a resource card they would otherwise be letterboxed as a document. */
.msc-rescard__cover img.msc-placeholder { object-fit: cover; }

/* ===========================================================================
   October 2026: the live look
   White pages, ruled title-boxes, the live listing patterns, Big Shoulders
   Display for everything below the H1. Measurements are the live stylesheet's.
   ======================================================================== */

/* --- Antarctican for chips, buttons and the menu too ------------------------ */
.msc-chip, .msc-chip a, .msc-chips .wp-block-post-terms a,
.msc-btn-outline .wp-element-button, a.msc-btn-outline,
.msc-btn-solid .wp-element-button, .msc-btn-invert .wp-block-button__link,
.msc-rescard__cta .wp-block-button__link, .msc-action--link .wp-element-button, .msc-action--file .wp-element-button,
.msc-search button[type="submit"], .msc-podcast .wp-element-button, .msc-podcast a.msc-btn,
.msc-btn-large .wp-element-button, .msc-btn-large .wp-block-button__link, .wp-block-button__link,
.msc-header .wp-block-navigation a {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
}
.msc-title, .msc-related__title, .msc-card3__title, .msc-card2__title, .msc-campaign__title, .msc-404__code,
.msc-share a, .msc-share button, .msc-share__label {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
}
/* Chip and menu sizes, set for Antarctican. */
.msc-chip, .msc-chip a, .msc-chips .wp-block-post-terms a { font-size: 18px; line-height: 18px; letter-spacing: 1.3px; padding: 6px 8px; }
.msc-header .wp-block-navigation a { font-size: 28px; letter-spacing: 1.2px; }
.msc-footer__wordmark a { font-family: var(--wp--preset--font-family--display); }

/* --- Section rhythm ------------------------------------------------------- */
/* .msc-sec relies on WordPress's root padding for its gutters. */
.msc-sec--head .msc-title-box { margin-bottom: 0; }
@media (max-width: 991px) { .msc-sec--head { padding-top: 20px !important; } }
.msc-title-box .msc-h1, .msc-title-box h1 {
	font-family: var(--wp--preset--font-family--display);
	font-size: 52px; line-height: 50px; letter-spacing: 1px; text-transform: uppercase; margin: 0;
}
.msc-title-box .msc-title, .msc-title { font-size: 24px; line-height: 1.1; letter-spacing: .5px; text-transform: uppercase; margin: 0; color: #000; }
@media (max-width: 767px) { .msc-title-box .msc-h1, .msc-title-box h1 { font-size: 36px; line-height: 37px; } }
.msc-archive-desc { margin-top: 20px; font-size: 17px; line-height: 1.65; max-width: 60ch; }

/* --- Detail pages: chip, title, lede, meta, wide image, narrow body ------- */
.msc-detail__lede { color: var(--wp--preset--color--body-gray); }
.msc-meta, .msc-meta p, .msc-meta .wp-block-post-date { font-size: 15px; letter-spacing: .04em; color: #4a4654; margin: 0; }
.msc-meta .msc-byline { font-style: italic; }
.msc-detail__media img { display: block; width: 100%; height: auto; }
.msc-detail__media .wp-block-post-featured-image { margin: 0; }
.msc-detail__media:not(:has(img)) { display: none; }
.msc-article__body { font-size: 16px; line-height: 27px; letter-spacing: .02em; color: var(--wp--preset--color--body-gray); text-align: left; }
.msc-article__body p { margin-bottom: 15px; }
.msc-article__body h2, .msc-article__body h3, .msc-article__body h4 { color: #000; margin-top: 1.6em; margin-bottom: .4em; }
.msc-article__body ul, .msc-article__body ol { padding-left: 40px; margin: 0 0 15px; }
.msc-article__body li { margin-bottom: 5px; }
.msc-article__body figure { margin: 25px 0; }
.msc-article__body blockquote {
	margin: 25px 0; padding: 10px 20px; border-left: 5px solid #e2e2e2;
	font-family: var(--wp--preset--font-family--body); font-style: italic; font-size: 19px; line-height: 30px;
	text-transform: none; letter-spacing: 0; color: #6b6b6b;
}
.msc-article__body a { color: var(--wp--preset--color--pink); font-weight: 600; }
@media (max-width: 767px) { .msc-article__body { font-size: 16px; line-height: 26px; } }

/* "Tags:" as a text line, the live way */
.msc-tagline__label, .msc-tags-text a { font-family: var(--wp--preset--font-family--body); font-style: italic; font-size: 15px; letter-spacing: 1px; margin: 0; color: #4a4654; }
.msc-tags-text a { color: var(--wp--preset--color--pink); text-decoration: none; font-weight: 600; margin-right: 10px; }
.msc-tags-text a:hover { color: #000; }

/* The apply form sits in the reading column, after the text, with no frame. */
.msc-applybox { border-top: 0; margin-top: 30px; padding-top: 0; }
.msc-applybox .msc-action--form { max-width: none; }

/* --- Latest entries + back button ----------------------------------------- */
.msc-latest { padding-top: 25px; padding-bottom: 50px; max-width: 1170px; margin: 0 auto; }
.msc-cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 2%; margin-bottom: 40px; }
.msc-card3__media { display: block; position: relative; overflow: hidden; background: var(--wp--preset--color--off-white); aspect-ratio: 16 / 10; }
.msc-card3__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.msc-card3__media::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.1); }
.msc-card3:hover .msc-card3__media img { transform: scale(1.03); }
.msc-card3 .msc-chips { margin: 10px 0; }
.msc-card3__title { display: block; font-size: 22px; line-height: 1.15; letter-spacing: .5px; text-transform: uppercase; color: #000; text-decoration: none; }
.msc-card3__title:hover { opacity: .85; }
.msc-center { text-align: center; }
.msc-btn-large .wp-element-button, .msc-btn-large .wp-block-button__link {
	display: inline-block; min-width: 360px; padding: 15px 24px 13px; background: #000; color: #fff; border: 2px solid #000;
	font-size: 16px; line-height: 24px; letter-spacing: 1.2px;
	text-transform: uppercase; text-decoration: none; text-align: center; border-radius: 0; transition: color .2s, background-color .2s;
}
.msc-btn-large .wp-element-button:hover, .msc-btn-large .wp-block-button__link:hover { background: transparent; color: #000; }
@media (max-width: 767px) { .msc-cards3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 479px) { .msc-cards3 { grid-template-columns: 1fr; } .msc-btn-large .wp-element-button, .msc-btn-large .wp-block-button__link { min-width: 100%; } }

/* --- Two-up cards (category, tag, opportunities, resources) --------------- */
.msc-cards2 { gap: 40px 2% !important; }
.msc-card2__media { margin: 0; position: relative; overflow: hidden; background: var(--wp--preset--color--off-white); }
.msc-card2__media img { display: block; width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; }
.msc-card2__media::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.1); pointer-events: none; }
.msc-card2__title a { color: #000; text-decoration: none; }
.msc-card2__title a:hover { opacity: .85; }
.msc-readmore a, a.msc-readmore {
	font-family: var(--wp--preset--font-family--body); font-style: italic; font-weight: 400; font-size: 16px;
	letter-spacing: 1px; text-transform: none; color: #6b6b6b; border: 0; padding: 0;
}
.msc-readmore a:hover, a.msc-readmore:hover { color: #000; opacity: .8; }

/* --- 50/50 rows on the home page ----------------------------------------- */
.msc-row50 { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid #000; }
.msc-row50:last-of-type { border-bottom: 0; }
.msc-row50 .wp-block-post-featured-image { margin: 0; position: relative; overflow: hidden; }
.msc-row50 .wp-block-post-featured-image img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; }
.msc-row50 .wp-block-post-featured-image::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.1); pointer-events: none; }
.msc-row50 .wp-block-post-title a { color: #000; text-decoration: none; }
.msc-row50 .wp-block-post-title a:hover { color: var(--wp--preset--color--gold); opacity: .85; }
.msc-row50 .wp-block-post-excerpt__excerpt { margin: 0; }
.msc-getinvolved a, .msc-getinvolved { display: inline-block; font-family: var(--wp--preset--font-family--display); font-weight: 800; font-style: normal; font-size: 14px; line-height: 1.5; letter-spacing: 1.3px; text-transform: uppercase; padding: 10px 21px; border-radius: 0; background: #000; color: #fff; text-decoration: none; }
.msc-getinvolved a:hover { background: var(--wp--preset--color--pink); color: #fff; }
.msc-seeall { padding: 0; margin: 10px 0 50px; }
.msc-seeall--last { margin-bottom: 0; }

/* --- Sidebar ---------------------------------------------------------------- */
.msc-side .msc-podcast { margin-bottom: 50px; }
.msc-side__list .msc-sideitem { border-bottom: 1px solid #000; margin-bottom: 24px; padding-bottom: 24px; }
.msc-side__list .msc-sideitem:last-of-type { border-bottom: 0; }
.msc-sideitem .wp-block-post-featured-image { margin: 0 0 12px; }
.msc-sideitem .wp-block-post-featured-image img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.msc-sideitem .wp-block-post-title { margin: 0 0 10px; }
.msc-sideitem .wp-block-post-title a { color: #000; text-decoration: none; }
.msc-sideitem .wp-block-post-title a:hover { color: var(--wp--preset--color--pink); }
@media (max-width: 991px) { .msc-main-cols { flex-direction: column; } }

/* --- Category colours (live: Solidarity gold, Organizing turquoise, Healing pink) --- */
.msc-chips .msc-chip--cat a, .msc-chip--cat a, a.msc-chip--cat { background: #000; color: #fff; }
.msc-chips a.msc-cat--solidarity, a.msc-cat--solidarity { background: var(--wp--preset--color--gold); color: #000; }
.msc-chips a.msc-cat--organizing, a.msc-cat--organizing { background: var(--wp--preset--color--turquoise); color: #00201f; }
.msc-chips a.msc-cat--healing, a.msc-cat--healing { background: #075134; color: #fff; }
.msc-chips a.msc-cat--policy-advocacy, a.msc-cat--policy-advocacy { background: var(--wp--preset--color--violet); color: #fff; }
.msc-chips a.msc-cat--training, a.msc-cat--training { background: #f24244; color: #fff; }

/* --- Campaign hero on tag pages ------------------------------------------- */
.msc-campaign-hero {
	position: relative; min-height: 420px; display: flex; align-items: flex-end;
	background: #000 center / cover no-repeat; padding: 50px 40px; color: #fff;
}
.msc-campaign-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.78)); }
.msc-campaign-hero__inner { position: relative; max-width: 720px; }
.msc-campaign-hero h1 { font-family: var(--wp--preset--font-family--display); color: #fff; font-size: 52px; line-height: 50px; letter-spacing: 1px; text-transform: uppercase; margin: 0 0 14px; }
.msc-campaign-hero__desc, .msc-campaign-hero__desc p { color: #fff; font-size: 17px; line-height: 1.65; margin: 0; }
.msc-sec--head:has(.msc-campaign-hero) + .msc-sec { padding-top: 50px !important; }
@media (max-width: 767px) { .msc-campaign-hero { padding: 30px 20px; min-height: 320px; } .msc-campaign-hero h1 { font-size: 36px; line-height: 37px; } }

/* --- Newsletter CTA band (above the footer on every page) ----------------- */
.msc-newsletter .msc-cta__title { font-family: var(--wp--preset--font-family--display); font-size: 42px; line-height: 1; letter-spacing: 1px; text-transform: uppercase; margin: 0 0 24px; }
.msc-newsletter .msc-newsletter-form .at-inner form { background: #fff; padding: 24px; }
.msc-newsletter .msc-newsletter-form .ngp-form:empty { background: #fff; }
@media (max-width: 767px) { .msc-newsletter .msc-cta__title { font-size: 32px; } }

/* --- EveryAction forms, branded ------------------------------------------- */
.msc-action--form .at, .msc-action--form .ngp-form { max-width: none; }
.msc-action--form .at-title, .msc-action--form header.at-title { display: none; }
.msc-action--form .at-inner form { background: var(--wp--preset--color--off-white); padding: 32px; border-top: 3px solid #000; }
.msc-action--form .at legend, .msc-action--form .at .at-legend, .msc-action--form .at h3, .msc-action--form .at h4,
.msc-action--form .at .at-markup h2, .msc-action--form .at .at-markup h3 {
	font-family: var(--wp--preset--font-family--compressed) !important; font-weight: 700 !important; font-size: 24px !important;
	letter-spacing: 1px; text-transform: uppercase; color: #000 !important; text-align: left !important; margin: 18px 0 10px !important;
}
.msc-action--form .at label { font-family: var(--wp--preset--font-family--body) !important; font-size: 14px !important; letter-spacing: .04em; color: #000 !important; }
.msc-action--form .at input[type="text"], .msc-action--form .at input[type="email"], .msc-action--form .at input[type="tel"],
.msc-action--form .at input[type="number"], .msc-action--form .at select, .msc-action--form .at textarea {
	border: 2px solid #000 !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important;
	font-family: var(--wp--preset--font-family--body) !important; font-size: 15px !important; padding: 10px 12px !important; color: #000 !important;
}
.msc-action--form .at input:focus, .msc-action--form .at select:focus, .msc-action--form .at textarea:focus { border-color: var(--wp--preset--color--turquoise) !important; outline: 0; }
.msc-action--form .at input.at-submit, .msc-action--form .at .at-form-submit input {
	background: var(--wp--preset--color--pink) !important; color: #fff !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
	font-family: var(--wp--preset--font-family--compressed) !important; font-weight: 700 !important; font-size: 16px !important; letter-spacing: 1.3px !important;
	text-transform: uppercase !important; padding: 14px 28px !important; min-width: 220px;
}
.msc-action--form .at input.at-submit:hover { background: #000 !important; }
.msc-action--form .at .fastaction, .msc-action--form .at .at-fastaction, .msc-action--form .at .FastActionTooltip, .msc-action--form .at .at-text .at-fastaction-login { display: none !important; }

/* --- La Cura page ---------------------------------------------------------- */
.msc-cura-top { background: var(--wp--preset--color--gold) url("assets/img/spiral-texture.svg") 0 0 / cover repeat; }
.msc-cura-top .msc-title-box { border-bottom-color: #000; }
.msc-cura-top img { display: block; margin: 0 auto; max-width: 420px; width: 100%; height: auto; }
.msc-copa-top { background-color: var(--wp--preset--color--violet); background-image: none; }
.msc-copa-top h1, .msc-copa-top p, .msc-copa-top .msc-cura__tagline { color: #fff; }
.msc-team-row .is-style-rounded img { border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; }
.msc-cura-top .msc-cura__tagline { font-family: var(--wp--preset--font-family--script); font-size: 22px; line-height: 1.2; text-transform: uppercase; color: var(--wp--preset--color--violet); margin: 0; }
.msc-cura-main { background: var(--wp--preset--color--violet); color: #fff; }
.msc-cura-main .msc-title-box { border-bottom-color: #fff; }
.msc-cura-main .msc-title, .msc-cura-main h2, .msc-cura-main h3, .msc-cura-main p, .msc-cura-main .wp-block-post-title a, .msc-cura-main .wp-block-post-excerpt { color: #fff; }
.msc-cura-main .msc-title.msc-title--script { font-family: var(--wp--preset--font-family--script); font-weight: 400; font-size: 26px; }
.msc-cura-main a { color: var(--wp--preset--color--gold); }
.msc-cura-main a:hover { color: var(--wp--preset--color--pink); }
.msc-cura-main .wp-block-post-title a:hover { color: var(--wp--preset--color--gold); }
.msc-cura-main .msc-action--audio audio { width: 100%; filter: invert(1) hue-rotate(180deg); }
.msc-cura-main .msc-epmini { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; margin-bottom: 16px; }
.msc-cura-main .msc-epmini .wp-block-post-featured-image { margin: 0; }
.msc-cura-main .msc-epmini img { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: 50%; }
.msc-cura-main .msc-epmini .wp-block-post-title { margin: 0; font-family: var(--wp--preset--font-family--body); font-weight: 400; font-size: 16px; line-height: 1.3; text-transform: none; letter-spacing: 0; }
.msc-cura-main .msc-epmini .wp-block-post-title a { color: var(--wp--preset--color--gold); }
.msc-cura-main .msc-listen a { font-family: var(--wp--preset--font-family--body); font-style: italic; font-size: 14px; letter-spacing: 1px; color: var(--wp--preset--color--gold); text-decoration: none; }
.msc-cura-main .msc-btn-outline .wp-element-button { background: var(--wp--preset--color--pink); color: #fff; border-color: var(--wp--preset--color--pink); width: 100%; }
.msc-cura-main .msc-btn-outline .wp-element-button:hover { background: #000; border-color: #000; }
.msc-cura-team { background: #fff; }
.msc-cura-team .msc-team__title { font-family: var(--wp--preset--font-family--display); font-size: 84px; line-height: 82px; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 60px; }
.msc-team-row { align-items: center; }
.msc-team-row img { display: block; width: 100%; height: auto; }
.msc-team-row h2 { font-size: 32px; line-height: 1.1; margin: 0 0 14px; }
.msc-team-row p { font-size: 16px; line-height: 27px; }
.msc-cura-follow { background: var(--wp--preset--color--gold) url("assets/img/spiral-texture.svg") 0 0 / cover repeat; text-align: center; }
.msc-cura-follow h2 { font-family: var(--wp--preset--font-family--display); font-size: 42px; margin: 0 0 10px; }
.msc-cura-follow a.msc-ig { font-family: var(--wp--preset--font-family--compressed); font-weight: 700; font-size: 32px; letter-spacing: 1px; color: var(--wp--preset--color--pink); text-decoration: none; }
.msc-cura-follow a.msc-ig:hover { color: #000; }
@media (max-width: 767px) { .msc-cura-team .msc-team__title { font-size: 42px; line-height: 44px; margin-bottom: 30px; } }

/* --- 404 ------------------------------------------------------------------- */
.msc-404__code { font-size: 120px; line-height: 1; letter-spacing: 4px; color: var(--wp--preset--color--pink); margin: 0 0 10px; }

/* --- Page bodies that are plain text (privacy) ----------------------------- */
.msc-page-body .msc-sec--narrow p { font-size: 16px; line-height: 27px; }
.msc-page-body .msc-sec--narrow h2 { font-size: 32px; margin-top: 1.6em; }
.msc-page-body .msc-sec--narrow h3 { font-size: 24px; margin-top: 1.4em; }

/* --- Retire what the live look replaces ------------------------------------ */
.msc-newsletter.alignfull { margin-top: 0; }
.msc-share, .msc-related { display: none; }

/* La Cura episode list: left-aligned, small, gold "Listen now" */
.msc-epmini .wp-block-group, .msc-epmini .wp-block-post-title, .msc-epmini .msc-listen { text-align: left; margin-left: 0; }
.msc-epmini .wp-block-post-title a { font-size: 16px; }
.msc-epmini, .msc-epmini * { text-align: left; }
.msc-cura-main .msc-latest-ep.wp-block-group { display: grid; }
.msc-cura-main .msc-latest-ep > * { margin-left: 0; margin-right: 0; max-width: none; }
.msc-cura-main a.msc-listen, .msc-cura-main .msc-listen a { font-family: var(--wp--preset--font-family--body); font-style: italic; font-size: 14px; letter-spacing: 1px; color: var(--wp--preset--color--gold); text-decoration: none; display: inline-block; margin-top: 4px; }
.msc-cura-main a.msc-listen:hover, .msc-cura-main .msc-listen a:hover { color: var(--wp--preset--color--pink); }

/* Sidebar on a phone: only the two podcast cards pair up; the Latest posts
   list and its button keep the full width. */
@media (max-width: 781px) {
	.wp-block-column:has(> .msc-podcast) > .msc-title-box,
	.wp-block-column:has(> .msc-podcast) > .msc-side__list,
	.wp-block-column:has(> .msc-podcast) > .wp-block-buttons { grid-column: 1 / -1; }
	.wp-block-column:has(> .msc-podcast) > .msc-podcast { margin-bottom: 20px; }
}

/* EveryAction's own header markup (share icons) has no place in the band. */
.msc-newsletter-form .HeaderHtml, .msc-newsletter-form .at-markup.HeaderHtml, .msc-newsletter-form header.at-title,
.msc-newsletter-form .at-markup img, .msc-newsletter-form .at-share { display: none !important; }

/* La Cura latest episode: art beside the text, not above it */
.msc-cura-main .msc-latest-ep { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.msc-cura-main .msc-latest-ep .wp-block-post-featured-image { margin: 0; }
.msc-cura-main .msc-latest-ep img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
@media (max-width: 600px) { .msc-cura-main .msc-latest-ep { grid-template-columns: 1fr; } .msc-cura-main .msc-latest-ep img { max-width: 220px; } }
/* The constrained inner group centres its children with auto margins; the
   episode rows need everything pinned to the left edge of the text column. */
.msc-epmini { justify-items: start; }
.msc-epmini .wp-block-group > * { margin-left: 0 !important; margin-right: 0 !important; width: 100%; }
.msc-epmini .wp-block-group { width: 100%; }

/* --- Blog landing: sidebar category chips + tag list, and hide an empty Tags line --- */
ul.msc-side-cats, .msc-side-cats ul { list-style: none; margin: 0 0 40px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.msc-side-cats li { margin: 0; }
.msc-side-cats a { display: inline-block; font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 18px; line-height: 18px; letter-spacing: 1.3px; text-transform: uppercase; padding: 6px 8px; background: #000; color: #fff; text-decoration: none; }
.msc-side-cats a:hover { opacity: .85; }
.msc-side-tags { margin: 0 0 40px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.msc-side-tags a { font-family: var(--wp--preset--font-family--body); font-size: 16px !important; color: #4a4654; text-decoration: none; }
.msc-side-tags a:hover { color: var(--wp--preset--color--pink); }
.msc-tagline:not(:has(.wp-block-post-terms a)) { display: none; }

/* Category chip colours, as on the live site (matched by link, so they work in every listing) */
.msc-chip--cat a[href*="/category/healing/"], .msc-chips .msc-chip--cat a[href*="/category/healing/"], .msc-side-cats a[href*="/category/healing/"] { background: #075134; color: #fff; }
.msc-chip--cat a[href*="/category/toolkit/"], .msc-chips .msc-chip--cat a[href*="/category/toolkit/"], .msc-side-cats a[href*="/category/toolkit/"] { background: #000; color: #fff; }
.msc-chip--cat a[href*="/category/solidarity/"], .msc-chips .msc-chip--cat a[href*="/category/solidarity/"], .msc-side-cats a[href*="/category/solidarity/"] { background: #ffd703; color: #000; }
.msc-chip--cat a[href*="/category/policy-advocacy/"], .msc-chips .msc-chip--cat a[href*="/category/policy-advocacy/"], .msc-side-cats a[href*="/category/policy-advocacy/"] { background: #4228ad; color: #fff; }
.msc-chip--cat a[href*="/category/workshops/"], .msc-chips .msc-chip--cat a[href*="/category/workshops/"], .msc-side-cats a[href*="/category/workshops/"] { background: #ff007a; color: #fff; }
.msc-chip--cat a[href*="/category/organizing/"], .msc-chips .msc-chip--cat a[href*="/category/organizing/"], .msc-side-cats a[href*="/category/organizing/"] { background: #00c3c1; color: #000; }
.msc-chip--cat a[href*="/category/immigration/"], .msc-chips .msc-chip--cat a[href*="/category/immigration/"], .msc-side-cats a[href*="/category/immigration/"] { background: #f24244; color: #fff; }
/* Training has no colour on the live site; it takes the retired Immigration red (Amanda, 2026-10-13). */
.msc-chip--cat a[href*="/category/training/"], .msc-chips .msc-chip--cat a[href*="/category/training/"], .msc-side-cats a[href*="/category/training/"] { background: #f24244; color: #fff; }

/* --- Footer, live-site layout (2026-10-13) --------------------------------
   Matches the Webflow footer: wordmark and socials on the left, the sitemap as
   three short columns of grey caps on the right, the Casa Blue credit on its
   own row underneath. The sitemap is one Navigation block flowed into columns
   of three, so staff reorder links in one place. */
.msc-footer__cols { margin-bottom: 40px; }
.msc-footer .wp-block-social-links { margin-block: 28px 0; gap: 18px; }
.msc-footer .wp-block-social-links .wp-social-link { margin: 0; }
.msc-footer .wp-block-social-links .wp-social-link a { padding: 0; }
.msc-footer .wp-block-social-links .wp-social-link svg { width: 20px; height: 20px; }
.msc-footer .wp-block-social-links .wp-social-link:hover { transform: none; opacity: .7; }

.msc-footer__nav .wp-block-navigation,
.msc-footer__nav .wp-block-navigation__container { width: 100%; }
.msc-footer__nav .wp-block-navigation__container {
	display: grid;
	grid-template-rows: repeat(3, auto);
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 14px 32px;
	align-items: start;
}
.msc-footer__nav .wp-block-navigation-item__content { color: #93979f; }
.msc-footer__nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--pink); }

.msc-footer__credit {
	display: flex; align-items: center; gap: 6px;
	margin: 0; color: #93979f; font-size: 16px; letter-spacing: 1px;
}
.msc-footer__credit a { color: inherit; text-decoration: none; font-weight: 400; }
.msc-footer__credit a:hover { color: var(--wp--preset--color--pink); }
.msc-footer__cb { display: flex; align-items: center; padding-right: 4px; opacity: .7; }
.msc-footer__cb img { display: block; width: 22px; height: 22px; }

@media (max-width: 781px) {
	.msc-footer__nav .wp-block-navigation__container {
		grid-template-rows: none; grid-auto-flow: row;
		grid-template-columns: 1fr 1fr; gap: 12px 24px;
	}
}

/* --- Detail-page featured image (2026-10-13) ------------------------------
   The image used to run the full 1170px, wider than the text and upscaled past
   its real size. It now sits in the 940px text column, is never enlarged, and
   a tall image is held to 560px so the article starts on the first screen. */
.msc-detail__media > .wp-block-post-featured-image { max-width: 940px; }
.msc-detail__media img { width: auto; max-width: 100%; max-height: 560px; }