/* ==========================================================================
   MIRRORS® Microsite
   Built from the designer's PDF mockup (desktop 1728 / mobile 390).

   Everything is scoped under .mm-root so it cannot leak into the theme,
   and the theme has a hard time leaking in.

   Sections in this file:
     1.  Tokens
     2.  Reset inside the microsite
     3.  Scroll-reveal engine
     4.  Hero
     5.  Scene layout (text + bleeding image / player)
     6.  Typography
     7.  Audio player card (play / STOP)
     8.  Footer + back to top
     9.  Responsive
     10. Reduced motion / no-JS
   ========================================================================== */

/* 0. Self-hosted webfonts ---------------------------------------------------
   Saira Condensed and Geologica, the designer's choices, served from this
   plugin rather than from Google.

   Loading them from fonts.googleapis.com disclosed every visitor's IP address
   and user agent to a third party on each view of a page that is supposed to be
   confidential — including the lock screen, before anyone had even entered the
   password. A German court has already held that arrangement unlawful under
   GDPR (LG Munchen I, 3 O 17493/20), and the audience for this site plausibly
   includes EU press.

   Both families are SIL Open Font License 1.1; the licences ship in
   assets/fonts/. About 376KB across both, and a browser fetches only the
   subsets and weights a page actually uses.

   NEITHER FAMILY HAS AN ITALIC. Not an omission here — Google ships none, and
   the italic in the designer's file is Figma synthesising a slant. `font-style:
   italic` asks the browser to do exactly the same thing, so the two match; there
   is no italic file to add and no point looking for one.

   To go back to Google's CDN (not recommended):
       add_filter( 'mirrors_microsite_google_fonts', '__return_true' );
   --------------------------------------------------------------------------- */

@font-face {
	font-family: "Saira Condensed";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/saira-condensed-latin-ext-400-normal.woff2") format("woff2"),
	     url("../fonts/saira-condensed-latin-ext-400-normal.woff") format("woff");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Saira Condensed";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/saira-condensed-latin-400-normal.woff2") format("woff2"),
	     url("../fonts/saira-condensed-latin-400-normal.woff") format("woff");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Geologica";
	font-style: normal;
	font-weight: 100;
	font-display: swap;
	src: url("../fonts/geologica-latin-ext-100-normal.woff2") format("woff2"),
	     url("../fonts/geologica-latin-ext-100-normal.woff") format("woff");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Geologica";
	font-style: normal;
	font-weight: 100;
	font-display: swap;
	src: url("../fonts/geologica-latin-100-normal.woff2") format("woff2"),
	     url("../fonts/geologica-latin-100-normal.woff") format("woff");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Geologica";
	font-style: normal;
	font-weight: 200;
	font-display: swap;
	src: url("../fonts/geologica-latin-ext-200-normal.woff2") format("woff2"),
	     url("../fonts/geologica-latin-ext-200-normal.woff") format("woff");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Geologica";
	font-style: normal;
	font-weight: 200;
	font-display: swap;
	src: url("../fonts/geologica-latin-200-normal.woff2") format("woff2"),
	     url("../fonts/geologica-latin-200-normal.woff") format("woff");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Geologica";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/geologica-latin-ext-300-normal.woff2") format("woff2"),
	     url("../fonts/geologica-latin-ext-300-normal.woff") format("woff");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Geologica";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/geologica-latin-300-normal.woff2") format("woff2"),
	     url("../fonts/geologica-latin-300-normal.woff") format("woff");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Geologica";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/geologica-latin-ext-400-normal.woff2") format("woff2"),
	     url("../fonts/geologica-latin-ext-400-normal.woff") format("woff");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Geologica";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/geologica-latin-400-normal.woff2") format("woff2"),
	     url("../fonts/geologica-latin-400-normal.woff") format("woff");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Geologica";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/geologica-latin-ext-700-normal.woff2") format("woff2"),
	     url("../fonts/geologica-latin-ext-700-normal.woff") format("woff");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Geologica";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/geologica-latin-700-normal.woff2") format("woff2"),
	     url("../fonts/geologica-latin-700-normal.woff") format("woff");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 1. Tokens ---------------------------------------------------------------- */

