/*
 * mimink.css — Mimink's own styles, loaded after Blocksy's.
 *
 * The look in one line: flash paper and black ink after dark. Her mark (the mimic chest, her drawing) watches you
 * from the first screen; her pink and mint from her old site, her lilac from her comics, her sparkle strings
 * (✩₊˚.⋆☾⋆⁺₊✧) as the labels, Pirata One for the names of things and Jost for the words.
 *
 * What is NOT here, on purpose:
 *   · colours, type sizes, spacing, corners, lift, durations: theme.json (read as var(--wp--preset--…) and
 *     var(--wp--custom--…)). This file writes no colour of its own, apart from the mark's eye (its drawing's own)
 *   · Blocksy's own palette, header and footer settings: the site's set-up script
 *   · anything a plugin DOES. Part 9 dresses the forms plugin's parts by its own class names, and the forms
 *     still work with part 9 taken out
 *
 * How things move. Decided before the second moving thing (look-first-pass.md, "How things move"), and nothing
 * moves any other way. Four ways, each with one job, times from theme.json, every loop a multiple of the tempo (4s):
 *   1. draw      a fine line arrives from its start to its end, once: the hero's linework, a section's rule,
 *                the menu's line under the page you are on or over. Fine line is her trade
 *   2. rise      a block arrives from a little low, once, as it comes into view. Never hidden while it waits
 *   3. press     a button sits on a hard mint edge (ink on paper) and goes down onto it
 *   4. twinkle   a sparkle breathes, on the tempo, only while its section is on screen
 *   5. drift     (added 7 Nov 2026, at Jeremy's asking, and switchable: the mimink_texture setting) the ink grain
 *                and sparkle dust behind a dark band move a few dozen pixels over twelve tempos (48s) and back,
 *                only while the band is on screen. Never under words in a way that changes how they read
 * The mark's eye looks towards the pointer and blinks every two tempos (8s), only while on screen.
 * ?still=1 and less motion: everything in its finished place. ?t=2.5: held 2.5 s in, to photograph part-way.
 *
 * 0 motion · 1 type · 2 buttons · 3 header and menu · 4 the first screen · 5 bands and sections ·
 * 6 photos · 7 inner pages · 8 footer · 9 forms · 10 small screens · 11 still
 */

/* ---------------------------------------------------------------- 0. motion */

:root {
	--mm-ease: var(--wp--custom--motion--ease);
	--mm-ease-out: var(--wp--custom--motion--ease-out);
	--mm-tempo: var(--wp--custom--motion--tempo);
	--mm-wrap: 1240px;
	--mm-gutter: clamp(1.25rem, 4vw, 2.5rem);
}

@keyframes mm-rise { from { transform: translateY(28px); } to { transform: none; } }
@keyframes mm-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mm-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mm-twinkle {
	0%, 100% { transform: scale(0.62) rotate(0deg); }
	50% { transform: scale(1) rotate(45deg); }
}
@keyframes mm-blink {
	0%, 93%, 100% { transform: translateY(-162px); }
	95.5% { transform: translateY(0); }
}

/* rise: only where the script runs, a block waits a little low; it is never invisible. */
.mm-js .mm-rise:not(.is-in) { transform: translateY(28px); }
.mm-rise.is-in { animation: mm-rise var(--wp--custom--motion--slow) var(--mm-ease-out) both; }

/* draw: an SVG line drawn from start to end (the script gives it a length of 1). */
.mm-js .mm-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.mm-draw.is-in { animation: mm-draw var(--wp--custom--motion--draw) var(--mm-ease) both; animation-delay: var(--dd, 0s); }

/* draw, for a straight rule made of CSS. */
.mm-js .mm-line { transform: scaleX(0); transform-origin: left center; }
.mm-line.is-in { animation: mm-line var(--wp--custom--motion--draw) var(--mm-ease) both; animation-delay: var(--dd, 0s); }

/* The first screen in steps, inside one beat: each .mm-step rises in turn (--i from the script). */
.mm-js .mm-steps:not(.is-in) .mm-step { transform: translateY(22px); }
.mm-steps.is-in .mm-step {
	animation: mm-rise var(--wp--custom--motion--slow) var(--mm-ease-out) both;
	animation-delay: calc(var(--i, 0) * var(--wp--custom--motion--step));
}

/* twinkle: only while its section is on screen (.mm-loop.is-on, from the script). */
.mm-twinkle { transform-box: fill-box; transform-origin: center; transform: scale(0.8); }
.mm-loop.is-on .mm-twinkle {
	animation: mm-twinkle var(--mm-tempo) ease-in-out infinite;
	animation-delay: calc(var(--d, 0) * var(--mm-tempo) / -4);
}

/*
 * 5. drift: the texture behind her bands (functions.php, mimink_child_texture_class). An ink grain and three
 * scatters of sparkle dust (her lilac, her pink, chalk) on the dark bands; a paper grain, still, on the light ones.
 * Drawn here as data, so nothing is asked of another site. Off: no .mm-texture on <body>. Still: .mm-texture--still.
 */
:root {
	--mm-grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
	--mm-grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.09 0 0 0 0.14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
@keyframes mm-drift {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-48px, -72px, 0); }
}
.mm-texture :is(.mm-hero, .mm-band) { overflow: clip; }
.mm-texture :is(.mm-hero, .mm-band:not(.mm-wall)) > * { position: relative; z-index: 1; }
/* The dust: her sparkle, tiny, scattered in her three light colours, on a tile that repeats. It is what drifts. */
.mm-texture :is(.mm-hero, .mm-band:not(.mm-band--paper):not(.mm-band--bone):not(.mm-wall))::before {
	content: "";
	position: absolute;
	inset: -120px;
	z-index: 0;
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cdefs%3E%3Cpath id='s' d='M12 0C12.9 7.6 16.4 11.1 24 12C16.4 12.9 12.9 16.4 12 24C11.1 16.4 7.6 12.9 0 12C7.6 11.1 11.1 7.6 12 0Z'/%3E%3C/defs%3E%3Cuse href='%23s' transform='translate(40 52) scale(.34)' fill='%23C9A8FF'/%3E%3Cuse href='%23s' transform='translate(214 28) scale(.3)' fill='%23FF5AA8'/%3E%3Cuse href='%23s' transform='translate(150 176) scale(.32)' fill='%23F5EEF3'/%3E%3Cuse href='%23s' transform='translate(286 236) scale(.4)' fill='%23C9A8FF'/%3E%3Cuse href='%23s' transform='translate(74 280) scale(.28)' fill='%23FF5AA8'/%3E%3C/svg%3E") 0 0 / 360px 360px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cdefs%3E%3Cpath id='s' d='M12 0C12.9 7.6 16.4 11.1 24 12C16.4 12.9 12.9 16.4 12 24C11.1 16.4 7.6 12.9 0 12C7.6 11.1 11.1 7.6 12 0Z'/%3E%3C/defs%3E%3Cuse href='%23s' transform='translate(40 52) scale(.34)' fill='%23C9A8FF'/%3E%3Cuse href='%23s' transform='translate(214 28) scale(.3)' fill='%23FF5AA8'/%3E%3Cuse href='%23s' transform='translate(150 176) scale(.32)' fill='%23F5EEF3'/%3E%3Cuse href='%23s' transform='translate(286 236) scale(.4)' fill='%23C9A8FF'/%3E%3Cuse href='%23s' transform='translate(74 280) scale(.28)' fill='%23FF5AA8'/%3E%3C/svg%3E") 170px 95px / 530px 530px;
	opacity: 0.42;
	will-change: transform;
	backface-visibility: hidden; /* its own layer, moved whole on the graphics card: no pixel-by-pixel stepping */
}
/* The grain: still, and faint enough that the black stays ink. */
.mm-texture :is(.mm-hero, .mm-band:not(.mm-band--paper):not(.mm-band--bone):not(.mm-wall))::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: var(--mm-grain-light) 0 0 / 220px 220px;
	opacity: 0.05;
}
.mm-texture :is(.mm-hero, .mm-band).is-on::before { animation: mm-drift calc(var(--mm-tempo) * 12) ease-in-out infinite alternate; }
.mm-texture.mm-texture--still :is(.mm-hero, .mm-band)::before { animation: none !important; }
/* The light bands: a still paper grain under the tracing-paper grid. */
.mm-texture .mm-band--paper::before {
	background-image: linear-gradient(rgba(26, 20, 24, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(26, 20, 24, 0.035) 1px, transparent 1px), var(--mm-grain-dark);
	background-size: 28px 28px, 28px 28px, 260px 260px;
	opacity: 0.9;
}

/* ---------------------------------------------------------------- 1. type */

/* Blocksy takes a heading's face from --theme-font-family on the heading itself. */
:is(h1, h2, .site-title, .page-title, .mm-display) {
	--theme-font-family: var(--wp--preset--font-family--display);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	letter-spacing: 0.005em;
}
:is(h3, h4, h5, h6) { --theme-font-family: var(--wp--preset--font-family--sans); }

body {
	--theme-font-family: var(--wp--preset--font-family--sans);
	font-family: var(--wp--preset--font-family--sans);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Blocksy draws headings in its own palette colour: on her pages they take the band's. */
.mm-band :is(h1, h2, h3, h4) { color: inherit; }

.mm-label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6em;
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mint);
}
.mm-label__sparkles { letter-spacing: 0.05em; color: var(--wp--preset--color--lilac); font-weight: 400; white-space: nowrap; }

