/*
 * Montessori Bees homepage: the "Sections (no title)" page template and the section patterns (patterns/home-*.php).
 *
 * Loaded on the site and in the block editor's canvas, after brand.css.
 *
 * Desktop values are measured on the Wix site at 1440px, except where a section says it is tighter than Wix (the
 * desktop Commitment, Services and Testimonials leave out some of Wix's empty space). Below 782px (where WordPress stacks Columns blocks)
 * the sections switch to Wix's phone layout, in Wix's raw phone units (decision H7).
 *
 * Every rule below starts with `:is(.entry-content, .editor-styles-wrapper, #mb)`: the content area on the site,
 * the canvas in the editor. `#mb` matches nothing. It gives the rules an ID's weight, so they win over Twenty
 * Twenty's content and editor rules (some chain seven classes) without !important. Settings made on a block in
 * the editor are inline styles, so they still win. Resets wrap their target in :where() and so weigh exactly one
 * ID; section rules add a class and so always beat the resets.
 */


/* Template: Sections (no title) ------------- */
/*
 * Each top-level block is a full-width section, stacked edge to edge. The parent spaces them 1.25em apart,
 * and full-width blocks 5rem to 10rem apart; the editor 28px apart.
 */

:is(.entry-content, .editor-styles-wrapper, #mb) :where(.template-sections .entry-content > *, .is-root-container > .mb-section) {
	margin-bottom: 0;
	margin-top: 0;
}


/* Twenty Twenty resets ---------------------- */
/* Twenty Twenty styles content for blog posts. Inside the sections, its automatic sizes and spacing are undone. */

/* Blocks fill their container: no 580px cap (58rem) on the site, no 610px cap in the editor. */
:is(.entry-content, .editor-styles-wrapper, #mb) :where(.mb-section [class*="__inner-container"] > *, .mb-section .wp-block) {
	max-width: none;
}

/*
 * No automatic margins on blocks: the parent's 3rem to 10rem above and below (centred with auto sides), the
 * editor's 28px (also centred), 1em under paragraphs. Each section sets its own spacing.
 */
:is(.entry-content, .editor-styles-wrapper, #mb) :where(.mb-section) :where(h1, h2, h3, h4, h5, h6, p, figure, hr, ul, ol, .wp-block, .wp-block-group, .wp-block-columns, .wp-block-column, .wp-block-buttons, .wp-block-cover) {
	margin: 0;
}

/* Editor: the parent sets text in columns to 16px, and 18px from 1000px; on the site it stays at the body size. */
:is(.entry-content, .editor-styles-wrapper, #mb) :where(.mb-section .wp-block-column) {
	font-size: inherit;
}

/* No automatic padding: groups with a background colour (2rem to 8rem), Cover content (2rem, inset 2rem to 4rem). */
:is(.entry-content, .editor-styles-wrapper, #mb) :where(.mb-section.wp-block-group.has-background, .mb-section .wp-block-group.has-background) {
	padding: 0;
}

:is(.entry-content, .editor-styles-wrapper, #mb) :where(.mb-section .wp-block-cover__inner-container) {
	padding: 0;
	width: 100%;
}


/* Separators: a plain line. The parent draws one with two slashes in the middle (a gradient and two pseudo-elements). */
:is(.entry-content, .editor-styles-wrapper, #mb) :where(.mb-section hr) {
	background: none;
	border: 0;
	border-top: 1px solid;
	height: 0;
}