.mm-root {
	/* Bump with every release — `MirrorsMicrosite.debug().cssVersion` reads it
	   back, which answers "is the new stylesheet actually live, or am I looking
	   at a cached copy?" in one step. */
	--mm-css-version: "1.12.0";

	/* Alignment values live here so the inline styles in the markup can be
	   responsive. See the note in section 10 for why they are inline at all. */
	--mm-align-heading: left;
	--mm-align-body: left;

	/* Palette sampled from the mockup */
	--mm-bg: #000000;
	--mm-ink: #ffffff;
	--mm-gold: #ed9f52;
	--mm-gold-soft: rgba(237, 159, 82, 0.78);
	--mm-gold-faint: rgba(237, 159, 82, 0.5);
	/* The copyright line is grey in his file, not a faded gold: #6C6C6C, read
	   from the glyph fills in the PDF. */
	--mm-legal: #6c6c6c;
	--mm-neon: #d86bfc;
	--mm-neon-deep: #a835ff;
	--mm-card: #131313;

	/* Type — swap these two lines when the licensed brand faces are installed */
	--mm-font-head: "Saira Condensed", "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
	--mm-font-body: "Geologica", "Inter", system-ui, -apple-system, sans-serif;

	/* The designer's weights, by name: Saira Condensed Regular is 400;
	   Geologica Thin is 100 and Extra Light is 200. */
	--mm-w-head: 400;
	--mm-w-body: 100;
	--mm-w-light: 200;
	--mm-w-regular: 400;   /* the copyright line, per his spec */
	--mm-w-bold: 700;      /* the emphasis lines in "What Lies Beneath" */

	/* The type scale lives here so section 6 and the builder-hardening block in
	   section 10 can never drift apart. Change a size once, in this list. */
	--mm-fs-body: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);          /* 20pt */
	/* 1.25 is his: 20pt type on a 25pt pitch, measured from the artboard. The
	   1.78 here before was set for Jost and is visibly looser than he drew. */
	--mm-lh-body: 1.25;

	/* The scene copy sits directly on the photographs, so it needs help where the
	   artwork has not fully faded out.

	   The repeated middle layer is the point. A single text-shadow barely registers
	   behind type this light — Geologica Thin has very little edge to cast from, and
	   a blurred shadow's alpha falls away fast, so one 8px layer knocked the
	   background back by only 3%. Painting the same shadow three times compounds the
	   coverage close in without widening it, which reads as a crisp dark edge rather
	   than a halo. Measured against the pixels that actually cause trouble — lit
	   picture within ~8px of a letter — this takes them 9% darker.

	   Want it stronger? Five repeats at 10px/0.8 gets to 17%, at the cost of
	   starting to look like a glow on the darker scenes. Weaker: drop the repeats. */
	--mm-scene-shadow:
		0 1px 2px rgba(0, 0, 0, 0.95),
		0 0 8px rgba(0, 0, 0, 0.75),
		0 0 8px rgba(0, 0, 0, 0.75),
		0 0 8px rgba(0, 0, 0, 0.75),
		0 0 18px rgba(0, 0, 0, 0.6);
	--mm-fs-heading: clamp(1.9rem, 1rem + 2vw, 3.125rem);        /* 50pt */
	--mm-fs-tagline: clamp(1.25rem, 0.6rem + 1.55vw, 2.25rem);   /* 36pt */
	--mm-fs-eyebrow: clamp(0.95rem, 0.85rem + 0.4vw, 1.25rem);   /* 20pt */
	--mm-fs-track: clamp(1.1rem, 0.9rem + 0.7vw, 1.5625rem);     /* 25pt */
	--mm-fs-performer: clamp(0.95rem, 0.85rem + 0.4vw, 1.25rem); /* 20pt */
	/* His 14px, held wherever the line fits on one line, and shrinking only when
	   it would otherwise break. The string needs 1051px at 14px in Geologica
	   Regular and the footer offers about 0.9 of the viewport, so 14px fits from
	   roughly 1170px up; the ramp below that is set to track the space available
	   rather than guess. Phones get a fixed readable size in the media query and
	   wrap, which is unavoidable — one line at 390px would need a 3px font. */
	--mm-fs-legal: clamp(0.8rem, 0.43px + 1.16vw, 0.875rem);
	/* His BACK TO TOP is Saira Condensed Regular at 40pt. */
	--mm-fs-totop: clamp(1.5rem, 0.6rem + 1.76vw, 2.5rem);
	--mm-totop-gap: clamp(10px, 1.42vw, 26px);

	/* Metrics */
	/* 1560, not a round 1400: his text column sits 9.6% in from the page edge
	   and runs 38.5% across. With the 12-column grid and its gaps, this width
	   reproduces both figures exactly — and it matters for more than tidiness,
	   because the copy now sits over the black part of the photograph instead
	   of the lit wall behind it. */
	--mm-maxw: 1560px;
	--mm-pad: clamp(20px, 5vw, 80px);
	--mm-bleed: calc((100vw - min(100vw, var(--mm-maxw))) / 2 + var(--mm-pad));
	/* Space above and below each scene, so the gap between two of them is twice
	   this. His artboard runs a median 212pt between sections on a 1728pt page —
	   12.2% of the width — and this build was at 380px, nearly twice that. 6.15vw
	   puts the gap back on his number at 1728 and holds the same proportion at
	   other widths, with a cap so an ultrawide monitor does not drift into a
	   trough of black. */
	--mm-scene-space: clamp(54px, 6.15vw, 150px);

	position: relative;
	background: var(--mm-bg);
	color: var(--mm-gold);
	font-family: var(--mm-font-body);
	font-weight: var(--mm-w-body);
	font-size: var(--mm-fs-body);
	line-height: var(--mm-lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

/* Break out of a theme's constrained content column. */
.mm-root--fullwidth {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* 2. Reset inside the microsite -------------------------------------------- */

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

/* :where() keeps the reset at zero specificity, so the rules further down (and
   any deliberate override) win without an !important arms race with the theme. */
.mm-root :where(p, h2, figure, figcaption) {
	margin: 0;
	padding: 0;
}

.mm-root :where(img, svg) {
	max-width: 100%;
	height: auto;
	display: block;
	border: 0;
}

.mm-root :where(a) {
	color: inherit;
	text-decoration: none;
	box-shadow: none;
}

.mm-root a:focus-visible,
.mm-root button:focus-visible {
	outline: 2px solid var(--mm-neon);
	outline-offset: 8px;
	border-radius: 6px;
}

.mm-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Registered-mark glyphs, small like the mockup */
.mm-root .mm-reg {
	font-size: 0.62em;
	vertical-align: 0.42em;
	letter-spacing: -0.05em;
}

/* 3. Scroll-linked dissolve -------------------------------------------------- */
/* The four custom properties below are written by the JS on every animation
   frame, from the element's position in the viewport — so the dissolve is tied
   to the scroll wheel, not to a timer that fires once. The hidden state only
   applies once JS has flagged the root (.mm-js), so the page stays fully
   readable if scripts fail or are blocked.

   Tune the feel in assets/js/mirrors-microsite.js → ENTER_AT / BAND / STAGGER /
   MOTION. */

.mm-root.mm-js .mm-reveal {
	opacity: var(--mm-o, 0);
	transform: translate3d(0, var(--mm-y, 30px), 0) scale(var(--mm-s, 1));
	filter: blur(var(--mm-b, 7px));
	will-change: opacity, transform, filter;
}

/* Artwork and player cards dissolve with scale alone — blurring a full-bleed
   photograph every frame is expensive and reads as "out of focus", not "faint". */
.mm-root.mm-js .mm-reveal--media,
.mm-root.mm-js .mm-reveal--card {
	filter: none;
}

/* Fallback (no IntersectionObserver, or reduced motion): show it, plainly. */
.mm-root.mm-js .mm-reveal.is-visible {
	opacity: 1;
	transform: none;
	filter: none;
}

/* 4. Hero ------------------------------------------------------------------ */

.mm-hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: grid;
	place-items: center;
	padding: clamp(72px, 12vh, 140px) var(--mm-pad) clamp(110px, 16vh, 170px);
}

.mm-hero__logo {
	position: relative;
	width: min(760px, 80vw);
	margin-inline: auto;
}

.mm-hero__logo-img {
	width: 100%;
}

.mm-hero__tagline {
	position: absolute;
	top: 65.5%;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	white-space: nowrap;
	color: var(--mm-gold);
	font-weight: var(--mm-w-light);
	font-size: var(--mm-fs-tagline);
	line-height: 1;
	letter-spacing: 0.005em;
}

.mm-scrollcue {
	position: absolute;
	left: 50%;
	bottom: clamp(26px, 6vh, 68px);
	transform: translateX(-50%);
	/* Padding, not size: keeps the chevron small but the tap area ~78x44. */
	display: block;
	padding: 15px 22px;
	color: var(--mm-neon);
	filter: drop-shadow(0 0 10px rgba(216, 107, 252, 0.55));
	animation: mm-bob 2.8s ease-in-out infinite;
}

.mm-scrollcue .mm-chevron {
	width: clamp(34px, 3vw, 46px);
}

.mm-scrollcue:hover {
	color: #f0a9ff;
}

@keyframes mm-bob {
	0%, 100% { transform: translate(-50%, 0); }
	50%      { transform: translate(-50%, 9px); }
}

/* 5. Scene layout ---------------------------------------------------------- */

.mm-scene {
	position: relative;
	padding-block: var(--mm-scene-space);
}

.mm-scene__inner {
	max-width: var(--mm-maxw);
	margin-inline: auto;
	padding-inline: var(--mm-pad);
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: clamp(28px, 4vw, 90px);
	align-items: center;
}

/* Text left  → companion right */
.mm-scene--text-left .mm-scene__text {
	grid-column: 1 / span 6;
	grid-row: 1;
}

.mm-scene--text-left .mm-scene__aside {
	grid-column: 7 / -1;
	grid-row: 1;
}

/* Text right → companion left */
.mm-scene--text-right .mm-scene__text {
	grid-column: 7 / -1;
	grid-row: 1;
}
.mm-scene--text-right .mm-scene__aside {
	grid-column: 1 / span 6;
	grid-row: 1;
}

/* Scene images span the whole width and the text sits ON them, which is how the
   mockup is drawn — not two tidy columns side by side.

   Measured off the designer's own file (page 1728pt wide): his photographs are
   placed 97%-117% of the page across, running off the outer edge, while the
   text column is ~38% and OVERLAPS them. On "The Story" the picture begins at
   24.7% while the text runs to 48%; on "The World He Enters" the picture
   reaches 95.7% while the text starts at 50%. Confining each image to its own
   half, as this did before, rendered them at 50% of the width — roughly half
   the size he drew, which is what he was reacting to.

   The text stays readable because the fade is painted into the artwork: the
   inboard edge of each photograph is already black. Nothing is overlaid to
   fake it. */
.mm-scene--with-image .mm-scene__aside {
	grid-column: 1 / -1;
	grid-row: 1;
}

.mm-scene--with-image .mm-scene__text {
	position: relative;
	z-index: 1; /* above the photograph it now sits on */
}

/* Desktop only. Below 1100px the scenes stack and the block above takes over. */
@media (min-width: 1101px) {

	/* The aside is widened to exactly the viewport, so the figures below are
	   measured from the left edge of the window and can be read straight off
	   the designer's file. */
	.mm-scene--with-image .mm-scene__aside {
		margin-inline: calc(-1 * var(--mm-bleed));
	}

	/* Scoped to .mm-root and marked important on purpose. The builder-hardening
	   block in section 10 pins every image with `margin: 0 !important;
	   max-width: 100% !important` to stop Divi stretching them, and that lands
	   later in this file — so a plain rule here applies and is then silently
	   clamped back to the container, which is indistinguishable from the rule
	   being ignored. (Same trap as the stop button in 1.9.9; it is now the
	   second time, so: anything here that sets an image's width has to outrank
	   section 10 as well as the page builder.) */
	.mm-root .mm-scene--with-image .mm-scene__img {
		width: var(--mm-img-w) !important;
		max-width: none !important;
		margin-left: var(--mm-img-x) !important;
		margin-right: 0 !important;
	}

	/* Every placement read straight off his artboard, as fractions of the
	   1728pt page: where the picture's left edge sits, and how wide it is. He
	   positioned each one by hand and they are not interchangeable — the three
	   on the right run 105%-117% of the page and are cropped by the edge, the
	   three on the left are close to their natural size. The fade that makes
	   the copy readable is painted into each file at a fixed point, so moving a
	   picture away from its own placement slides that fade out from under the
	   text. */
	/* Fallback first, so artwork that arrives without a placement of its own
	   still lands somewhere sensible. The per-image rules below match it for
	   specificity and come later, so they win. */
	.mm-scene--with-image.mm-scene--text-left  { --mm-img-x: 24.7vw; --mm-img-w: 117.2vw; }
	.mm-scene--with-image.mm-scene--text-right { --mm-img-x: -1.1vw; --mm-img-w:  96.8vw; }

	.mm-scene--with-image.mm-scene--img-study      { --mm-img-x:  24.7vw; --mm-img-w: 117.2vw; }
	.mm-scene--with-image.mm-scene--img-seduction  { --mm-img-x:  16.7vw; --mm-img-w: 105.2vw; }
	.mm-scene--with-image.mm-scene--img-tango      { --mm-img-x:   7.5vw; --mm-img-w: 117.2vw; }
	.mm-scene--with-image.mm-scene--img-club       { --mm-img-x:  -1.1vw; --mm-img-w:  96.8vw; }
	.mm-scene--with-image.mm-scene--img-magda      { --mm-img-x: -19.0vw; --mm-img-w:  96.8vw; }
	.mm-scene--with-image.mm-scene--img-invitation { --mm-img-x: -26.1vw; --mm-img-w:  96.8vw; }

	/* His artboard crops what runs past the page; this does the same, and keeps
	   an image that is wider than the window from adding a horizontal scrollbar
	   inside a page builder that does not clip for us. */
	.mm-scene--with-image {
		overflow: hidden;
	}
}

.mm-scene__img {
	width: 100%;
	transform: translate3d(0, var(--mm-par, 0px), 0);
}

.mm-scene__text {
	max-width: 42em;
}
/* Only the scene copy: the player cards and the footer sit on flat black and
   have nothing behind them to fight. */
.mm-scene__text .mm-heading,
.mm-scene__text .mm-p,
.mm-scene__text .mm-signature__name,
.mm-scene__text .mm-signature__role {
	text-shadow: var(--mm-scene-shadow);
}


/* 6. Typography ------------------------------------------------------------ */

.mm-heading {
	font-family: var(--mm-font-head);
	/* 400, not 500: with the real Oswald installed the mockup's headings read
	   noticeably lighter and more open than a medium weight. */
	font-weight: var(--mm-w-head);
	font-size: var(--mm-fs-heading);
	line-height: 1.05;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--mm-ink);
	margin-bottom: clamp(18px, 1.6vw, 28px);
}