.mm-title {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--title);
	line-height: 0.98;
	text-wrap: balance;
}
.mm-title em { font-style: normal; color: var(--wp--preset--color--pink); }

.mm-lead {
	max-width: 34em;
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
	color: var(--wp--preset--color--mist);
	text-wrap: pretty;
}
.mm-text { max-width: 40em; text-wrap: pretty; }
.mm-text p { margin: 0 0 1em; }
.mm-text p:last-child { margin-bottom: 0; }
.mm-quiet-line { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--mist); }

/* Her voice: a line in her own words, set as a hand would letter it. */
.mm-hand {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 3.2vw, 2.4rem);
	line-height: 1.05;
	color: var(--wp--preset--color--pink);
}

/* A dash between two times never breaks the range onto two lines. */
.mm-nowrap { white-space: nowrap; }

.mimink-quiet {
	display: block;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px dashed var(--wp--preset--color--mist);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--mist);
	font-size: var(--wp--preset--font-size--small);
}

/* Sparkles: one shape (functions.php draws it once), sizes and colours here. */
.mm-spark { display: inline-block; width: 1em; height: 1em; vertical-align: -0.1em; color: var(--wp--preset--color--lilac); }
.mm-spark--pink { color: var(--wp--preset--color--pink); }
.mm-spark--mint { color: var(--wp--preset--color--mint); }

/* ---------------------------------------------------------------- 2. buttons */

/*
 * 3. press: a button has weight. A hard edge in her mint, offset like a sticker's shadow (her old site's button
 * had one), a square-ish corner, a sparkle of hers at the front. No pill, no glow, no arrow. It goes down onto its
 * edge when pressed. `html body` in front: Blocksy's own button rules are two classes deep.
 */
/*
 * One rule draws every button; a kind of button (the outline one, one on paper) only changes the four values it
 * reads (--mm-btn-bg, -fg, -line, -edge), so no kind has to out-weigh this rule's selector.
 * 🔴 theme.json's "custom" values become CSS: never put an apostrophe or a bracket in one (an apostrophe there
 * broke every value after it on 7 Nov 2026, the buttons' edges among them).
 */
html body :is(.mm-btn, .wp-block-button:not(.is-style-outline) > .wp-block-button__link, .ct-header-cta .ct-button, .mm-form .ff-btn-submit, .bookings-manage button[type="submit"]) {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	min-height: 3.1rem;
	padding: 0.85em 1.45em;
	border: 2px solid var(--mm-btn-line, var(--wp--preset--color--night));
	border-radius: var(--wp--custom--radius--md);
	background: var(--mm-btn-bg, var(--wp--preset--color--pink));
	color: var(--mm-btn-fg, var(--wp--preset--color--night));
	box-shadow: 4px 4px 0 var(--mm-btn-edge, var(--wp--preset--color--mint));
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.1;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform var(--wp--custom--motion--fast) var(--mm-ease), box-shadow var(--wp--custom--motion--fast) var(--mm-ease), background-color var(--wp--custom--motion--fast);
	cursor: pointer;
}
html body .mm-btn::before { content: "✦"; font-size: 0.95em; line-height: 1; }
html body :is(.mm-btn, .wp-block-button__link, .ct-header-cta .ct-button, .mm-form .ff-btn-submit):hover {
	transform: translate(-1px, -1px);
	box-shadow: 5px 5px 0 var(--mm-btn-edge, var(--wp--preset--color--mint));
	color: var(--mm-btn-fg, var(--wp--preset--color--night));
	background: var(--mm-btn-bg, var(--wp--preset--color--pink));
}
html body :is(.mm-btn, .wp-block-button__link, .ct-header-cta .ct-button, .mm-form .ff-btn-submit):active {
	transform: translate(3px, 3px);
	box-shadow: 1px 1px 0 var(--mm-btn-edge, var(--wp--preset--color--mint));
}
html body :is(.mm-btn, .wp-block-button__link, .ct-button, .ff-btn-submit):focus-visible {
	outline: 3px solid var(--wp--preset--color--lilac);
	outline-offset: 4px;
}

/* The second choice: an outline that still has the edge, in lilac. */
.mm-btn--ghost {
	--mm-btn-bg: transparent;
	--mm-btn-fg: var(--wp--preset--color--chalk);
	--mm-btn-line: var(--wp--preset--color--chalk);
	--mm-btn-edge: var(--wp--preset--color--lilac);
}
html body .mm-btn.mm-btn--ghost::before { content: none; }

/* On paper the edge is ink, and the outline button is ink on lilac. */
.mm-band--paper { --mm-btn-edge: var(--wp--preset--color--ink); }
.mm-band--paper .mm-btn--ghost {
	--mm-btn-fg: var(--wp--preset--color--ink);
	--mm-btn-line: var(--wp--preset--color--ink);
	--mm-btn-edge: var(--wp--preset--color--lilac-deep);
}

.mm-actions { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; align-items: center; margin-top: var(--wp--preset--spacing--40); }

/* A text link that goes somewhere: words, then a fine line drawn under them on hover. */
.mm-more {
	position: relative;
	display: inline-block;
	padding-bottom: 0.2em;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	color: var(--wp--preset--color--pink);
}
.mm-more::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	background: currentColor;
	transform: scaleX(0.35);
	transform-origin: left center;
	transition: transform var(--wp--custom--motion--base) var(--mm-ease);
}
.mm-more:hover::after, .mm-more:focus-visible::after { transform: scaleX(1); }
.mm-band--paper .mm-more { color: var(--wp--preset--color--pink-deep); }

/* ---------------------------------------------------------------- 3. header and menu */

/* Her name in the header, in Pirata One, a pink sparkle beside it. */
html body .site-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.9rem, 2.6vw, 2.35rem);
	line-height: 1;
	letter-spacing: 0.02em;
}
html body .site-title a { color: var(--wp--preset--color--chalk); }
html body .site-title a::after {
	content: "✦";
	display: inline-block;
	margin-left: 0.18em;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.42em;
	vertical-align: 0.9em;
	color: var(--wp--preset--color--pink);
}

/* 1. draw: a fine pink line drawn under the link you are over, resting under the page you are on. */
#header [data-id="menu"] > ul > li > .ct-menu-link {
	position: relative;
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--chalk);
}
#header [data-id="menu"] > ul > li > .ct-menu-link::after {
	content: "";
	position: absolute;
	inset-inline: var(--menu-item-padding, 0.9em);
	bottom: calc(50% - 1.05em);
	height: 2px;
	background: var(--wp--preset--color--pink);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--wp--custom--motion--base) var(--mm-ease);
}
#header [data-id="menu"] > ul > li:is(:hover, :focus-within, [class*="current-menu-"], .current_page_parent) > .ct-menu-link::after { transform: scaleX(1); }
#header [data-id="menu"] > ul > li:is(:hover, :focus-within, [class*="current-menu-"]) > .ct-menu-link { color: var(--wp--preset--color--chalk); }

/* The header's button: Book, the one thing the header asks of anyone. */
html body .ct-header-cta .ct-button { min-height: 2.6rem; padding: 0.6em 1.15em; }
html body .ct-header-cta .ct-button::before { content: "✦"; }

/* The phone menu's panel and its every state are set by the set-up script with the panel (child-theme rule 5). */
#offcanvas .ct-menu-link { font-family: var(--wp--preset--font-family--display); font-size: 2rem; letter-spacing: 0.01em; text-transform: none; }

/* ---------------------------------------------------------------- 4. the first screen */

/*
 * One living thing, tied to what the brand means: her mimic chest, with its eye on you. Around it a fine-line
 * moon and sparkles are drawn on, as a stencil goes on before the needle. The words arrive in steps.
 */
