/* =========================================================================
   Moti Mahal — foundations
   Tokens, reset, typography, controls and motion primitives.
   ========================================================================= */

:root {
	/* Brand */
	--mm-red: #b12322;
	--mm-red-600: #9c1e1d;
	--mm-red-700: #841818;
	--mm-red-050: #fbf1f0;
	--mm-red-100: #f4dedd;
	--mm-gold: #c8992e;
	--mm-gold-soft: #e8c96a;

	/* Neutrals */
	--mm-ink: #171210;
	--mm-ink-80: #3b322e;
	--mm-ink-60: #6a5f59;
	--mm-ink-40: #9b918b;
	--mm-line: #e8e1da;
	--mm-line-strong: #d8cec4;
	--mm-cream: #fbf8f4;
	--mm-cream-2: #f5efe7;
	--mm-white: #ffffff;

	/* Feedback */
	--mm-green: #1f7a4d;
	--mm-green-050: #eaf5ef;
	--mm-amber: #b4740d;
	--mm-amber-050: #fdf3e3;
	--mm-danger: #b3261e;
	--mm-danger-050: #fdeceb;
	--mm-blue: #1d4ed8;

	/* Type */
	--mm-display: 'Forum', 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
	--mm-accent: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--mm-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;

	/* Space scale */
	--mm-s1: 4px;
	--mm-s2: 8px;
	--mm-s3: 12px;
	--mm-s4: 16px;
	--mm-s5: 24px;
	--mm-s6: 32px;
	--mm-s7: 48px;
	--mm-s8: 64px;
	--mm-s9: 88px;
	--mm-s10: 120px;

	/* Shape */
	--mm-r-sm: 8px;
	--mm-r: 14px;
	--mm-r-lg: 20px;
	--mm-r-xl: 28px;
	--mm-r-pill: 999px;

	/* Elevation — soft, warm shadows rather than grey ones */
	--mm-shadow-xs: 0 1px 2px rgba(23, 18, 16, .06);
	--mm-shadow-sm: 0 2px 8px rgba(23, 18, 16, .06), 0 1px 2px rgba(23, 18, 16, .04);
	--mm-shadow: 0 8px 24px rgba(23, 18, 16, .08), 0 2px 6px rgba(23, 18, 16, .04);
	--mm-shadow-lg: 0 18px 48px rgba(23, 18, 16, .12), 0 4px 12px rgba(23, 18, 16, .06);
	--mm-shadow-red: 0 10px 26px rgba(177, 35, 34, .24);

	/* Motion */
	--mm-ease: cubic-bezier(.22, .61, .36, 1);
	--mm-ease-out: cubic-bezier(.16, 1, .3, 1);
	--mm-ease-in-out: cubic-bezier(.65, 0, .35, 1);
	--mm-t-fast: .18s;
	--mm-t: .32s;
	--mm-t-slow: .6s;

	/* Layout */
	--mm-container: 1240px;
	--mm-container-narrow: 820px;
	--mm-gutter: 20px;
	--mm-header-h: 104px;
	--mm-bottombar-h: 64px;
}

@media (max-width: 900px) {
	:root {
		--mm-header-h: 80px;
		--mm-gutter: 16px;
	}
}

/* -------------------------------------------------------------------------
   Reset
   ------------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Anchor links must clear the sticky header. */
	scroll-padding-top: calc(var(--mm-header-h) + 16px);
}

body {
	margin: 0;
	background: var(--mm-cream);
	color: var(--mm-ink-80);
	font-family: var(--mm-body);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Nothing in this design is allowed to scroll sideways. */
	overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
}

a {
	color: var(--mm-red);
	text-decoration: none;
	transition: color var(--mm-t-fast) var(--mm-ease);
}

a:hover {
	color: var(--mm-red-700);
}

hr {
	border: 0;
	border-top: 1px solid var(--mm-line);
	margin: var(--mm-s6) 0;
}

:focus-visible {
	outline: 2px solid var(--mm-red);
	outline-offset: 3px;
	border-radius: 4px;
}