.mm-copy > * + * {
	margin-top: 1.15em;
}

.mm-p {
	color: var(--mm-gold);
	font-weight: var(--mm-w-body);
}

.mm-p--lead {
	color: var(--mm-ink);
	font-style: italic;
	font-weight: var(--mm-w-light);
	font-size: var(--mm-fs-track);   /* 25pt, as labelled */
	margin-top: 1.5em;
}

/* The two emphasis lines in "What Lies Beneath". His artboard has them only
   slightly heavier than body — measured at 1.58x the Thin stroke, which is about
   Light — but he has since asked for them bold, so this is 700, the weight the
   CSS keyword `bold` maps to. One token to dial back if it reads too heavy
   against copy this light. */
.mm-p--strong {
	color: var(--mm-ink);
	font-weight: var(--mm-w-bold);
}

.mm-p--em {
	color: var(--mm-ink);            /* #FFFFFF in his file, not the body gold */
	font-style: italic;
	font-weight: var(--mm-w-light);
	font-size: var(--mm-fs-track);   /* 25pt, as labelled */
	margin-top: 1.45em;
}

/* Body copy that he set in white rather than gold — the closing invitation
   lines. Same size and weight as .mm-p, colour only. */
.mm-p--ink {
	color: var(--mm-ink);
}