.mm-hero {
	position: relative;
	overflow: clip;
	padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 7vw, 5.5rem);
	background:
		radial-gradient(ellipse 55% 60% at 72% 46%, rgba(255, 90, 168, 0.16), transparent 70%),
		radial-gradient(ellipse 40% 45% at 18% 85%, rgba(94, 224, 181, 0.07), transparent 70%),
		var(--wp--preset--color--night);
}
.mm-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: center;
	min-height: min(78vh, 760px);
}
.mm-hero h1 {
	margin: 0 0 0.12em;
	font-size: var(--wp--preset--font-size--hero);
	line-height: 0.86;
	color: var(--wp--preset--color--chalk);
}
.mm-hero h1 .mm-spark { width: 0.28em; height: 0.28em; vertical-align: 0.95em; margin-left: 0.05em; color: var(--wp--preset--color--pink); }
.mm-hero__line { margin: 0 0 0.6em; }
.mm-hero__intro { max-width: 30em; margin: 0; font-size: var(--wp--preset--font-size--lead); line-height: 1.5; color: var(--wp--preset--color--mist); }
.mm-hero__intro strong { color: var(--wp--preset--color--chalk); font-weight: 500; }
.mm-hero__when {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.1rem;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--mist);
}
.mm-hero__when li { display: flex; align-items: center; gap: 0.45em; }
.mm-hero__when li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wp--preset--color--mint); }

.mm-hero__art { position: relative; justify-self: center; width: min(100%, 470px); }
.mm-hero__art .mm-mark { position: relative; z-index: 2; width: 78%; margin: 0 auto; }
.mm-hero__lines { position: absolute; inset: -6% -10% -2% -12%; z-index: 1; width: 122%; height: 108%; overflow: visible; pointer-events: none; }
.mm-hero__lines path, .mm-hero__lines circle { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mm-hero__lines .mm-hero__ring { stroke: var(--wp--preset--color--lilac); stroke-width: 1.25; stroke-dasharray: 1; opacity: 0.55; }
.mm-hero__lines .mm-hero__moon { stroke: var(--wp--preset--color--mint); stroke-width: 1.6; }
.mm-hero__lines .mm-hero__dots { stroke: var(--wp--preset--color--pink); stroke-width: 1.6; }
.mm-hero__sparks .mm-twinkle { color: var(--wp--preset--color--lilac); }
.mm-hero__sparks svg { position: absolute; z-index: 3; }

/* The mark. Her drawing, its own eye under ours. */
.mm-mark { position: relative; margin: 0; }
.mm-mark__img { display: block; width: 100%; height: auto; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.55)); }
.mm-eye { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mm-eye__look { transition: transform 260ms var(--mm-ease); }
.mm-eye__lid { transform: translateY(-162px); }
.mm-loop.is-on .mm-eye__lid { animation: mm-blink calc(var(--mm-tempo) * 2) linear infinite; animation-delay: calc(var(--mm-tempo) * -1.4); }

/* Proof inside the design: a real photo of Emma at work, taped to the sheet beside her mark. */
.mm-taped {
	position: absolute;
	z-index: 4;
	left: -14%;
	bottom: 2%;
	width: 46%;
	margin: 0;
	padding: 0.55rem 0.55rem 0.4rem;
	background: var(--wp--preset--color--paper);
	box-shadow: var(--wp--custom--lift--three);
	transform: rotate(-6deg);
}
.mm-taped::before {
	content: "";
	position: absolute;
	top: -0.75rem;
	left: 50%;
	width: 42%;
	height: 1.5rem;
	background: rgba(201, 168, 255, 0.72);
	transform: translateX(-50%) rotate(3deg);
}
.mm-taped img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.mm-taped figcaption { padding-top: 0.35rem; font-size: var(--wp--preset--font-size--caption); font-weight: 500; letter-spacing: 0.04em; color: var(--wp--preset--color--ink); text-align: center; }

/* ---------------------------------------------------------------- 5. bands and sections */

/* One scene a section. Never three plain light sections in a row, never two dark bands together. */
.entry-content > .mm-band, .mm-band { margin-block: 0 !important; }
/* WordPress's block layout and Blocksy give a band's children a gap of their own (24 px at the foot of the mural
   band's photo, 7 Nov 2026): a band's spacing is its padding alone. */
html body .mm-band > * { margin-block: 0; }

/* Links that are a thing of their own carry no underline of the page's (a heading in a link inherits one). */
html body :is(.mm-way a, .mm-way a *, .mm-more, .mm-btn, .mm-photo, .mm-flash a, .mm-join__links a, .ct-header-cta .ct-button) { text-decoration: none; }

/* Numbers are set in Jost: Pirata One's figures read ambiguously ("1,800" looked like "1,888"). */
:is(.mm-wall__price dt, .mm-cost__num, .mm-way__no, .mm-steps-row li)::before, :is(.mm-wall__price dt, .mm-cost__num, .mm-way__no) { font-family: var(--wp--preset--font-family--sans) !important; font-weight: 600; letter-spacing: -0.01em; }
.mm-band {
	position: relative;
	padding-block: var(--wp--preset--spacing--70);
	color: var(--wp--preset--color--chalk);
	background: var(--wp--preset--color--night);
}
.mm-band--lift { background: var(--wp--preset--color--night-2); }
.mm-band--paper {
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
}
.mm-band--bone { color: var(--wp--preset--color--ink); background: var(--wp--preset--color--bone); }
.mm-band--paper :is(.mm-lead, .mm-quiet-line), .mm-band--bone :is(.mm-lead, .mm-quiet-line) { color: var(--wp--preset--color--ink-2); }
.mm-band--paper .mm-label, .mm-band--bone .mm-label { color: var(--wp--preset--color--mint-deep); }
.mm-band--paper .mm-label__sparkles, .mm-band--bone .mm-label__sparkles { color: var(--wp--preset--color--lilac-deep); }
.mm-band--paper .mm-title em, .mm-band--bone .mm-title em { color: var(--wp--preset--color--pink-deep); }
.mm-band--paper a:not([class]), .mm-band--bone a:not([class]) { color: var(--wp--preset--color--pink-deep); }
.mm-band--paper .mm-hand { color: var(--wp--preset--color--pink-deep); }

/* Flash paper: the faintest grid, like a sheet of tracing paper laid over a design. */
.mm-band--paper::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(rgba(26, 20, 24, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(26, 20, 24, 0.035) 1px, transparent 1px);
	background-size: 28px 28px;
}

/* A band's words start where Blocksy's header starts her name: the same container, so the page has one left line. */
.mm-wrap {
	position: relative;
	box-sizing: border-box;
	width: min(var(--theme-container-width-base, 90vw), var(--theme-normal-container-max-width, 1290px));
	margin-inline: auto;
	padding-inline: 0;
}
.mm-head { max-width: 48rem; margin-bottom: var(--wp--preset--spacing--50); }
.mm-head--split { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: flex-end; justify-content: space-between; max-width: none; }
.mm-head--split .mm-title { margin-bottom: 0; }

/* A rule drawn across a section's top, with her sparkle where it starts. */
.mm-rule { display: flex; align-items: center; gap: 0.75rem; margin-bottom: var(--wp--preset--spacing--40); color: var(--wp--preset--color--pink); }
.mm-rule::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.5; transform-origin: left center; }
.mm-js .mm-rule::after { transform: scaleX(0); }
.mm-rule.is-in::after { animation: mm-line var(--wp--custom--motion--draw) var(--mm-ease) both; }