::selection {
	background: var(--mm-red-100);
	color: var(--mm-ink);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mm-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 12px 20px;
	background: var(--mm-red);
	color: #fff;
	border-radius: 0 0 var(--mm-r) 0;
}

.mm-skip-link:focus {
	left: 0;
	color: #fff;
}

/* -------------------------------------------------------------------------
   Typography
   ------------------------------------------------------------------------- */

h1, h2, h3, h4, h5 {
	margin: 0 0 .5em;
	font-family: var(--mm-display);
	font-weight: 400;
	line-height: 1.14;
	letter-spacing: -.005em;
	color: var(--mm-ink);
}

h1 { font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4rem); }
h2 { font-size: clamp(1.9rem, 1.25rem + 2.4vw, 3.1rem); }
h3 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem); }
h4 { font-size: 1.2rem; }

p {
	margin: 0 0 1.1em;
}

p:last-child {
	margin-bottom: 0;
}

strong, b {
	font-weight: 600;
	color: var(--mm-ink);
}

.mm-eyebrow {
	font-family: var(--mm-accent);
	font-style: italic;
	font-weight: 600;
	font-size: clamp(1.05rem, .95rem + .5vw, 1.45rem);
	line-height: 1.35;
	color: var(--mm-red);
	margin: 0 0 .45em;
	letter-spacing: .002em;
}

.mm-eyebrow--sm {
	font-size: .95rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-style: normal;
	font-family: var(--mm-body);
	font-weight: 600;
}

.mm-section-title {
	font-family: var(--mm-display);
	font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
	line-height: 1.1;
	color: var(--mm-ink);
	margin: 0 0 .5em;
}

.mm-section-title b,
.mm-section-title strong {
	font-weight: 400;
	color: var(--mm-red);
}

.mm-lede {
	font-size: 1.06rem;
	color: var(--mm-ink-60);
	max-width: 62ch;
}

.mm-muted {
	color: var(--mm-ink-60);
}

.mm-rule {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--mm-gold);
}

.mm-rule::before,
.mm-rule::after {
	content: '';
	height: 1px;
	flex: 1;
	background: linear-gradient(90deg, transparent, var(--mm-gold), transparent);
	opacity: .6;
}

.mm-prose h2, .mm-prose h3 { margin-top: 1.6em; }
.mm-prose ul, .mm-prose ol { padding-left: 1.25em; margin: 0 0 1.2em; }
.mm-prose li { margin-bottom: .45em; }
.mm-prose img { border-radius: var(--mm-r); margin: 1.5em 0; }
.mm-prose blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--mm-gold);
	font-family: var(--mm-accent);
	font-style: italic;
	font-size: 1.15rem;
	color: var(--mm-ink);
}
.mm-prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; }
.mm-prose th, .mm-prose td { border: 1px solid var(--mm-line); padding: 10px 12px; text-align: left; }

/* -------------------------------------------------------------------------
   Layout primitives
   ------------------------------------------------------------------------- */

.mm-container {
	width: 100%;
	max-width: var(--mm-container);
	margin-inline: auto;
	padding-inline: var(--mm-gutter);
}

.mm-container--narrow {
	max-width: var(--mm-container-narrow);
}

.mm-container--wide {
	max-width: 1480px;
}

.mm-section {
	padding-block: clamp(52px, 7vw, 104px);
}

.mm-section--tight {
	padding-block: clamp(36px, 5vw, 68px);
}

.mm-section--cream {
	background: var(--mm-cream-2);
}

.mm-section--white {
	background: var(--mm-white);
}

.mm-section-head {
	max-width: 720px;
	margin: 0 auto clamp(28px, 4vw, 52px);
	text-align: center;
}

.mm-section-head--left {
	margin-inline: 0;
	text-align: left;
}

.mm-main {
	min-height: 50vh;
}

.mm-page {
	padding-block: clamp(40px, 6vw, 88px);
}

.mm-page-head {
	margin-bottom: var(--mm-s6);
}