.mm-signature {
	margin-top: clamp(34px, 4vw, 56px);
	text-align: center;
	line-height: 1.5;
}

.mm-signature__name {
	display: block;
	color: var(--mm-gold);   /* #ED9F52 in his file, same gold as the role below */
	font-style: italic;
	font-weight: var(--mm-w-light);
}

.mm-signature__role {
	display: block;
	color: var(--mm-gold);
	font-size: 0.95em;
}

/* 7. Audio player card ------------------------------------------------------ */

.mm-player {
	/* 775px is his card, measured off the artboard — the type sizes he labelled
	   (20pt / 25pt / 20pt) are relative to a card this wide, so at 520 they came
	   out looking oversized. The button is unchanged: min(300px, 64%) is 300px
	   at both widths, against his 295. */
	width: min(100%, 775px);
	margin-inline: auto;
	background: var(--mm-card);
	border-radius: 28px;
	padding: clamp(26px, 3vw, 46px) clamp(22px, 2.6vw, 40px) clamp(24px, 2.6vw, 38px);
	text-align: center;
}

.mm-player__button {
	position: relative;
	display: block;
	width: min(300px, 64%);
	aspect-ratio: 1 / 1;
	margin: 0 auto clamp(16px, 2vw, 26px);
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.4s cubic-bezier(0.22, 0.7, 0.3, 1);
}

.mm-player__button:hover {
	transform: scale(1.04);
}

.mm-player__button:active {
	transform: scale(0.98);
}

.mm-player__icon {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 0.7, 0.3, 1);
}

.mm-player__icon img,
.mm-player__icon svg {
	width: 100%;
	height: auto;
}

/* STOP — the designer's artwork (assets/img/stopbtn.png).
   It carries its own neon glow, baked in exactly as the play button's does, so
   there is no CSS filter here: adding one would double the bloom on this state
   and not the other, and the two would stop looking like one set. */

/* The square is drawn LARGER than the triangle, deliberately, and this keeps
   his proportion.

   Measured off his own comparison, both glyphs lifted from the same image by
   the same method: play 414x427, stop 448x447 — a ratio of 1.064 by geometric
   mean, not the 10% a quick look suggests. (A cruder brightness threshold reads
   it as 1.10, because the square's four straight edges throw a wider halo than
   the triangle's and a fixed cutoff catches more of it. Measuring both by
   un-compositing them off their background treats them alike.)

   On their shared 520x520 canvases the stop glyph is fractionally the smaller
   of the two — 481 against 495 — so equal boxes would render it at 0.972 of the
   play. 1.064 / 0.972 = 1.095, hence the width below. The icon is centred in an
   absolutely positioned box with nothing clipping it, so it simply overflows
   symmetrically; no layout anywhere is disturbed.

   `max-width` has to be lifted with it. The base reset above carries
   `:where(img, svg) { max-width: 100% }`, and although :where() has no
   specificity to beat, max-width is a separate property — so the width applied
   and was then silently clamped back to the box, which looks exactly like the
   rule not working at all. Both declarations are !important because a page
   builder's own `img { max-width: 100% }` (Divi's is ID-scoped, so it outranks
   any class selector here) would otherwise reimpose the same cap in production
   while everything looked correct locally.

   For the two states at identical size instead, delete this rule. */