/* The home page's flash sheet: her tattoos pinned up the way a studio wall is, each its own size. */
.mm-flash {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-rows: clamp(70px, 8vw, 104px);
	gap: clamp(0.75rem, 1.6vw, 1.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.mm-flash li { position: relative; margin: 0; }
.mm-flash a {
	display: block;
	height: 100%;
	padding: 0.45rem;
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--custom--lift--paper);
	transform: rotate(var(--r, 0deg));
	transition: transform var(--wp--custom--motion--base) var(--mm-ease), box-shadow var(--wp--custom--motion--base) var(--mm-ease);
}
.mm-flash a:hover, .mm-flash a:focus-visible { transform: rotate(0deg) translateY(-4px) scale(1.02); box-shadow: 0 2px 4px rgba(26, 20, 24, 0.15), 0 26px 40px -20px rgba(26, 20, 24, 0.55); }
.mm-flash img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.mm-flash li:nth-child(1) { grid-column: 1 / span 4; grid-row: span 4; --r: -1.6deg; }
.mm-flash li:nth-child(2) { grid-column: 5 / span 3; grid-row: span 3; --r: 1.4deg; }
.mm-flash li:nth-child(3) { grid-column: 8 / span 5; grid-row: span 3; --r: -0.8deg; }
.mm-flash li:nth-child(4) { grid-column: 5 / span 3; grid-row: span 3; --r: -1.8deg; }
.mm-flash li:nth-child(5) { grid-column: 8 / span 2; grid-row: span 3; --r: 2deg; }
.mm-flash li:nth-child(6) { grid-column: 10 / span 3; grid-row: span 3; --r: -1deg; }
.mm-flash li:nth-child(7) { grid-column: 1 / span 4; grid-row: span 2; --r: 1.2deg; }
.mm-flash li:nth-child(odd) a::before {
	content: "";
	position: absolute;
	top: -0.6rem;
	left: 50%;
	z-index: 2;
	width: 3.2rem;
	height: 1.15rem;
	background: rgba(255, 90, 168, 0.55);
	transform: translateX(-50%) rotate(-4deg);
}
.mm-flash__foot { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; margin-top: var(--wp--preset--spacing--50); }

/* What she does: three rows, each a word, a line and a photo. Hairlines and type, not cards. */
.mm-ways { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(201, 189, 198, 0.25); }
.mm-way { border-bottom: 1px solid rgba(201, 189, 198, 0.25); }
.mm-way a {
	display: grid;
	grid-template-columns: 4rem minmax(0, 1.1fr) minmax(0, 1.4fr) clamp(120px, 14vw, 190px);
	gap: clamp(1rem, 3vw, 2.5rem);
	align-items: center;
	padding-block: clamp(1.25rem, 3vw, 2.25rem);
	color: inherit;
	text-decoration: none;
}
.mm-way__no { font-family: var(--wp--preset--font-family--display); font-size: 1.6rem; color: var(--wp--preset--color--lilac); }
.mm-way__name { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 0.9; color: var(--wp--preset--color--chalk); transition: color var(--wp--custom--motion--base); }
.mm-way__words { margin: 0; color: var(--wp--preset--color--mist); }
.mm-way__words strong { display: block; margin-bottom: 0.25em; font-weight: 600; color: var(--wp--preset--color--chalk); letter-spacing: 0.02em; }
.mm-way__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--wp--custom--radius--sm); box-shadow: var(--wp--custom--lift--two); transform: rotate(2deg); transition: transform var(--wp--custom--motion--base) var(--mm-ease); }
.mm-way__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mm-way a:hover .mm-way__name, .mm-way a:focus-visible .mm-way__name { color: var(--wp--preset--color--pink); }
.mm-way a:hover .mm-way__photo, .mm-way a:focus-visible .mm-way__photo { transform: rotate(-1deg) translateY(-6px); }

/* From your idea to your skin: one real piece shown as it went, then the four steps along a drawn line. */
.mm-example { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(0.75rem, 2.5vw, 2rem); align-items: center; max-width: 820px; margin: 0 auto var(--wp--preset--spacing--60); }
.mm-example figure { margin: 0; padding: 0.5rem 0.5rem 0.6rem; background: var(--wp--preset--color--white); box-shadow: var(--wp--custom--lift--paper); }
.mm-example figure:first-child { transform: rotate(-2deg); }
.mm-example figure:last-child { transform: rotate(1.6deg); }
.mm-example img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.mm-example figcaption { padding-top: 0.45rem; font-size: var(--wp--preset--font-size--caption); letter-spacing: 0.04em; text-align: center; color: var(--wp--preset--color--ink-2); }
.mm-example__arrow { width: clamp(48px, 8vw, 96px); height: auto; overflow: visible; }
.mm-example__arrow path { fill: none; stroke: var(--wp--preset--color--pink-deep); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.mm-steps-row { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem); margin: 0; padding: 0; list-style: none; counter-reset: mm-step; }
.mm-steps-row::before { content: ""; position: absolute; top: 1.55rem; left: 1.6rem; right: 1.6rem; height: 0; border-top: 2px dashed rgba(26, 20, 24, 0.28); }
.mm-steps-row li { position: relative; counter-increment: mm-step; }
.mm-steps-row li::before {
	content: counter(mm-step);
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 3.1rem;
	height: 3.1rem;
	margin-bottom: 1rem;
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: 50%;
	background: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.6rem;
	line-height: 1;
	box-shadow: 3px 3px 0 var(--wp--preset--color--pink);
}
.mm-steps-row h3 { margin: 0 0 0.35em; font-size: 1.2rem; font-weight: 600; letter-spacing: 0.01em; color: var(--wp--preset--color--ink); }
.mm-steps-row p { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-2); }
.mm-band:not(.mm-band--paper):not(.mm-band--bone) .mm-steps-row::before { border-top-color: rgba(201, 189, 198, 0.35); }
.mm-band:not(.mm-band--paper):not(.mm-band--bone) .mm-steps-row li::before { border-color: var(--wp--preset--color--chalk); background: var(--wp--preset--color--night); color: var(--wp--preset--color--chalk); }
.mm-band:not(.mm-band--paper):not(.mm-band--bone) .mm-steps-row h3 { color: var(--wp--preset--color--chalk); }
.mm-band:not(.mm-band--paper):not(.mm-band--bone) .mm-steps-row p { color: var(--wp--preset--color--mist); }

/* A wall to paint: one full-width photo of her mural work with the words over its dark side. */
.mm-wall { display: grid; align-items: center; min-height: clamp(420px, 62vh, 640px); padding-block: var(--wp--preset--spacing--70); overflow: clip; }
.mm-wall__photo { position: absolute; inset: 0; }
.mm-wall__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.mm-wall__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 11, 16, 0.94) 0%, rgba(14, 11, 16, 0.82) 38%, rgba(14, 11, 16, 0.25) 75%, rgba(14, 11, 16, 0.1) 100%); }
.mm-wall .mm-wrap { z-index: 1; }
.mm-wall__words { max-width: 31rem; }
/* The mural shows on the left (the ceiling's porthole), so the words and their shade sit on the right. */
@media (min-width: 701px) {
	.mm-wall__words { margin-left: auto; }
	.mm-wall__photo::after { background: linear-gradient(270deg, rgba(14, 11, 16, 0.94) 0%, rgba(14, 11, 16, 0.82) 38%, rgba(14, 11, 16, 0.2) 72%, rgba(14, 11, 16, 0.05) 100%); }
}
.mm-wall__price { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; margin: var(--wp--preset--spacing--40) 0 0; padding: 1rem 1.15rem; border-left: 3px solid var(--wp--preset--color--mint); background: rgba(14, 11, 16, 0.6); font-size: var(--wp--preset--font-size--small); }
.mm-wall__price dt { font-family: var(--wp--preset--font-family--display); font-size: 1.5rem; line-height: 1; color: var(--wp--preset--color--mint); }
.mm-wall__price dd { margin: 0; align-self: center; color: var(--wp--preset--color--mist); }