.mm-page-title {
	margin: 0;
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */

/* Components below set their own display, which beats the UA stylesheet's
   rule for [hidden]. Without this, hiding a button with el.hidden does
   nothing at all. */
[hidden] { display: none !important; }

.mm-btn {
	--btn-bg: var(--mm-red);
	--btn-fg: #fff;
	--btn-bd: var(--mm-red);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 26px;
	min-height: 50px;
	border-radius: var(--mm-r-pill);
	border: 1px solid var(--btn-bd);
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-family: var(--mm-body);
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	transition:
		transform var(--mm-t) var(--mm-ease-out),
		box-shadow var(--mm-t) var(--mm-ease-out),
		color var(--mm-t-fast) var(--mm-ease),
		border-color var(--mm-t-fast) var(--mm-ease),
		background-color var(--mm-t-fast) var(--mm-ease);
	-webkit-tap-highlight-color: transparent;
}

/* The wipe: a pseudo-element scales in from the left on hover. Doing it with
   transform (not width) keeps it on the compositor and off the main thread. */
.mm-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--mm-ink);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform var(--mm-t) var(--mm-ease-out);
}

.mm-btn:hover::before,
.mm-btn:focus-visible::before {
	transform: scaleX(1);
	transform-origin: left center;
}

.mm-btn:hover,
.mm-btn:focus-visible {
	color: #fff;
	border-color: var(--mm-ink);
	transform: translateY(-2px);
	box-shadow: var(--mm-shadow);
}

.mm-btn:active {
	transform: translateY(0) scale(.985);
}

.mm-btn .mm-icon {
	transition: transform var(--mm-t) var(--mm-ease-out);
	flex: none;
}

.mm-btn:hover .mm-icon--arrow-right {
	transform: translateX(3px);
}

.mm-btn--primary {
	--btn-bg: var(--mm-red);
	--btn-fg: #fff;
	--btn-bd: var(--mm-red);
	box-shadow: var(--mm-shadow-red);
}

.mm-btn--dark {
	--btn-bg: var(--mm-ink);
	--btn-bd: var(--mm-ink);
}

.mm-btn--dark::before { background: var(--mm-red); }
.mm-btn--dark:hover { border-color: var(--mm-red); }

.mm-btn--ghost {
	--btn-bg: transparent;
	--btn-fg: var(--mm-ink);
	--btn-bd: var(--mm-line-strong);
	box-shadow: none;
}

.mm-btn--ghost::before { background: var(--mm-ink); }

.mm-btn--outline {
	--btn-bg: transparent;
	--btn-fg: var(--mm-red);
	--btn-bd: var(--mm-red);
	box-shadow: none;
}

.mm-btn--outline::before { background: var(--mm-red); }

.mm-btn--gold {
	--btn-bg: var(--mm-gold);
	--btn-bd: var(--mm-gold);
	--btn-fg: #221a06;
}

.mm-btn--gold::before { background: var(--mm-ink); }

.mm-btn--sm {
	padding: 9px 16px;
	min-height: 38px;
	font-size: .85rem;
	gap: 7px;
}

.mm-btn--lg {
	padding: 17px 34px;
	min-height: 58px;
	font-size: 1rem;
}

.mm-btn--block {
	display: flex;
	width: 100%;
}

.mm-btn[disabled],
.mm-btn[aria-disabled='true'],
.mm-btn.is-loading {
	opacity: .55;
	pointer-events: none;
	box-shadow: none;
	transform: none;
}

.mm-btn.is-loading::after {
	content: '';
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-top-color: transparent;
	animation: mm-spin .7s linear infinite;
}

@keyframes mm-spin {
	to { transform: rotate(360deg); }
}

/* Icon-only round button used in the header and cart. */
.mm-iconbtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--mm-r-pill);
	color: var(--mm-ink);
	background: transparent;
	border: 1px solid transparent;
	transition:
		background-color var(--mm-t-fast) var(--mm-ease),
		color var(--mm-t-fast) var(--mm-ease),
		border-color var(--mm-t-fast) var(--mm-ease),
		transform var(--mm-t) var(--mm-ease-out);
	-webkit-tap-highlight-color: transparent;
}