.mm-player__icon--stop img {
	width: 104% !important;
	max-width: none !important;
}

/* Idle: play visible. Playing: stop visible. */
.mm-player__icon--stop {
	opacity: 0;
	transform: scale(0.82);
}

.mm-player.is-playing .mm-player__icon--play {
	opacity: 0;
	transform: scale(0.82);
}

.mm-player.is-playing .mm-player__icon--stop {
	opacity: 1;
	transform: scale(1);
	animation: mm-pulse 2.6s ease-in-out infinite;
}

/* A slow breath while a track plays, so the button reads as live rather than
   merely swapped. Much gentler than the old version, which had to manufacture
   the entire glow with drop-shadows because the placeholder SVG had none; the
   artwork supplies its own, and this only lifts it a little at the peak. */
@keyframes mm-pulse {
	0%, 100% {
		filter: none;
	}
	50% {
		filter: drop-shadow(0 0 14px rgba(190, 80, 255, 0.45));
	}
}

.mm-player.is-loading .mm-player__button {
	cursor: progress;
	opacity: 0.75;
}

.mm-player__meta {
	line-height: 1.5;
}

.mm-player__eyebrow {
	color: var(--mm-gold);
	font-size: var(--mm-fs-eyebrow);
	letter-spacing: 0;   /* measured: his is untracked */
	text-transform: uppercase;
	font-weight: var(--mm-w-body);
}