/* About Emma: her photo, her words, and the profile box from her MySpace page. */
.mm-about { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.mm-about__photo { position: relative; margin: 0; padding: 0.6rem 0.6rem 0.5rem; background: var(--wp--preset--color--white); box-shadow: var(--wp--custom--lift--paper); transform: rotate(-2.5deg); }
.mm-about__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.mm-about__photo figcaption { padding-top: 0.45rem; font-size: var(--wp--preset--font-size--caption); text-align: center; color: var(--wp--preset--color--ink-2); }
.mm-about__photo .mm-spark { position: absolute; right: -1.1rem; top: -1.1rem; width: 2.4rem; height: 2.4rem; color: var(--wp--preset--color--pink-deep); }

.mm-myspace { max-width: 25rem; margin-top: var(--wp--preset--spacing--40); border: 2px solid var(--wp--preset--color--lilac-deep); background: var(--wp--preset--color--white); font-size: var(--wp--preset--font-size--small); box-shadow: 5px 5px 0 var(--wp--preset--color--lilac); }
.mm-myspace__bar { padding: 0.45rem 0.8rem; background: var(--wp--preset--color--lilac-deep); color: var(--wp--preset--color--white); font-weight: 600; letter-spacing: 0.03em; }
.mm-myspace dl { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.9rem; margin: 0; padding: 0.8rem; }
.mm-myspace dt { font-weight: 600; color: var(--wp--preset--color--lilac-deep); }
.mm-myspace dd { margin: 0; color: var(--wp--preset--color--ink); }
.mm-values { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: var(--wp--preset--spacing--40) 0 0; padding: 0; list-style: none; }
.mm-values li { padding: 0.35rem 0.8rem; border: 1.5px solid currentColor; border-radius: var(--wp--custom--radius--sm); font-size: var(--wp--preset--font-size--small); font-weight: 600; letter-spacing: 0.04em; }

/* When she works: a ticket, its times in a column. */
.mm-book { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.mm-hours {
	position: relative;
	margin: 0;
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1.5px solid rgba(201, 189, 198, 0.4);
	background: var(--wp--preset--color--night-3);
	box-shadow: var(--wp--custom--lift--two);
}
.mm-hours::before, .mm-hours::after { content: ""; position: absolute; top: 50%; width: 22px; height: 22px; border-radius: 50%; background: var(--wp--preset--color--night-2); transform: translateY(-50%); }
.mm-hours::before { left: -12px; }
.mm-hours::after { right: -12px; }
.mm-hours h3 { margin: 0 0 0.9rem; font-family: var(--wp--preset--font-family--display); font-size: 2rem; font-weight: 400; color: var(--wp--preset--color--chalk); }
.mm-hours dl { display: grid; grid-template-columns: auto 1fr; gap: 0.55rem 1.4rem; margin: 0; }
.mm-hours dt { font-weight: 600; letter-spacing: 0.04em; color: var(--wp--preset--color--chalk); }
.mm-hours dd { margin: 0; color: var(--wp--preset--color--mist); white-space: nowrap; }
.mm-hours dd.is-closed { color: rgba(201, 189, 198, 0.7); }
.mm-hours p { margin: 1rem 0 0; padding-top: 0.9rem; border-top: 1px dashed rgba(201, 189, 198, 0.35); font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--mist); }

/* ---------------------------------------------------------------- 6. photos */

/* Autoriah Galleries in her look (8 Nov 2026): the plugin carries the motion; these are only her colours and edges.
   On the night bands the outline is her hot pink; her paper band's sheet has bone-white edges and pink tape. */
.galleries { --g-tile: var(--wp--preset--color--night-3); --g-ring: var(--wp--preset--color--pink); --g-radius: var(--wp--custom--radius--sm); }
.mm-band--paper .galleries { --g-tile: var(--wp--preset--color--bone); --g-ring: var(--wp--preset--color--pink-deep); }
.galleries--pinned { --g-paper: var(--wp--preset--color--white); --g-tape: rgba(255, 90, 168, 0.55); }
.mm-band:not(.mm-band--paper) .galleries__step { color: var(--wp--preset--color--chalk); }

/* A wall of her work: a column layout keeps each photo its own shape. */
.mm-photos { margin: 0; padding: 0; list-style: none; }
.mm-photos--wall { columns: 3 280px; column-gap: clamp(0.75rem, 1.6vw, 1.25rem); }
.mm-photos--wall .mm-photos__item { break-inside: avoid; margin: 0 0 clamp(0.75rem, 1.6vw, 1.25rem); }
.mm-photo { position: relative; display: block; overflow: hidden; border-radius: var(--wp--custom--radius--sm); background: var(--wp--preset--color--night-3); box-shadow: var(--wp--custom--lift--one); }
.mm-photo img { display: block; width: 100%; height: auto; transition: transform var(--wp--custom--motion--slow) var(--mm-ease-out); }
.mm-photo::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--wp--preset--color--pink); border-radius: inherit; opacity: 0; transition: opacity var(--wp--custom--motion--base); }
.mm-photo:hover img, .mm-photo:focus-visible img { transform: scale(1.035); }
.mm-photo:hover::after, .mm-photo:focus-visible::after { opacity: 1; }
.mm-band--paper .mm-photo { background: var(--wp--preset--color--bone); box-shadow: var(--wp--custom--lift--paper); }
.mm-band--paper .mm-photo::after { border-color: var(--wp--preset--color--pink-deep); }

/* The rest of a wall waits behind "Show more" (only where the script runs: with none, every photo shows). */
.mm-js .mm-later { display: none; }
.mm-show-more { margin: var(--wp--preset--spacing--40) 0 0; text-align: center; }

/* A strip that scrolls sideways on a phone, a row on a laptop. */
.mm-photos--strip { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(200px, 26vw, 300px); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.75rem; }
.mm-photos--strip .mm-photos__item { scroll-snap-align: start; }
.mm-photos--strip img { aspect-ratio: 4 / 5; object-fit: cover; }

/* The larger look, over the page. */
.mm-zoom { max-width: min(92vw, 1000px); max-height: 92vh; padding: 0; border: 0; background: transparent; color: var(--wp--preset--color--chalk); overflow: visible; }
.mm-zoom::backdrop { background: rgba(14, 11, 16, 0.9); }
.mm-zoom img { display: block; max-width: 100%; max-height: 82vh; margin: 0 auto; box-shadow: var(--wp--custom--lift--three); }
.mm-zoom__words { margin: 0.75rem 0 0; text-align: center; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--mist); }
.mm-zoom__close { position: absolute; top: -2.6rem; right: 0; width: 2.4rem; height: 2.4rem; border: 0; background: transparent; color: var(--wp--preset--color--chalk); font-size: 2rem; line-height: 1; cursor: pointer; }

/* ---------------------------------------------------------------- 7. inner pages */

/* An inner page's top: built to the front page's standard, its own drawing and photos beside its name. */
.mm-top { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2.5rem, 6vw, 4.5rem); background: radial-gradient(ellipse 50% 70% at 80% 30%, rgba(201, 168, 255, 0.12), transparent 70%), var(--wp--preset--color--night); }
.mm-top__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.mm-top h1 { margin: 0 0 0.15em; font-size: clamp(3.6rem, 9vw, 7rem); line-height: 0.88; }
.mm-top h1 .mm-spark { width: 0.3em; height: 0.3em; vertical-align: 0.9em; color: var(--wp--preset--color--pink); }
.mm-top .mm-lead { margin-bottom: 0; }
.mm-top__art { position: relative; min-height: 280px; }
.mm-top__art figure { position: absolute; margin: 0; padding: 0.45rem; background: var(--wp--preset--color--paper); box-shadow: var(--wp--custom--lift--three); }
.mm-top__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mm-top__art figure:nth-child(1) { top: 0; left: 6%; width: 52%; aspect-ratio: 4 / 5; transform: rotate(-5deg); }
.mm-top__art figure:nth-child(2) { top: 14%; right: 0; width: 46%; aspect-ratio: 1; transform: rotate(4deg); }
.mm-top__art figure:nth-child(3) { bottom: 0; left: 30%; width: 40%; aspect-ratio: 1; transform: rotate(-1deg); }
.mm-top__art .mm-spark { position: absolute; z-index: 2; }

/* Two columns of words and a picture, used down the inner pages. */
.mm-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.mm-split--words-first > :first-child { order: 0; }
.mm-split__media { position: relative; margin: 0; }
.mm-split__media img { display: block; width: 100%; height: auto; border-radius: var(--wp--custom--radius--sm); box-shadow: var(--wp--custom--lift--two); }
.mm-band--paper .mm-split__media img { box-shadow: var(--wp--custom--lift--paper); }

/* A short list where each line starts with her sparkle. */
.mm-list { margin: 0; padding: 0; list-style: none; }
.mm-list li { position: relative; margin: 0 0 0.55em; padding-left: 1.6em; }
.mm-list li::before { content: "✦"; position: absolute; left: 0; top: 0.05em; color: var(--wp--preset--color--pink); }
.mm-band--paper .mm-list li::before { color: var(--wp--preset--color--pink-deep); }
.mm-list--two { columns: 2 16rem; column-gap: 2.5rem; }
.mm-list--two li { break-inside: avoid; }

/* What things cost: her own numbers, said plainly, each in a box of its own. */
.mm-costs { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin: var(--wp--preset--spacing--40) 0 0; }
.mm-cost { padding: 1.25rem 1.35rem; border: 1.5px solid var(--wp--preset--color--ink); background: var(--wp--preset--color--white); box-shadow: 4px 4px 0 var(--wp--preset--color--mint-deep); }
.mm-cost__num { display: block; font-family: var(--wp--preset--font-family--display); font-size: 2.6rem; line-height: 1; color: var(--wp--preset--color--pink-deep); }
.mm-cost p { margin: 0.4rem 0 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-2); }

/* Questions and care: each one folds open (the page's own <details>, no script). */
.mm-acc { max-width: 52rem; }
.mm-acc__group { margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--30); font-family: var(--wp--preset--font-family--display); font-size: 2.2rem; color: var(--wp--preset--color--pink); }
.mm-band--paper .mm-acc__group { color: var(--wp--preset--color--pink-deep); }
.mm-acc__group:first-child { margin-top: 0; }
.mm-acc details { border-top: 1px solid rgba(201, 189, 198, 0.28); }
.mm-acc details:last-of-type { border-bottom: 1px solid rgba(201, 189, 198, 0.28); }
.mm-band--paper .mm-acc details { border-color: rgba(26, 20, 24, 0.18); }
.mm-acc summary {
	position: relative;
	display: block;
	padding: 1.15rem 3rem 1.15rem 0;
	font-size: 1.15rem;
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}
.mm-acc summary::-webkit-details-marker { display: none; }
.mm-acc summary::after {
	content: "+";
	position: absolute;
	right: 0.25rem;
	top: 50%;
	font-size: 1.7rem;
	font-weight: 300;
	line-height: 1;
	color: var(--wp--preset--color--pink);
	transform: translateY(-50%);
	transition: transform var(--wp--custom--motion--base) var(--mm-ease);
}
.mm-band--paper .mm-acc summary::after { color: var(--wp--preset--color--pink-deep); }
.mm-acc details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.mm-acc summary:hover { color: var(--wp--preset--color--pink); }
.mm-band--paper .mm-acc summary:hover { color: var(--wp--preset--color--pink-deep); }
.mm-acc__body { padding: 0 0 1.4rem; max-width: 44em; color: var(--wp--preset--color--mist); }
.mm-band--paper .mm-acc__body { color: var(--wp--preset--color--ink-2); }
.mm-acc__body p, .mm-acc__body ul, .mm-acc__body ol { margin: 0 0 0.85em; }
.mm-acc__body h4 { margin: 1.2em 0 0.45em; color: inherit; }
.mm-acc__body strong { color: var(--wp--preset--color--chalk); font-weight: 600; }
.mm-band--paper .mm-acc__body strong { color: var(--wp--preset--color--ink); }