.mm-iconbtn:hover,
.mm-iconbtn:focus-visible {
	background: var(--mm-red-050);
	border-color: var(--mm-red-100);
	color: var(--mm-red);
	transform: translateY(-1px);
}

.mm-iconbtn:active { transform: scale(.94); }

.mm-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: .95rem;
	color: var(--mm-red);
}

.mm-link-arrow::after {
	content: '';
	width: 22px;
	height: 1px;
	background: currentColor;
	transition: width var(--mm-t) var(--mm-ease-out);
}

.mm-link-arrow:hover::after { width: 34px; }

/* Underline-grow nav link. */
.mm-underline {
	position: relative;
}

.mm-underline::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 1.5px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform var(--mm-t) var(--mm-ease-out);
}

.mm-underline:hover::after,
.mm-underline:focus-visible::after,
.mm-underline.is-current::after {
	transform: scaleX(1);
	transform-origin: left center;
}

/* -------------------------------------------------------------------------
   Badges, chips, pills
   ------------------------------------------------------------------------- */

.mm-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: var(--mm-r-pill);
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	background: var(--mm-red-050);
	color: var(--mm-red);
	line-height: 1.4;
}

.mm-badge--green { background: var(--mm-green-050); color: var(--mm-green); }
.mm-badge--amber { background: var(--mm-amber-050); color: var(--mm-amber); }
.mm-badge--danger { background: var(--mm-danger-050); color: var(--mm-danger); }
.mm-badge--ink { background: rgba(23,18,16,.06); color: var(--mm-ink-80); }
.mm-badge--gold { background: #fbf3dd; color: #8a6410; }

.mm-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: var(--mm-r-pill);
	border: 1px solid var(--mm-line-strong);
	background: var(--mm-white);
	color: var(--mm-ink-80);
	font-size: .9rem;
	font-weight: 500;
	white-space: nowrap;
	transition:
		background-color var(--mm-t-fast) var(--mm-ease),
		color var(--mm-t-fast) var(--mm-ease),
		border-color var(--mm-t-fast) var(--mm-ease),
		box-shadow var(--mm-t-fast) var(--mm-ease),
		transform var(--mm-t) var(--mm-ease-out);
}

.mm-chip:hover {
	border-color: var(--mm-red-100);
	color: var(--mm-red);
	transform: translateY(-1px);
	box-shadow: var(--mm-shadow-sm);
}

.mm-chip.is-active,
.mm-chip[aria-selected='true'] {
	background: var(--mm-red);
	border-color: var(--mm-red);
	color: #fff;
	box-shadow: var(--mm-shadow-red);
}

/* -------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------- */

.mm-field {
	display: block;
	margin-bottom: var(--mm-s4);
}

.mm-field__label {
	display: block;
	font-size: .84rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--mm-ink-80);
	margin-bottom: 7px;
}

.mm-field__label .mm-req { color: var(--mm-red); }

.mm-field__hint {
	display: block;
	font-size: .8rem;
	color: var(--mm-ink-40);
	margin-top: 6px;
}

.mm-field__error {
	display: none;
	align-items: center;
	gap: 6px;
	font-size: .82rem;
	color: var(--mm-danger);
	margin-top: 6px;
}

.mm-field.has-error .mm-field__error { display: flex; }

.mm-input,
.mm-select,
.mm-textarea {
	width: 100%;
	padding: 13px 15px;
	min-height: 50px;
	border: 1px solid var(--mm-line-strong);
	border-radius: var(--mm-r-sm);
	background: var(--mm-white);
	color: var(--mm-ink);
	font-size: 1rem;
	line-height: 1.4;
	transition:
		border-color var(--mm-t-fast) var(--mm-ease),
		box-shadow var(--mm-t-fast) var(--mm-ease),
		background-color var(--mm-t-fast) var(--mm-ease);
	-webkit-appearance: none;
	appearance: none;
}

.mm-textarea {
	min-height: 108px;
	resize: vertical;
	line-height: 1.6;
}