:is(.entry-content, .editor-styles-wrapper, #mb) :where(.mb-section hr)::before,
:is(.entry-content, .editor-styles-wrapper, #mb) :where(.mb-section hr)::after {
	content: none;
}

/* Hero ------------------------------------ */
/*
 * Full-width photo with a Deep Blue-Grey panel on it: hexagon bee, title, photo, introduction.
 * Phone: the panel sits 20px from the sides and 40px from the top, and reaches the bottom of the section.
 * The bee sits inside it, and the photo is a portrait crop. (Wix's phone panel is 896px tall, with ~350px empty
 * at the bottom; here it fits its content.)
 */

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-hero {
	min-height: 0;
	padding: 40px 20px 0;
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-hero__panel {
	border-radius: var(--mb-radius);
	gap: 0;
	padding: 10px 10px 40px;
}

/* The hexagon bee: decorative, so drawn here rather than as an image block. */
:is(.entry-content, .editor-styles-wrapper, #mb) .mb-hero__panel::before {
	background: url(../img/hexagon-bee.svg) center / contain no-repeat;
	content: "";
	flex-shrink: 0;
	height: 160px;
	margin: 0 0 10px;
	width: 140px;
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-hero h1 {
	margin: 0 0 20px;
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-hero__photo img {
	aspect-ratio: 160 / 202;
	height: auto;
	object-fit: cover;
	width: 160px;
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-hero p {
	letter-spacing: -0.01em; /* Of its own size; otherwise it inherits the 16px body's. */
	line-height: 1.3;
	margin: 10px 0 0;
	max-width: 478px; /* As on desktop; keeps lines short on tablets, which get the phone layout. */
}

/*
 * Desktop: a 687px panel, 109px from the top of a 1012px section. The bee overlaps its top edge by 72px.
 * Unlike Wix, the section is never taller than the screen below the 60px header (92px with the admin bar), so the
 * whole hero is visible without scrolling (the user's choice). On shorter screens the spacing, bee and title
 * shrink with the screen height (each size is its 1012px value scaled down), and the photo takes the height that
 * is left, up to its 290px. From 1072px of screen height it is Wix's size. Below 560px it stops shrinking.
 */
@media (min-width: 782px) {

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-hero {
		--mb-hero-height: max(560px, calc(100svh - 60px));
		align-items: stretch;
		box-sizing: border-box;
		height: min(1012px, var(--mb-hero-height));
		padding: min(109px, var(--mb-hero-height) * 109 / 1012) 20px min(26px, var(--mb-hero-height) * 26 / 1012);
	}

	.admin-bar :is(.entry-content, .editor-styles-wrapper, #mb) .mb-hero {
		--mb-hero-height: max(560px, calc(100svh - 92px));
	}

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-hero .wp-block-cover__inner-container {
		height: 100%;
		max-width: 687px;
	}

	/* The space left under the introduction (at least 7% of the height, up to 116px) is the panel's bottom padding. */
	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-hero__panel {
		box-sizing: border-box;
		height: 100%;
		justify-content: flex-start;
		padding: 0 32px min(116px, var(--mb-hero-height) * 0.07);
	}

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-hero__panel::before {
		height: min(230px, var(--mb-hero-height) * 230 / 1012);
		margin: calc(-1 * min(72px, var(--mb-hero-height) * 72 / 1012)) 0 min(34px, var(--mb-hero-height) * 34 / 1012);
		width: min(201px, var(--mb-hero-height) * 201 / 1012);
	}

	/* brand.css's H1 size, shrinking with the height too but not below 40px (one line in the panel). */
	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-hero h1 {
		font-size: min(clamp(27px, 17.343px + 2.476vw, 53px), max(40px, var(--mb-hero-height) * 53 / 1012));
		margin-bottom: min(49px, var(--mb-hero-height) * 49 / 1012);
	}

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-hero__photo {
		display: flex;
		flex: 1 1 0;
		max-height: 290px;
		min-height: 0;
	}

	/* 478px wide; shorter than 290px, it is cropped top and bottom, keeping the girl's face. */
	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-hero__photo img {
		aspect-ratio: auto;
		height: 100%;
		object-position: 50% 40%;
		width: 478px;
	}

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-hero p {
		margin-top: min(52px, var(--mb-hero-height) * 52 / 1012);
	}
}


/* Our Commitment to Education ------------- */
/*
 * Soft Beige. Two rows of columns: heading | small square photo, then portrait photo | label, three paragraphs, button.
 * Phone: everything stacked; the two photos centred and touching; 40px under the button (Wix has none).
 */

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-commitment {
	padding: 20px 20px 40px;
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-commitment .wp-block-columns {
	gap: 0;
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-commitment h2 {
	letter-spacing: -0.04em;
	line-height: 1.02;
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-commitment__toddler {
	margin: 50px auto 0;
	width: 103px;
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-commitment__puzzle {
	margin: 0 auto;
	width: 134px;
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-commitment :is(.mb-commitment__toddler, .mb-commitment__puzzle) img {
	aspect-ratio: 1;
	height: auto;
	object-fit: cover;
	width: 100%;
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-commitment .mb-commitment__puzzle img {
	aspect-ratio: 259 / 336;
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-commitment__label {
	margin-top: 10px;
}

/* The three paragraphs, one empty line apart (Wix uses empty paragraphs). */
:is(.entry-content, .editor-styles-wrapper, #mb) .mb-commitment__text .is-style-accent {
	letter-spacing: -0.01em;
	margin-top: 1.2em;
	max-width: 640px;
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-commitment__label + .is-style-accent {
	margin-top: 10px;
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-commitment .wp-block-buttons {
	justify-content: center;
	margin-top: 20px;
}

/*
 * Desktop: rows are 30px from the sides, with content 10px further in. Tighter than Wix (whose section is 1122px
 * tall at 1440): 60px between the rows instead of 94px, 80px under the button instead of 186px, and the portrait
 * fills its column (404px wide instead of 259px), level with the top of the text, which starts 80px from it
 * (scaled down below 1440) instead of 153px further in.
 */
@media (min-width: 782px) {

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-commitment {
		padding: 40px 30px 80px;
	}

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-commitment .wp-block-column:first-child {
		padding-left: 10px;
	}

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-commitment .wp-block-column:last-child {
		padding-right: 10px;
	}

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-commitment h2 {
		margin-top: 36px;
		max-width: 634px;
	}

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-commitment__toddler {
		margin: 0 0 0 auto;
		max-width: 100%;
		width: 224px;
	}

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-commitment__main {
		margin-top: 60px;
	}

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-commitment__puzzle {
		margin: 0;
		width: 100%;
	}

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-commitment__text {
		padding-left: min(80px, 5.556vw);
	}

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-commitment__label {
		margin-top: 0;
	}

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-commitment__label + .is-style-accent {
		margin-top: 31px;
	}

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-commitment .wp-block-buttons {
		justify-content: flex-start;
		margin-top: 32px;
	}
}


/* About me -------------------------------- */
/*
 * A band in the deeper shade around a Deep Blue-Grey text panel with a tall portrait beside it.
 * (Wix had dark brown at 80% over the maroon page; here the band is solid, a step under the panel.)
 * Phone: the band shows 60px above and below; the panel runs full width, with the photo under it.
 */

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-about {
	padding: 60px 0;
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-about .wp-block-columns {
	gap: 0;
}

/* The panel as a whole, so the text column and the portrait beside it round together. */
:is(.entry-content, .editor-styles-wrapper, #mb) .mb-about__panel {
	border-radius: var(--mb-radius);
	overflow: hidden;
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-about__text {
	padding: 20px;
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-about h2 {
	line-height: normal;
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-about__welcome {
	letter-spacing: -0.03em;
	line-height: normal;
	margin-top: 10px;
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-about__text p + p {
	margin-top: 24px; /* One empty line, as between the Wix paragraphs. */
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-about__text .mb-about__welcome + p {
	margin-top: 10px;
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-about__social {
	gap: 7px;
	justify-content: center;
	margin-top: 10px;
}

/*
 * The portrait is cropped to fill its box. Rather than squeezing it with object-fit, the image is laid out at the
 * box's full height and its own width, centred, with the sides clipped: WordPress's automatic image sizes go by
 * the laid-out width, so the browser then picks a file that is sharp at that height.
 */
:is(.entry-content, .editor-styles-wrapper, #mb) .mb-about__photo figure {
	aspect-ratio: 320 / 277;
	overflow: hidden;
	position: relative;
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-about__photo img {
	left: 50%;
	max-height: 100%; /* Full height, set with min and max: the editor puts an inline `height: auto` on images. */
	max-width: none;
	min-height: 100%;
	min-width: 100%;
	object-fit: cover; /* Only matters for a portrait narrower than its box. */
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	width: auto;
}

/*
 * Desktop: the panel is 60px inside the band on every side, 889px of text panel and a 431px portrait at 1440.
 * The text starts 70px down and 170px in (scaled down below 1440).
 */
@media (min-width: 782px) {

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-about {
		padding: 60px;
	}

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-about__text {
		padding: 70px 20px 59px min(170px, 11.806vw);
	}

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-about h2 {
		max-width: 541px;
	}

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-about__text .mb-about__welcome + p {
		margin-top: 40px;
	}

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-about__text p:not(.mb-about__welcome) {
		max-width: 469px;
	}

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-about__social {
		justify-content: flex-start;
		margin-top: 16px;
	}

	/* The portrait fills its column, as tall as the text panel; the text alone sets the height. */
	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-about__photo {
		position: relative;
	}

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-about__photo figure {
		aspect-ratio: auto;
		inset: 0;
		position: absolute;
	}
}



/* Services -------------------------------- */
/*
 * "Services" and three bordered cards: photo, title, (subtitle), rule, buttons. Desktop: the three cards in one row
 * (Wix puts two side by side and the third centred below). Phone: one card per row, in desktop order, with the buttons stacked.
 * Wix's phone cards are spaced unevenly; here they all follow the first card's 10px rhythm, 40px apart.
 */

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-services {
	padding: 15px 15px 40px;
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-services h2 {
	line-height: 1;
	margin-left: 4px;
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-services__cards {
	gap: 40px;
	margin-top: 14px;
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-card {
	border-radius: var(--mb-radius);
	gap: 0;
	padding: 10px;
	width: 100%;
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-card .wp-block-image {
	width: 220px;
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-card .wp-block-image img {
	border-radius: calc(var(--mb-radius) / 2);
	width: 100%;
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-card h3 {
	margin-top: 10px;
	max-width: 256px;
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-card h6 {
	line-height: 1.25;
	margin-top: 10px;
	max-width: 260px;
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-card hr {
	border-top-color: var(--mb-primary);
	margin-top: 10px;
	max-width: 100%;
	width: 260px;
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-card .wp-block-buttons {
	flex-direction: column;
	gap: 10px;
	margin-top: 16px;
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-card .wp-block-button__link {
	min-width: 160px;
	padding: 13px 4px;
}

/*
 * Desktop: in a 1115px column, three 329px cards 64px apart, with the heading level with the first card. Narrower,
 * the gaps shrink, then the cards, down to 310px (the width a pair of buttons needs); below that (about 1050px
 * screens) they wrap two and one, 63px between rows. Cards in the same row are equally tall, with their rules level: the rule takes the free space above
 * it, and sits 30px under a title or right under a subtitle.
 */
@media (min-width: 782px) {

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-services {
		padding: 84px max(15px, calc((100% - 1115px) / 2)) 66px;
	}

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-services h2 {
		margin-left: 0;
	}

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-services__cards {
		align-items: stretch;
		gap: 63px clamp(32px, 4.45vw, 64px);
		margin-top: 66px;
	}

	/* Cards share the row, 310px to 329px wide. */
	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-card {
		flex: 1 1 0;
		max-width: 329px;
		min-width: 310px;
		padding: 6px 6px 40px; /* Plus the 1px border. */
		width: auto;
	}

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-card .wp-block-image {
		width: 100%;
	}

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-card h3 {
		margin-top: 14px;
		max-width: 255px;
	}

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-card h3:has(+ hr) {
		margin-bottom: 30px;
	}

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-card h6 {
		margin-top: 20px;
		max-width: 293px;
	}

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-card hr {
		margin-top: auto;
		width: 284px;
	}

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-card .wp-block-buttons {
		flex-direction: row;
		gap: 18px;
		margin-top: 32px;
	}

	/* 134px for a pair of buttons, 142px for one on its own (as on Wix); tight sides so a pair fits the card. */
	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-card .wp-block-button__link {
		min-width: 134px;
		padding: 12px 4px;
	}

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-card .wp-block-button:only-child .wp-block-button__link {
		min-width: 142px;
	}
}


/* What They Say About Us ------------------ */
/*
 * Heading, then a full-width strip of three Pale Green columns divided by 1px Soft Beige lines (as on Wix,
 * the strip's background showing through 1px gaps). Each column: quote mark, name, quote.
 * Phone: the columns stacked, all with the first one's spacing (Wix's vary); the heading left-aligned, as on Wix.
 */

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-testimonials {
	padding: 20px 0 66px;
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-testimonials h2 {
	letter-spacing: -0.04em;
	padding: 0 20px;
	text-align: left;
}

/* The strip's outer corners only: the columns inside are 1px apart and cannot round individually. */
:is(.entry-content, .editor-styles-wrapper, #mb) .mb-testimonials__quotes {
	border-radius: var(--mb-radius);
	gap: 1px;
	margin-top: 20px;
	overflow: hidden;
	padding: 1px 0;
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-testimonial {
	padding: 38px 20px 39px;
}

/* The quote mark: decorative, so drawn here (Wix's is clip art). Two Honey wedges, above the name. */
:is(.entry-content, .editor-styles-wrapper, #mb) .mb-testimonial__name::before {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath fill='%23d6ae5d' d='M0 58V32L12 4h12l-8 26h10v28zm34 0V32L46 4h12l-8 26h10v28z'/%3E%3C/svg%3E") center / contain no-repeat;
	content: "";
	display: block;
	height: 40px;
	margin: 0 auto 20px;
	width: 40px;
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-testimonial__name {
	font-family: var(--mb-font-heading);
	font-size: 19px;
	letter-spacing: normal;
	line-height: normal;
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-testimonial .is-style-accent {
	letter-spacing: normal;
	line-height: 1.8;
	margin: 20px auto 0;
}

/*
 * Desktop: the strip starts 45px under the heading. Tighter than Wix: the quote mark sits 56px down (Wix: 91px) with
 * 36px under it (Wix: 75px), and the quote ends 64px above the column's bottom (Wix: 109px).
 */
@media (min-width: 782px) {

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-testimonials {
		padding: 59px 0 65px;
	}

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-testimonials h2 {
		padding: 0;
		text-align: center;
	}

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-testimonials__quotes {
		margin-top: 45px;
		padding: 1px;
	}

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-testimonial {
		padding: 56px 20px 64px;
	}

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-testimonial__name::before {
		height: 60px;
		margin-bottom: 36px;
		width: 60px;
	}

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-testimonial__name {
		font-size: 26px;
	}

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-testimonial .is-style-accent {
		max-width: 310px;
	}
}


/* Motion ---------------------------------- */
/*
 * The blocks of each section fade in, and rise 24px, as they scroll into view. assets/js/motion.js adds the
 * .mb-reveal class, so nothing is hidden before it has run, and it adds nothing at all when the visitor has asked
 * for less motion. The editor doesn't load it. Photos only fade: they sit in frames of their own.
 */

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

:is(.entry-content, .editor-styles-wrapper, #mb) .mb-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

:is(.entry-content, .editor-styles-wrapper, #mb) :is(.mb-commitment__toddler, .mb-commitment__puzzle, .mb-about__photo figure).mb-reveal {
	transform: none;
}

/* If the setting changes after the script has run, everything stays put. */
@media (prefers-reduced-motion: reduce) {

	:is(.entry-content, .editor-styles-wrapper, #mb) .mb-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}