/* The healing journey, day by day, along a line drawn down the page. */
.mm-days { position: relative; max-width: 46rem; margin: 0; padding: 0 0 0 2.4rem; list-style: none; }
.mm-days::before { content: ""; position: absolute; left: 0.55rem; top: 0.4rem; bottom: 0.4rem; width: 2px; background: var(--wp--preset--color--lilac-deep); transform-origin: top center; }
.mm-js .mm-days:not(.is-in)::before { transform: scaleY(0); }
.mm-days.is-in::before { animation: mm-days var(--wp--custom--motion--draw) var(--mm-ease) both; }
@keyframes mm-days { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.mm-days li { position: relative; margin: 0 0 1.6rem; }
.mm-days li::before { content: ""; position: absolute; left: -2.15rem; top: 0.35rem; width: 0.9rem; height: 0.9rem; border: 2px solid var(--wp--preset--color--lilac-deep); border-radius: 50%; background: var(--wp--preset--color--paper); }
.mm-days h3 { margin: 0 0 0.25em; font-family: var(--wp--preset--font-family--display); font-size: 1.8rem; font-weight: 400; color: var(--wp--preset--color--lilac-deep); }
.mm-days p { margin: 0 0 0.5em; color: var(--wp--preset--color--ink-2); }

/* A note in her voice that is not hers to promise: see a doctor. */
.mm-note { max-width: 44rem; margin: var(--wp--preset--spacing--40) 0 0; padding: 1rem 1.2rem; border-left: 3px solid var(--wp--preset--color--pink); background: var(--wp--preset--color--night-3); font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--mist); }
.mm-band--paper .mm-note { border-left-color: var(--wp--preset--color--pink-deep); background: var(--wp--preset--color--bone); color: var(--wp--preset--color--ink-2); }
.mm-note strong { color: inherit; }

/* The booking page: the form, and beside it what happens next and when she works. */
.mm-request { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.mm-request__side { position: sticky; top: 7rem; display: grid; gap: 1.5rem; }
.mm-panel { padding: 1.4rem 1.5rem; border: 1.5px solid rgba(201, 189, 198, 0.35); background: var(--wp--preset--color--night-3); }
.mm-panel h3 { margin: 0 0 0.6rem; font-family: var(--wp--preset--font-family--display); font-size: 1.9rem; font-weight: 400; }
.mm-panel p { margin: 0 0 0.6rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--mist); }
.mm-panel .mm-list { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--mist); }

/* The privacy page and any page of plain words: a readable column. */
.mm-prose { max-width: 44rem; }
.mm-prose h2 { margin: 2em 0 0.5em; font-size: 2.3rem; }
.mm-prose h2:first-child { margin-top: 0; }
.mm-prose p, .mm-prose ul { margin: 0 0 1em; color: var(--wp--preset--color--ink-2); }
.mm-prose a { color: var(--wp--preset--color--pink-deep); }

/* ---------------------------------------------------------------- 8. footer */

/* The band before the footer: her list, on paper, so it never sits dark against a page's last dark band. */
.mm-join.mm-band { padding-block: var(--wp--preset--spacing--60); }
.mm-join__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.mm-join h2 { margin: 0 0 0.25em; font-size: clamp(2.4rem, 5vw, 3.4rem); }
.mm-join p { margin: 0; color: var(--wp--preset--color--ink-2); }
.mm-form--list fieldset { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: stretch; }
.mm-form--list .ff-el-group, .mm-form--list .ff_submit_btn_wrapper { margin: 0 !important; }
html body .mm-form--list input.ff-el-form-control { box-sizing: border-box; height: 3.25rem; min-height: 3.25rem; }
html body .mm-form--list .ff-btn-submit { box-sizing: border-box; height: 3.25rem; min-height: 3.25rem; margin: 0; }

/* 🔴 A dark footer hides link states unless every state is set (web-design-quality-bar). Set on the links. */
html body #footer { background: var(--wp--preset--color--night-2); color: var(--wp--preset--color--mist); }
html body #footer a { color: var(--wp--preset--color--chalk); text-decoration-color: rgba(255, 90, 168, 0.6); }
html body #footer a:hover, html body #footer a:focus-visible { color: var(--wp--preset--color--pink); }
html body #footer .ct-footer-copyright { color: var(--wp--preset--color--mist); font-size: var(--wp--preset--font-size--caption); letter-spacing: 0.04em; }
html body #footer [data-row] { border-color: rgba(201, 189, 198, 0.16); }

/* ---------------------------------------------------------------- 9. forms (the forms plugin's parts, by its own class names) */

.mm-form .ff-el-group { margin-bottom: 1.25rem; }
.mm-form .ff-el-input--label label, .mm-form .ff-el-form-check-label, .mm-form legend {
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--chalk);
}
.mm-form .ff-el-form-check-label { text-transform: none; letter-spacing: 0.01em; font-size: var(--wp--preset--font-size--small); font-weight: 500; }
.mm-form .ff-el-input--label.asterisk-right label::after { color: var(--wp--preset--color--pink); }
.mm-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea).ff-el-form-control {
	min-height: 3rem;
	padding: 0.7rem 0.9rem;
	border: 1.5px solid rgba(201, 189, 198, 0.45);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--night);
	color: var(--wp--preset--color--chalk);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
	box-shadow: none;
}
.mm-form textarea.ff-el-form-control { min-height: 9rem; line-height: 1.5; }
.mm-form .ff-el-form-control::placeholder { color: rgba(201, 189, 198, 0.65); }
.mm-form .ff-el-form-control:focus { border-color: var(--wp--preset--color--mint); outline: 2px solid var(--wp--preset--color--mint); outline-offset: 1px; }
.mm-form input[type="checkbox"], .mm-form input[type="radio"] { accent-color: var(--wp--preset--color--pink); width: 1.1rem; height: 1.1rem; }
.mm-band--paper .mm-form :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--wp--preset--color--pink-deep); }
/* Short choices side by side, so the form reads shorter; a long one (her list's tick) still takes its own line. */
.mm-form .ff-el-input--content:has(> .ff-el-form-check) { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.mm-form .ff-el-form-check { margin: 0; }
.mm-form .ff-el-form-check-label { display: inline-flex; align-items: flex-start; gap: 0.6rem; min-height: 2.75rem; padding-block: 0.6rem; cursor: pointer; }
/* The box sits beside the first line of its words, not the middle of three (the list tick on a phone, 9 Nov 2026 polish pass). */
.mm-form .ff-el-form-check-label input { flex: none; margin: 0.15em 0 0; }
.mm-form .ff-el-help-message { margin-top: 0.35rem; font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--mist); font-style: normal; }
.mm-form .error.text-danger, .mm-form .ff-el-is-error .text-danger { color: var(--wp--preset--color--pink); font-size: var(--wp--preset--font-size--small); }
.mm-form .ff-el-is-error .ff-el-form-control { border-color: var(--wp--preset--color--pink); }
.mm-form .ff-message-success { padding: 1.25rem 1.4rem; border: 2px solid var(--wp--preset--color--mint); background: var(--wp--preset--color--night-3); color: var(--wp--preset--color--chalk); box-shadow: var(--wp--custom--edge); }
.mm-form .ff-message-success p { margin: 0 0 0.4em; }
.mm-form .ff_submit_btn_wrapper { margin-top: 0.5rem; }
.mm-form .ff-el-group.ff_columns_total_2 .ff-t-cell { padding-inline: 0.5rem; }
.mm-form .ff-el-section-break { margin: 1.25rem 0 0.25rem; }
.mm-form .ff-el-section-title { margin: 0 0 0.25rem; font-family: var(--wp--preset--font-family--display); font-size: 1.9rem; font-weight: 400; color: var(--wp--preset--color--pink); }
.mm-form .ff-section_break_desk { color: var(--wp--preset--color--mist); font-size: var(--wp--preset--font-size--small); }
.mm-form hr { border-color: rgba(201, 189, 198, 0.25); }