.mm-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a5f59' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	background-size: 18px;
	padding-right: 42px;
}

.mm-input::placeholder,
.mm-textarea::placeholder {
	color: var(--mm-ink-40);
}

.mm-input:focus,
.mm-select:focus,
.mm-textarea:focus {
	outline: none;
	border-color: var(--mm-red);
	box-shadow: 0 0 0 3px var(--mm-red-100);
}

.mm-field.has-error .mm-input,
.mm-field.has-error .mm-select,
.mm-field.has-error .mm-textarea {
	border-color: var(--mm-danger);
	background: var(--mm-danger-050);
}

.mm-field.is-valid .mm-input {
	border-color: var(--mm-green);
}

/* Input with a leading icon. */
.mm-input-wrap {
	position: relative;
}

.mm-input-wrap .mm-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--mm-ink-40);
	pointer-events: none;
}

.mm-input-wrap .mm-input {
	padding-left: 44px;
}

.mm-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--mm-s4);
}

.mm-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 var(--mm-s4);
}

@media (max-width: 640px) {
	.mm-grid-2,
	.mm-grid-3 { grid-template-columns: 1fr; }
}

/* Checkbox / radio */
.mm-check {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	cursor: pointer;
	font-size: .93rem;
	color: var(--mm-ink-80);
	line-height: 1.5;
	user-select: none;
}

.mm-check input {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	border: 1.5px solid var(--mm-line-strong);
	border-radius: 6px;
	background: #fff;
	position: relative;
	cursor: pointer;
	transition: background-color var(--mm-t-fast) var(--mm-ease), border-color var(--mm-t-fast) var(--mm-ease);
}

.mm-check input[type='radio'] { border-radius: 50%; }

.mm-check input:checked {
	background: var(--mm-red);
	border-color: var(--mm-red);
}

.mm-check input[type='checkbox']:checked::after {
	content: '';
	position: absolute;
	left: 6px;
	top: 2.5px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(43deg);
}

.mm-check input[type='radio']:checked::after {
	content: '';
	position: absolute;
	inset: 4.5px;
	border-radius: 50%;
	background: #fff;
}

.mm-check input:focus-visible {
	outline: 2px solid var(--mm-red);
	outline-offset: 2px;
}

/* Segmented control (delivery / pickup). */
.mm-segment {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 6px;
	padding: 6px;
	background: var(--mm-cream-2);
	border: 1px solid var(--mm-line);
	border-radius: var(--mm-r-pill);
	position: relative;
}

.mm-segment__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 12px 14px;
	border-radius: var(--mm-r-pill);
	font-size: .93rem;
	font-weight: 600;
	color: var(--mm-ink-60);
	background: transparent;
	transition: color var(--mm-t-fast) var(--mm-ease), background-color var(--mm-t) var(--mm-ease-out), box-shadow var(--mm-t) var(--mm-ease-out);
}

.mm-segment__btn:hover { color: var(--mm-ink); }

.mm-segment__btn.is-active {
	background: var(--mm-white);
	color: var(--mm-red);
	box-shadow: var(--mm-shadow-sm);
}

.mm-segment__btn[disabled] { opacity: .4; pointer-events: none; }

/* Quantity stepper. */
.mm-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--mm-line-strong);
	border-radius: var(--mm-r-pill);
	background: var(--mm-white);
	overflow: hidden;
}

.mm-qty__btn {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	color: var(--mm-ink-80);
	transition: background-color var(--mm-t-fast) var(--mm-ease), color var(--mm-t-fast) var(--mm-ease);
}

.mm-qty__btn:hover { background: var(--mm-red-050); color: var(--mm-red); }
.mm-qty__btn[disabled] { opacity: .35; pointer-events: none; }

.mm-qty__value {
	min-width: 34px;
	text-align: center;
	font-weight: 600;
	font-size: .95rem;
	font-variant-numeric: tabular-nums;
	color: var(--mm-ink);
	border: 0;
	background: transparent;
	padding: 0;
	-moz-appearance: textfield;
}

