/**
 * Meredith Masony — component styles.
 *
 * Design tokens live in theme.json. This file styles the things the block
 * editor has no vocabulary for: the hero split, the show rows, the plugin
 * slots and the Klaviyo skin.
 */

:root {
	/* Apple Podcasts mark, knocked out of a rounded tile so it sits with the
	   core brand icons. Swap this URL for Apple's official badge art anytime. */
	--mm-group-mark: url( "../images/mm-group-face.png?v=2" );
	--mm-apple-mark: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22evenodd%22%20d%3D%22M6%201h12a5%205%200%200%201%205%205v12a5%205%200%200%201-5%205H6a5%205%200%200%201-5-5V6a5%205%200%200%201%205-5zM12%205.4a2.55%202.55%200%200%201%202.55%202.55v3.7a2.55%202.55%200%200%201-5.1%200v-3.7A2.55%202.55%200%200%201%2012%205.4zM7.3%2011.1h1.7a3%203%200%200%200%206%200h1.7a4.72%204.72%200%200%201-3.85%204.62V18h-1.7v-2.28A4.72%204.72%200%200%201%207.3%2011.1zM9.2%2019.1h5.6v1.5H9.2z%22%2F%3E%3C%2Fsvg%3E");
	--mm-slate: var( --wp--preset--color--slate, #1E2121 );
	--mm-charcoal: var( --wp--preset--color--charcoal, #141616 );
	--mm-elevated: var( --wp--preset--color--elevated, #2A2E2E );
	--mm-inset: var( --wp--preset--color--inset, #343838 );
	--mm-hairline: var( --wp--preset--color--hairline, #525757 );
	--mm-rule: #383C3C;
	--mm-dim: var( --wp--preset--color--dim, #878D8D );
	--mm-muted: var( --wp--preset--color--muted, #9AA0A0 );
	--mm-body: var( --wp--preset--color--body, #B9BEBE );
	--mm-paper: var( --wp--preset--color--paper, #F6F5F2 );
	--mm-teal: var( --wp--preset--color--teal, #52C4C4 );
	--mm-sand: var( --wp--preset--color--sand, #E29E6F );
	--mm-display: var( --wp--preset--font-family--display, Anton, "Arial Narrow", sans-serif );
	--mm-signature: var( --wp--preset--font-family--signature, Caveat, cursive );
	--mm-frame: 2px solid var( --mm-paper );
	--mm-frame-radius: 14px;
	--mm-font: var( --wp--preset--font-family--body, Archivo, Helvetica, Arial, sans-serif );
	--mm-gutter: clamp( 1.25rem, 4.4vw, 4rem );
}

/* -------------------------------------------------------------------------
 * Baseline
 * ---------------------------------------------------------------------- */

img { max-width: 100%; height: auto; }

.screen-reader-text {
	border: 0;
	clip-path: inset( 50% );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

:where( a, button, input, select, textarea, [tabindex] ):focus-visible {
	outline: 2px solid var( --mm-teal );
	outline-offset: 3px;
}

.mm-icon { flex-shrink: 0; }

/* -------------------------------------------------------------------------
 * Utility bar + header
 * ---------------------------------------------------------------------- */

.mm-utility-bar {
	background: var( --mm-teal );
	color: var( --mm-slate );
	padding-inline: var( --mm-gutter );
	min-height: 46px;
}

.mm-utility-bar a,
.mm-utility-bar .wp-block-paragraph {
	color: var( --mm-slate );
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.3;
}

.mm-utility-bar a:hover,
.mm-utility-bar a:focus {
	color: var( --mm-slate );
	text-decoration: underline;
	text-underline-offset: 4px;
}

.mm-header {
	background: var( --mm-paper );
	color: var( --mm-slate );
	padding-inline: var( --mm-gutter );
	min-height: 78px;
}

.mm-header .wp-block-site-title a,
.mm-header .wp-block-site-title {
	color: var( --mm-slate );
}

.mm-header .wp-block-navigation a,
.mm-utility-bar .wp-block-navigation a {
	color: var( --mm-slate );
}

.mm-utility-bar .wp-block-navigation {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.mm-utility-bar .wp-block-navigation a:hover,
.mm-utility-bar .wp-block-navigation a:focus {
	color: var( --mm-slate );
	box-shadow: inset 0 -2px 0 0 var( --mm-slate );
}

.mm-utility-bar .wp-block-navigation__responsive-container-open { color: var( --mm-slate ); }

.mm-header .wp-block-navigation .current-menu-item a,
.mm-utility-bar .wp-block-navigation .current-menu-item a {
	box-shadow: inset 0 -2px 0 0 var( --mm-slate );
	padding-bottom: 3px;
}

/* The bar stays put while the page scrolls under it. */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Sit below the admin bar when signed in, rather than under it. */
body.admin-bar .wp-site-blocks > header { top: 32px; }

@media screen and ( max-width: 782px ) {
	body.admin-bar .wp-site-blocks > header { top: 46px; }
}

.wp-site-blocks > header.is-scrolled {
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.35 );
}

/* Sticky needs every ancestor to avoid clipping. */
.wp-site-blocks,
.wp-site-blocks > main { overflow: visible; }

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

/* Outer wrapper holds the inset; the grid inside carries the single frame. */
/* The inset just holds the hero off the edges; the frame is the 2px rule. */
.mm-hero-frame {
	padding: var( --mm-hero-inset, 22px );
	background: var( --mm-slate );
}

.mm-hero {
	display: grid;
	grid-template-columns: 604fr 372fr 464fr;
	min-height: 698px;
	background: var( --mm-slate );
	border: var( --mm-frame );
	border-radius: var( --mm-frame-radius );
	overflow: hidden;
}

.mm-hero__photo {
	background: var( --mm-charcoal );
	position: relative;
	overflow: hidden;
}

/* The wordmark, signed into the dark above her shoulder. */
.mm-hero__signature {
	position: absolute;
	left: 5%;
	top: 5%;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 0;
	transform: rotate( -7deg );
	transform-origin: left top;
	pointer-events: none;
}

.mm-hero__signature p {
	margin: 0;
	font-family: var( --mm-signature );
	font-weight: 700;
	font-size: clamp( 1.75rem, 4.3vw, 4.5rem );
	line-height: 0.86;
	letter-spacing: 0.01em;
	color: var( --mm-paper );
	text-shadow: 0 2px 22px rgba( 0, 0, 0, 0.65 );
	text-transform: none;
}

/* Second line steps in, the way a signature does. */
.mm-hero__signature p + p { margin-left: 0.55em; }

/*
 * The photograph is pinned inside its cell rather than sitting in the flow.
 * That way the image's own height can never drive the row height, so all
 * three panels are always exactly as tall as each other and the teal always
 * reaches the frame, top and bottom.
 */
.mm-hero__photo .wp-block-image,
.mm-hero__photo figure {
	position: absolute;
	inset: 0;
	margin: 0;
	display: block;
}

/*
 * The photo sits at its natural scale rather than stretching to the frame.
 * A taller frame therefore reveals more of the source image instead of
 * magnifying her. The source runs out before the frame does, so the last
 * stretch resolves into the charcoal rather than ending on a hard edge.
 */
.mm-hero__photo img {
	display: block;
	position: absolute;
	inset: 0 0 auto 0;
	width: 100%;
	height: auto;
	margin: 0;
}

.mm-hero__photo::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 22%;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgba( 20, 22, 22, 0 ) 0%,
		rgba( 20, 22, 22, 0.55 ) 55%,
		var( --mm-charcoal ) 100%
	);
}

/* Belt and braces: every panel fills the row. */
.mm-hero > * {
	align-self: stretch;
	min-height: 100%;
}

/*
 * WordPress prints layout CSS that gives every block after the first a
 * margin-block-start. In a stacked layout that is the block gap; in this grid
 * it just pushes the teal and social panels down, leaving a strip of slate
 * above them while the photo stays flush. Cancel it on the hero only.
 */
.mm-hero-frame > *,
.mm-hero > *,
.mm-hero > * + *,
.mm-hero__photo > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.mm-hero__panel {
	container-type: inline-size;
	background: var( --mm-teal );
	color: var( --mm-slate );
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.375rem;
	padding: 1.75rem 1.5rem;
}

.mm-hero__panel :is( h1, h2, h3, h4, h5, h6, p ) { color: var( --mm-slate ); }

.mm-hero__title {
	font-family: var( --mm-display );
	/* Fallback for browsers without container queries. */
	font-size: clamp( 2.75rem, 6.4vw, 5.75rem );
	/* Sized against the teal panel itself, so the headline can never overrun it. */
	font-size: clamp( 2.75rem, 31cqw, 8.5rem );
	line-height: 0.86;
	text-transform: uppercase;
	color: var( --mm-slate );
	margin: 0;
}

/* Half the frame's radius — the same language, scaled to a button. */
.mm-hero__panel .wp-block-button__link,
.mm-hero__panel .wp-element-button {
	border-radius: 8px;
}

.mm-hero__eyebrow {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var( --mm-slate );
	margin: 0;
}

.mm-hero__links {
	background: var( --mm-slate );
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.625rem;
	padding: 2.5rem 3.5rem;
}

/* -------------------------------------------------------------------------
 * Social links — core/social-links, restyled
 * ---------------------------------------------------------------------- */

.mm-social-rail.wp-block-social-links {
	/* Each row is two lines now, so it needs more air than a single-line list. */
	gap: 1.9rem 0;
	flex-direction: column;
	align-items: flex-start;
}

/*
 * Core sizes the <li> from the icon-size class at a higher specificity than a
 * single class can beat, which left the 56px bordered anchor overflowing a
 * short box — the bottom border was being clipped off. Match its specificity.
 */
.wp-block-social-links.mm-social-rail .wp-block-social-link {
	background: none !important;
	width: auto;
	height: auto;
	min-height: 0;
	padding: 0;
	margin: 0;
	overflow: visible;
}

.wp-block-social-links.mm-social-row .wp-block-social-link {
	background: none !important;
	padding: 0;
	margin: 0;
	overflow: visible;
}

.mm-social-rail .wp-block-social-link-anchor {
	display: flex;
	align-items: center;
	gap: 1.375rem;
	color: var( --mm-paper );
	min-height: 48px;
	/* Core ships line-height:0 on this anchor. With two stacked lines inside
	   the label that collapses them on top of each other. */
	line-height: 1.15;
}

.mm-social-rail .wp-block-social-link svg {
	width: 40px;
	height: 40px;
	fill: var( --mm-teal );
}

.mm-social-rail .wp-block-social-link-label {
	position: static;
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	white-space: normal;
	font-size: clamp( 1.125rem, 1.6vw, 1.5625rem );
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.1;
}

.mm-social-rail .wp-block-social-link-anchor:hover,
.mm-social-rail .wp-block-social-link-anchor:focus { color: var( --mm-teal ); }

/*
 * Follower counts sit under each name. They are attached here rather than in
 * the page so they apply to the hero that is already on the page, and so one
 * edit updates them everywhere. Order matches the rail: YouTube, Facebook,
 * Instagram, TikTok, Podcast.
 */
.mm-social-rail .wp-block-social-link-label {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 0.15em;
	text-align: left;
}

.mm-social-rail .wp-block-social-link-label::after {
	display: block;
	width: 100%;
	font-size: 0.5em;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.2;
	margin-top: 0.15em;
	/* Letter-spacing eats the word gap; put it back so "91.9K SUBSCRIBERS"
	   reads as two words rather than one. */
	word-spacing: 0.35em;
	text-transform: uppercase;
	color: var( --mm-teal );
	white-space: nowrap;
}

.mm-social-rail .wp-block-social-link:nth-child( 1 ) .wp-block-social-link-label::after { content: "1,400 subscribers"; }
.mm-social-rail .wp-block-social-link:nth-child( 2 ) .wp-block-social-link-label::after { content: "91.9K subscribers"; }
.mm-social-rail .wp-block-social-link:nth-child( 3 ) .wp-block-social-link-label::after { content: "3.5M followers"; }
.mm-social-rail .wp-block-social-link:nth-child( 4 ) .wp-block-social-link-label::after { content: "1.1M followers"; }
.mm-social-rail .wp-block-social-link:nth-child( 5 ) .wp-block-social-link-label::after { content: "607K followers"; }
.mm-social-rail .wp-block-social-link:nth-child( 6 ) .wp-block-social-link-label::after { content: "11M+ listens"; }

/*
 * Fifth item is Apple Podcasts. Core has no Apple Podcasts service, so the
 * block carries service="spotify" for its markup and the mark is swapped here
 * with a mask. To drop in Apple's official badge art later, replace the URL in
 * --mm-apple-mark and nothing else changes.
 */
.mm-social-rail .wp-block-social-link:nth-child( 6 ) svg,
.mm-social-row .wp-block-social-link:nth-child( 5 ) svg { display: none; }

.mm-social-row .wp-block-social-link:nth-child( 5 ) .wp-block-social-link-anchor::before {
	content: "";
	width: 26px;
	height: 26px;
	background: var( --mm-slate );
	-webkit-mask: var( --mm-apple-mark ) center / contain no-repeat;
	mask: var( --mm-apple-mark ) center / contain no-repeat;
}

.mm-social-row .wp-block-social-link:nth-child( 5 ):hover .wp-block-social-link-anchor::before,
.mm-social-row .wp-block-social-link:nth-child( 5 ):focus-within .wp-block-social-link-anchor::before {
	background: var( --mm-teal );
}

.mm-social-rail .wp-block-social-link:nth-child( 6 ) .wp-block-social-link-anchor::before {
	content: "";
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	background: var( --mm-teal );
	-webkit-mask: var( --mm-apple-mark ) center / contain no-repeat;
	mask: var( --mm-apple-mark ) center / contain no-repeat;
}

/*
 * Slot 1 is the private Facebook group. Core has no service for a group, so
 * the block carries service="facebook" for its markup and the mark is swapped
 * here the same way the Apple one is: Meredith's face in a teal disc, cut from
 * the hero photo and mapped to the brand's teal-to-paper range.
 */
.mm-social-rail .wp-block-social-link:nth-child( 1 ) svg { display: none; }

.mm-social-rail .wp-block-social-link:nth-child( 1 ) .wp-block-social-link-anchor::before {
	content: "";
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	/* A picture, not a mask — the mark is two-tone, so it carries its own
	   colour instead of being painted by the rail. */
	background: var( --mm-group-mark ) center / cover no-repeat;
	transition: box-shadow 0.2s ease;
}

.mm-social-rail .wp-block-social-link:nth-child( 1 ) .wp-block-social-link-anchor:hover::before,
.mm-social-rail .wp-block-social-link:nth-child( 1 ) .wp-block-social-link-anchor:focus::before {
	box-shadow: 0 0 0 2px var( --mm-paper );
}

.mm-social-rail .wp-block-social-link-anchor:hover .wp-block-social-link-label::after,
.mm-social-rail .wp-block-social-link-anchor:focus .wp-block-social-link-label::after { color: var( --mm-paper ); }

.mm-social-row.wp-block-social-links { gap: 1.25rem; align-items: center; }

/*
 * The box lives on the <li>, not the anchor. Core sizes the anchor from its
 * own icon-size rules, and whatever it was doing there was costing the bottom
 * border. The list item is ours to size outright, so the frame goes on it and
 * the anchor simply fills it.
 */
.wp-block-social-links.mm-social-row .wp-block-social-link {
	width: 56px;
	height: 56px;
	box-sizing: border-box;
	border: 1px solid var( --mm-slate );
}

.mm-social-row .wp-block-social-link-anchor {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border: 0;
	color: var( --mm-slate );
}

.mm-social-row .wp-block-social-link svg { width: 26px; height: 26px; fill: var( --mm-slate ); }

.mm-social-row .wp-block-social-link:hover,
.mm-social-row .wp-block-social-link:focus-within { background: var( --mm-slate ) !important; }
.mm-social-row .wp-block-social-link:hover svg,
.mm-social-row .wp-block-social-link:focus-within svg { fill: var( --mm-teal ); }

/*
 * A small tag riding alongside a display heading — "On Tour — Coming 2027".
 * Sized off the heading so it scales with it instead of fighting it.
 */
.mm-heading-tag {
	display: inline-block;
	font-family: var( --mm-font );
	font-size: 0.26em;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --mm-teal );
	vertical-align: baseline;
	margin-left: 0.4em;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Connect — one card of routes, form beside it
 * ---------------------------------------------------------------------- */

/*
 * The two halves sit flush and share one teal rule across the top.
 * Core generates its own gap rule for the columns block at a specificity we
 * cannot out-rank cleanly, hence the !important on the gap alone.
 */
.wp-block-columns.mm-connect {
	align-items: stretch;
	gap: 0 !important;
}

.wp-block-columns.mm-connect > .wp-block-column {
	margin: 0;
	display: flex;
	flex-direction: column;
}

.mm-routes__item + .mm-routes__item {
	padding-top: 1.5rem;
	border-top: 1px solid var( --mm-rule );
}

.mm-routes__item h4 {
	font-size: 1.125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --mm-teal );
}

.mm-routes__item p { max-width: 46ch; }

/* Two classes, so this beats .mm-slot's own border further down the file. */
.mm-connect__form.mm-slot {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2.5rem;
	border: 0;
	border-top: 3px solid var( --mm-teal );
	/* A hairline keeps the seam readable without reopening the gap. */
	border-left: 1px solid var( --mm-rule );
}

.mm-routes.is-style-mm-card { flex: 1; }

.mm-connect__fallback { margin-top: 1.5rem; }

@media ( max-width: 780px ) {
	.mm-connect__form.mm-slot { border-left: 0; border-top: 1px solid var( --mm-rule ); }
}

@media ( max-width: 860px ) {
	.mm-connect__form { padding: 1.75rem; }
}

/*
 * The newsletter band sits on teal now, so its form flips: slate controls on
 * teal instead of teal controls on slate. Buttons also pick up the 8px radius
 * the rest of the site uses, which the base skin predates.
 */
.mm-klaviyo--on-teal input[type="email"],
.mm-klaviyo--on-teal input[type="text"],
.mm-klaviyo--on-teal input[type="tel"] {
	background: var( --mm-paper ) !important;
	border: 1px solid var( --mm-slate ) !important;
	border-radius: 8px !important;
	color: var( --mm-slate ) !important;
}

.mm-klaviyo--on-teal input::placeholder { color: #6C7272 !important; opacity: 1; }

.mm-klaviyo--on-teal button,
.mm-klaviyo--on-teal button[type="submit"] {
	background: var( --mm-slate ) !important;
	color: var( --mm-paper ) !important;
	border-radius: 8px !important;
}

.mm-klaviyo--on-teal button:hover,
.mm-klaviyo--on-teal button[type="submit"]:hover {
	background: var( --mm-charcoal ) !important;
}

.mm-klaviyo--on-teal :is( p, label, .klaviyo-form small ) { color: var( --mm-slate ) !important; }

/* The Instagram feed is on elevated now, so its buttons go back to teal. */
.mm-ig-feed :is( .sbi_load_btn, .sbi_follow_btn a ) {
	background: var( --mm-teal ) !important;
	color: var( --mm-slate ) !important;
}

.mm-ig-feed :is( .sbi_load_btn, .sbi_follow_btn a ):hover {
	background: var( --mm-paper ) !important;
}

/* The plugin's header colours assume a light page; the bio was dark on dark. */
.mm-ig-feed :is( .sbi_header_text, .sb_instagram_header, #sbi_load ) { color: var( --mm-body ); }

.mm-ig-feed :is( .sbi_bio, .sbi_header_text p, .sbi_header_text div ) { color: var( --mm-body ) !important; }
.mm-ig-feed :is( .sbi_username, .sbi_header_text h3 ) { color: var( --mm-paper ) !important; }

/* Row icons read on the darker ground now. */
.wp-block-social-links.mm-social-row .wp-block-social-link { border-color: var( --mm-hairline ); }
.mm-social-row .wp-block-social-link-anchor { color: var( --mm-paper ); }
.mm-social-row .wp-block-social-link svg { fill: var( --mm-paper ); }
.mm-social-row .wp-block-social-link:nth-child( 5 ) .wp-block-social-link-anchor::before { background: var( --mm-paper ); }
.mm-social-row .wp-block-social-link:hover,
.mm-social-row .wp-block-social-link:focus-within { background: var( --mm-paper ) !important; border-color: var( --mm-paper ); }
.mm-social-row .wp-block-social-link:hover svg,
.mm-social-row .wp-block-social-link:focus-within svg { fill: var( --mm-slate ); }
.mm-social-row .wp-block-social-link:nth-child( 5 ):hover .wp-block-social-link-anchor::before { background: var( --mm-slate ); }

/*
 * Consecutive full-bleed sections should butt up against each other. Core's
 * root block gap was putting a margin between every top-level section, which
 * is invisible while neighbouring sections share the page background and shows
 * as a slate strip the moment they don't — as between the Instagram feed
 * (elevated) and About (paper).
 */
.wp-block-post-content > .alignfull + .alignfull,
.wp-site-blocks > main > .alignfull + .alignfull,
.wp-site-blocks > main > * > .alignfull + .alignfull {
	margin-block-start: 0 !important;
}

/* -------------------------------------------------------------------------
 * Single show details
 * ---------------------------------------------------------------------- */

.mm-show-details {
	display: flex;
	flex-direction: column;
	max-width: 640px;
	margin-block: 2rem;
}

.mm-show-details__row {
	display: grid;
	grid-template-columns: 140px minmax( 0, 1fr );
	gap: 1.25rem;
	padding: 1.125rem 0;
	border-top: 1px solid var( --mm-rule );
}

.mm-show-details__row:last-of-type { border-bottom: 1px solid var( --mm-rule ); }

.mm-show-details__label {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --mm-muted );
}

.mm-show-details__value { color: var( --mm-paper ); font-weight: 600; }
.mm-show-details__sub { color: var( --mm-muted ); font-weight: 400; font-size: 0.875rem; }
.mm-show-details__cta { margin-top: 2rem; }
.mm-show-details__cta a { display: inline-block; }

/* -------------------------------------------------------------------------
 * Shows
 * ---------------------------------------------------------------------- */

.mm-shows { display: flex; flex-direction: column; }

/* Rules span the full column; the sentence keeps a readable measure. */
.mm-shows__empty {
	padding: 2.75rem 0 2.5rem;
	border-top: 1px solid var( --mm-rule );
	border-bottom: 1px solid var( --mm-rule );
}

.mm-shows__empty p {
	color: var( --mm-muted );
	font-size: 1.125rem;
	max-width: 46ch;
	margin: 0;
}

.mm-shows__group-head {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin: 3.5rem 0 1.625rem;
}

.mm-shows__group-head:first-child { margin-top: 0; }

.mm-shows__group-head span {
	font-family: var( --mm-display );
	font-size: 2.125rem;
	letter-spacing: 0.04em;
	color: var( --mm-teal );
}

.mm-shows__group-head i {
	flex-grow: 1;
	height: 1px;
	background: var( --mm-rule );
}

.mm-show {
	display: grid;
	grid-template-columns: 148px minmax( 0, 1fr ) 300px 132px 168px;
	align-items: center;
	gap: 1.5rem;
	padding: 1.625rem 0.5rem;
	border-top: 1px solid var( --mm-rule );
}

.mm-shows > .mm-show:last-child,
.mm-shows__group > .mm-show:last-child { border-bottom: 1px solid var( --mm-rule ); }

.mm-show__date {
	font-family: var( --mm-display );
	font-size: 1.6875rem;
	letter-spacing: 0.02em;
	color: var( --mm-teal );
}

.mm-show__city {
	font-size: 1.4375rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var( --mm-paper );
}

.mm-show__venue { font-size: 0.9375rem; color: var( --mm-muted ); }

.mm-show__flag {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --mm-muted );
}

.mm-show.has-accent-flag .mm-show__flag { color: var( --mm-sand ); }

.mm-show__action {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.8125rem 0.5rem;
	border: 1px solid var( --mm-teal );
	color: var( --mm-teal );
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: center;
}

a.mm-show__action:hover,
a.mm-show__action:focus {
	background: var( --mm-teal );
	color: var( --mm-slate );
}

.mm-show__action.is-disabled,
.mm-show__action.is-muted {
	border-color: var( --mm-hairline );
	color: var( --mm-dim );
	cursor: default;
}

.mm-show__action.is-muted { color: var( --mm-muted ); }

.mm-show.is-sold-out { opacity: 0.55; }
.mm-show.is-sold-out .mm-show__date { color: var( --mm-muted ); }

/* -------------------------------------------------------------------------
 * Plugin slots — where the social-feed and video plugins go
 * ---------------------------------------------------------------------- */

.is-style-mm-plugin-slot,
.mm-slot {
	background: var( --mm-elevated );
	border: 1px solid var( --mm-rule );
	padding: clamp( 1.25rem, 3vw, 2.5rem );
}

.mm-slot--empty {
	border-style: dashed;
	border-color: var( --mm-hairline );
	text-align: center;
	color: var( --mm-dim );
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Common social-feed plugin containers, brought into the palette. */
.mm-slot :is( .sbi_header_text, .sb_instagram_header, .cff-wrapper, .sby_header ) { color: var( --mm-body ); }
.mm-slot :is( #sb_instagram, .cff-wrapper, .sby_video_thumbnail ) { background: transparent !important; }
.mm-slot :is( .sbi_load_btn, .cff-load-more, .sby_load_btn ) {
	background: var( --mm-teal ) !important;
	color: var( --mm-slate ) !important;
	border-radius: 0 !important;
	font-family: var( --mm-font ) !important;
	font-weight: 700 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
}

/* -------------------------------------------------------------------------
 * Video facade
 * ---------------------------------------------------------------------- */

.mm-video-embed {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	background: var( --mm-inset );
	border: 1px solid var( --mm-rule );
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.mm-video-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.mm-video-embed__play {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var( --mm-teal );
	line-height: 0;
	min-width: 64px;
	min-height: 64px;
}

.mm-video-embed__play:hover { color: var( --mm-paper ); }

/* -------------------------------------------------------------------------
 * Press clips — real appearances in place of the placeholder logo wall
 * ---------------------------------------------------------------------- */

.mm-press-clips {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 195px, 1fr ) );
	gap: 1.5rem;
}

/*
 * Core's layout CSS puts a top margin on every child after the first. Inside a
 * grid that pushes items 2..n down in their cells while item 1 stays flush,
 * so the first card sat higher and taller than the rest. Same trap as the hero.
 */
.mm-press-clips > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.mm-press-clip > * + * { margin-block-start: 0.75rem; }

.mm-press-clip__outlet {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --mm-teal );
}

.mm-press-clip__title {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var( --mm-body );
}

/* A scrim so the play control reads against whatever the still happens to be. */
.mm-video-embed.has-poster::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba( 20, 22, 22, 0.38 );
	transition: background 0.2s ease;
}

.mm-video-embed.has-poster:hover::before { background: rgba( 20, 22, 22, 0.18 ); }

.mm-video-embed__play { position: relative; z-index: 1; }

.mm-watch-caption__outlet {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --mm-teal );
}

@media ( max-width: 600px ) {
	.mm-press-clips { grid-template-columns: repeat( auto-fit, minmax( 150px, 1fr ) ); }
}

/* -------------------------------------------------------------------------
 * Embedded post — kept to a readable width so it cannot run away with the row
 * ---------------------------------------------------------------------- */

/*
 * Constrained layout gives each child the content width and centres it.
 * Capping the wrapper made it hug the section's outer padding edge instead of
 * the column, so the wrapper keeps the full column and the embed is capped and
 * left-aligned inside it.
 *
 * The widget also measures its container on load and falls back to its 220px
 * minimum if that read comes back small, so the width is declared on the
 * blockquote itself via data-width as well.
 */
.mm-tweet .twitter-tweet {
	margin: 0 !important;
	max-width: 480px !important;
}

.mm-tweet .twitter-tweet-rendered {
	width: 480px !important;
	max-width: 100% !important;
}

/* Before the widget script swaps it out, the raw blockquote should still
   look like it belongs here rather than like unstyled text. */
.mm-tweet blockquote.twitter-tweet:not(.twitter-tweet-rendered) {
	background: var( --mm-elevated );
	border-left: 3px solid var( --mm-teal );
	padding: 1.5rem;
	color: var( --mm-body );
	font-size: 0.9375rem;
	line-height: 1.6;
}

.mm-tweet blockquote.twitter-tweet:not(.twitter-tweet-rendered) a { color: var( --mm-teal ); }

@media ( max-width: 780px ) {
	.mm-tweet { max-width: 100%; }
}

/*
 * Garment variants sit directly under the product shot, above the name. The
 * gap to the image above matches the gap between the chips themselves, so the
 * row reads as one block rather than four loose thumbnails.
 *
 * The card is a flex column with its own gap; that is zeroed here and the
 * spacing restated explicitly, with the body's top padding restored on cards
 * that have no variant row so those are unchanged.
 */
.mm-merch-item { gap: 0; }

.mm-merch-variants {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 0, 1fr ) );
	grid-auto-flow: column;
	gap: 0.5rem;
	margin: 0.5rem 1.25rem 0;
}

.mm-merch-item__shot + .mm-merch-item__body { padding-top: 1.25rem; }

.mm-merch-variants > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.mm-merch-variants figure { margin: 0; }

.mm-merch-variants img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 1px solid var( --mm-rule );
	border-radius: 9px;
	transition: border-color 0.2s ease;
}

.mm-merch-variants a,
.mm-merch-variants figure { border-radius: 9px; overflow: hidden; }

.mm-merch-variants a:hover img,
.mm-merch-variants a:focus img { border-color: var( --mm-teal ); }

.mm-merch-variants a { cursor: pointer; }

/* A short fade on the main shot so the swap registers as a change. */
@keyframes mm-swap-in {
	from { opacity: 0.25; }
	to   { opacity: 1; }
}

.mm-merch-item > figure img.is-swapping { animation: mm-swap-in 0.22s ease-out; }

/* -------------------------------------------------------------------------
 * About — text only, tightened
 * ---------------------------------------------------------------------- */

/*
 * With the portrait gone the section runs the full content width, so the copy
 * needs a measure of its own or the bio becomes one very long line. Leading is
 * pulled in on both paragraphs to shorten the block vertically.
 */
/*
 * The copy sits in a default-layout wrapper, so nothing here gets the
 * constrained layout's auto margins — a narrower measure stays flush with the
 * left edge the rest of the page uses instead of centring inside the column.
 */
.mm-about__copy > * + * { margin-block-start: var( --wp--preset--spacing--20, 1rem ); }

/*
 * With the portrait floated alongside it, the bio's measure comes from the
 * float rather than a character cap — capping it too would leave a gap and
 * stop the text wrapping at all. The lead above the float keeps its cap.
 */
.mm-about .has-x-large-font-size { max-width: 68ch; }

.mm-about__portrait {
	float: right;
	margin: 0.25rem 0 1.25rem 2.5rem;
	max-width: 300px;
}

.mm-about__portrait img {
	display: block;
	width: 100%;
	height: auto;
}

/* The float has to be cleared or the paper background collapses behind it. */
.mm-about__copy::after {
	content: "";
	display: block;
	clear: both;
}

@media ( max-width: 780px ) {
	.mm-about__portrait {
		float: none;
		margin: 0 0 1.25rem;
		max-width: 260px;
	}
}

.mm-about .has-x-large-font-size { line-height: 1.3; }

.mm-about p:not( .has-x-large-font-size ) { line-height: 1.55; }

/*
 * The rule now sits alongside the floated portrait. A plain block would run
 * its background underneath the photo; a block formatting context is placed
 * beside a float instead of under it, so the rule stops at the text column.
 */
.mm-about .wp-block-separator {
	display: flow-root;
	margin-block: 0.375rem;
}

.mm-about .wp-block-buttons { margin-top: 0.5rem; }

/* -------------------------------------------------------------------------
 * Product marquee
 * ---------------------------------------------------------------------- */

/*
 * Full-bleed strip of product circles under the Merch headline. The track
 * holds the set twice and slides exactly half its width, so the loop is
 * seamless with no JavaScript. Hover pauses it; reduced-motion stops it.
 */
.mm-marquee {
	position: relative;
	overflow: hidden;
	width: 100%;
	/* Room for the hover scale and its ring — without it the top of a circle
	   is cut off by this element's own overflow the moment you point at it. */
	padding-block: 1.5rem;
	-webkit-mask-image: linear-gradient( to right, transparent, #000 6%, #000 94%, transparent );
	mask-image: linear-gradient( to right, transparent, #000 6%, #000 94%, transparent );
}

.mm-marquee__track {
	display: flex;
	align-items: center;
	gap: 2.75rem;
	width: max-content;
	animation: mm-marquee 110s linear infinite;
}

/*
 * The anchor is the flex item now, not the image, so the sizing and the
 * flex basis live here or the track collapses the links to zero width.
 */
.mm-marquee__item {
	display: block;
	flex: 0 0 auto;
	width: 148px;
	height: 148px;
	border-radius: 50%;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mm-marquee__track img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: var( --mm-paper );
}

.mm-marquee__item:hover,
.mm-marquee__item:focus-visible {
	transform: scale( 1.07 );
	box-shadow: 0 0 0 4px var( --mm-teal );
}

.mm-marquee__item:focus-visible { outline: none; }

@keyframes mm-marquee {
	from { transform: translate3d( 0, 0, 0 ); }
	to   { transform: translate3d( -50%, 0, 0 ); }
}

.mm-marquee:hover .mm-marquee__track { animation-play-state: paused; }

@media ( prefers-reduced-motion: reduce ) {
	.mm-marquee__track { animation: none; }
	.mm-marquee { overflow-x: auto; }
}

@media ( max-width: 780px ) {
	.mm-marquee__item { width: 104px; height: 104px; }
	.mm-marquee__track { gap: 1.75rem; }
}

/* -------------------------------------------------------------------------
 * Klaviyo skin
 * ---------------------------------------------------------------------- */

.mm-klaviyo form { gap: 0.75rem; }

.mm-klaviyo input[type="email"],
.mm-klaviyo input[type="text"],
.mm-klaviyo input[type="tel"] {
	background: var( --mm-slate ) !important;
	border: 1px solid var( --mm-hairline ) !important;
	border-radius: 0 !important;
	color: var( --mm-paper ) !important;
	font-family: var( --mm-font ) !important;
	font-size: 0.9375rem !important;
	min-height: 58px;
	padding: 0 1.25rem !important;
}

.mm-klaviyo button,
.mm-klaviyo button[type="submit"] {
	background: var( --mm-teal ) !important;
	color: var( --mm-slate ) !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-family: var( --mm-font ) !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	min-height: 58px;
	padding-inline: 2rem !important;
}

/* -------------------------------------------------------------------------
 * Press
 * ---------------------------------------------------------------------- */

.mm-logo-wall {
	display: grid;
	grid-template-columns: repeat( 6, minmax( 0, 1fr ) );
	gap: 1.125rem;
}

.mm-logo-wall > * {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 96px;
	padding: 1rem;
	border: 1px solid var( --mm-rule );
	color: var( --mm-dim );
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.mm-logo-wall img { filter: grayscale( 1 ) brightness( 1.6 ); opacity: 0.8; }
.mm-logo-wall a:hover img { filter: none; opacity: 1; }

/* -------------------------------------------------------------------------
 * Block styles
 * ---------------------------------------------------------------------- */

.wp-block-button.is-style-mm-outline .wp-block-button__link {
	background: transparent;
	border: 1px solid var( --mm-teal );
	color: var( --mm-teal );
}

.wp-block-button.is-style-mm-outline .wp-block-button__link:hover,
.wp-block-button.is-style-mm-outline .wp-block-button__link:focus {
	background: var( --mm-teal );
	color: var( --mm-slate );
}

.wp-block-button.is-style-mm-ghost .wp-block-button__link {
	background: transparent;
	border: 1px solid var( --mm-hairline );
	color: var( --mm-paper );
}

.wp-block-button.is-style-mm-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-mm-ghost .wp-block-button__link:focus {
	border-color: var( --mm-paper );
	background: var( --mm-paper );
	color: var( --mm-slate );
}

/*
 * A button-shaped label rather than a button. Used for "Coming soon" while
 * there are no dates: it keeps the pair visually balanced without pretending
 * to be clickable, so it never takes hover, focus or the cursor.
 */
.wp-block-button.mm-btn-static .wp-block-button__link {
	cursor: default;
	color: var( --mm-dim );
	border-color: var( --mm-rule );
	background: transparent;
	pointer-events: none;
}

.wp-block-group.is-style-mm-card {
	background: var( --mm-elevated );
	border-top: 3px solid var( --mm-teal );
	padding: clamp( 1.5rem, 3vw, 2.5rem );
}

.wp-block-heading.is-style-mm-eyebrow {
	font-family: var( --mm-font );
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var( --mm-teal );
}

/* Light sections keep the teal readable. */
.has-paper-background-color :is( h1, h2, h3, h4, h5 ) { color: var( --mm-slate ); }
.has-paper-background-color .wp-block-heading.is-style-mm-eyebrow { color: var( --wp--preset--color--teal-deep, #1B7C7C ); }
.has-paper-background-color p { color: var( --wp--preset--color--ink-on-paper, #454A4A ); }
.has-paper-background-color a { color: var( --wp--preset--color--teal-deep, #1B7C7C ); }

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */

@media ( max-width: 1100px ) {
	.mm-show { grid-template-columns: 120px minmax( 0, 1fr ) 200px 110px 150px; gap: 1rem; }
	.mm-logo-wall { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
	.mm-social-tiles { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
}

@media ( max-width: 900px ) {
	.mm-hero {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	/*
	 * Below this width the photo comes out of absolute positioning entirely.
	 * The desktop hero needs an out-of-flow image to bleed inside a grid
	 * cell, but that leaves the frame with no height of its own, and Safari
	 * will not resolve a percentage height against a box sized only by
	 * aspect-ratio — the photo collapsed to nothing on iPhone while Chrome
	 * rendered it fine. In normal flow the image itself has the height, so
	 * there is no percentage to resolve and nothing to disagree about. The
	 * crop now rides on the image rather than its container; if a browser is
	 * old enough to ignore aspect-ratio it simply shows the photo uncropped
	 * instead of showing nothing.
	 */
	.mm-hero__photo {
		aspect-ratio: auto;
		min-height: 0;
	}

	/*
	 * The <figure> WordPress wraps the image in is absolutely positioned too,
	 * so taking only the <img> out of flow left the frame with nothing in it.
	 * Both come back into normal flow here: figure holds the image, image
	 * holds its own height, container takes the height from them. Nothing
	 * resolves against anything, which is why it now behaves the same in
	 * Safari and Chrome.
	 */
	.mm-hero__photo .wp-block-image,
	.mm-hero__photo figure {
		position: static;
		inset: auto;
	}

	.mm-hero__photo img {
		position: static;
		inset: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
		object-fit: cover;
		object-position: 50% 22%;
	}
	.mm-hero__photo::after { height: 32%; }
	.mm-hero__panel { padding: 1.875rem 1.25rem 2.125rem; }
	.mm-hero__links { padding: 2rem 1.25rem; }

	.mm-social-link .mm-icon { width: 34px; height: 34px; }
	.mm-social-link span { font-size: 1.125rem; }
}

@media ( max-width: 860px ) {
	.mm-show {
		grid-template-columns: minmax( 0, 1fr );
		gap: 0.75rem;
		padding: 1.25rem;
		background: var( --mm-elevated );
		border: 0;
		border-left: 3px solid var( --mm-teal );
	}

	.mm-shows { gap: 0.875rem; }
	.mm-shows > .mm-show:last-child,
	.mm-shows__group > .mm-show:last-child { border-bottom: 0; }
	.mm-shows__group { display: flex; flex-direction: column; gap: 0.875rem; }

	.mm-show.is-sold-out { border-left-color: var( --mm-hairline ); }
	.mm-show__date { font-size: 1.5rem; }
	.mm-show__city { font-size: 1.25rem; }
	.mm-show__flag:empty { display: none; }
	.mm-show__venue:empty { display: none; }
	.mm-show__action { min-height: 48px; }
}

@media ( max-width: 600px ) {
	.mm-social-tiles { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.mm-logo-wall { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.mm-utility-bar { min-height: 44px; }
	.mm-utility-bar a { font-size: 0.6875rem; letter-spacing: 0.13em; }
}

@media ( prefers-reduced-motion: reduce ) {
	* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* -------------------------------------------------------------------------
 * Slot on the teal band + mobile navigation overlay
 * ---------------------------------------------------------------------- */

.mm-slot--on-teal {
	background: transparent;
	border: 1px dashed var( --mm-slate );
	color: var( --mm-slate );
}

.mm-slot--on-teal p { color: var( --mm-slate ); }

/*
 * Once a real feed lives in the slot, the dashed "drop something here" box
 * should get out of its way. The band is teal, so the plugin's buttons — which
 * the slot styles otherwise turn teal — go slate instead, or they vanish.
 */
.mm-ig-feed {
	border: 0;
	padding: 0;
	background: transparent;
}

.mm-ig-feed :is( .sbi_load_btn, .sbi_follow_btn a ) {
	background: var( --mm-slate ) !important;
	color: var( --mm-paper ) !important;
	border-radius: 8px !important;
	border: 0 !important;
}

.mm-ig-feed :is( .sbi_load_btn, .sbi_follow_btn a ):hover {
	background: var( --mm-charcoal ) !important;
}

.mm-ig-feed :is( .sbi_header_text, .sb_instagram_header, #sbi_load ) { color: var( --mm-slate ); }

.wp-block-navigation__responsive-container.is-menu-open {
	background: var( --mm-slate );
	color: var( --mm-paper );
	padding: clamp( 1.25rem, 4.4vw, 4rem );
}

.wp-block-navigation__responsive-container.is-menu-open a { color: var( --mm-paper ); }
.wp-block-navigation__responsive-container.is-menu-open a:hover,
.wp-block-navigation__responsive-container.is-menu-open a:focus { color: var( --mm-teal ); }

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: var( --mm-paper ); }

.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; }

.mm-header .wp-block-navigation__responsive-container-open { color: var( --mm-slate ); }

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.5rem;
	letter-spacing: 0.1em;
}

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */

.mm-footer .wp-block-site-title a { color: var( --mm-paper ); }
.mm-footer .wp-block-site-title a:hover { color: var( --mm-teal ); }

.mm-footer .wp-block-navigation a {
	color: var( --mm-muted );
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.mm-footer .wp-block-navigation a:hover,
.mm-footer .wp-block-navigation a:focus { color: var( --mm-teal ); }

@media ( max-width: 760px ) {
	.mm-footer > .wp-block-group { row-gap: 1.25rem; }
}

/* -------------------------------------------------------------------------
 * Duo hero — two hosts, one teal panel between them
 * ---------------------------------------------------------------------- */

.mm-hero--duo {
	grid-template-columns: 1fr minmax( 320px, 440px ) 1fr;
	min-height: 640px;
}

/*
 * The black-and-white treatment is applied here rather than baked into the
 * files, so any photo dropped in from the Media Library matches, and the
 * originals stay in colour for everything else.
 */
.mm-hero__photo img,
.mm-hero--duo .mm-hero__photo img {
	filter: grayscale( 1 ) contrast( 1.08 );
}

.mm-hero--duo .mm-hero__photo img { object-position: 50% 20%; }

.mm-hero--duo .mm-hero__panel { text-align: center; align-items: center; }
.mm-hero--duo .mm-hero__title { font-size: clamp( 2.5rem, 17cqw, 5rem ); }

.mm-hero__names {
	display: flex;
	gap: 0.75rem;
	align-items: baseline;
	justify-content: center;
	flex-wrap: wrap;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var( --mm-slate );
}

.mm-hero__names span:not( :last-child )::after {
	content: "·";
	margin-left: 0.75rem;
	opacity: 0.6;
}

/* -------------------------------------------------------------------------
 * Podcast — platform row, stat, support tiers
 * ---------------------------------------------------------------------- */

.mm-platforms {
	display: grid;
	grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
	gap: 1rem;
}

.mm-platforms > * {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 84px;
	padding: 1rem;
	border: 1px solid var( --mm-rule );
	color: var( --mm-paper );
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
}

.mm-platforms a:hover,
.mm-platforms a:focus {
	border-color: var( --mm-teal );
	background: var( --mm-teal );
	color: var( --mm-slate );
}

.mm-stat {
	display: flex;
	align-items: baseline;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.mm-stat__figure {
	font-family: var( --mm-display );
	font-size: clamp( 3.5rem, 9vw, 7rem );
	line-height: 0.9;
	color: var( --mm-teal );
}

.mm-stat__label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --mm-muted );
}

.mm-tier__price {
	font-family: var( --mm-display );
	font-size: 2.75rem;
	line-height: 1;
	color: var( --mm-teal );
}

.mm-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.875rem; }

.mm-perks li {
	display: grid;
	grid-template-columns: 24px minmax( 0, 1fr );
	gap: 0.875rem;
	align-items: start;
	color: var( --mm-body );
}

.mm-perks li::before {
	content: "";
	width: 18px;
	height: 18px;
	margin-top: 0.3rem;
	background: var( --mm-teal );
	clip-path: polygon( 14% 44%, 0 58%, 38% 96%, 100% 34%, 86% 20%, 38% 68% );
}

/* -------------------------------------------------------------------------
 * Merchandise gallery — every item checks out on the shop
 * ---------------------------------------------------------------------- */

.mm-merch-grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: var( --wp--preset--spacing--40, 1.75rem );
	align-items: stretch;
}

/* Same core layout margin that misaligned the press strip. */
.mm-merch-grid > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.mm-merch-grid > .wp-block-group,
.mm-merch-item {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	background: var( --mm-elevated );
	padding: 0;
}

.mm-merch-item figure,
.mm-merch-item .wp-block-image { margin: 0; }

/*
 * Square corners on the shot, and the name is plain type on the card rather
 * than a bar over the photo — nothing sits on top of the garment now.
 * overflow stays hidden so the hover zoom is clipped to the photo.
 */
.mm-merch-item__shot {
	position: relative;
	overflow: hidden;
}

.mm-merch-item__name {
	margin: 0;
	padding: 0.75rem 1.25rem 0;
	color: var( --mm-paper );
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.25;
}

.mm-merch-item img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var( --mm-inset );
}

.mm-merch-item__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem 1.25rem;
}

.mm-merch-item__meta { font-size: 0.8125rem; color: var( --mm-muted ); }

.mm-merch-item__link {
	margin-top: 0.5rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* The card body grows, the buy button stays pinned to the bottom, so a long
   product name on one card does not leave its neighbours' buttons floating. */
.mm-merch-item { height: 100%; }
.mm-merch-item__body { flex: 1; }
.mm-merch-item__buy { margin-top: auto; padding-top: 0.5rem; }

/* The button div is the flex item, so it needs the width too, not just the a. */
.mm-merch-item__buy,
.mm-merch-item__buy .wp-block-button { width: 100%; }

.mm-merch-item__buy .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
	padding-block: 0.9375rem;
}

/* Cards are links; give the whole tile a little life on hover. */
.mm-merch-item figure a { display: block; overflow: hidden; }
.mm-merch-item img { transition: transform 0.35s ease; }
.mm-merch-item__shot:hover img { transform: scale( 1.03 ); }

@media ( max-width: 900px ) {
	.mm-merch-grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}

@media ( max-width: 560px ) {
	.mm-merch-grid { grid-template-columns: minmax( 0, 1fr ); }
}

.mm-merch-item__shot:hover img { filter: brightness( 1.08 ); }

@media ( max-width: 1100px ) {
	.mm-merch-grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.mm-platforms { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
}

@media ( max-width: 900px ) {
	.mm-hero--duo { grid-template-columns: 1fr 1fr; }
	.mm-hero--duo .mm-hero__panel { grid-column: 1 / -1; order: 1; }
	.mm-hero--duo .mm-hero__photo {
		order: 2;
		aspect-ratio: auto;
		min-height: 0;
	}

	/* Same treatment as the single hero photo, at the duo's taller crop. */
	.mm-hero--duo .mm-hero__photo .wp-block-image,
	.mm-hero--duo .mm-hero__photo figure {
		position: static;
		inset: auto;
	}

	.mm-hero--duo .mm-hero__photo img {
		position: static;
		inset: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 4;
		object-fit: cover;
	}
}

@media ( max-width: 600px ) {
	.mm-merch-grid { grid-template-columns: minmax( 0, 1fr ); }
	.mm-platforms { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}

/* -------------------------------------------------------------------------
 * Fluent Forms skin — Connect
 * ---------------------------------------------------------------------- */

/*
 * The plugin ships a light-theme form with a blue submit button, which lands
 * badly on the slate Connect band. Everything here is scoped to the Connect
 * slot so any other form on the site keeps the plugin's own styling.
 */
.mm-connect__form .fluentform .ff-el-group { margin-bottom: 1rem; }

.mm-connect__form .ff-el-input--label label {
	color: var( --mm-muted );
	font-family: var( --mm-font );
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 0.4375rem;
}

.mm-connect__form .ff-el-is-required > span,
.mm-connect__form .ff-el-input--label.asterisk-right label:after { color: var( --mm-teal ); }

.mm-connect__form .fluentform .ff-el-form-control {
	background: var( --mm-slate );
	border: 1px solid var( --mm-hairline );
	border-radius: 0;
	color: var( --mm-paper );
	font-family: var( --mm-font );
	font-size: 0.9375rem;
	min-height: 58px;
	padding: 0 1.25rem;
	box-shadow: none;
}

.mm-connect__form .fluentform select.ff-el-form-control {
	appearance: none;
	background-image: linear-gradient( 45deg, transparent 50%, var( --mm-muted ) 50% ), linear-gradient( 135deg, var( --mm-muted ) 50%, transparent 50% );
	background-position: calc( 100% - 22px ) 50%, calc( 100% - 16px ) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 3rem;
}

.mm-connect__form .fluentform textarea.ff-el-form-control {
	min-height: 150px;
	padding: 1rem 1.25rem;
	line-height: 1.55;
}

.mm-connect__form .fluentform .ff-el-form-control::placeholder { color: var( --mm-dim ); }

.mm-connect__form .fluentform .ff-el-form-control:focus {
	border-color: var( --mm-teal );
	outline: none;
	box-shadow: none;
}

.mm-connect__form .fluentform .ff-btn-submit,
.mm-connect__form .fluentform .ff-btn.ff-btn-submit {
	background: var( --mm-teal );
	color: var( --mm-slate );
	border: 0;
	border-radius: 0;
	font-family: var( --mm-font );
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	min-height: 58px;
	padding-inline: 2.25rem;
}

.mm-connect__form .fluentform .ff-btn-submit:hover,
.mm-connect__form .fluentform .ff-btn-submit:focus { background: var( --mm-paper ); }

.mm-connect__form .fluentform .error,
.mm-connect__form .fluentform .text-danger { color: #E8756B; font-size: 0.8125rem; }

.mm-connect__form .ff-message-success {
	background: transparent;
	border: 1px solid var( --mm-teal );
	color: var( --mm-paper );
	padding: 1.25rem;
}

/*
 * This form is saved with left-aligned label placement. Fluent Forms only
 * switches that on once its container is wide enough, so widening the column
 * threw every label beside its field and squeezed the name inputs. Force the
 * stacked layout regardless of width.
 */
.mm-connect__form .fluentform .ff-el-form-left .ff-el-input--label,
.mm-connect__form .fluentform .ff-el-form-right .ff-el-input--label {
	float: none;
	width: 100%;
	padding: 0;
	margin-bottom: 0.4375rem;
	text-align: left;
}

.mm-connect__form .fluentform .ff-el-form-left .ff-el-input--content,
.mm-connect__form .fluentform .ff-el-form-right .ff-el-input--content { margin-left: 0; }


/* -------------------------------------------------------------------------
 * Fluent Forms skin — newsletter band (on teal)
 * ---------------------------------------------------------------------- */

/*
 * Same plugin, opposite background. On the teal band the fields go slate so
 * they read as wells, and the submit goes slate too — a teal button would
 * disappear into the band.
 */
.mm-newsletter__form .fluentform .ff-el-group { margin-bottom: 0.75rem; }

.mm-newsletter__form .fluentform .ff-t-container { gap: 0.75rem; }
.mm-newsletter__form .fluentform .ff-t-cell { flex: 1 1 0; min-width: 0; width: 100%; padding: 0; }

.mm-newsletter__form .fluentform .ff-el-form-left .ff-el-input--label,
.mm-newsletter__form .fluentform .ff-el-form-right .ff-el-input--label {
	float: none;
	width: 100%;
	padding: 0;
	text-align: left;
}

.mm-newsletter__form .fluentform .ff-el-form-left .ff-el-input--content,
.mm-newsletter__form .fluentform .ff-el-form-right .ff-el-input--content { margin-left: 0; }

.mm-newsletter__form .ff-el-input--label label {
	color: var( --mm-slate );
	font-family: var( --mm-font );
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 0.375rem;
}

.mm-newsletter__form .ff-el-input--label.ff-el-is-required.asterisk-right label:after { color: var( --mm-slate ); }

.mm-newsletter__form .fluentform .ff-el-form-control {
	background: var( --mm-slate );
	border: 1px solid var( --mm-slate );
	border-radius: 0;
	color: var( --mm-paper );
	font-family: var( --mm-font );
	font-size: 0.9375rem;
	min-height: 54px;
	padding: 0 1.125rem;
	box-shadow: none;
}

.mm-newsletter__form .fluentform .ff-el-form-control::placeholder { color: var( --mm-dim ); }

.mm-newsletter__form .fluentform .ff-el-form-control:focus {
	border-color: var( --mm-paper );
	outline: none;
	box-shadow: none;
}

.mm-newsletter__form .fluentform .ff-btn-submit,
.mm-newsletter__form .fluentform .ff-btn.ff-btn-submit {
	background: var( --mm-slate );
	color: var( --mm-paper );
	border: 0;
	border-radius: 0;
	font-family: var( --mm-font );
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	min-height: 54px;
	width: 100%;
}

.mm-newsletter__form .fluentform .ff-btn-submit:hover,
.mm-newsletter__form .fluentform .ff-btn-submit:focus { background: var( --mm-charcoal ); }

.mm-newsletter__form .fluentform .error,
.mm-newsletter__form .fluentform .text-danger { color: var( --mm-slate ); font-size: 0.8125rem; font-weight: 600; }

.mm-newsletter__form .ff-message-success {
	background: transparent;
	border: 1px solid var( --mm-slate );
	color: var( --mm-slate );
	padding: 1.125rem;
	font-weight: 600;
}

/*
 * Connect: the teal rule belongs to the pair, not to the routes card, so it
 * runs the full width above both columns and the card keeps only its fill.
 */
.mm-connect { border-top: 3px solid var( --mm-teal ); }

.mm-connect .wp-block-group.is-style-mm-card { border-top: 0; }

/*
 * The form half used to inherit its padding from the placeholder slot class,
 * which came off when the real form went in. It owns its frame now.
 */
.mm-connect__form {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2.5rem;
	border-left: 1px solid var( --mm-rule );
}

@media ( max-width: 780px ) {
	.mm-connect__form { border-left: 0; padding: 1.75rem 0 0; }
}

/* -------------------------------------------------------------------------
 * Back-to-top rail
 * ---------------------------------------------------------------------- */

/*
 * Anchored sections have to clear the sticky utility bar, or a jump to #press
 * lands with the heading tucked underneath it.
 */
html { scroll-behavior: smooth; }

:is( #newsletter, #shows, #watch, #socials, #press, #contact, #about ) {
	scroll-margin-top: 72px;
}

@media ( prefers-reduced-motion: reduce ) {
	html { scroll-behavior: auto; }
}

.mm-toprail {
	position: fixed;
	right: clamp( 0.5rem, 1.8vw, 1.75rem );
	top: 50%;
	z-index: 90;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.875rem;
	opacity: 0;
	pointer-events: none;
	transform: translate3d( 1.25rem, -50%, 0 );
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.mm-toprail.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translate3d( 0, -50%, 0 );
}

/* The track is neutral rather than themed: it crosses both the dark sections
   and the paper About block, so it cannot borrow either one's colour. */
.mm-toprail__track {
	position: relative;
	width: 2px;
	height: clamp( 70px, 14vh, 130px );
	background: rgba( 128, 134, 134, 0.35 );
	overflow: hidden;
}

.mm-toprail__fill {
	position: absolute;
	inset: 0 0 auto 0;
	height: 0;
	background: var( --mm-teal );
}

.mm-toprail__label {
	writing-mode: vertical-rl;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba( 128, 134, 134, 0.95 );
}

.mm-toprail__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var( --mm-slate );
	border: 1px solid var( --mm-hairline );
	color: var( --mm-paper );
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.mm-toprail__btn svg { width: 20px; height: 20px; display: block; }

.mm-toprail__btn:hover,
.mm-toprail__btn:focus-visible {
	background: var( --mm-teal );
	border-color: var( --mm-teal );
	color: var( --mm-slate );
}

.mm-toprail__btn:focus-visible { outline: 2px solid var( --mm-paper ); outline-offset: 3px; }

/* On a phone the rail has no room beside the content, so it becomes a plain
   button tucked into the corner. */
@media ( max-width: 860px ) {
	.mm-toprail {
		top: auto;
		bottom: 1rem;
		gap: 0;
		transform: translate3d( 0, 1rem, 0 );
	}

	.mm-toprail.is-visible { transform: translate3d( 0, 0, 0 ); }
	.mm-toprail__track,
	.mm-toprail__label { display: none; }
	.mm-toprail__btn { box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.35 ); }
}

/* Host cards on the teal band: the icon row and the group link sit under the
   bio, with the row's frames picking up the slate the section already uses. */
.mm-host__group {
	margin-top: 1rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.mm-host__group a { color: var( --mm-slate ); }
.mm-host__group a:hover,
.mm-host__group a:focus { color: var( --mm-paper ); }

body.mm-podcast .mm-social-row.wp-block-social-links { margin-top: 1.25rem; }

/*
 * The host rows sit on teal, where core's own chip styling shows through as a
 * dark disc. Restate the square slate frame the rail uses elsewhere so both
 * rows read the same as the ones on the home page.
 */
body.mm-podcast .mm-social-row .wp-block-social-link {
	width: 52px;
	height: 52px;
	box-sizing: border-box;
	background: transparent !important;
	border: 1px solid var( --mm-slate );
	border-radius: 0;
	padding: 0;
	margin: 0;
}

body.mm-podcast .mm-social-row .wp-block-social-link-anchor {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
	color: var( --mm-slate );
}

body.mm-podcast .mm-social-row .wp-block-social-link svg {
	width: 24px;
	height: 24px;
	fill: var( --mm-slate );
}

body.mm-podcast .mm-social-row .wp-block-social-link:hover,
body.mm-podcast .mm-social-row .wp-block-social-link:focus-within {
	background: var( --mm-slate ) !important;
}

body.mm-podcast .mm-social-row .wp-block-social-link:hover svg,
body.mm-podcast .mm-social-row .wp-block-social-link:focus-within svg {
	fill: var( --mm-teal );
}

/* Apple Podcasts occupies slot 5 here too. */
body.mm-podcast .mm-social-row .wp-block-social-link:nth-child( 5 ) svg { display: none; }

body.mm-podcast .mm-social-row .wp-block-social-link:nth-child( 5 ) .wp-block-social-link-anchor::before {
	content: "";
	width: 24px;
	height: 24px;
	background: var( --mm-slate );
	-webkit-mask: var( --mm-apple-mark ) center / contain no-repeat;
	mask: var( --mm-apple-mark ) center / contain no-repeat;
}

body.mm-podcast .mm-social-row .wp-block-social-link:nth-child( 5 ):hover .wp-block-social-link-anchor::before,
body.mm-podcast .mm-social-row .wp-block-social-link:nth-child( 5 ):focus-within .wp-block-social-link-anchor::before {
	background: var( --mm-teal );
}

/* Core paints its chip on the anchor, not the list item, so it has to be
   cleared there too or a dark disc sits inside our square frame. */
body.mm-podcast .mm-social-row .wp-block-social-link-anchor {
	background: transparent !important;
	background-color: transparent !important;
	border-radius: 0 !important;
}

body.mm-podcast .mm-social-row .wp-block-social-link svg,
body.mm-podcast .mm-social-row .wp-block-social-link-anchor svg {
	fill: var( --mm-slate ) !important;
	color: var( --mm-slate ) !important;
}

body.mm-podcast .mm-social-row .wp-block-social-link:hover svg,
body.mm-podcast .mm-social-row .wp-block-social-link:focus-within svg {
	fill: var( --mm-teal ) !important;
	color: var( --mm-teal ) !important;
}

/* Class names on the inner anchor vary between core versions, so target the
   element instead: every link in a host row is a bare square with a slate
   glyph, whatever core called it. */
body.mm-podcast .mm-social-row li,
body.mm-podcast .mm-social-row li > a {
	background: none !important;
	background-color: transparent !important;
	border-radius: 0 !important;
}

body.mm-podcast .mm-social-row li > a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0 !important;
	color: var( --mm-slate ) !important;
}

body.mm-podcast .mm-social-row svg {
	width: 24px;
	height: 24px;
	fill: var( --mm-slate ) !important;
	color: var( --mm-slate ) !important;
}

body.mm-podcast .mm-social-row li:hover { background: var( --mm-slate ) !important; }
body.mm-podcast .mm-social-row li:hover svg { fill: var( --mm-teal ) !important; }

/* -------------------------------------------------------------------------
 * Podcast page — the show's pink stands in for the teal
 * ---------------------------------------------------------------------- */

/*
 * Every teal on the site resolves through the palette variable, and custom
 * properties are resolved at the element that uses them. Redefining the two
 * teal presets on the body is therefore the whole swap: panels, buttons,
 * eyebrows, rules and icon frames all follow, on this page only.
 */
body.mm-podcast {
	--wp--preset--color--teal: #E02F77;
	--wp--preset--color--teal-deep: #B01B5C;
	/* --mm-teal resolves its var() where it is declared (on :root) and then
	   inherits already resolved, so the alias has to be restated here too. */
	--mm-teal: #E02F77;
}

/*
 * Buttons keep the teal. These variables are read on the element itself, so
 * handing the button its own copies flips it back without touching anything
 * around it — fill, outline and ghost styles all follow.
 */
body.mm-podcast :is( .wp-block-button__link, .wp-element-button, .wp-block-button ) {
	--wp--preset--color--teal: #52C4C4;
	--wp--preset--color--teal-deep: #1B7C7C;
	--mm-teal: #52C4C4;
}

/* The lockup divider. The band takes the artwork's own white, not the theme
   paper, so the image has no visible edge against it. */
.mm-tioli-divider {
	line-height: 0;
	background: #FFFFFF !important;
}

.mm-tioli-divider img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 760px;
	margin-inline: auto;
}

@media ( max-width: 780px ) {
	.mm-tioli-divider img { max-width: 100%; }
}

/*
 * The host portraits are colour collages, so the site-wide black-and-white
 * treatment on hero photos comes off here — and the panels match the art's
 * 3:4 crop, so the photos sit centred rather than pulled toward the top.
 */
body.mm-podcast .mm-hero__photo img,
body.mm-podcast .mm-hero--duo .mm-hero__photo img {
	filter: none;
	object-position: 50% 50%;
}

/* -------------------------------------------------------------------------
 * Podcast page — palette pulled from podcasttakeitorleaveit.com
 * ---------------------------------------------------------------------- */

/*
 * The show's own site runs deep navy grounds, one hot pink band and a cream
 * light section. The greys are remapped to navy here so the whole page sits
 * in that world; pink stays the accent and teal stays the click.
 */
body.mm-podcast {
	--wp--preset--color--charcoal: #16283A;
	--wp--preset--color--slate: #1D3247;
	--wp--preset--color--elevated: #26405A;
	--wp--preset--color--inset: #2E4B68;
	--wp--preset--color--hairline: #3E5D7C;

	/* Aliases resolve where they are declared, so they are restated. */
	--mm-charcoal: #16283A;
	--mm-slate: #1D3247;
	--mm-elevated: #26405A;
	--mm-inset: #2E4B68;
	--mm-hairline: #3E5D7C;
	--mm-rule: #34506C;
	--mm-cream: #F3EEE3;
}

/* Pink surfaces carry white type on the reference site, and it reads better. */
body.mm-podcast .mm-hero__panel,
body.mm-podcast .mm-hero__panel :is( h1, h2, h3, h4, h5, h6, p ),
body.mm-podcast .mm-hero__eyebrow,
body.mm-podcast .mm-hero__names { color: var( --mm-paper ); }

/* -------------------------------------------------------------------------
 * Listen wherever — pink band, white marks, straight from the reference
 * ---------------------------------------------------------------------- */

.mm-platform-band .is-style-mm-eyebrow { color: var( --mm-paper ); }

.mm-platform-row {
	display: grid;
	grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
	gap: 1.5rem 1rem;
}

.mm-platform {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.75rem;
	color: var( --mm-paper );
	text-decoration: none;
	padding: 0.375rem 0;
}

.mm-platform__mark {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var( --mm-paper );
	transition: transform 0.2s ease, background 0.2s ease;
}

.mm-platform__mark svg {
	width: 24px;
	height: 24px;
	fill: var( --wp--preset--color--teal, #E02F77 );
}

.mm-platform__name {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.3;
}

.mm-platform:hover .mm-platform__mark,
.mm-platform:focus-visible .mm-platform__mark {
	transform: scale( 1.08 );
	background: var( --mm-slate );
}

.mm-platform:hover .mm-platform__mark svg,
.mm-platform:focus-visible .mm-platform__mark svg { fill: var( --mm-paper ); }

.mm-platform:focus-visible { outline: 2px solid var( --mm-paper ); outline-offset: 4px; }

@media ( max-width: 640px ) {
	.mm-platform-row { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
}

/* -------------------------------------------------------------------------
 * Meet the hosts — the reference's cream section
 * ---------------------------------------------------------------------- */

.mm-hosts :is( h2, h4 ) { color: var( --mm-slate ); }
.mm-hosts p { color: var( --mm-slate ); }

/* One utility bar link belongs to the home page's newsletter band, which this
   page does not have, so it is dropped here rather than pointing nowhere. */
body.mm-podcast .mm-utility-bar p:has( a[href="#newsletter"] ) { display: none; }

/* With the newsletter link gone the bar has one child left, and space-between
   parks it on the left. Push the nav back to where it sits everywhere else. */
body.mm-podcast .mm-utility-bar { justify-content: flex-end; }

/*
 * Everywhere else: hovering inverts the tile rather than washing it out. The
 * glyph inherits its colour from core at a weight a plain rule loses to, so
 * the inverted state states both the anchor colour and the fill outright.
 */
.mm-social-row .wp-block-social-link:hover,
.mm-social-row .wp-block-social-link:focus-within {
	background: var( --mm-paper ) !important;
	border-color: var( --mm-paper );
}

.mm-social-row .wp-block-social-link:hover .wp-block-social-link-anchor,
.mm-social-row .wp-block-social-link:focus-within .wp-block-social-link-anchor {
	color: var( --mm-slate ) !important;
}

.mm-social-row .wp-block-social-link:hover svg,
.mm-social-row .wp-block-social-link:focus-within svg {
	fill: var( --mm-slate ) !important;
	color: var( --mm-slate ) !important;
}

/* The Apple mark is a mask rather than a glyph, so it inverts on its own. */
.mm-social-row .wp-block-social-link:nth-child( 5 ):hover .wp-block-social-link-anchor::before,
.mm-social-row .wp-block-social-link:nth-child( 5 ):focus-within .wp-block-social-link-anchor::before {
	background: var( --mm-slate ) !important;
}

/*
 * The hero call to action takes the reference site's yellow. It is the one
 * button on the page that is not a subscribe action, and the yellow keeps it
 * distinct from the teal ones below without competing with the pink panel.
 */
body.mm-podcast .mm-hero__panel .wp-block-button__link,
body.mm-podcast .mm-hero__panel .wp-element-button {
	background-color: #F6C324;
	color: var( --mm-slate );
}

body.mm-podcast .mm-hero__panel .wp-block-button__link:hover,
body.mm-podcast .mm-hero__panel .wp-block-button__link:focus,
body.mm-podcast .mm-hero__panel .wp-element-button:hover,
body.mm-podcast .mm-hero__panel .wp-element-button:focus {
	background-color: var( --mm-paper );
	color: var( --mm-slate );
}

/* The show's tagline, set in the lockup's script weight between the title and
   the hosts' names. */
.mm-hero__tagline {
	font-family: var( --mm-font );
	font-size: clamp( 0.9375rem, 2.2cqw, 1.1875rem );
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.3;
	margin: 0;
	color: var( --mm-paper );
}

/* -------------------------------------------------------------------------
 * Newsletter popup
 * ---------------------------------------------------------------------- */

/*
 * The teal band's offer, made once more to anyone who scrolled past it. The
 * panel reuses .mm-newsletter__form, so the fields and button already match
 * the band without restating any of it.
 */
/*
 * `display: flex` from an author stylesheet beats the browser's own
 * `[hidden] { display: none }`, so without the first rule here the closed
 * popup stays in the layout — a transparent, full-viewport, z-index 200 box
 * that silently swallows every click on the page. Belt and braces: it is also
 * taken out of hit-testing and out of the accessibility tree until it opens.
 */
.mm-popup[hidden] { display: none; }

.mm-popup {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.mm-popup.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.25s ease, visibility 0s;
}

.mm-popup__scrim {
	position: absolute;
	inset: 0;
	background: rgba( 10, 12, 12, 0.72 );
	cursor: pointer;
}

.mm-popup__panel {
	position: relative;
	width: min( 100%, 520px );
	max-height: calc( 100vh - 2.5rem );
	overflow-y: auto;
	background: var( --mm-teal );
	color: var( --mm-slate );
	padding: clamp( 1.75rem, 4vw, 2.75rem );
	transform: translateY( 12px ) scale( 0.98 );
	transition: transform 0.25s ease;
}

.mm-popup.is-open .mm-popup__panel { transform: none; }

.mm-popup__panel:focus { outline: none; }

.mm-popup__title {
	font-family: var( --mm-display );
	font-size: clamp( 2rem, 6vw, 2.75rem );
	line-height: 0.95;
	text-transform: uppercase;
	color: var( --mm-slate );
	margin: 0 0 0.625rem;
}

.mm-popup__copy {
	margin: 0 0 1.5rem;
	font-weight: 500;
	color: var( --mm-slate );
}

.mm-popup__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: var( --mm-slate );
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.mm-popup__close svg { width: 18px; height: 18px; display: block; }

.mm-popup__close:hover,
.mm-popup__close:focus-visible {
	background: var( --mm-slate );
	color: var( --mm-teal );
}

/* The popup is a second ask; on a short screen it should not fill the view. */
@media ( max-height: 620px ) {
	.mm-popup__panel { padding: 1.25rem 1.25rem 1.5rem; }
	.mm-popup__title { font-size: 1.75rem; }
	.mm-popup__copy { margin-bottom: 1rem; }
}

@media ( prefers-reduced-motion: reduce ) {
	.mm-popup,
	.mm-popup__panel { transition: none; }
}