/* The list's form in one line: the address and the button side by side. */
.mm-form--list .fluentform form { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-start; }
.mm-form--list .ff-el-group { flex: 1 1 14rem; margin: 0; }
html body .mm-form--list .ff-el-input--label { position: absolute !important; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); }
.mm-form--list fieldset { align-items: flex-start; }
.mm-form--list .ff_submit_btn_wrapper { margin: 0; }
.mm-form--list .ff-el-group:has(input[type="checkbox"]) { flex-basis: 100%; }

/* 9a. Her galleries: the shared Autoriah Galleries plugin takes its colours and edges from the theme (its 0.3.1, 9 Nov
   2026: no longer from Autoriah Brand). The same as Brand gave them before: the deep pink ring, square corners, ink and
   white on the "more" button, and its mint offset shadow. */
.galleries {
	--galleries-accent: var(--wp--preset--color--pink-deep);
	--galleries-muted: var(--wp--preset--color--ink-2);
	--galleries-ink: var(--wp--preset--color--ink);
	--galleries-card: var(--wp--preset--color--white);
	--galleries-radius: 0;
	--galleries-border: 2px;
	--galleries-shadow: 4px 4px 0 var(--wp--preset--color--mint);
}

/* 9b. The booking calendar: the shared Autoriah Bookings plugin draws it plainly; her colours and edges here. On paper. */
.mm-request > *, .mm-split > *, .bookings-cal, .bookings-cal__step { min-width: 0; }
.bookings-cal {
	--bookings-ink: var(--wp--preset--color--ink);
	--bookings-paper: var(--wp--preset--color--white);
	--bookings-accent: var(--wp--preset--color--pink);
	--bookings-on-accent: var(--wp--preset--color--night);
	--bookings-line: rgba(26, 20, 24, 0.25);
	margin: 0 0 var(--wp--preset--spacing--50);
}
.bookings-cal__heading { font-family: var(--wp--preset--font-family--display); font-size: 1.9rem; font-weight: 400; line-height: 1; }
.bookings-cal__no { width: 2.2rem; height: 2.2rem; background: var(--wp--preset--color--white); font-family: var(--wp--preset--font-family--sans); box-shadow: 2px 2px 0 var(--wp--preset--color--pink); }
.bookings-kind { box-shadow: 4px 4px 0 var(--wp--preset--color--ink); transition: transform var(--wp--custom--motion--fast) var(--mm-ease), box-shadow var(--wp--custom--motion--fast) var(--mm-ease); }
.bookings-kind:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--wp--preset--color--ink); }
.bookings-kind:has(input:checked) { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--wp--preset--color--ink); }
.bookings-kind__length { color: var(--wp--preset--color--pink-deep); }
.bookings-kind:has(input:checked) .bookings-kind__length { color: var(--wp--preset--color--night); }
.bookings-kind__note { color: var(--wp--preset--color--ink-2); opacity: 1; }
.bookings-kind:has(input:checked) .bookings-kind__note { color: var(--wp--preset--color--ink); }
.bookings-kind--talk { box-shadow: 4px 4px 0 var(--wp--preset--color--lilac-deep); }
.bookings-cal__note { padding: 0.85rem 1rem; border-left: 3px solid var(--wp--preset--color--pink-deep); background: var(--wp--preset--color--bone); font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-2); }
.bookings-cal__month { padding: 1rem; border: 1.5px solid var(--wp--preset--color--ink); background: var(--wp--preset--color--white); box-shadow: 4px 4px 0 var(--wp--preset--color--ink); }
.bookings-cal__title { font-family: var(--wp--preset--font-family--display); font-size: 1.7rem; font-weight: 400; }
.bookings-cal__nav { box-shadow: 2px 2px 0 var(--wp--preset--color--ink); }
.bookings-cal__day.is-free { box-shadow: 2px 2px 0 var(--wp--preset--color--mint-deep); }
.bookings-cal__day[aria-pressed="true"], .bookings-cal__time[aria-pressed="true"] { box-shadow: 1px 1px 0 var(--wp--preset--color--ink); transform: translate(1px, 1px); }
.bookings-cal__time { box-shadow: 3px 3px 0 var(--wp--preset--color--mint-deep); }
.bookings-cal__said { color: var(--wp--preset--color--pink-deep); }
.bookings-cal__talk:not([hidden]) { padding: 0.85rem 1rem; border-left: 3px solid var(--wp--preset--color--lilac-deep); background: var(--wp--preset--color--bone); }
.mm-phone { margin-top: 0.6rem; font-weight: 600; }