.mm-qty__value::-webkit-outer-spin-button,
.mm-qty__value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* -------------------------------------------------------------------------
   Notices
   ------------------------------------------------------------------------- */

.mm-notice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border-radius: var(--mm-r);
	border: 1px solid var(--mm-line);
	background: var(--mm-white);
	font-size: .93rem;
	line-height: 1.55;
	margin-bottom: var(--mm-s4);
}

.mm-notice .mm-icon { flex: none; margin-top: 1px; }
.mm-notice--info { background: #eef3fd; border-color: #d5e0f8; color: #1b3a7a; }
.mm-notice--success { background: var(--mm-green-050); border-color: #cbe6d7; color: #14603a; }
.mm-notice--warn { background: var(--mm-amber-050); border-color: #f2ddb8; color: #7d5108; }
.mm-notice--error { background: var(--mm-danger-050); border-color: #f4cfcd; color: #8c1c16; }

.mm-empty {
	padding: var(--mm-s7) var(--mm-s4);
	text-align: center;
	color: var(--mm-ink-60);
}

/* Toast stack. */
.mm-toasts {
	position: fixed;
	z-index: 1200;
	right: 20px;
	bottom: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	pointer-events: none;
	max-width: min(360px, calc(100vw - 40px));
}

@media (max-width: 900px) {
	.mm-toasts {
		right: 12px;
		left: 12px;
		bottom: calc(var(--mm-bottombar-h) + 14px);
		max-width: none;
	}
}

.mm-toast {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 13px 16px;
	border-radius: var(--mm-r);
	background: var(--mm-ink);
	color: #fff;
	box-shadow: var(--mm-shadow-lg);
	font-size: .92rem;
	font-weight: 500;
	transform: translateY(12px);
	opacity: 0;
	transition: transform var(--mm-t) var(--mm-ease-out), opacity var(--mm-t) var(--mm-ease-out);
}

.mm-toast.is-in { transform: translateY(0); opacity: 1; }
.mm-toast--success { background: #14603a; }
.mm-toast--error { background: #8c1c16; }
.mm-toast .mm-icon { flex: none; }

/* -------------------------------------------------------------------------
   Cards and media
   ------------------------------------------------------------------------- */

.mm-card {
	background: var(--mm-white);
	border: 1px solid var(--mm-line);
	border-radius: var(--mm-r-lg);
	box-shadow: var(--mm-shadow-sm);
}

.mm-card--pad { padding: clamp(20px, 3vw, 30px); }

.mm-media {
	position: relative;
	overflow: hidden;
	border-radius: var(--mm-r-lg);
	background: var(--mm-cream-2);
}

.mm-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s var(--mm-ease-out);
}

.mm-media--zoom:hover img { transform: scale(1.05); }

.mm-ratio-1 { aspect-ratio: 1 / 1; }
.mm-ratio-4-3 { aspect-ratio: 4 / 3; }
.mm-ratio-3-4 { aspect-ratio: 3 / 4; }
.mm-ratio-16-9 { aspect-ratio: 16 / 9; }
.mm-ratio-9-16 { aspect-ratio: 9 / 16; }

/* Skeleton shimmer for async content. */
.mm-skel {
	position: relative;
	overflow: hidden;
	background: var(--mm-cream-2);
	border-radius: var(--mm-r);
}

.mm-skel::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
	transform: translateX(-100%);
	animation: mm-shimmer 1.3s infinite;
}

@keyframes mm-shimmer {
	to { transform: translateX(100%); }
}

/* -------------------------------------------------------------------------
   Motion primitives
   Elements start hidden only when JS is available, so a failed script never
   leaves the page blank.
   ------------------------------------------------------------------------- */

.mm-js .mm-reveal {
	opacity: 0;
	transform: translateY(26px);
	will-change: transform, opacity;
}

.mm-js .mm-reveal.is-in {
	opacity: 1;
	transform: none;
	transition: opacity .7s var(--mm-ease-out), transform .7s var(--mm-ease-out);
}

.mm-js .mm-reveal--scale { transform: translateY(20px) scale(.97); }
.mm-js .mm-reveal--left { transform: translateX(-28px); }
.mm-js .mm-reveal--right { transform: translateX(28px); }

.mm-no-js .mm-reveal { opacity: 1; transform: none; }

/* Honour the OS setting everywhere, including GSAP-driven work which reads the
   same media query in JS. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	.mm-js .mm-reveal {
		opacity: 1 !important;
		transform: none !important;
	}

	.mm-media img,
	.mm-btn,
	.mm-iconbtn {
		transition: none !important;
		transform: none !important;
	}

	.mm-skel::after { animation: none; }
}

/* -------------------------------------------------------------------------
   Utilities
   ------------------------------------------------------------------------- */

.mm-hide { display: none !important; }
.mm-center { text-align: center; }
.mm-nowrap { white-space: nowrap; }
.mm-tabular { font-variant-numeric: tabular-nums; }
.mm-stack > * + * { margin-top: var(--mm-s4); }
.mm-row { display: flex; align-items: center; gap: var(--mm-s3); flex-wrap: wrap; }
.mm-row--between { justify-content: space-between; }
.mm-mt0 { margin-top: 0 !important; }
.mm-mb0 { margin-bottom: 0 !important; }

@media (max-width: 900px) {
	.mm-desktop-only { display: none !important; }
}

@media (min-width: 901px) {
	.mm-mobile-only { display: none !important; }
}

/* Horizontally scrollable rail with hidden scrollbar, used by category chips
   and the gallery. */
.mm-rail {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 4px;
}

.mm-rail::-webkit-scrollbar { display: none; }
.mm-rail > * { scroll-snap-align: start; flex: none; }

/* Body scroll lock when a drawer or modal is open. */
body.mm-locked {
	overflow: hidden;
	touch-action: none;
}

/* -------------------------------------------------------------------------
   Blog and fallback templates
   Rarely used on this site, but they must not look unstyled if the client
   ever publishes a post.
   ------------------------------------------------------------------------- */

.mm-post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: clamp(18px, 2.5vw, 30px);
}

.mm-post-card {
	background: var(--mm-white);
	border: 1px solid var(--mm-line);
	border-radius: var(--mm-r-lg);
	overflow: hidden;
	box-shadow: var(--mm-shadow-xs);
	transition: transform var(--mm-t) var(--mm-ease-out), box-shadow var(--mm-t) var(--mm-ease-out);
}

.mm-post-card:hover { transform: translateY(-3px); box-shadow: var(--mm-shadow); }
.mm-post-card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mm-post-card__body { padding: 20px; }
.mm-post-card__title { font-size: 1.25rem; margin: 0 0 8px; }
.mm-post-card__title a { color: var(--mm-ink); }
.mm-post-card__title a:hover { color: var(--mm-red); }
.mm-post-card__excerpt { font-size: .92rem; color: var(--mm-ink-60); margin-bottom: 14px; }

.mm-single__media {
	margin: 0 0 var(--mm-s6);
	border-radius: var(--mm-r-lg);
	overflow: hidden;
}

.mm-page-links { display: flex; gap: 8px; margin-top: var(--mm-s5); }

.mm-404__inner {
	text-align: center;
	padding-block: clamp(50px, 9vw, 120px);
}

.mm-404__text { color: var(--mm-ink-60); max-width: 52ch; margin-inline: auto; }
.mm-404__actions { display: flex; gap: 12px; justify-content: center; margin-top: var(--mm-s6); flex-wrap: wrap; }

/* Core pagination markup. */
.mm-main .nav-links {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: var(--mm-s7);
	flex-wrap: wrap;
}

.mm-main .nav-links .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border-radius: var(--mm-r-pill);
	border: 1px solid var(--mm-line-strong);
	background: var(--mm-white);
	color: var(--mm-ink-80);
	font-size: .92rem;
	transition: background-color var(--mm-t-fast) var(--mm-ease), color var(--mm-t-fast) var(--mm-ease), border-color var(--mm-t-fast) var(--mm-ease);
}

.mm-main .nav-links .page-numbers:hover { border-color: var(--mm-red-100); color: var(--mm-red); }

.mm-main .nav-links .page-numbers.current {
	background: var(--mm-red);
	border-color: var(--mm-red);
	color: #fff;
}

/* The search form used on the fallback templates. */
.mm-searchform {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 520px;
}

.mm-searchform__icon {
	position: absolute;
	left: 16px;
	color: var(--mm-ink-40);
	display: flex;
	pointer-events: none;
}

.mm-searchform__input {
	flex: 1;
	padding: 13px 15px 13px 46px;
	min-height: 50px;
	border: 1px solid var(--mm-line-strong);
	border-radius: var(--mm-r-pill);
	background: var(--mm-white);
	font-size: 1rem;
}

.mm-searchform__input:focus {
	outline: none;
	border-color: var(--mm-red);
	box-shadow: 0 0 0 3px var(--mm-red-100);
}

/* -------------------------------------------------------------------------
   Inline video controls

   Shared by the homepage collage and the gallery page, so they live here
   rather than in either page's own sheet. The film starts muted because no
   browser will play sound unprompted — the sound button is the prompt.
   ------------------------------------------------------------------------- */

.mm-vcontrols {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* The scrim belongs to the paused state: once the film is running it gets
   out of the way of the picture. */
.mm-vcontrols::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(23, 18, 16, .05), rgba(23, 18, 16, .45));
	transition: opacity var(--mm-t) var(--mm-ease);
}

.is-playing .mm-vcontrols::before { opacity: 0; }

.mm-vbtn {
	position: absolute;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: #fff;
	background: rgba(23, 18, 16, .46);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .9);
	cursor: pointer;
	pointer-events: auto;
	-webkit-tap-highlight-color: transparent;
	transition:
		background-color var(--mm-t-fast) var(--mm-ease),
		transform var(--mm-t) var(--mm-ease-out),
		opacity var(--mm-t) var(--mm-ease);
}