.mm-player__title {
	margin-top: 0.35em;
	color: var(--mm-ink);
	font-style: italic;
	font-weight: var(--mm-w-light);
	font-size: var(--mm-fs-track);
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.mm-player__performer {
	margin-top: 0.3em;
	color: var(--mm-gold-soft);
	font-size: var(--mm-fs-performer);
}

.mm-player__audio {
	display: none;
}

/* 8. Footer + back to top --------------------------------------------------- */

.mm-footer {
	padding: clamp(40px, 6vw, 90px) var(--mm-pad) clamp(34px, 4vw, 60px);
	text-align: center;
}

.mm-footer__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.mm-legal {
	/* No em cap here: max-width in em scales with the type, so it holds the same
	   character count however small the text gets — which is exactly why the
	   trailing "LLC." kept wrapping. The footer's own width constrains it. */
	max-width: none;
}

.mm-totop {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	/* Measured off his artboard: 31.5pt of clear space between the bottom of the
	   chevron and the cap-line of the words. The flex gap is smaller than that
	   number because the label's line box carries its own leading above the
	   caps — the value below was tuned against a render, not calculated. */
	gap: var(--mm-totop-gap);
	padding: 10px 20px; /* comfortable tap target on touch screens */
	color: var(--mm-neon);
	/* His is flat — no bloom on the footer chevron or the words. Restore with
	   `filter: drop-shadow(0 0 10px rgba(216, 107, 252, 0.45));` if he wants the
	   neon treatment here after all. */
	transition: transform 0.35s ease, color 0.35s ease;
}

.mm-totop:hover {
	transform: translateY(-4px);
	color: #f0a9ff;
}

.mm-chevron {
	width: clamp(32px, 2.85vw, 49px);   /* 49pt in his file */
}

.mm-totop__label {
	font-family: var(--mm-font-head);
	font-weight: var(--mm-w-head);
	font-size: var(--mm-fs-totop);
	/* His words measure 162px of ink at 40px; untracked Saira Condensed gives 182,
	   and the 0.06em here before gave 206 — 27% too wide. -0.05em lands on his
	   162 exactly. His spec sheet did not mention tracking, so this is read off
	   the artboard rather than stated. */
	letter-spacing: -0.05em;
	text-transform: uppercase;
	line-height: 1;
}

.mm-legal {
	margin-top: clamp(44px, 6vw, 96px);
	color: var(--mm-legal);
	font-size: var(--mm-fs-legal);
	font-weight: var(--mm-w-regular);   /* Geologica Regular, per his spec */
	letter-spacing: 0.01em;
	line-height: 1.7;
	max-width: none;
	margin-inline: auto;
}

/* 9. Responsive ------------------------------------------------------------- */

@media (max-width: 1100px) {
	.mm-root {
		--mm-scene-space: clamp(44px, 5.5vw, 80px);
		/* Below the one-line threshold: pick legibility, let it wrap. */
		--mm-fs-legal: 0.72rem;
	}

	.mm-scene__inner {
		display: block;
	}

	/* Stacked: artwork above the copy, full-bleed, as drawn on the mobile page. */
	.mm-scene__aside {
		margin-inline: calc(-1 * var(--mm-pad)) !important;
		margin-bottom: clamp(22px, 5vw, 44px);
	}

	.mm-scene--with-player .mm-scene__aside {
		/**
		 * width:100% is load-bearing. Without it the three track cards come out
		 * at three different widths on a phone, each one sized to its own
		 * title — "I'm a Party Looking for a Place" made a card half again as
		 * wide as "Imagine", and since the button is a percentage of the card,
		 * the play buttons came out different sizes too. One cause, two
		 * symptoms.
		 *
		 * Two things conspire to shrink-wrap this box, and both have to be
		 * answered or the other one still does it:
		 *   - .mm-scene__inner carries `align-items: center` from the desktop
		 *     grid. Once the mobile rule below turns it into a flex COLUMN,
		 *     that centring acts on the horizontal axis and sizes children to
		 *     their content.
		 *   - `margin-inline: auto` on a flex child absorbs the free space
		 *     itself, which shrink-wraps the child even against
		 *     `align-items: stretch`.
		 * An explicit width settles it regardless of which one is in play.
		 */
		width: 100%;
		margin-inline: auto !important;
		margin-top: clamp(30px, 6vw, 50px);
		margin-bottom: 0;
	}

	/* Player cards read better under their copy on small screens. */
	.mm-scene--with-player .mm-scene__inner {
		display: flex;
		flex-direction: column-reverse;
		align-items: stretch; /* not the grid's `center` — see the note above */
	}

	.mm-scene__text {
		max-width: none;
	}

	.mm-heading {
		text-align: center;
	}

	.mm-player {
		width: min(100%, 440px);
	}

	/**
	 * Reserve two lines for the track title.
	 *
	 * "I'm a Party Looking for a Place" wraps to two lines on a phone while
	 * "Imagine" and "Mirror Mirror" take one, which left that card 25px taller
	 * than its neighbours. The cards sit in a vertical stack, so the effect is
	 * a stutter in the rhythm as you scroll rather than an obvious mismatch,
	 * but it is the same complaint as the widths and worth settling here.
	 *
	 * 2em against the 1.15 line-height below leaves the one-line titles
	 * optically centred in the reserved space rather than sitting high in it.
	 */
	.mm-player__title {
		/* Two lines exactly: 2 x the line-height below. 2em was the obvious
		   guess and it left 5px on the table, because a wrapped two-line title
		   is 2 x 1.15em, not 2em. */
		min-height: 2.3em;
		line-height: 1.15;
	}
}

/* Phones held sideways (and any short window): the full-height hero would crop
   the wordmark, so shrink the mark and let the hero be only as tall as it needs. */
@media (max-height: 560px) and (orientation: landscape) {
	.mm-hero {
		min-height: 0;
		padding-block: clamp(26px, 8vh, 48px) clamp(58px, 16vh, 84px);
	}

	.mm-hero__logo {
		width: min(420px, 42vw);
	}

	.mm-scrollcue {
		bottom: 8px;
	}
}

@media (max-width: 600px) {
	.mm-root {
		--mm-fs-body: 1rem;
		/* A little air back on phones, where the copy is small and the measure
		   is short; his artboard only had to work at one width. */
		--mm-lh-body: 1.45;
	}

	.mm-hero {
		min-height: 92svh;
	}

	.mm-hero__logo {
		width: min(560px, 88vw);
	}

	.mm-player__button {
		width: min(220px, 62%);
	}
}

/* 10. Page-builder hardening -------------------------------------------------
   Divi (and Avada, WPBakery, Themify...) ship rules like

       .et-db #et-boc .et-l p { font-size: 14px; font-family: Georgia;
                                padding-bottom: 1em; color: #666 }

   An ID plus two classes outranks anything a class-based stylesheet can say, so
   inside a builder page every <p> in the microsite silently becomes the theme's
   body text: wrong face, wrong size, wrong colour, doubled spacing.

   This block re-asserts the essentials with !important. Every value comes from
   the tokens in section 1 — nothing is duplicated, so changing a size up there
   still changes it here. It is limited to typography and box basics, is scoped
   to .mm-root, and touches nothing the JS animates.
   ------------------------------------------------------------------------- */

.mm-root {
	font-family: var(--mm-font-body) !important;
	font-size: var(--mm-fs-body) !important;
	line-height: var(--mm-lh-body) !important;
	color: var(--mm-gold) !important;
	background: var(--mm-bg) !important;
	max-width: none !important;
}

.mm-root .mm-heading,
.mm-root .mm-p,
.mm-root .mm-hero__tagline,
.mm-root .mm-signature,
.mm-root .mm-legal,
.mm-root .mm-player__eyebrow,
.mm-root .mm-player__title,
.mm-root .mm-player__performer {
	padding: 0 !important;
	margin: 0 !important;
	text-shadow: none !important;
}

/* Alignment has to be STATED, not inherited. An inherited value loses to any
   direct declaration on the element no matter how weak that declaration is, so a
   single `p { text-align: left }` in a theme silently un-centres every centred
   line in here — which is exactly what happened to the copyright line in Divi. */

.mm-root .mm-p,
.mm-root .mm-heading {
	text-align: left !important;
}

.mm-root .mm-legal,
.mm-root .mm-signature,
.mm-root .mm-player__eyebrow,
.mm-root .mm-player__title,
.mm-root .mm-player__performer,
.mm-root .mm-gate__intro,
.mm-root .mm-gate__label,
.mm-root .mm-gate__hint,
.mm-root .mm-gate__error {
	text-align: center !important;
}

/* Headings centre when the layout stacks, same as the mobile mockup. */
@media (max-width: 1100px) {
	.mm-root {
		--mm-align-heading: center;
	}

	.mm-root .mm-heading {
		text-align: center !important;
	}
}

.mm-root .mm-heading {
	font-family: var(--mm-font-head) !important;
	font-size: var(--mm-fs-heading) !important;
	font-weight: var(--mm-w-head) !important;
	line-height: 1.05 !important;
	letter-spacing: 0.03em !important;
	text-transform: uppercase !important;
	color: var(--mm-ink) !important;
	margin-bottom: clamp(18px, 1.6vw, 28px) !important;
}

.mm-root .mm-p {
	font-family: var(--mm-font-body) !important;
	font-size: var(--mm-fs-body) !important;
	font-weight: var(--mm-w-body) !important;
	line-height: var(--mm-lh-body) !important;
	color: var(--mm-gold) !important;
}

.mm-root .mm-copy > * + * {
	margin-top: 1.15em !important;
}

.mm-root .mm-p--lead {
	color: var(--mm-ink) !important;
	font-style: italic !important;
	font-weight: var(--mm-w-light) !important;
	font-size: var(--mm-fs-track) !important;
	margin-top: 1.5em !important;
}

.mm-root .mm-p--strong {
	color: var(--mm-ink) !important;
	font-weight: var(--mm-w-bold) !important;
}

.mm-root .mm-p--em {
	color: var(--mm-ink) !important;
	font-style: italic !important;
	font-weight: var(--mm-w-light) !important;
	font-size: var(--mm-fs-track) !important;
	margin-top: 1.45em !important;
}

.mm-root .mm-p--ink {
	color: var(--mm-ink) !important;
}

.mm-root .mm-hero__tagline {
	font-family: var(--mm-font-body) !important;
	font-size: var(--mm-fs-tagline) !important;
	font-weight: var(--mm-w-light) !important;
	line-height: 1 !important;
	color: var(--mm-gold) !important;
}

.mm-root .mm-player__eyebrow {
	font-family: var(--mm-font-body) !important;
	font-size: var(--mm-fs-eyebrow) !important;
	font-weight: var(--mm-w-body) !important;
	letter-spacing: 0 !important;   /* measured: his is untracked */
	text-transform: uppercase !important;
	color: var(--mm-gold) !important;
}

.mm-root .mm-player__title {
	font-family: var(--mm-font-body) !important;
	font-size: var(--mm-fs-track) !important;
	font-style: italic !important;
	font-weight: var(--mm-w-light) !important;
	letter-spacing: 0.01em !important;
	text-transform: uppercase !important;
	color: var(--mm-ink) !important;
	margin-top: 0.35em !important;
}

.mm-root .mm-player__performer {
	font-family: var(--mm-font-body) !important;
	font-size: var(--mm-fs-performer) !important;
	color: var(--mm-gold-soft) !important;
	margin-top: 0.3em !important;
}

.mm-root .mm-signature {
	font-family: var(--mm-font-body) !important;
	font-size: var(--mm-fs-body) !important;
	line-height: 1.5 !important;
	margin-top: clamp(34px, 4vw, 56px) !important;
}

.mm-root .mm-signature__name {
	color: var(--mm-gold) !important;
	font-style: italic !important;
}

.mm-root .mm-signature__role {
	color: var(--mm-gold) !important;
}

.mm-root .mm-legal {
	font-family: var(--mm-font-body) !important;
	font-size: var(--mm-fs-legal) !important;
	font-weight: var(--mm-w-regular) !important;
	line-height: 1.7 !important;
	color: var(--mm-legal) !important;
	margin-top: clamp(44px, 6vw, 96px) !important;
	/* A builder that caps paragraph width would break the line again. */
	max-width: none !important;
}

.mm-root .mm-totop__label {
	font-family: var(--mm-font-head) !important;
	font-size: var(--mm-fs-totop) !important;
	font-weight: var(--mm-w-head) !important;
	letter-spacing: -0.05em !important;
	text-transform: uppercase !important;
	line-height: 1 !important;
}

.mm-root .mm-scrollcue,
.mm-root .mm-totop {
	color: var(--mm-neon) !important;
	text-decoration: none !important;
	border: 0 !important;
}

.mm-root .mm-player__button {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	text-transform: none !important;
	line-height: 1 !important;
	font-family: inherit !important;
}

/* Builders love to hang icon glyphs off buttons. */
.mm-root .mm-player__button::before,
.mm-root .mm-player__button::after {
	content: none !important;
}

.mm-root figure,
.mm-root .mm-scene__img,
.mm-root .mm-hero__logo-img {
	margin: 0 !important;
	max-width: 100% !important;
}

/**
 * ...but the player card is a <figure>, and it centres itself with auto inline
 * margins. The rule above was killing them, so the card sat hard against the
 * left of its column wherever the column was wider than the card — most
 * visibly at tablet widths.
 *
 * This is the fifth time the section 10 hardening has silently eaten a rule
 * from earlier in the file. The pattern is always the same: a broad
 * `!important` reset aimed at page-builder interference also hits our own
 * markup. Restated here, next to the rule that caused it, so the next person
 * to touch either sees both.
 *
 * Vertical margins stay at 0 on purpose — the aside owns that spacing.
 */
.mm-root .mm-player {
	margin-inline: auto !important;
}

.mm-root .mm-scene__aside,
.mm-root .mm-scene__text {
	float: none !important;
}

/* Restated here because section 10 is where a page builder's own type rules get
   overridden, and a theme that sets `text-shadow: none` on paragraphs would
   otherwise strip this back off. */
.mm-root .mm-scene__text .mm-heading,
.mm-root .mm-scene__text .mm-p,
.mm-root .mm-scene__text .mm-signature__name,
.mm-root .mm-scene__text .mm-signature__role {
	text-shadow: var(--mm-scene-shadow) !important;
}

/* 11. Reduced motion / no-JS ------------------------------------------------ */

/* A visitor with "reduce motion" switched on needs MOVEMENT removed, not the
   page emptied of life. So the scroll-linked dissolve survives as a pure
   cross-fade — opacity only, driven by the same scroll position — while travel,
   scale, blur, parallax and the looping glows are all dropped. The JS applies
   the matching profile and marks the root .mm-calm; these rules are the
   belt-and-braces half, and also cover the case where the setting is toggled
   mid-visit. See RESPECT_REDUCED_MOTION / REDUCED_MOTION_FADE in the JS. */

/* THIS SITE IS CONFIGURED TO OVERRIDE THE VISITOR'S SETTING (client decision,
   21 Sep 2026): RESPECT_REDUCED_MOTION is false in the JS, so the dissolve runs
   in full for everyone and the rules below stay dormant. They come back into
   force the moment that switch is set to true — the JS then marks the root
   .mm-calm and the movement is stripped, leaving the cross-fade.

   Note the two ambient loops (the chevron bob and the neon glow pulse) are
   still switched off for reduced-motion visitors, independently of that switch.
   They are decoration rather than storytelling, and leaving them running is the
   part most likely to make a motion-sensitive visitor feel unwell. Delete the
   media query below if you want those forced on as well. */

@media (prefers-reduced-motion: reduce) {
	.mm-scrollcue,
	.mm-player.is-playing .mm-player__icon--stop {
		animation: none !important;
	}

	/* Fallback path — JS opted out of animating entirely. Show it. */
	.mm-root.mm-js .mm-reveal.is-visible {
		opacity: 1 !important;
	}
}

/* Applied only when the JS has chosen the calm (fade-only) profile. */
.mm-root.mm-calm.mm-js .mm-reveal {
	transform: none !important;
	filter: none !important;
}

.mm-root.mm-calm .mm-scrollcue,
.mm-root.mm-calm .mm-player.is-playing .mm-player__icon--stop {
	animation: none !important;
}

.mm-root.mm-calm .mm-scene__img {
	transform: none !important;
}

/* 12. Media deterrents + the password gate ----------------------------------
   The .mm-protected rules are cosmetic: they stop a casual drag-to-desktop or
   long-press-save on the artwork. They are not security — see README §6. */

.mm-root.mm-protected .mm-scene__img,
.mm-root.mm-protected .mm-hero__logo-img,
.mm-root.mm-protected .mm-player__icon img {
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
	user-select: none;
	pointer-events: none; /* the button beneath still receives the click */
}

.mm-root.mm-protected .mm-player__button {
	-webkit-touch-callout: none;
	user-select: none;
}

/* --- Lock screen ---------------------------------------------------------- */

.mm-gate {
	min-height: 100vh;
	min-height: 100svh;
	display: grid;
	place-items: center;
	padding: clamp(48px, 10vh, 120px) var(--mm-pad);
	text-align: center;
}

.mm-gate__inner {
	width: min(560px, 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(18px, 3vw, 30px);
}

.mm-gate__logo {
	width: min(420px, 74vw);
	margin-bottom: clamp(4px, 2vw, 18px);
}

.mm-gate__intro {
	font-family: var(--mm-font-head) !important;
	font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.6rem) !important;
	font-weight: var(--mm-w-body);
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	color: var(--mm-ink) !important;
	margin: 0 !important;
}

.mm-gate__form {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.mm-gate__label {
	font-size: var(--mm-fs-eyebrow);
	letter-spacing: 0;   /* measured: his is untracked */
	text-transform: uppercase;
	color: var(--mm-gold);
}

.mm-gate__row {
	display: flex;
	gap: 10px;
	width: 100%;
	flex-wrap: wrap;
	justify-content: center;
}

.mm-root .mm-gate__input {
	flex: 1 1 240px;
	min-width: 0;
	padding: 14px 18px;
	background: #0d0d0d;
	border: 1px solid rgba(237, 159, 82, 0.35);
	border-radius: 10px;
	color: var(--mm-ink);
	font-family: var(--mm-font-body);
	font-size: 1rem;
	letter-spacing: 0.08em;
	box-shadow: none;
}

.mm-root .mm-gate__input:focus {
	outline: none;
	border-color: var(--mm-neon);
	box-shadow: 0 0 0 1px var(--mm-neon), 0 0 22px rgba(216, 107, 252, 0.35);
}

.mm-root .mm-gate__button {
	padding: 14px 30px;
	background: none;
	border: 1px solid var(--mm-neon);
	border-radius: 10px;
	color: var(--mm-neon);
	font-family: var(--mm-font-head);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.mm-root .mm-gate__button:hover {
	color: #ffffff;
	background: rgba(216, 107, 252, 0.12);
	box-shadow: 0 0 18px rgba(216, 107, 252, 0.45);
}

.mm-gate__hint,
.mm-gate__error {
	font-size: 0.9rem;
	margin: 0;
	max-width: 34em;
}

.mm-gate__hint {
	color: var(--mm-gold-faint);
}

.mm-gate__error {
	color: #ff9d9d;
}

.mm-gate__legal {
	margin-top: clamp(30px, 6vh, 60px) !important;
}

/* 13. Player transport (progress + scrub) -----------------------------------
   Added for full-length tracks: at four minutes a listener wants to know where
   they are and be able to move. Kept deliberately quiet — the mockup draws only
   the big button, so at rest this is invisible and the card is unchanged. The
   space is reserved rather than revealed, so nothing shifts when a track starts.
   Remove it with the mirrors_microsite_show_progress filter. */

.mm-player__transport {
	margin-top: clamp(16px, 2vw, 24px);
	opacity: 0;
	transition: opacity 0.45s ease;
}

.mm-player.is-playing .mm-player__transport,
.mm-player.is-started .mm-player__transport {
	opacity: 1;
}

.mm-player__scrub {
	position: relative;
	height: 3px;
	border-radius: 3px;
	background: rgba(237, 159, 82, 0.18);
	cursor: pointer;
	touch-action: none;
}

/* A taller invisible hit area — 3px is impossible to hit with a thumb. */
.mm-player__scrub::before {
	content: "";
	position: absolute;
	inset: -14px 0;
}

.mm-player__buffered,
.mm-player__played {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	border-radius: 3px;
	pointer-events: none;
}

.mm-player__buffered {
	width: 0;
	background: rgba(237, 159, 82, 0.22);
}

.mm-player__played {
	width: 0;
	background: var(--mm-neon);
	box-shadow: 0 0 10px rgba(216, 107, 252, 0.65);
}

.mm-player__knob {
	position: absolute;
	top: 50%;
	left: 0;
	width: 11px;
	height: 11px;
	margin-left: -5.5px;
	border-radius: 50%;
	background: var(--mm-neon);
	box-shadow: 0 0 10px rgba(216, 107, 252, 0.9);
	transform: translateY(-50%) scale(0);
	transition: transform 0.25s cubic-bezier(0.22, 0.7, 0.3, 1);
	pointer-events: none;
}

.mm-player__scrub:hover .mm-player__knob,
.mm-player__scrub:focus-visible .mm-player__knob,
.mm-player.is-scrubbing .mm-player__knob {
	transform: translateY(-50%) scale(1);
}

.mm-player__scrub:focus-visible {
	outline: 2px solid var(--mm-neon);
	outline-offset: 8px;
	border-radius: 3px;
}

.mm-root .mm-player__times {
	display: flex;
	justify-content: space-between;
	margin-top: 9px !important;
	font-family: var(--mm-font-body) !important;
	font-size: 0.74rem !important;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.06em;
	color: var(--mm-gold-faint) !important;
}