/* 9c. Your booking: the client's own page (the shared plugin's [bookings_manage]), reached from their emails. On paper. */
.mm-manage__wrap { max-width: 44rem; }
.bookings-manage__facts { display: grid; gap: 0.2rem 1.2rem; margin: 1.2rem 0 1.6rem; padding: 1.1rem 1.2rem; border: 2px solid var(--wp--preset--color--ink); background: var(--wp--preset--color--white); box-shadow: 4px 4px 0 var(--wp--preset--color--pink); }
.bookings-manage__facts dt { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--ink-soft, #51454E); }
.bookings-manage__facts dd { margin: 0 0 0.6rem; font-size: 1.1rem; font-weight: 600; }
.bookings-manage__said { padding: 0.8rem 1rem; border-left: 4px solid var(--wp--preset--color--mint); background: var(--wp--preset--color--white); font-weight: 600; }
.bookings-manage__said.is-error { border-left-color: var(--wp--preset--color--pink-deep, #B8135F); }
.bookings-manage__form { margin: 1.4rem 0; padding-top: 1.2rem; border-top: 1.5px solid rgba(26, 20, 24, 0.2); }
.bookings-manage__form h3 { margin: 0 0 0.6rem; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 1.7rem; }
.bookings-manage label { display: block; margin-bottom: 0.4rem; font-weight: 600; }
.bookings-manage__form--cancel label { display: flex; gap: 0.6rem; align-items: center; min-height: 44px; font-weight: 500; }
.bookings-manage textarea { width: 100%; min-height: 8rem; padding: 0.7rem 0.9rem; border: 1.5px solid rgba(26, 20, 24, 0.35); border-radius: var(--wp--custom--radius--md); background: var(--wp--preset--color--white); color: var(--wp--preset--color--ink); font: inherit; font-size: 1rem; }
.bookings-manage textarea:focus { border-color: var(--wp--preset--color--mint); outline: 2px solid var(--wp--preset--color--mint); outline-offset: 1px; }
.bookings-manage input[type="checkbox"] { accent-color: var(--wp--preset--color--pink-deep, #B8135F); width: 1.2rem; height: 1.2rem; }
.bookings-manage__form--cancel button[type="submit"] { --mm-btn-bg: var(--wp--preset--color--white); --mm-btn-edge: var(--wp--preset--color--pink); }

/* Forms on paper: ink on white, the same weight. */
.mm-band--paper .mm-form :is(.ff-el-input--label label, .ff-el-form-check-label, legend) { color: var(--wp--preset--color--ink); }
.mm-band--paper .mm-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea).ff-el-form-control {
	border-color: rgba(26, 20, 24, 0.35);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}
.mm-band--paper .mm-form .ff-el-form-control::placeholder { color: rgba(81, 69, 78, 0.7); }
.mm-band--paper .mm-form .ff-el-form-control:focus { border-color: var(--wp--preset--color--mint-deep); outline-color: var(--wp--preset--color--mint-deep); }
.mm-band--paper .mm-form .ff-el-help-message { color: var(--wp--preset--color--ink-2); }
.mm-band--paper .mm-form .ff-el-input--label.asterisk-right label::after, .mm-band--paper .mm-form .text-danger { color: var(--wp--preset--color--pink-deep); }
.mm-band--paper .mm-form .ff-el-is-error .ff-el-form-control { border-color: var(--wp--preset--color--pink-deep); }
.mm-band--paper .mm-form .ff-el-section-title { color: var(--wp--preset--color--pink-deep); }
.mm-band--paper .mm-form .ff-section_break_desk { color: var(--wp--preset--color--ink-2); }
.mm-band--paper .mm-form .ff-message-success { border-color: var(--wp--preset--color--mint-deep); background: var(--wp--preset--color--white); color: var(--wp--preset--color--ink); box-shadow: var(--wp--custom--edge-on-paper); }
.mm-band--paper .mm-form hr { border-color: rgba(26, 20, 24, 0.15); }

/* A panel on paper. */
.mm-panel--paper { border-color: rgba(26, 20, 24, 0.2); background: var(--wp--preset--color--white); box-shadow: var(--wp--custom--lift--paper); }
.mm-panel--paper p, .mm-panel--paper .mm-list { color: var(--wp--preset--color--ink-2); }
.mm-panel--paper h3 { color: var(--wp--preset--color--ink); }

/* The side's steps: down, not across. */
.mm-steps-row--side { grid-template-columns: 1fr; gap: 1rem; }
.mm-steps-row--side::before { top: 1rem; bottom: 1rem; left: 1.05rem; right: auto; width: 0; height: auto; border-top: 0; border-left: 2px dashed rgba(26, 20, 24, 0.28); }
.mm-steps-row--side li { display: grid; grid-template-columns: 2.2rem 1fr; column-gap: 0.85rem; }
.mm-steps-row--side li::before { grid-row: span 2; width: 2.2rem; height: 2.2rem; margin: 0; font-size: 1.15rem; box-shadow: 2px 2px 0 var(--wp--preset--color--pink); }
.mm-steps-row--side h3 { font-family: var(--wp--preset--font-family--sans); font-size: 1rem; }

/* One worked example: a single taped photo with its caption. */
.mm-example { display: block; max-width: 520px; margin: 0; padding: 0.55rem 0.55rem 0.7rem; background: var(--wp--preset--color--white); box-shadow: var(--wp--custom--lift--paper); transform: rotate(1.8deg); justify-self: center; }
.mm-example::before { content: ""; position: absolute; top: -0.7rem; left: 50%; width: 4rem; height: 1.3rem; background: rgba(255, 90, 168, 0.55); transform: translateX(-50%) rotate(-3deg); }
.mm-example { position: relative; }

/* The four kinds of commission: each a real piece, its name under it. */
.mm-kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.75rem, 2vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
.mm-kinds figure { margin: 0; padding: 0.45rem 0.45rem 0.6rem; background: var(--wp--preset--color--white); box-shadow: var(--wp--custom--lift--paper); transform: rotate(var(--r, -1deg)); transition: transform var(--wp--custom--motion--base) var(--mm-ease); }
.mm-kinds li:nth-child(even) figure { --r: 1.2deg; }
.mm-kinds figure:hover { transform: rotate(0deg) translateY(-4px); }
.mm-kinds img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.mm-kinds figcaption { padding-top: 0.5rem; font-family: var(--wp--preset--font-family--display); font-size: 1.45rem; line-height: 1; text-align: center; color: var(--wp--preset--color--ink); }

/* Her prices on a dark band. */
.mm-band:not(.mm-band--paper):not(.mm-band--bone) .mm-cost { border-color: rgba(201, 189, 198, 0.4); background: var(--wp--preset--color--night-3); box-shadow: 4px 4px 0 var(--wp--preset--color--mint); }
.mm-band:not(.mm-band--paper):not(.mm-band--bone) .mm-cost__num { color: var(--wp--preset--color--pink); }
.mm-band:not(.mm-band--paper):not(.mm-band--bone) .mm-cost p { color: var(--wp--preset--color--mist); }

/* The small links under her list. */
.mm-join h2 .mm-spark { width: 0.45em; height: 0.45em; vertical-align: 0.6em; }
.mm-join__links ul { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: var(--wp--preset--spacing--40) 0 0; padding: 0; list-style: none; font-size: var(--wp--preset--font-size--small); }
.mm-join__links a { color: var(--wp--preset--color--ink); border-bottom: 1px solid rgba(184, 19, 95, 0.45); }
.mm-join__links a:hover, .mm-join__links a:focus-visible { color: var(--wp--preset--color--pink-deep); border-bottom-color: currentColor; }

/* Room for a thumb: everything you press is at least 44 by 44 (the shared phone check). */
html body .site-title a { display: inline-flex; align-items: center; min-height: 44px; }
html body .ct-header-trigger { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.mm-more { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding-block: 0; }
.mm-more::after { bottom: 0.55rem; }
.mm-join__links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; border-bottom: 0; text-decoration: underline; text-decoration-color: rgba(184, 19, 95, 0.45); text-underline-offset: 0.3em; }
.mm-acc__body a, .mm-panel a, .mm-prose a { display: inline-block; padding-block: 0.6rem; margin-block: -0.6rem; }
.mm-join { border-top: 1px solid rgba(26, 20, 24, 0.12); }

/* ---------------------------------------------------------------- 10. small screens */

@media (max-width: 1000px) {
	.mm-hero__grid { grid-template-columns: 1fr; min-height: 0; }
	.mm-hero__art { order: -1; width: min(72vw, 360px); margin-top: 0.5rem; }
	.mm-taped { left: -8%; width: 42%; }
	.mm-way a { grid-template-columns: 3rem minmax(0, 1fr) clamp(96px, 22vw, 150px); }
	.mm-way__words { grid-column: 2 / 3; grid-row: 2; }
	.mm-way__photo { grid-column: 3; grid-row: 1 / span 2; }
	.mm-steps-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
	.mm-steps-row::before { display: none; }
	.mm-about, .mm-book, .mm-top__grid, .mm-split, .mm-join__grid, .mm-request { grid-template-columns: 1fr; }
	.mm-request__side { position: static; }
	.mm-top__art { min-height: 0; height: clamp(240px, 60vw, 380px); }
	.mm-about__photo { max-width: 420px; }
	.mm-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mm-example { order: 2; }
}

@media (max-width: 700px) {
	.mm-flash { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
	.mm-flash li:nth-child(n) { grid-column: auto; grid-row: auto; }
	.mm-flash li:nth-child(1) { grid-column: 1 / -1; }
	.mm-flash li a { aspect-ratio: 1; }
	.mm-flash li:nth-child(1) a { aspect-ratio: 4 / 3; }
	.mm-example { grid-template-columns: 1fr; max-width: 360px; }
	.mm-example__arrow { transform: rotate(90deg); justify-self: center; }
	.mm-steps-row { grid-template-columns: 1fr; }
	/* On a phone the mural is a picture of its own above the words, not a wash behind them. */
	.mm-wall { display: block; min-height: 0; padding-top: 0; }
	.mm-wall__photo { position: relative; inset: auto; height: 72vw; margin-bottom: var(--wp--preset--spacing--40) !important; overflow: hidden; }
	.mm-wall__photo::after { background: linear-gradient(180deg, rgba(14, 11, 16, 0) 55%, rgba(14, 11, 16, 1) 100%); }
	.mm-photos--wall { columns: 2 140px; }
	.mm-way a { grid-template-columns: minmax(0, 1fr) 96px; }
	.mm-way__no { display: none; }
	.mm-way__name { grid-column: 1; }
	.mm-way__words { grid-column: 1; }
	.mm-way__photo { grid-column: 2; }
	.mm-hours dd { white-space: normal; }
	/* Nothing over 44 px on a phone: her name and the page names stay the biggest thing there at that. */
	.mm-hero h1, .mm-top h1 { font-size: 2.75rem; line-height: 0.95; }
	.mm-title, .mm-join h2, .mm-way__name { font-size: 2.5rem; }
	.mm-acc__group { font-size: 2rem; }
}

@media (max-width: 380px) {
	/* Two columns narrower than 165 px are too small to see a tattoo in: one column. */
	.mm-flash, .mm-kinds { grid-template-columns: 1fr; }
	.mm-hours dl, .mm-wall__price { grid-template-columns: 1fr; gap: 0 0; }
	.mm-hours dd { margin-bottom: 0.5rem; }
	.mm-wall__price dd { margin-bottom: 0.6rem; }
	.mm-flash li a, .mm-flash li:nth-child(1) a { aspect-ratio: 4 / 3; }
}

/* ---------------------------------------------------------------- 11. still: less motion, ?still=1, and held */

.mm-still *, .mm-still *::before, .mm-still *::after {
	animation: none !important;
	transition: none !important;
}
.mm-still .mm-rise, .mm-still .mm-steps .mm-step, .mm-still .mm-line, .mm-still .mm-rule::after, .mm-still .mm-days::before { transform: none !important; }
.mm-still .mm-draw { stroke-dashoffset: 0 !important; }
.mm-still .mm-eye__lid { transform: translateY(-162px) !important; }
.mm-still .mm-twinkle { transform: scale(0.9) !important; }

/* ?t=: every animation started, then frozen at the moment asked for. */
.mm-held *, .mm-held *::before, .mm-held *::after { animation-play-state: paused !important; }
.mm-held .mm-rise.is-in, .mm-held .mm-draw.is-in, .mm-held .mm-line.is-in { animation-delay: calc(var(--mm-hold) + var(--dd, 0s)) !important; }
.mm-held .mm-steps.is-in .mm-step { animation-delay: calc(var(--mm-hold) + var(--i, 0) * var(--wp--custom--motion--step)) !important; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.mm-rise, .mm-steps .mm-step, .mm-line, .mm-rule::after, .mm-days::before { transform: none !important; }
	.mm-draw { stroke-dashoffset: 0 !important; }
	.mm-eye__lid { transform: translateY(-162px) !important; }
}