.mm-vbtn:hover { background: var(--mm-red); transform: scale(1.06); }
.mm-vbtn:active { transform: scale(.96); }

.mm-vbtn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.mm-vbtn--main {
	top: 50%;
	left: 50%;
	width: 76px;
	height: 76px;
	transform: translate(-50%, -50%);
}

.mm-vbtn--main:hover { transform: translate(-50%, -50%) scale(1.06); }
.mm-vbtn--main:active { transform: translate(-50%, -50%) scale(.96); }

/* While the film runs the pause control stays on screen — people need to see
   how to stop it — but it steps back until it is wanted. */
.is-playing .mm-vbtn--main {
	opacity: .5;
	transform: translate(-50%, -50%) scale(.82);
}

.is-playing .mm-vbtn--main:hover,
.is-playing .mm-vbtn--main:focus-visible {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.mm-vbtn--sound {
	right: 12px;
	bottom: 12px;
	width: 44px;
	height: 44px;
}

.mm-vbtn__ico { display: flex; }

/* One button, two icons: the state class decides which one is in the DOM's
   flow, so no JavaScript has to build an SVG at runtime. */
.mm-vbtn__ico--pause,
.is-playing .mm-vbtn__ico--play { display: none; }
.is-playing .mm-vbtn__ico--pause { display: flex; }

.mm-vbtn__ico--loud,
.is-unmuted .mm-vbtn__ico--muted { display: none; }
.is-unmuted .mm-vbtn__ico--loud { display: flex; }

@media (max-width: 560px) {
	.mm-vbtn--main { width: 62px; height: 62px; }
	.mm-vbtn--sound { width: 40px; height: 40px; right: 10px; bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.mm-vbtn,
	.mm-vbtn:hover,
	.mm-vbtn:active { transition: background-color var(--mm-t-fast) var(--mm-ease); }
	.mm-vbtn--main:hover,
	.mm-vbtn--main:active,
	.is-playing .mm-vbtn--main { transform: translate(-50%, -50%); }
	.is-playing .mm-vbtn--main { opacity: .72; }
}