/* The section kit. Every page is built from these blocks and nothing else.
   Spec: website-2026-10-04/design/pass-2026-10-17/KIT.md.
   Rules held here: one centred section head, no eyebrows, no divider lines, no
   pills, no side stripes, square corners, images flush to their cells, content
   inside the container (full width only for bands, the hero, CTA photo bands and
   running strips). The product card lives in components.css. */

:root {
	--mm-band-y: clamp(64px, 7vw, 104px);
	--mm-head-gap: clamp(32px, 3.6vw, 52px);
	--mm-reveal-ease: cubic-bezier(.22, 1, .36, 1);
	--mm-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Bands: three tones, alternated by the page's tone array ---------- */
/* Round 4: black and white lead. Light is plain white (no glow, no grain: the white
   is the calm between the dark bands). Ink is black with one faint green glow in a
   corner and a fine grain, so it reads as depth, not as a colour.
   --mm-band-bg is the band's flat colour, for marks that sit on the band. */
.mm-band { position: relative; isolation: isolate; padding-block: var(--mm-band-y); }
.mm-band--light {
	--mm-band-bg: var(--mm-paper);
	color: var(--mm-ink);
	background: var(--mm-paper);
}
.mm-band--ink {
	--mm-band-bg: var(--mm-ink);
	color: var(--mm-paper);
	background:
		radial-gradient(1000px 560px at 92% -16%, rgba(200, 230, 68, .09), transparent 62%),
		var(--mm-ink);
}
.mm-band--ink::before {
	content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background-image: var(--mm-grain); opacity: .06; mix-blend-mode: screen;
}
.mm-band--pink { --mm-band-bg: var(--mm-pink); background: var(--mm-pink); color: var(--mm-ink); }
.mm-steps + .mm-band { padding-top: clamp(40px, 4vw, 56px); } /* products start in the first screen */
.mm-band--ink p, .mm-band--ink li, .mm-band--ink dd { color: var(--mm-on-ink); }

/* ---------- Section head: the only heading lockup ---------- */
.mm-head { max-width: 780px; margin: 0 auto var(--mm-head-gap); text-align: center; }
.mm-head__title { margin: 0; font: 400 var(--mm-h2)/.92 var(--mm-display); letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; }
.mm-head__lead { max-width: 60ch; margin: 18px auto 0; font-size: var(--mm-text); line-height: 1.7; color: #4d4d4a; text-wrap: pretty; }
.mm-band--ink .mm-head__lead { color: var(--mm-on-ink); }
.mm-foot { margin: clamp(32px, 3.6vw, 48px) 0 0; text-align: center; }

/* ---------- Square arrow: the one prev and next control ---------- */
.mm-arrow {
	display: grid; place-items: center; width: 52px; height: 52px; padding: 0; cursor: pointer;
	background: var(--mm-ink); color: var(--mm-paper); border: 2px solid var(--mm-ink);
	box-shadow: none; transition: background .2s, color .2s, border-color .2s, opacity .25s;
}
.mm-arrow .mm-icon { width: 24px; height: 24px; }
.mm-arrow:hover { background: var(--mm-accent); color: var(--mm-ink); }
.mm-arrow:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: 3px; }
.mm-on-ink .mm-arrow { background: var(--mm-paper); color: var(--mm-ink); border-color: var(--mm-paper); box-shadow: none; }
.mm-on-ink .mm-arrow:hover { background: var(--mm-accent); border-color: var(--mm-accent); }

/* ---------- Carousel: 3 full cards, a blurred half card each side, circular ----------
   Card width w = (W - 4 gap) / 4 at desktop (W = the container), 2 full cards at
   1100 px and down, 1 card of 70% at 760 px and down. kit.js clones the set before
   and after, moves the strip by transform and starts on the second item. Under 5
   items it is a static centred row. */
.mm-rail { position: relative; --mm-rail-gap: var(--mm-grid-gap); --mm-rail-full: 3; }
.mm-rail[data-mm-rail] { height: auto; margin: 0; } /* never sized by a page's own .mm-rail (the Shop dose ruler) */
.mm-rail__track {
	position: relative; container-type: inline-size; overflow-x: auto; scrollbar-width: none;
	padding-block: 8px 24px; margin-block: -8px -24px;
}
.mm-rail__track::-webkit-scrollbar { display: none; }
.mm-js .mm-rail__track { overflow-x: clip; overflow-y: visible; touch-action: pan-y; }
.mm-rail__track:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: 4px; }
.mm-rail__strip {
	--mm-rail-w: calc((100cqw - 4 * var(--mm-rail-gap)) / 4);
	display: flex; gap: var(--mm-rail-gap); width: max-content;
	transition: transform .45s var(--mm-reveal-ease);
}
.mm-rail__item {
	display: flex; flex: 0 0 var(--mm-rail-w); width: var(--mm-rail-w); min-width: 0;
	transition: filter .45s ease, opacity .45s ease;
}
.mm-rail__item > * { flex: 1 1 auto; min-width: 0; }
.mm-rail__item[hidden] { display: none; }
.mm-rail__item.is-peek { filter: blur(3px) saturate(.6); opacity: .5; pointer-events: none; }
.mm-rail.is-jump .mm-rail__strip, .mm-rail.is-jump .mm-rail__item { transition: none; }
.mm-rail.is-dragging .mm-rail__track { cursor: grabbing; }
.mm-rail.is-dragging .mm-rail__item { user-select: none; }
.mm-rail__arrow {
	position: absolute; z-index: 3; top: var(--mm-rail-mid, 38%); margin-top: -26px;
}
.mm-rail__arrow--prev { left: max(0px, calc(var(--mm-rail-peek, 120px) / 2 - 26px)); }
.mm-rail__arrow--next { right: max(0px, calc(var(--mm-rail-peek, 120px) / 2 - 26px)); }
.mm-rail__bar { position: relative; width: min(260px, 60%); height: 3px; margin: 34px auto 0; overflow: hidden; background: rgba(13, 13, 13, .14); }
.mm-rail__thumb { position: absolute; inset: 0 auto 0 0; width: var(--mm-rail-size, 30%); transform: translateX(var(--mm-rail-pos, 0%)); background: var(--mm-ink); transition: transform .45s var(--mm-reveal-ease), width .2s; }
.mm-band--ink .mm-rail__bar { background: rgba(245, 245, 240, .18); }
.mm-band--ink .mm-rail__thumb { background: var(--mm-accent); }
.mm-rail:not(.is-loop) .mm-rail__arrow, .mm-rail:not(.is-loop) .mm-rail__bar { display: none; }
.mm-rail.is-static .mm-rail__track { overflow-x: auto; }
.mm-rail.is-static .mm-rail__strip { width: auto; justify-content: safe center; transform: none; }

@media (max-width: 1100px) {
	.mm-rail { --mm-rail-full: 2; }
	.mm-rail__strip { --mm-rail-w: calc((100cqw - 3 * var(--mm-rail-gap)) / 3); }
}
@media (max-width: 760px) {
	.mm-rail { --mm-rail-full: 1; }
	.mm-rail__strip { --mm-rail-w: 70cqw; }
	.mm-rail__arrow { width: 42px; height: 42px; margin-top: -21px; }
	.mm-rail__arrow--prev { left: max(0px, calc(var(--mm-rail-peek, 42px) / 2 - 21px)); }
	.mm-rail__arrow--next { right: max(0px, calc(var(--mm-rail-peek, 42px) / 2 - 21px)); }
}
@media (prefers-reduced-motion: reduce) {
	.mm-rail__strip, .mm-rail__item, .mm-rail__thumb { transition: none; }
}

/* ---------- Choice tiles: the one text control ---------- */
.mm-choices {
	display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 12px;
	width: max-content; max-width: 100%; margin: 0 auto clamp(28px, 3vw, 44px);
	overflow-x: auto; scrollbar-width: none; padding: 2px 6px 8px 2px;
}
.mm-choices::-webkit-scrollbar { display: none; }
.mm-choice {
	display: grid; align-content: center; justify-items: center; gap: 6px; padding: 15px 20px 13px; min-height: 66px;
	text-align: center; cursor: pointer; color: inherit; background: transparent; border: 2px solid currentColor;
	transition: background .2s, color .2s, box-shadow .2s, transform .2s, border-color .2s;
}
.mm-choice__label { font: 400 25px/.95 var(--mm-display); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.mm-choice__sub { font: 400 14px/1.2 var(--mm-body); opacity: .72; white-space: nowrap; }
.mm-choice:hover { background: rgba(200, 230, 68, .14); }
.mm-choice:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: 3px; }
.mm-choice.is-on { background: var(--mm-accent); color: var(--mm-ink); border-color: var(--mm-ink); box-shadow: none; transform: translate(-2px, -2px); }
.mm-band--ink .mm-choice { border-color: rgba(245, 245, 240, .55); }
.mm-band--ink .mm-choice.is-on { border-color: var(--mm-accent); box-shadow: none; }

/* ---------- Story rings: the picture control (tabs or links) ---------- */
.mm-stories {
	display: grid; grid-auto-flow: column; grid-auto-columns: minmax(108px, max-content); gap: 18px;
	width: max-content; max-width: 100%; margin: 0 auto clamp(28px, 3vw, 44px);
	overflow-x: auto; scrollbar-width: none; padding: 4px 4px 8px;
}
.mm-stories::-webkit-scrollbar { display: none; }
.mm-stories:last-child { margin-bottom: 0; }
.mm-story { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 0; color: inherit; background: none; border: 0; cursor: pointer; text-align: center; text-decoration: none; }
.mm-story__ring { position: relative; display: grid; width: var(--mm-ring, 100px); height: var(--mm-ring, 100px); padding: 4px; border-radius: 50%; transition: transform .25s var(--mm-reveal-ease); }
.mm-story__ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(13, 13, 13, .2); }
.mm-story__img { position: relative; z-index: 1; display: block; overflow: hidden; border-radius: 50%; border: 3px solid var(--mm-band-bg, var(--mm-paper)); background: var(--mm-cell); }
.mm-story__img img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); transform-origin: 50% 38%; }
.mm-story__label { margin-top: 4px; white-space: nowrap; font: 400 22px/1 var(--mm-display); letter-spacing: .02em; text-transform: uppercase; }
.mm-story__sub { font: 400 14px/1 var(--mm-body); opacity: .7; }
.mm-story:hover .mm-story__ring { transform: translateY(-3px); }
.mm-story:focus-visible { outline: none; }
.mm-story:focus-visible .mm-story__ring { outline: 2px solid var(--mm-accent); outline-offset: 3px; }
.mm-story.is-on .mm-story__ring::before, .mm-stories--links .mm-story__ring::before { background: conic-gradient(var(--mm-accent), var(--mm-green), var(--mm-accent)); }
.mm-story.is-on .mm-story__ring::before { animation: mm-spin 2.8s linear infinite; }
.mm-story.is-on .mm-story__label { color: var(--mm-accent-text); }
.mm-stories--links .mm-story:hover .mm-story__ring::before,
.mm-stories--links .mm-story:focus-visible .mm-story__ring::before { animation: mm-spin 5s linear infinite; }
.mm-stories--links .mm-story:hover .mm-story__label { color: var(--mm-accent-text); }
.mm-band--ink .mm-story__ring::before { background: rgba(245, 245, 240, .22); }
.mm-band--ink .mm-stories--links .mm-story__ring::before, .mm-band--ink .mm-story.is-on .mm-story__ring::before { background: conic-gradient(var(--mm-accent), var(--mm-green), var(--mm-accent)); }
.mm-band--ink .mm-story__sub { color: var(--mm-on-ink); opacity: 1; }
/* The big rings: a category row (about 132 px, 96 px on phones), centred, one row that scrolls on phones. */
.mm-stories--lg { --mm-ring: 132px; grid-auto-columns: 140px; gap: 16px; }
.mm-stories--lg .mm-story { gap: 8px; }
.mm-stories--lg .mm-story__ring { padding: 5px; }
.mm-stories--lg .mm-story__img img { transform: scale(1.12); transform-origin: 50% 50%; }
.mm-stories--lg .mm-story__label { margin-top: 8px; font-size: 25px; white-space: normal; text-wrap: balance; }
.mm-stories--lg .mm-story__sub { line-height: 1.35; }
@keyframes mm-spin { to { transform: rotate(1turn); } }
@media (max-width: 760px) {
	.mm-stories--lg { --mm-ring: 96px; grid-auto-columns: 104px; gap: 12px; width: auto; max-width: none; margin-inline: calc(var(--mm-gutter) * -1); padding-inline: var(--mm-gutter); scroll-padding-inline: var(--mm-gutter); }
	.mm-stories--lg .mm-story__label { font-size: 21px; }
	.mm-stories--lg .mm-story__sub { font-size: 10px; }
}

/* ---------- Doors: picture tiles that open a category ---------- */
.mm-doors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--mm-grid-gap); list-style: none; margin: 0; padding: 0; }
.mm-door__link { display: block; color: inherit; text-decoration: none; }
.mm-door__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--mm-cell); }
.mm-door__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--mm-reveal-ease); }
.mm-door__name { display: block; margin-top: 16px; font: 400 34px/.95 var(--mm-display); letter-spacing: .02em; text-transform: uppercase; transition: color .2s; }
.mm-door__line { display: block; margin-top: 6px; font: 400 14px/1.4 var(--mm-body); opacity: .75; }
.mm-door__link:hover img { transform: scale(1.06); }
.mm-door__link:hover .mm-door__name { color: var(--mm-accent-text); }
@media (max-width: 900px) {
	.mm-doors { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 46%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.mm-door { scroll-snap-align: start; }
}

/* ---------- Promo tile: a photo cell with its words on it ---------- */
.mm-promo-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; overflow: hidden; padding: 26px; color: var(--mm-paper); background: var(--mm-ink); isolation: isolate; }
.mm-promo-tile__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--mm-reveal-ease); }
.mm-promo-tile::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(13, 13, 13, .94) 0%, rgba(13, 13, 13, .7) 38%, rgba(13, 13, 13, .05) 72%); }
.mm-promo-tile:hover .mm-promo-tile__img { transform: scale(1.05); }
.mm-promo-tile__title { margin: 0; font: 400 clamp(32px, 2.8vw, 40px)/.95 var(--mm-display); text-transform: uppercase; color: var(--mm-paper); }
.mm-promo-tile__text { margin: 12px 0 20px; font-size: var(--mm-text-sm); line-height: 1.65; color: var(--mm-on-ink); }
.mm-promo-tile .mm-btn { align-self: flex-start; }
.mm-promo-tile .mm-btn--primary { box-shadow: none; }

/* ---------- Statement band: a Why in big type beside its photo ---------- */
.mm-statement { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 64px); align-items: end; }
.mm-band:has(.mm-statement) { padding-bottom: 0; }
.mm-statement__text { padding-bottom: var(--mm-band-y); }
.mm-statement__title { margin: 0; font: 400 clamp(48px, 5.6vw, 88px)/.9 var(--mm-display); text-transform: uppercase; text-wrap: balance; }
.mm-statement__body { max-width: 46ch; margin: 24px 0 32px; font-size: var(--mm-text); line-height: 1.75; }
.mm-statement__media { align-self: end; margin: 0; }
.mm-statement__media img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: contain; object-position: bottom center; }
@media (max-width: 860px) {
	.mm-statement { grid-template-columns: 1fr; }
	.mm-statement__text { padding-bottom: 0; text-align: center; }
	.mm-statement__body { margin-inline: auto; }
}
/* With a liquid light panel in place of the photo (mm_field; rollout S8, Home H-08b):
   the panel fills its cell flush to the band's foot. Phones: under the words, the full
   width of the container, 4:3; from 600 to 860 px, 2:1, so the panel stays lower than
   the words above it. From 861 px: beside the words, its top on the title's top, its
   foot on the band's foot. */
.mm-statement__field { position: relative; isolation: isolate; overflow: hidden; margin: 0; aspect-ratio: 4 / 3; background: var(--mm-ink); }
@media (min-width: 600px) and (max-width: 860px) {
	.mm-statement__field { aspect-ratio: 2 / 1; }
}
@media (min-width: 861px) {
	.mm-statement--field { align-items: stretch; }
	.mm-statement__field { align-self: stretch; aspect-ratio: auto; min-height: clamp(360px, 34vw, 520px); }
}

/* ---------- CTA band: one photo full bleed, a shade heavy on the left, one button ---------- */
.mm-cta {
	position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center;
	min-height: clamp(380px, 30vw, 440px); padding-block: clamp(56px, 6vw, 80px);
	color: var(--mm-paper); background: var(--mm-ink);
}
.mm-cta__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--mm-cta-pos, 50% 50%); }
.mm-cta::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(13, 13, 13, .94) 0%, rgba(13, 13, 13, .88) 34%, rgba(13, 13, 13, .7) 62%, rgba(13, 13, 13, .55) 100%); }
.mm-cta__title { max-width: 820px; margin: 0; font: 400 clamp(48px, 5.6vw, 88px)/.9 var(--mm-display); letter-spacing: .005em; text-transform: uppercase; color: var(--mm-paper); text-wrap: balance; }
.mm-cta__text { max-width: 56ch; margin: 22px 0 30px; font-size: var(--mm-text); line-height: 1.7; color: var(--mm-on-ink); }
.mm-cta__actions { margin: 0; }
/* On the liquid light field instead of a photo (mm_cta() with field): the field sits under the shade,
   which holds the words on the left and lets the field show on the right. */
.mm-cta > .mm-cta__field { z-index: -2; }
.mm-cta--field::before { background: linear-gradient(90deg, rgba(13, 13, 13, .88) 0%, rgba(13, 13, 13, .7) 32%, rgba(13, 13, 13, .22) 64%, rgba(13, 13, 13, 0) 100%); }
@media (max-width: 760px) {
	.mm-cta { min-height: 0; padding-block: 72px; }
	.mm-cta::before { background: linear-gradient(to top, rgba(13, 13, 13, .94) 0%, rgba(13, 13, 13, .82) 60%, rgba(13, 13, 13, .62) 100%); }
	.mm-cta--field::before { background: linear-gradient(to top, rgba(13, 13, 13, .7) 0%, rgba(13, 13, 13, .45) 55%, rgba(13, 13, 13, .3) 100%); }
	.mm-cta__actions .mm-btn { width: 100%; }
}

/* ---------- Journey: stops on one drawn path ---------- */
.mm-journey { position: relative; }
.mm-journey__stops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mm-grid-gap); list-style: none; margin: 0; padding: 0; }
.mm-journey__path { position: absolute; left: 0; top: 0; width: 100%; height: 56px; pointer-events: none; overflow: visible; }
.mm-journey__path path { fill: none; stroke: var(--mm-accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.mm-js .mm-journey__path path { stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--mm-reveal-ease) .2s; }
.mm-js .mm-journey.is-in .mm-journey__path path { stroke-dashoffset: 0; }
.mm-stop { position: relative; padding-top: 76px; }
.mm-stop__mark { position: absolute; top: 8px; left: calc(50% - 22px); display: grid; place-items: center; width: 44px; height: 44px; color: var(--mm-ink); background: var(--mm-band-bg, var(--mm-paper)); }
.mm-stop__mark .mm-icon { width: 30px; height: 30px; fill: var(--mm-green); stroke: var(--mm-ink); stroke-width: 1.4; }
.mm-band--ink .mm-stop__mark .mm-icon { stroke: var(--mm-green); }
.mm-stop__art { display: grid; place-items: center; aspect-ratio: 1; background: var(--mm-white); overflow: hidden; }
/* A stop's glyph (mm_glyph): ink line, pink tone, centred on the white cell; a journey
   of glyphs only takes lower cells (Home round 3, builder C). */
.mm-journey .mm-stop__art.mm-stop__art--glyph { display: grid; place-items: center; color: var(--mm-ink); --mm-glyph: clamp(64px, 36%, 116px); --mm-glyph-tone: var(--mm-accent); }
.mm-journey--glyphs .mm-stop__art { aspect-ratio: 4 / 3; }
.mm-stop__title { margin: 22px 0 8px; font: 400 30px/.95 var(--mm-display); text-transform: uppercase; }
.mm-stop__text { margin: 0; font-size: var(--mm-text-sm); line-height: 1.7; color: #4d4d4a; }
@media (max-width: 900px) {
	.mm-journey__stops { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
	.mm-journey__path, .mm-stop__mark { display: none; }
	.mm-stop { padding-top: 0; }
}

/* ---------- Points: drawings on white with a title and a short text ---------- */
.mm-points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px var(--mm-grid-gap); list-style: none; margin: 0; padding: 0; }
.mm-points--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* The cell's glyph (mm_glyph): ink line, pink tone, centred on white (Home round 3, builder C). */
.mm-point__art { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--mm-white); overflow: hidden; color: var(--mm-ink); --mm-glyph: clamp(60px, 30%, 120px); --mm-glyph-tone: var(--mm-accent); }
.mm-point__title { margin: 22px 0 8px; font: 400 30px/.95 var(--mm-display); text-transform: uppercase; }
.mm-point__text p { margin: 0 0 10px; font-size: var(--mm-text-sm); line-height: 1.7; color: #4d4d4a; }
.mm-point__text p:last-child { margin-bottom: 0; }
.mm-band--ink .mm-point__text p { color: var(--mm-on-ink); }
.mm-point__sources { margin: 12px 0 0; font: 400 14px/1.6 var(--mm-body); color: var(--mm-mute); }
.mm-band--ink .mm-point__sources { color: var(--mm-on-ink); }
.mm-point__sources a { color: inherit; text-decoration: underline; text-decoration-color: var(--mm-accent); text-underline-offset: 3px; }
@media (max-width: 1000px) { .mm-points, .mm-points--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; } }
@media (max-width: 520px) { .mm-point__title { font-size: 25px; } }
/* Rollout S9 (KS-09): points with no glyph tile (art false). The words carry the cell:
   an optional figure (the point's key value, Bebas in the accent colour), then the title.
   Two across beside a liquid light panel (cols 2); one per line on narrow phones. */
.mm-points--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm-points--plain { row-gap: clamp(36px, 3.4vw, 52px); }
.mm-points--plain .mm-point__title { margin-top: 0; }
.mm-points .mm-point__figure { margin: 0 0 12px; font: 400 clamp(44px, 4vw, 60px)/.9 var(--mm-display); letter-spacing: .01em; text-transform: uppercase; color: var(--mm-accent-text); text-wrap: balance; }
.mm-point__figure + .mm-point__title { font-size: 24px; }
@media (max-width: 560px) { .mm-points--plain { grid-template-columns: minmax(0, 1fr); row-gap: 32px; } }

/* ---------- Promo band: the code to copy ---------- */
.mm-promo__code-row { margin: calc(var(--mm-head-gap) * -.4) 0 var(--mm-head-gap); text-align: center; }
.mm-promo__code { display: inline-flex; align-items: center; gap: 14px; padding: 14px 22px; cursor: pointer; color: var(--mm-green); background: transparent; border: 2px dashed var(--mm-green); font-family: var(--mm-body); transition: background .2s, color .2s; }
.mm-promo__code:hover { background: var(--mm-green); color: var(--mm-ink); }
.mm-promo__code-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.mm-promo__code-value { font-size: 20px; font-weight: 700; letter-spacing: .12em; }
.mm-promo__code-done { font-size: 11px; text-transform: uppercase; }
.mm-promo__code-done:empty { display: none; }

/* ---------- Panels: photo panels with their words on them ---------- */
.mm-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mm-grid-gap); list-style: none; margin: 0; padding: 0; }
.mm-panel { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 4 / 5; overflow: hidden; padding: 30px; color: var(--mm-paper); background: var(--mm-ink); isolation: isolate; }
.mm-panel img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--mm-reveal-ease), filter .6s; filter: saturate(.9); }
.mm-panel::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(13, 13, 13, .95) 0%, rgba(13, 13, 13, .78) 40%, rgba(13, 13, 13, .1) 78%); }
.mm-panel:hover img { transform: scale(1.06); filter: saturate(1.1); }
.mm-panel__title { margin: 0 0 12px; font: 400 clamp(32px, 3vw, 44px)/.92 var(--mm-display); text-transform: uppercase; color: var(--mm-paper); }
.mm-panel__text { margin: 0; font-size: var(--mm-text-sm); line-height: 1.7; color: var(--mm-on-ink); }
@media (max-width: 900px) {
	.mm-panels { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.mm-panel { scroll-snap-align: start; }
}

/* ---------- Questions: rows that open, on white ---------- */
.mm-qa { display: flex; flex-direction: column; gap: 8px; }
.mm-qa__item[open] { flex: 1 1 auto; }
.mm-qa__item { background: var(--mm-white); color: var(--mm-ink); }
.mm-qa__q { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; cursor: pointer; list-style: none; font: 400 25px/1 var(--mm-display); letter-spacing: .01em; text-transform: uppercase; }
.mm-qa__q::-webkit-details-marker { display: none; }
.mm-qa__q::after { content: ''; flex: none; width: 18px; height: 18px; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transition: transform .25s var(--mm-reveal-ease); }
.mm-qa__item[open] .mm-qa__q::after { transform: rotate(45deg); color: var(--mm-accent-text); }
.mm-qa__q:hover { color: var(--mm-accent-text); }
.mm-qa__a { padding: 0 24px 22px; }
.mm-qa__a p { margin: 0; font-size: var(--mm-text-sm); line-height: 1.75; color: #3d3d3a; }

/* ---------- Questions beside a picture ---------- */
.mm-qa-photo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--mm-grid-gap); align-items: stretch; }
.mm-qa-photo__media { position: relative; min-height: 280px; }
/* The picture adds no height of its own: the rows set the row height, the picture fills it and sticks on long lists. */
.mm-qa-photo__stick { position: sticky; top: calc(var(--mm-header-h) + 24px); height: min(100%, calc(100vh - var(--mm-header-h) - 48px)); overflow: hidden; background: var(--mm-cell); }
.mm-qa-photo__stick img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
	.mm-qa-photo { grid-template-columns: 1fr; }
	.mm-qa-photo__media { min-height: 0; aspect-ratio: 16 / 10; }
	.mm-qa-photo__stick { position: absolute; inset: 0; height: auto; }
}

/* ---------- Prose: one reading column, alone or beside a picture ---------- */
.mm-prose { max-width: 70ch; margin-inline: auto; font-size: 17px; line-height: 1.8; }
.mm-prose-photo .mm-prose { max-width: none; margin: 0; }
.mm-prose-photo--right { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.mm-prose > :first-child { margin-top: 0; }
.mm-prose > :last-child { margin-bottom: 0; }
.mm-prose p, .mm-prose ul, .mm-prose ol { margin: 0 0 18px; }
.mm-band--light .mm-prose { color: #3d3d3a; }
.mm-band--ink .mm-prose { color: var(--mm-on-ink); }
.mm-prose h3 { margin: 36px 0 12px; font: 400 32px/.95 var(--mm-display); text-transform: uppercase; color: var(--mm-ink); }
.mm-band--ink .mm-prose h3 { color: var(--mm-paper); }
.mm-prose ul, .mm-prose ol { padding-left: 22px; }
.mm-prose li { margin-bottom: 8px; }
.mm-prose li::marker { color: var(--mm-accent-text); }
.mm-prose strong { color: inherit; font-weight: 700; }
.mm-prose a { color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--mm-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.mm-prose a:hover { color: var(--mm-accent-text); }
@media (max-width: 900px) { .mm-prose-photo--right { grid-template-columns: 1fr; } .mm-prose-photo--right .mm-qa-photo__media { order: -1; } }

/* ---------- Dose panel: the facts row (name and amount; the facts and one line) ---------- */
.mm-dose__panel[hidden] { display: none; }
.mm-dose__facts {
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px);
	align-items: center; margin-bottom: clamp(32px, 3.4vw, 48px);
}
.mm-dose__facts .mm-dose__name { margin: 0; font: 400 clamp(36px, 3.4vw, 52px)/.9 var(--mm-display); text-transform: uppercase; color: currentColor; }
.mm-dose__facts .mm-dose__grams { margin: 10px 0 0; font: 400 clamp(64px, 7.4vw, 112px)/.86 var(--mm-display); text-transform: uppercase; color: var(--mm-accent-text); }
.mm-dose__facts .mm-dose__unit { margin: 8px 0 0; font: 400 14px/1 var(--mm-body); }
.mm-dose__facts .mm-dose__meta { margin: 0; font: 700 14px/1.6 var(--mm-body); color: currentColor; }
.mm-band--ink .mm-dose__facts .mm-dose__meta { color: var(--mm-green); }
.mm-dose__facts .mm-dose__line { max-width: 52ch; margin: 14px 0 0; font-size: 19px; line-height: 1.7; }
.mm-band--light .mm-dose__facts .mm-dose__line { color: #3d3d3a; }
@media (max-width: 860px) {
	.mm-dose__facts { grid-template-columns: 1fr; gap: 18px; text-align: center; }
	.mm-dose__facts .mm-dose__line { margin-inline: auto; font-size: var(--mm-text); }
}

/* ---------- Order block: the delivery map beside the questions ---------- */
/* The map panel (.mm-ship) is in the builder C block at the end of this file (Home round 3). */
/* The map on the left; on the right the postal code check over the questions. Both
   columns share top and bottom edges (the open question takes the difference).
   Phones: the check, the map, the questions. */
.mm-order {
	display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr;
	grid-template-areas: "map check" "map qa"; gap: 8px var(--mm-grid-gap); align-items: stretch;
}
.mm-order > .mm-ship { grid-area: map; }
.mm-order > .mm-ship__check { grid-area: check; }
.mm-order > .mm-qa { grid-area: qa; }
@media (max-width: 1000px) {
	.mm-order { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "check" "map" "qa"; row-gap: var(--mm-grid-gap); }
}

/* ---------- Review viewer: one featured review beside its product ---------- */
.mm-reviews { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: stretch; }
.mm-reviews__product { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.mm-reviews__pics { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--mm-cell); }
.mm-reviews__pic { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease, transform 1.2s var(--mm-reveal-ease); transform: scale(1.03); }
.mm-reviews__pic.is-on { opacity: 1; transform: none; }
.mm-reviews__pic img { width: 100%; height: 100%; object-fit: cover; }
.mm-reviews__info { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.mm-reviews__info[hidden] { display: none; }
.mm-reviews__facts { min-width: 0; }
.mm-band--ink .mm-reviews__name, .mm-reviews__name { margin: 0; font: 400 30px/.95 var(--mm-display); letter-spacing: .01em; text-transform: uppercase; color: var(--mm-paper); }
.mm-band--ink .mm-reviews__price, .mm-reviews__price { margin: 8px 0 0; font: 400 28px/1 var(--mm-display); letter-spacing: .02em; color: var(--mm-accent-text); }
.mm-reviews__price del { margin-right: 6px; font-size: .7em; color: rgba(245, 245, 240, .5); }
.mm-reviews__info .mm-btn { flex: none; }
.mm-reviews__body { display: flex; flex-direction: column; min-width: 0; }
.mm-reviews__quotes { flex: 1; display: grid; align-content: center; }
.mm-reviews__quote { margin: 0; padding-block: 8px 32px; }
.mm-reviews__quote[hidden] { display: none; }
.mm-reviews__stars { display: block; --mm-star-on: var(--mm-green); width: 130px; height: 24px; -webkit-mask-size: 26px 24px; mask-size: 26px 24px; }
.mm-reviews__text { margin: 26px 0 24px; }
.mm-band--ink .mm-reviews__text p, .mm-reviews__text p {
	margin: 0; font: 400 28px/1.45 var(--mm-body); color: var(--mm-paper); text-wrap: pretty;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden;
}
.mm-reviews__by { font: 700 14px/1 var(--mm-body); color: var(--mm-on-ink); }
.mm-reviews__nav { display: flex; align-items: center; gap: 12px; }
.mm-reviews__arrow { flex: none; }
.mm-reviews__thumbs { flex: 0 1 auto; display: flex; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 4px 8px 8px 4px; margin: -4px -8px -8px -4px; }
.mm-reviews__thumbs::-webkit-scrollbar { display: none; }
.mm-reviews__thumb {
	flex: none; width: 64px; height: 64px; padding: 0; overflow: hidden; cursor: pointer;
	background: var(--mm-cell); border: 2px solid transparent; opacity: .72;
	transition: opacity .2s, transform .2s, box-shadow .2s, border-color .2s;
}
.mm-reviews__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mm-reviews__thumb:hover { opacity: 1; }
.mm-reviews__thumb:focus-visible { outline: 2px solid var(--mm-green); outline-offset: 3px; }
.mm-reviews__thumb.is-on { opacity: 1; border-color: var(--mm-accent); box-shadow: none; transform: translate(-2px, -2px); }
@media (max-width: 1100px) {
	.mm-band--ink .mm-reviews__text p, .mm-reviews__text p { font-size: 24px; }
}
@media (max-width: 860px) {
	.mm-reviews { grid-template-columns: 1fr; gap: 28px; }
	.mm-reviews__quote { padding-block: 0 24px; }
	.mm-band--ink .mm-reviews__text p, .mm-reviews__text p { font-size: 21px; }
	.mm-reviews__info { flex-wrap: wrap; }
	.mm-reviews__nav { gap: 8px; }
	.mm-reviews__nav .mm-arrow { width: 42px; height: 42px; }
	.mm-reviews__thumb { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
	.mm-reviews__pic, .mm-reviews__thumb { transition: none; }
}

/* ---------- Review strip: a running strip (full width by its nature) ---------- */
.mm-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.mm-marquee__track { display: flex; gap: var(--mm-grid-gap); width: max-content; list-style: none; margin: 0; padding: 0; animation: mm-marquee var(--mm-marquee-s, 110s) linear infinite; }
.mm-marquee:hover .mm-marquee__track, .mm-marquee:focus-within .mm-marquee__track { animation-play-state: paused; }
@keyframes mm-marquee { to { transform: translateX(calc(-50% - var(--mm-grid-gap) / 2)); } }
.mm-band--ink li.mm-quote { color: var(--mm-ink); }
.mm-quote { display: grid; grid-template-rows: auto 1fr auto; gap: 18px; width: 380px; padding: 24px; background: var(--mm-white); color: var(--mm-ink); }
.mm-quote__product { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; color: inherit; text-decoration: none; }
.mm-quote__thumb { display: block; width: 64px; height: 64px; overflow: hidden; background: var(--mm-cell); }
.mm-quote__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mm-quote__name { display: block; font: 400 21px/1 var(--mm-display); text-transform: uppercase; }
.mm-quote__product:hover .mm-quote__name { color: var(--mm-accent-text); }
.mm-quote__text { margin: 0; }
.mm-quote__text p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--mm-ink) !important; }
.mm-quote__by { font: 700 14px/1 var(--mm-body); color: #4d4d4a !important; }
@media (prefers-reduced-motion: reduce) {
	.mm-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
	.mm-marquee__track { animation: none; }
	.mm-marquee__track > [aria-hidden='true'] { display: none; }
}
@media (max-width: 600px) { .mm-quote { width: 300px; } }

/* ---------- Article card ---------- */
.mm-post__link { display: block; color: inherit; text-decoration: none; }
.mm-post__media { display: block; aspect-ratio: 1; overflow: hidden; background: var(--mm-ink); }
.mm-post__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--mm-reveal-ease); }
.mm-post__title { margin: 18px 0 8px; font: 400 28px/.98 var(--mm-display); text-transform: uppercase; text-wrap: balance; transition: color .2s; }
.mm-post__date { font: 400 14px/1 var(--mm-body); opacity: .7; }
.mm-post__link:hover .mm-post__img { transform: scale(1.05); }
.mm-post__link:hover .mm-post__title { color: var(--mm-accent-text); }
/* The date, then an optional reading time (mm_post_card meta). */
.mm-post__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.mm-post__more { font: 400 14px/1 var(--mm-body); opacity: .7; }

/* The lead story (mm_post_card lead, the Notebook's Latest articles): an editorial
   feature. The picture sits in a 16:9 frame, the article pictures' own shape, so it is
   shown whole and at no more than its file's size (the sizes attribute in kit.php
   follows the frame's real width). From 1000 px the words sit beside it, picture and
   words each half the row, so the picture ends where the second card below ends;
   narrower, the words sit under it. The words take the band's colours. */
.mm-post--lead .mm-post__link { display: grid; gap: 20px; align-items: center; }
.mm-post--lead .mm-post__media { aspect-ratio: 16 / 9; }
.mm-post--lead .mm-post__words { display: grid; justify-items: start; gap: 14px; }
.mm-post--lead .mm-post__title { margin: 0; max-width: 18ch; font-size: clamp(36px, 4.2vw, 64px); line-height: .92; }
.mm-post--lead .mm-post__excerpt { max-width: 52ch; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; opacity: .82; }
.mm-post--lead .mm-post__link:focus-visible { outline: 3px solid var(--mm-green); outline-offset: 3px; }
@media (min-width: 1000px) {
	.mm-post--lead .mm-post__link { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--mm-grid-gap); }
	.mm-post--lead .mm-post__words { padding-block: 12px; }
}

/* ---------- Email band: the one sign-up ---------- */
.mm-email { padding-block: 0; overflow: hidden; }
.mm-email__inner { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: stretch; }
.mm-email__text { padding-block: clamp(56px, 6vw, 92px); }
.mm-email__title { margin: 0; font: 400 clamp(48px, 5.2vw, 80px)/.9 var(--mm-display); text-transform: uppercase; }
.mm-email__lead { max-width: 48ch; margin: 18px 0 28px; font-size: var(--mm-text); line-height: 1.7; }
.mm-email__form { display: flex; flex-wrap: wrap; gap: 10px; max-width: 560px; }
.mm-email__input { flex: 1 1 260px; height: 56px; padding: 0 18px; font: 400 16px var(--mm-body); color: var(--mm-ink); background: var(--mm-paper); border: 2px solid var(--mm-ink); border-radius: 0; }
.mm-email__input:focus-visible { outline: 2px solid var(--mm-ink); outline-offset: 3px; }
.mm-email__form .mm-btn { height: 56px; }
.mm-email__status { flex-basis: 100%; margin: 4px 0 0; font: 400 14px/1.4 var(--mm-body); }
.mm-email__status:empty { display: none; }
.mm-email__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mm-email__media { position: relative; margin: 0; min-height: 300px; overflow: hidden; }
.mm-email__img { position: absolute; left: 50%; top: -28%; width: auto; height: 200%; max-width: none; transform: translateX(-50%) rotate(-7deg); filter: drop-shadow(0 30px 40px rgba(13, 13, 13, .35)); transition: transform .8s var(--mm-reveal-ease); }
.mm-email:hover .mm-email__img { transform: translateX(-50%) rotate(-3deg) translateY(-8px); }
@media (max-width: 860px) {
	.mm-email__inner { grid-template-columns: 1fr; gap: 0; }
	.mm-email__text { padding-bottom: 40px; }
	.mm-email__media { min-height: 0; height: 260px; }
}

/* ---------- Hero: one photo, one shade, a wide balanced block ---------- */
/* The photo stands still: its slow zoom (6% over 22 s) kept the first screen changing long after it had loaded (Ben, 30 Oct). */
.mm-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; padding-block: clamp(80px, 10vh, 120px); color: var(--mm-paper); background: var(--mm-ink); }
.mm-hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: var(--mm-hero-pos, 50% 30%); }
.mm-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(13, 13, 13, .95) 0%, rgba(13, 13, 13, .9) 38%, rgba(13, 13, 13, .7) 70%, rgba(13, 13, 13, .5) 100%); }
.mm-hero__title { max-width: 1100px; margin: 0; font: 400 clamp(56px, 6.8vw, 108px)/.9 var(--mm-display); letter-spacing: .005em; text-transform: uppercase; color: var(--mm-paper); text-wrap: balance; }
.mm-hero__lead { max-width: 880px; margin: 26px 0 0; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.65; color: var(--mm-on-ink); }
.mm-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 38px 0 0; }
.mm-js .mm-hero__title, .mm-js .mm-hero__lead, .mm-js .mm-hero__cta { animation: mm-rise .8s var(--mm-reveal-ease) both; }
.mm-js .mm-hero__lead { animation-delay: .09s; }
.mm-js .mm-hero__cta { animation-delay: .18s; }
@keyframes mm-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
	.mm-hero { align-items: flex-end; min-height: calc(100svh - var(--mm-header-h)); padding-block: 96px 44px; text-align: center; }
	.mm-hero::before { background: linear-gradient(to top, rgba(13, 13, 13, .96) 0%, rgba(13, 13, 13, .86) 55%, rgba(13, 13, 13, .55) 100%); }
	.mm-hero__cta { justify-content: center; }
	.mm-hero__cta .mm-btn { flex: 1 1 100%; }
}
/* A season's banner in place of the hero (mm_banner_hero()): the picture at its own shape, edge to edge. */
.mm-banner { background: var(--mm-ink); }
.mm-banner__link, .mm-banner__img { display: block; }
.mm-banner__img { width: 100%; height: auto; }
/* Store pages (Shop, categories): shorter, so products start in the first screen. */
.mm-hero--store { padding-block: clamp(56px, 7vh, 88px); }
@media (max-width: 760px) { .mm-hero--store { min-height: 0; padding-block: 48px 32px; } }
/* A hero on the liquid light field instead of a photo (mm_hero 'field', the Notebook).
   The field carries the picture, so the shade is lighter and leaves the right half to it. */
.mm-hero > .mm-hero__field { z-index: -2; }
.mm-hero--field::before { background: linear-gradient(90deg, rgba(13, 13, 13, .86) 0%, rgba(13, 13, 13, .62) 42%, rgba(13, 13, 13, .12) 78%, rgba(13, 13, 13, 0) 100%); }
@media (max-width: 760px) {
	.mm-hero--field::before { background: linear-gradient(to top, rgba(13, 13, 13, .9) 0%, rgba(13, 13, 13, .62) 50%, rgba(13, 13, 13, .1) 100%); }
}

/* ---------- Strip under the hero: the three ordering steps ---------- */
.mm-steps { padding-block: 16px; color: var(--mm-paper); background: #161616; }
.mm-steps__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.mm-steps__title { margin: 0; font: 400 28px/1 var(--mm-display); text-transform: uppercase; color: var(--mm-paper); }
.mm-steps__list { display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; list-style: none; }
.mm-steps__step { display: flex; align-items: center; gap: 22px; }
.mm-steps__arrow { width: 48px; color: var(--mm-green); }
.mm-steps__arrow svg { display: block; width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mm-steps__name { display: block; font: 400 21px/1 var(--mm-display); text-transform: uppercase; color: var(--mm-paper); }
.mm-steps__detail { display: block; margin-top: 4px; font: 400 14px/1.2 var(--mm-body); color: var(--mm-on-ink); }
.mm-steps__age { margin: 0; font: 700 14px/1 var(--mm-body); color: var(--mm-green); white-space: nowrap; }
@media (max-width: 1000px) {
	.mm-steps__inner { flex-direction: column; gap: 14px; text-align: center; }
	.mm-steps__list { flex-direction: column; gap: 12px; }
	.mm-steps__arrow { display: none; }
}
/* Home's strip on tablets and phones (Ben, 31 Oct: "cleaner, as a carousel"; the title centred): the title, then the steps as cards with their line icon, all three across on a tablet. On a phone the cards
   swipe: step 1 at the left, step 2 in the middle, half of step 3 at the edge, the bar centred under them
   with the real position (kit.js). */
.mm-steps .mm-steps__icon, .mm-steps .mm-steps__bar { display: none; }
@media (max-width: 1000px) {
	.mm-steps--cards .mm-steps__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; text-align: left; }
	.mm-steps--cards .mm-steps__title { font-size: 26px; text-align: center; text-wrap: balance; }
	.mm-steps--cards .mm-steps__age { text-align: center; }
	.mm-steps--cards .mm-steps__list { grid-column: 1 / -1; flex-direction: row; align-items: stretch; gap: 10px; }
	.mm-steps--cards .mm-steps__step { flex: 1 1 0; align-items: flex-start; min-width: 0; padding: 14px; background: rgba(245, 245, 240, .06); border-radius: var(--mm-radius); }
	.mm-steps--cards .mm-steps__body { display: flex; flex-direction: column; min-width: 0; }
	.mm-steps--cards .mm-steps__icon { display: grid; --mm-line-icon: 28px; margin-bottom: 12px; }
	.mm-steps--cards .mm-steps__name { font-size: 20px; line-height: 1.05; }
	.mm-steps--cards .mm-steps__detail { margin-top: 6px; font-size: 13px; line-height: 1.35; }
}
@media (max-width: 760px) {
	.mm-steps--cards .mm-steps__list {
		margin-inline: calc(-1 * var(--mm-gutter)); padding-inline: var(--mm-gutter); scroll-padding-inline: var(--mm-gutter);
		overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
	}
	.mm-steps--cards .mm-steps__list::-webkit-scrollbar { display: none; }
	.mm-steps--cards .mm-steps__step { flex: 0 0 calc((var(--mm-vw, 100vw) - var(--mm-gutter) - 20px) / 2.5); scroll-snap-align: start; }
	.mm-steps--cards .mm-steps__bar { display: block; grid-column: 1 / -1; position: relative; width: min(160px, 40%); height: 3px; margin: 2px auto 0; overflow: hidden; background: rgba(245, 245, 240, .18); }
	.mm-steps--cards .mm-steps__thumb { position: absolute; inset: 0 auto 0 0; width: var(--mm-bar-size, 80%); transform: translateX(var(--mm-bar-pos, 0%)); background: var(--mm-accent); }
}

/* ---------- To confirm: the one marker for an open fact ---------- */
.mm-tbc {
	display: inline; margin: 0 2px; padding: 1px 6px 0; -webkit-box-decoration-break: clone; box-decoration-break: clone;
	background: var(--mm-green); color: var(--mm-ink); font: 700 14px/1.6 var(--mm-body); vertical-align: baseline; overflow-wrap: anywhere;
}
/* Customers get no marker (mm_tbc() is empty), so a line that held only a marker goes too. */
:is(.mm-art-author__role, .mm-art-author__bio, .mm-art-bio__role, .mm-art-bio__body, .mm-num__level, .mm-slot__note):empty { display: none; }

/* ---------- Scroll reveal (one system, off for reduced motion) ---------- */
.mm-js [data-reveal] { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .76s var(--mm-reveal-ease) var(--mm-d, 0ms), transform .76s var(--mm-reveal-ease) var(--mm-d, 0ms); }
.mm-js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.mm-js [data-reveal] { opacity: 1; transform: none; transition: none; }
	.mm-js .mm-hero__title, .mm-js .mm-hero__lead, .mm-js .mm-hero__cta { animation: none; }
	.mm-story.is-on .mm-story__ring::before, .mm-stories--links .mm-story .mm-story__ring::before { animation: none !important; }
}

/* ==========================================================================
   Rollout A, redone in round 4 (rollout S7): the filters (S-03), the segmented
   control they share with the Shop's chooser (S-09), back soon (KS-05), the store
   grids on column tracks (S-06) and the liquid light lead tile and prose panel
   (KS-08). Markup: mm_filters(), mm_back_soon(), mm_choices() with seg,
   mm_product_grid() with cols or lead, mm_lead_tile() and mm_prose() with field.
   ========================================================================== */

/* ---------- Segmented control (mm-seg): a filter's values, or a question's answers ----------
   One track, the options inside it: compact DM Sans labels centred, 48 px tall, the
   picked one filled green with ink words. One line that scrolls sideways when it
   does not fit (never wraps), the scrollbar hidden. */
.mm-seg {
	display: flex; gap: 4px; width: max-content; max-width: 100%; padding: 4px;
	overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
	background: var(--mm-cell);
}
.mm-seg::-webkit-scrollbar { display: none; }
.mm-seg__opt {
	flex: none; display: grid; place-content: center; justify-items: center; gap: 3px;
	min-width: 72px; min-height: 48px; padding: 7px 18px; scroll-snap-align: start;
	color: var(--mm-ink); background: transparent; border: 0; border-radius: 0; cursor: pointer;
	text-align: center; transition: background-color .2s, color .2s;
}
.mm-seg__label { font: 600 16px/1.2 var(--mm-body); white-space: nowrap; }
.mm-seg__sub { font: 400 14px/1.2 var(--mm-body); white-space: nowrap; color: var(--mm-mute); }
.mm-seg__opt:hover { background: rgba(13, 13, 13, .06); }
.mm-seg__opt:focus-visible { outline: 2px solid var(--mm-ink); outline-offset: -2px; }
.mm-seg__opt.is-on { color: var(--mm-ink); background: var(--mm-accent); }
.mm-seg__opt.is-on .mm-seg__sub { color: var(--mm-ink); }
.mm-band--ink .mm-seg, .mm-on-ink .mm-seg { background: var(--mm-cell-ink); box-shadow: inset 0 0 0 1px var(--mm-line-ink); }
.mm-band--ink .mm-seg__opt, .mm-on-ink .mm-seg__opt { color: var(--mm-paper); }
.mm-band--ink .mm-seg__sub, .mm-on-ink .mm-seg__sub { color: var(--mm-on-ink); }
.mm-band--ink .mm-seg__opt:hover { background: rgba(245, 245, 240, .08); }
.mm-band--ink .mm-seg__opt:focus-visible { outline-color: var(--mm-accent); }
.mm-band--ink .mm-seg__opt.is-on, .mm-on-ink .mm-seg__opt.is-on { color: var(--mm-ink); background: var(--mm-accent); }
.mm-band--ink .mm-seg__opt.is-on .mm-seg__sub { color: var(--mm-ink); }

/* ---------- Filters: one row per filter, its values in view, over the products ---------- */
.mm-filters { display: grid; justify-items: center; gap: 14px; margin: 0 0 clamp(48px, 5vw, 72px); }
/* The rows share two columns: the names line up, and so do the controls. */
.mm-filters__rows { display: grid; grid-template-columns: max-content minmax(0, max-content); justify-content: center; align-items: center; gap: 12px 18px; max-width: 100%; }
.mm-filters__row { display: contents; }
.mm-filters__row .mm-filters__label { margin: 0; font: 700 16px/1.3 var(--mm-body); color: var(--mm-ink); white-space: nowrap; text-align: right; }
.mm-band--ink .mm-filters__row .mm-filters__label { color: var(--mm-paper); }
.mm-filters__row .mm-seg { min-width: 0; }
.mm-filters__status { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 0; }
.mm-filters__status .mm-filters__count { margin: 0; font: 700 15px/1.4 var(--mm-body); color: var(--mm-ink); }
.mm-filters__count:empty { display: none; }
.mm-filters__clear[hidden] { display: none; }
.mm-filters__empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; padding: 24px 0 8px; text-align: center; }
.mm-filters__empty[hidden] { display: none; }
.mm-filters__empty p { margin: 0; font: 700 15px/1.4 var(--mm-body); }
@media (max-width: 860px) {
	.mm-filters { justify-items: stretch; }
	.mm-filters__rows { grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 8px; }
	.mm-filters__row .mm-filters__label { text-align: left; }
	.mm-filters__row:not(:first-child) .mm-filters__label { margin-top: 10px; }
	/* The control runs to the screen's edge so its last option shows it scrolls. */
	.mm-filters__row .mm-seg { width: auto; max-width: none; margin-right: calc(var(--mm-gutter) * -1); }
	.mm-filters__status { justify-content: flex-start; }
}

/* ---------- Back soon (KS-05): the sold out products as tiles, one email for all ---------- */
.mm-soon__form { display: grid; gap: clamp(28px, 3vw, 40px); }
.mm-soon__grid {
	display: grid; grid-template-columns: repeat(var(--mm-soon-cols, 6), minmax(0, 1fr)); gap: 24px var(--mm-grid-gap);
	max-width: calc(var(--mm-soon-cols, 6) * 200px + (var(--mm-soon-cols, 6) - 1) * var(--mm-grid-gap));
	width: 100%; margin: 0 auto; padding: 0; list-style: none;
}
.mm-soon__item { position: relative; display: flex; min-width: 0; }
.mm-soon__input { position: absolute; top: 12px; left: 12px; width: 1px; height: 1px; opacity: 0; }
/* The name takes the room it needs; Notify me lines up at the foot of every tile in a row. */
.mm-soon__tile { flex: 1 1 auto; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; color: inherit; cursor: pointer; text-align: left; }
.mm-soon__pic { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--mm-cell); box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .2s; }
.mm-soon__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--mm-reveal-ease); }
.mm-soon__mark { font-size: 14px; }
.mm-soon__name { font: 700 15px/1.35 var(--mm-body); }
.mm-soon__pick { display: flex; align-items: center; gap: 10px; font: 600 14px/1.3 var(--mm-body); }
.mm-soon__box { flex: none; display: grid; place-items: center; width: 24px; height: 24px; color: transparent; border: 2px solid var(--mm-ink); transition: background-color .2s, color .2s, border-color .2s; }
.mm-soon__pick { color: var(--mm-ink); }
.mm-band--ink .mm-soon__box { border-color: var(--mm-paper); }
.mm-soon__box .mm-icon { width: 16px; height: 16px; stroke-width: 2.8; }
.mm-soon__tile:hover .mm-soon__pic img { transform: scale(1.04); }
.mm-soon__input:focus-visible + .mm-soon__tile .mm-soon__pic { outline: 2px solid var(--mm-accent); outline-offset: 3px; }
.mm-soon__input:checked + .mm-soon__tile .mm-soon__pic { box-shadow: inset 0 0 0 3px var(--mm-accent); }
.mm-soon__input:checked + .mm-soon__tile .mm-soon__box { color: var(--mm-ink); background: var(--mm-accent); border-color: var(--mm-accent); }
.mm-band--ink .mm-soon__pick { color: var(--mm-paper); }
.mm-band--ink .mm-soon__name { color: var(--mm-paper); }
.mm-soon__send { display: grid; justify-items: center; gap: 12px; width: 100%; max-width: 640px; margin: 0 auto; container-type: inline-size; }
.mm-soon__fields { display: flex; width: 100%; }
.mm-soon__email {
	flex: 1 1 auto; min-width: 0; min-height: 56px; padding: 0 18px; font: 400 16px/1 var(--mm-body);
	color: var(--mm-ink); background: var(--mm-paper); border: 2px solid var(--mm-ink); border-right: 0; border-radius: 0;
}
.mm-band--ink .mm-soon__email { border-color: var(--mm-paper); }
.mm-soon__email:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: 2px; }
.mm-soon__btn { flex: none; }
.mm-soon__msg { margin: 0; font: 700 15px/1.5 var(--mm-body); text-align: center; }
.mm-soon__msg:empty { display: none; }
.mm-soon__msg.is-error { color: var(--mm-highlight-text); }
.mm-band--ink .mm-soon__msg { color: var(--mm-paper); }
.mm-band--ink .mm-soon__msg.is-error { color: var(--mm-highlight); }
.mm-soon__done { display: none; margin: 0; font: 700 15px/1.5 var(--mm-body); }
.mm-soon__done:target { display: block; }
/* The honeypot stays in the form for bots, clipped to nothing in place (not pushed off screen). */
.mm-soon__trap { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@container (max-width: 559px) {
	.mm-soon__fields { flex-direction: column; gap: 10px; }
	.mm-soon__email { border-right: 2px solid var(--mm-ink); }
	.mm-band--ink .mm-soon__email { border-right-color: var(--mm-paper); }
	.mm-soon__btn { width: 100%; }
}
@media (max-width: 1000px) {
	.mm-soon__grid { grid-template-columns: repeat(min(var(--mm-soon-cols, 6), 4), minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.mm-soon__grid { grid-template-columns: repeat(min(var(--mm-soon-cols, 6), 3), minmax(0, 1fr)); gap: 18px 10px; }
	.mm-soon__name { font-size: 14px; line-height: 1.3; }
	.mm-soon__pick { gap: 8px; }
	.mm-soon__box { width: 22px; height: 22px; }
	.mm-soon__mark { padding: 6px 7px 5px; font-size: 12px; }
}
@media (max-width: 359px) {
	.mm-soon__grid { grid-template-columns: repeat(min(var(--mm-soon-cols, 6), 2), minmax(0, 1fr)); }
}

/* ---------- Store grids on column tracks (mm_product_grid with cols or lead) ----------
   Every card on a fixed track, so a card stands directly under the one above it; a
   short last row starts at the left track unless kit.js centres it on whole
   columns. With a lead tile: the tile in the first column, as tall as the rows of
   three beside it; on two columns it spans the row over the cards (is-lead-wide) or
   takes a cell when the cards are odd. */
.mm-pgrid--tracks { display: grid; grid-template-columns: repeat(var(--mm-pg-cols, 4), minmax(0, 1fr)); justify-content: stretch; }
.mm-pgrid--tracks > .mm-pgrid__item { flex: none; }
.mm-pgrid--tracks > .mm-pgrid__item[hidden] { display: none; }
.mm-pgrid__item--lead { grid-row: span var(--mm-lead-rows, 1); }
.mm-pgrid__item--lead > .mm-lead { flex: 1 1 auto; min-height: 0; }
@media (max-width: 1000px) {
	.mm-pgrid--tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mm-pgrid__item--lead { grid-row: auto; }
	.mm-pgrid--lead.is-lead-wide > .mm-pgrid__item--lead { grid-column: 1 / -1; }
	.mm-pgrid--lead.is-lead-wide > .mm-pgrid__item--lead > .mm-lead { min-height: 220px; }
	.mm-pgrid--lead:not(.is-lead-wide) .mm-lead { padding: 16px; }
	.mm-pgrid--lead:not(.is-lead-wide) .mm-lead__title { font-size: clamp(28px, 7.6vw, 38px); }
	.mm-pgrid--lead:not(.is-lead-wide) .mm-lead__text { font-size: 14px; line-height: 1.5; }
}

/* ---------- The lead tile on the liquid light field (KS-08) ---------- */
.mm-lead--field { isolation: isolate; }
.mm-lead--field .mm-lead__field { position: absolute; inset: 0; z-index: -2; transition: transform .8s var(--mm-reveal-ease); }
.mm-lead--field::after { background: linear-gradient(to top, rgba(13, 13, 13, .88) 0%, rgba(13, 13, 13, .55) 32%, rgba(13, 13, 13, 0) 64%); }
a.mm-lead--field:hover .mm-lead__field, a.mm-lead--field:focus-visible .mm-lead__field { transform: scale(1.04); }

/* ---------- Prose beside a liquid light panel (mm_prose with field, KS-08) ---------- */
/* The panel fills the picture cell that stays in view beside the text (.mm-qa-photo__stick). */
.mm-prose__panel { position: absolute; inset: 0; display: block; overflow: hidden; background: var(--mm-ink); }
.mm-prose__panel .mm-prose__field { position: absolute; inset: 0; }

@media (prefers-reduced-motion: reduce) {
	.mm-seg__opt, .mm-soon__pic, .mm-soon__pic img, .mm-soon__box, .mm-lead--field .mm-lead__field { transition: none; }
}

/* ==========================================================================
   Round 4, task 05: the shared parts the product page introduces (inc/kit.php,
   the round 4 block at its end). The picture mark (mm_mark), the back in stock
   form (mm_restock_form) and the product grid (mm_product_grid) sit with the card
   in components.css.
   ========================================================================== */

/* ---------- Line icons (mm_line_icon, KS-09): Phosphor regular in currentColor ----------
   Ink on white, lime on ink. Only beside words they help (benefits, ordering steps). */
.mm-line-icon { display: inline-grid; place-items: center; flex: none; width: var(--mm-line-icon, 28px); aspect-ratio: 1; color: var(--mm-ink); }
.mm-line-icon svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.mm-on-ink .mm-line-icon, .mm-band--ink .mm-line-icon { color: var(--mm-green); }

/* ---------- Purchase benefits (mm_benefits, KS-02): two by two, or four across ---------- */
.mm-benefits { display: grid; gap: 14px; width: 100%; container-type: inline-size; }
.mm-benefits__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 0; padding: 0; list-style: none; }
.mm-benefits--row .mm-benefits__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mm-benefits__item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mm-benefits__icon { --mm-line-icon: 30px; }
.mm-benefits__title { font: 700 16px/1.3 var(--mm-body); color: var(--mm-ink); text-wrap: balance; }
.mm-on-ink .mm-benefits__title { color: var(--mm-paper); }
.mm-benefits .mm-benefits__note { margin: 0; font: 400 14px/1.4 var(--mm-body); color: var(--mm-mute); }
.mm-on-ink .mm-benefits .mm-benefits__note { color: var(--mm-on-ink); }
/* Narrower than two promises side by side on one line each: one under another. */
@container (max-width: 479px) {
	.mm-benefits__list, .mm-benefits--row .mm-benefits__list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 760px) {
	.mm-benefits--row .mm-benefits__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mm-benefits__list { gap: 12px 16px; }
	.mm-benefits__item { gap: 10px; }
	.mm-benefits__icon { --mm-line-icon: 26px; }
	.mm-benefits__title { font-size: 15px; }
}
/* The ink strip around the row under a store page's head (mm_shop_benefits()): the Shop
   and the category pages (shop.css holds the same rule), and since rollout S9 (O-04) the
   cart and checkout, which do not load shop.css. */
.mm-store__benefits { padding-block: clamp(22px, 2.4vw, 30px); background: var(--mm-ink); }

/* ---------- How ordering works (mm_order_steps, KS-07): a band of its own, three large steps ---------- */
/* The steps share their rows (subgrid), so every title and every line starts at the same height. */
.mm-ordering__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: var(--mm-grid-gap); margin: 0; padding: 0; list-style: none; }
.mm-ordering__step { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; row-gap: 14px; min-width: 0; padding: clamp(26px, 2.8vw, 40px); background: var(--mm-cell); }
.mm-band--ink .mm-ordering__step { background: var(--mm-cell-ink); box-shadow: inset 0 0 0 1px var(--mm-line-ink); }
.mm-ordering__icon { --mm-line-icon: 56px; }
.mm-ordering__title { margin: 8px 0 0; font: 400 var(--mm-h3)/.95 var(--mm-display); letter-spacing: .01em; text-transform: uppercase; }
.mm-band--ink .mm-ordering__title { color: var(--mm-paper); }
.mm-ordering .mm-ordering__text { margin: 0; font-size: var(--mm-text); line-height: 1.65; color: var(--mm-ink); }
.mm-band--ink.mm-ordering .mm-ordering__text { color: var(--mm-on-ink); }
@media (max-width: 860px) {
	.mm-ordering__steps { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 12px; }
	.mm-ordering__step { grid-row: auto; grid-template-rows: none; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 18px; padding: 22px; }
	.mm-ordering__icon { --mm-line-icon: 44px; grid-row: span 2; align-self: start; }
	.mm-ordering__title { margin: 0; }
}

/* ---------- Reviews list (mm_review_list, KS-01): the summary beside reviews read by scrolling ----------
   Left: the average, its stars, the count, the 5 to 1 breakdown and "Write a review",
   held in view while the reviews scroll past. Right: one review under another, a
   hairline between them (inside the block), the first five and "Show more reviews".
   Ink stars on white, lime stars on ink. */
.mm-revlist { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.mm-revlist__summary { position: sticky; top: calc(var(--mm-header-h) + 24px); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.mm-revlist .mm-revlist__avg { margin: 0; font: 400 clamp(96px, 9vw, 144px)/.8 var(--mm-display); letter-spacing: .01em; color: var(--mm-ink); }
.mm-revlist__stars { display: block; --mm-star-on: var(--mm-ink); --mm-star-off: rgba(13, 13, 13, .16); width: 110px; height: 20px; -webkit-mask-size: 22px 20px; mask-size: 22px 20px; }
.mm-revlist__stars--lg { width: 168px; height: 30px; -webkit-mask-size: 33.6px 30px; mask-size: 33.6px 30px; }
.mm-revlist .mm-revlist__count { margin: 0; font: 700 14px/1.4 var(--mm-body); color: var(--mm-mute); }
.mm-revlist__bars { display: grid; gap: 10px; width: 100%; max-width: 340px; margin: 12px 0 0; }
.mm-revlist__bar { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 14px; }
.mm-revlist__bar dt { font: 700 14px/1 var(--mm-body); color: var(--mm-mute); white-space: nowrap; }
.mm-revlist__bar dd { display: flex; align-items: center; gap: 12px; margin: 0; }
.mm-revlist__cells { flex: 1; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.mm-revlist__cells i { display: block; aspect-ratio: 1; background: rgba(13, 13, 13, .12); }
.mm-revlist__cells i.is-on { background: var(--mm-accent); }
.mm-revlist__n { min-width: 2ch; font: 700 14px/1 var(--mm-body); text-align: right; color: var(--mm-ink); }
.mm-revlist .mm-revlist__none { max-width: 18ch; margin: 0; font: 400 clamp(30px, 2.8vw, 40px)/.98 var(--mm-display); text-transform: uppercase; color: var(--mm-ink); text-wrap: balance; }
.mm-revlist .mm-revlist__write { margin: 12px 0 0; }
.mm-revlist__body { min-width: 0; }
.mm-revlist__list { margin: 0; padding: 0; list-style: none; }
.mm-revlist__item { display: grid; gap: 12px; padding: 28px 0; border-top: 1px solid var(--mm-line); }
.mm-revlist__item:first-child { padding-top: 4px; border-top: 0; }
.mm-revlist__item[hidden] { display: none; }
.mm-revlist__item:focus { outline: none; }
.mm-revlist__text { margin: 0; }
.mm-revlist .mm-revlist__text p { margin: 0; max-width: 64ch; font: 400 17px/1.7 var(--mm-body); color: var(--mm-ink); text-wrap: pretty; }
.mm-revlist .mm-revlist__by { margin: 0; font: 700 14px/1.4 var(--mm-body); color: var(--mm-ink); }
.mm-revlist__by span { margin-left: 12px; font-weight: 400; color: var(--mm-mute); }
/* Several products (the store pages, rollout S7): the product a review is about. */
.mm-revlist .mm-revlist__on { margin: -6px 0 0; font: 400 14px/1.4 var(--mm-body); color: var(--mm-mute); }
.mm-revlist__on a { color: var(--mm-ink); text-decoration: underline; text-decoration-color: var(--mm-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.mm-band--ink .mm-revlist .mm-revlist__on { color: var(--mm-on-ink); }
.mm-band--ink .mm-revlist__on a { color: var(--mm-paper); }
.mm-revlist .mm-revlist__more { margin: 12px 0 0; }
.mm-revlist__more[hidden] { display: none; }
/* On ink: paper words, lime stars. */
.mm-band--ink .mm-revlist__stars { --mm-star-on: var(--mm-green); --mm-star-off: rgba(245, 245, 240, .24); }
.mm-band--ink .mm-revlist .mm-revlist__avg, .mm-band--ink .mm-revlist .mm-revlist__none, .mm-band--ink .mm-revlist__n,
.mm-band--ink .mm-revlist .mm-revlist__text p, .mm-band--ink .mm-revlist .mm-revlist__by { color: var(--mm-paper); }
.mm-band--ink .mm-revlist .mm-revlist__count, .mm-band--ink .mm-revlist__bar dt, .mm-band--ink .mm-revlist__by span { color: var(--mm-on-ink); }
.mm-band--ink .mm-revlist__cells i { background: var(--mm-line-ink); }
.mm-band--ink .mm-revlist__cells i.is-on { background: var(--mm-accent); }
.mm-band--ink .mm-revlist__item { border-top-color: var(--mm-line-ink); }
/* The review form: labels over square fields, the rating as five tiles, a square check. */
.mm-revlist__form { margin: 0 0 40px; }
.mm-revlist.is-empty .mm-revlist__form { margin: 0; }
.mm-revlist .mm-revlist__form-title { margin: 0 0 24px; font: 400 clamp(36px, 3.4vw, 52px)/.92 var(--mm-display); text-transform: uppercase; color: var(--mm-ink); }
.mm-revlist__fields { display: grid; gap: 18px; margin: 0; }
.mm-revlist .mm-revlist__row, .mm-revlist .form-submit { margin: 0; }
.mm-revlist__row label, .mm-revlist__rate legend { display: block; margin: 0 0 8px; padding: 0; font: 700 14px/1.3 var(--mm-body); color: var(--mm-mute); }
.mm-revlist__input { display: block; width: 100%; min-height: 56px; padding: 14px 18px; font: 400 16px/1.5 var(--mm-body); color: var(--mm-ink); background: var(--mm-paper); border: 2px solid var(--mm-ink); border-radius: 0; }
textarea.mm-revlist__input { min-height: 150px; resize: vertical; }
.mm-revlist__input:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: 3px; }
.mm-revlist__rate { min-width: 0; margin: 0; padding: 0; border: 0; }
.mm-revlist__rate-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.mm-revlist__rate-opt { position: relative; cursor: pointer; }
.mm-revlist__rate-opt input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mm-revlist__rate-face { display: grid; justify-items: center; gap: 6px; padding: 13px 6px 11px; text-align: center; border: 2px solid rgba(13, 13, 13, .55); transition: background .2s, color .2s, border-color .2s; }
.mm-revlist__rate-n { font: 400 30px/.9 var(--mm-display); }
.mm-revlist__rate-word { font: 400 14px/1.2 var(--mm-body); white-space: nowrap; }
.mm-revlist__rate-opt:hover .mm-revlist__rate-face { background: rgba(200, 230, 68, .2); }
.mm-revlist__rate-opt input:checked + .mm-revlist__rate-face { color: var(--mm-ink); background: var(--mm-accent); border-color: var(--mm-accent); }
.mm-revlist__rate-opt input:focus-visible + .mm-revlist__rate-face { outline: 2px solid var(--mm-accent); outline-offset: 3px; }
.mm-revlist__consent { position: relative; margin: 0; }
.mm-revlist__consent input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mm-revlist__consent label { display: flex; align-items: center; gap: 12px; cursor: pointer; font: 400 14px/1.4 var(--mm-body); color: var(--mm-mute); }
.mm-revlist__box { flex: none; display: grid; place-items: center; width: 26px; height: 26px; color: transparent; background: var(--mm-paper); border: 2px solid var(--mm-ink); }
.mm-revlist__box .mm-icon { width: 17px; height: 17px; stroke-width: 2.8; }
.mm-revlist__consent input:checked + label .mm-revlist__box { color: var(--mm-ink); background: var(--mm-accent); border-color: var(--mm-accent); }
.mm-revlist__consent input:focus-visible + label .mm-revlist__box { outline: 2px solid var(--mm-accent); outline-offset: 3px; }
.mm-band--ink .mm-revlist .mm-revlist__form-title { color: var(--mm-paper); }
.mm-band--ink .mm-revlist__row label, .mm-band--ink .mm-revlist__rate legend, .mm-band--ink .mm-revlist__consent label { color: var(--mm-on-ink); }
.mm-band--ink .mm-revlist__rate-face { border-color: rgba(245, 245, 240, .55); }
.mm-band--ink .mm-revlist__box { border-color: var(--mm-paper); }
@media (max-width: 860px) {
	.mm-revlist { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.mm-revlist__summary { position: static; }
	.mm-revlist__item { padding: 22px 0; }
	.mm-revlist .mm-revlist__text p { font-size: 16px; }
	.mm-revlist__rate-row { gap: 6px; }
	.mm-revlist__rate-word { font-size: 14px; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .mm-revlist__rate-face { transition: none; } }

/* ---------- Questions (mm_questions, KS-03): the heading and a button beside bold rows ----------
   No picture. Each row: the question in bold, a square cell with a plus that turns to a
   cross when the row opens; hairlines between rows inside the block. */
.mm-questions { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.mm-questions__say { position: sticky; top: calc(var(--mm-header-h) + 24px); min-width: 0; }
.mm-questions__title { margin: 0; font: 400 var(--mm-h2)/.92 var(--mm-display); letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; }
.mm-questions .mm-questions__lead { max-width: 34ch; margin: 18px 0 0; font-size: var(--mm-text); line-height: 1.7; color: var(--mm-mute); }
.mm-band--ink .mm-questions .mm-questions__lead { color: var(--mm-on-ink); }
.mm-questions .mm-questions__cta { margin: 28px 0 0; }
.mm-questions__list { min-width: 0; border-top: 1px solid var(--mm-line); }
.mm-questions__item { border-bottom: 1px solid var(--mm-line); }
.mm-band--ink .mm-questions__list, .mm-band--ink .mm-questions__item { border-color: var(--mm-line-ink); }
.mm-questions__q { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none; font: 700 clamp(18px, 1.45vw, 21px)/1.35 var(--mm-body); }
.mm-questions__q::-webkit-details-marker { display: none; }
/* The square cell stays put; only the plus inside it turns to a cross. */
.mm-questions__icon { position: relative; flex: none; width: 40px; height: 40px; box-shadow: inset 0 0 0 1.5px currentColor; transition: background-color .2s, color .2s, box-shadow .2s; }
.mm-questions__icon::before {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(currentColor, currentColor) center / 16px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 16px no-repeat;
	transition: transform .35s var(--mm-reveal-ease);
}
.mm-questions__q:hover .mm-questions__text { color: var(--mm-accent-text); }
.mm-questions__item[open] .mm-questions__icon { color: var(--mm-ink); background-color: var(--mm-accent); box-shadow: inset 0 0 0 1.5px var(--mm-accent); }
.mm-questions__item[open] .mm-questions__icon::before { transform: rotate(45deg); }
.mm-questions__q:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: 4px; }
.mm-questions__a { padding: 0 64px 24px 0; }
.mm-questions__a p { margin: 0 0 12px; max-width: 70ch; font-size: 16px; line-height: 1.75; color: var(--mm-ink); }
.mm-questions__a p:last-child { margin-bottom: 0; }
.mm-band--ink .mm-questions__a p { color: var(--mm-on-ink); }
@media (max-width: 860px) {
	.mm-questions { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.mm-questions__say { position: static; }
	.mm-questions__q { padding: 18px 0; font-size: 17px; }
	.mm-questions__icon { width: 36px; height: 36px; }
	.mm-questions__a { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .mm-questions__icon, .mm-questions__icon::before { transition: none; } }
/* With a field (mm_questions() with field, round 4 KS-08): the left column is a liquid light panel.
   The field fills it under a shade that rises from the bottom; the heading, line and button sit at
   its bottom left in white. Desktop: tall beside the list and kept in view. Phones: a shorter panel. */
.mm-questions--field .mm-questions__say {
	isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
	min-height: min(560px, calc(100vh - var(--mm-header-h) - 48px)); padding: clamp(24px, 2.4vw, 36px);
	color: var(--mm-paper); background: var(--mm-ink);
}
.mm-questions--field .mm-questions__field { z-index: -1; }
.mm-questions--field .mm-questions__say::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to top, rgba(13, 13, 13, .8) 0%, rgba(13, 13, 13, .35) 50%, rgba(13, 13, 13, 0) 100%); }
.mm-questions--field .mm-questions__title { color: var(--mm-paper); }
.mm-questions--field .mm-questions__lead { color: var(--mm-on-ink); }
@media (max-width: 860px) {
	.mm-questions--field .mm-questions__say { position: relative; top: auto; min-height: 280px; padding: 24px 22px; }
}

/* ---------- Liquid light panels (mm_field_panels, KS-08): one field per quality ---------- */
.mm-fpanels { display: grid; grid-template-columns: repeat(var(--mm-fpanels-n, 3), minmax(0, 1fr)); gap: var(--mm-grid-gap); margin: 0; padding: 0; list-style: none; }
.mm-fpanel {
	position: relative; isolation: isolate; overflow: hidden; container-type: inline-size;
	display: flex; align-items: flex-end; min-width: 0; min-height: clamp(320px, 30vw, 420px);
	padding: clamp(20px, 2.2vw, 32px); background: var(--mm-ink);
}
.mm-fpanel::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(13, 13, 13, .6) 0%, rgba(13, 13, 13, .12) 45%, rgba(13, 13, 13, 0) 70%); }
.mm-fpanel__word { position: relative; z-index: 2; max-width: 100%; font: 400 clamp(40px, 17cqi, 120px)/.86 var(--mm-display); letter-spacing: .005em; text-transform: uppercase; color: var(--mm-paper); text-wrap: balance; overflow-wrap: anywhere; }
@media (max-width: 760px) {
	.mm-fpanels { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.mm-fpanel { min-height: 140px; padding: 18px 20px; }
	.mm-fpanel__word { font-size: clamp(40px, 12cqi, 60px); }
}

/* ---------- Dose line (mm_dose_line, KS-11): the levels on one line, the recommended one green ----------
   Each level a square mark on the line over a cell with its name and this product's
   amount. The recommended level's cell is green; its words sit above it. Up to 1000 px
   (phones, tablets) the line runs down the screen and the words sit in the green level. */
/* The levels share their rows (subgrid), so every amount sits on one line even when a name wraps. */
.mm-doseline { position: relative; display: grid; grid-template-columns: repeat(var(--mm-doseline-n, 6), minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--mm-grid-gap); margin: 0; padding: 0; list-style: none; }
.mm-doseline.has-say { padding-top: 96px; }
.mm-doseline::before { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: currentColor; opacity: .22; }
.mm-doseline.has-say::before { top: 103px; }
.mm-doseline__level { position: relative; display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; min-width: 0; padding-top: 32px; }
.mm-doseline__mark { position: absolute; top: 0; left: 0; width: 16px; height: 16px; background: var(--mm-band-bg, var(--mm-paper)); box-shadow: inset 0 0 0 2px currentColor; }
.mm-doseline__name, .mm-doseline__amount { display: block; padding-inline: 18px; background: var(--mm-cell); }
.mm-band--ink .mm-doseline__name, .mm-band--ink .mm-doseline__amount { background: var(--mm-cell-ink); }
.mm-doseline__name { padding-top: 18px; font: 400 clamp(22px, 1.9vw, 28px)/.95 var(--mm-display); letter-spacing: .01em; text-transform: uppercase; overflow-wrap: anywhere; }
.mm-doseline__amount { padding-top: 10px; padding-bottom: 18px; font: 600 clamp(17px, 1.4vw, 20px)/1.3 var(--mm-body); }
.mm-doseline__level.is-on .mm-doseline__mark { background: var(--mm-accent); box-shadow: none; }
.mm-doseline__level.is-on .mm-doseline__name, .mm-doseline__level.is-on .mm-doseline__amount { color: var(--mm-ink); background: var(--mm-accent); }
.mm-doseline__say { position: absolute; left: 0; bottom: calc(100% + 12px); width: max(100%, 300px); font: 600 18px/1.35 var(--mm-body); }
.mm-doseline__say strong { display: block; margin-bottom: 4px; font: 700 14px/1.3 var(--mm-body); color: var(--mm-accent-text); }
.mm-doseline__level.is-on:last-child .mm-doseline__say { left: auto; right: 0; text-align: right; }
/* Rollout S9 (KS-11): a level that opens its own section (the dosing guide). The whole
   cell is the link; pointing at it or focusing it fills it green, as the picked level. */
.mm-doseline__link { color: inherit; text-decoration: none; }
.mm-doseline__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.mm-doseline__link:focus-visible { outline: none; }
.mm-doseline__level.is-link:has(.mm-doseline__link:focus-visible) { outline: 3px solid var(--mm-accent); outline-offset: 4px; }
.mm-doseline__level.is-link .mm-doseline__name, .mm-doseline__level.is-link .mm-doseline__amount { transition: background .2s, color .2s; }
.mm-doseline__level.is-link:is(:hover, :focus-within) .mm-doseline__mark { background: var(--mm-accent); box-shadow: none; }
.mm-doseline__level.is-link:is(:hover, :focus-within) .mm-doseline__name, .mm-doseline__level.is-link:is(:hover, :focus-within) .mm-doseline__amount { color: var(--mm-ink); background: var(--mm-accent); }
@media (prefers-reduced-motion: reduce) { .mm-doseline__level.is-link .mm-doseline__name, .mm-doseline__level.is-link .mm-doseline__amount { transition: none; } }
/* One level alone: centred, its words above it, no line. */
.mm-doseline.is-single { grid-template-columns: minmax(0, 460px); justify-content: center; padding-top: 0; }
.mm-doseline.is-single::before, .mm-doseline.is-single .mm-doseline__mark { display: none; }
.mm-doseline.is-single .mm-doseline__level { grid-row: auto; grid-template-rows: none; padding-top: 0; }
.mm-doseline.is-single .mm-doseline__level .mm-doseline__say { position: static; width: auto; margin: 0 0 16px; text-align: center; }
.mm-doseline.is-single .mm-doseline__name, .mm-doseline.is-single .mm-doseline__amount { text-align: center; }
@media (max-width: 1000px) {
	.mm-doseline { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 10px; }
	.mm-doseline.has-say { padding-top: 0; }
	.mm-doseline::before, .mm-doseline.has-say::before { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
	.mm-doseline__level { display: flex; flex-direction: column; grid-row: auto; padding: 0 0 0 34px; }
	.mm-doseline__mark { top: 20px; }
	/* The words sit in the green level, under its amount, so the mark stays with the level. */
	.mm-doseline__say { position: static; order: 3; width: auto; padding: 0 18px 18px; color: var(--mm-ink); background: var(--mm-accent); font-size: 16px; }
	.mm-doseline__say strong { color: var(--mm-ink); }
	.mm-doseline__level.is-on .mm-doseline__amount { flex: none; padding-bottom: 12px; }
	.mm-doseline__level.is-on:last-child .mm-doseline__say { text-align: left; }
	.mm-doseline.is-single .mm-doseline__level .mm-doseline__say { margin: 0; text-align: left; }
	.mm-doseline.is-single .mm-doseline__level { padding: 0; }
}

/* ---------- Builder D (rollout): article card stand in ---------- */
/* A post whose picture is not on this install (mm_post_standin): a drawing in the
   journey's hand, cream on the ink cell, never an empty square. On ink bands the cell
   takes the product card's ink so it still reads as a cell. */
.mm-post__standin { display: grid; place-items: center; width: 100%; height: 100%; color: var(--mm-paper); --mm-glyph: 34%; --mm-glyph-tone: var(--mm-accent); }
.mm-post__standin .mm-glyph { transition: transform .7s var(--mm-reveal-ease); }
.mm-post__standin .mm-glyph__tone { opacity: .85; }
.mm-post__link:hover .mm-post__standin .mm-glyph { transform: scale(1.05); }
.mm-band--ink .mm-post__standin { background: #1b1b1b; box-shadow: inset 0 0 0 1px rgba(245, 245, 240, .08); }
@media (prefers-reduced-motion: reduce) { .mm-post__standin .mm-glyph { transition: none; } }
/* Round 4 (S6): the cover is a liquid light field (mm_post_standin), filling the cell. */
.mm-post__standin { position: relative; overflow: hidden; }
.mm-post__standin .mm-field { transition: transform .7s var(--mm-reveal-ease); }
.mm-post__link:hover .mm-post__standin .mm-field { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .mm-post__standin .mm-field { transition: none; } }

/* ---------- Glyphs (mm_glyph): Phosphor duotone, line in currentColor, tone in the accent ---------- */
.mm-glyph { display: inline-grid; place-items: center; width: var(--mm-glyph, 56px); aspect-ratio: 1; flex: none; }
.mm-glyph svg { width: 100%; height: 100%; fill: currentColor; }
.mm-glyph__tone { fill: var(--mm-glyph-tone, var(--mm-accent)); opacity: .55; }

/* ---------- Colour field (mm_field): a grainy, slowly moving blend of colours ----------
   Fills its positioned parent. Four colour pools and a dark pool over a dark base, a
   blurred turning swirl and a coarse grain, like Ben's "Five doors" reference. Transform only motion. */
.mm-field {
	--mm-field-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 2.2 -.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
	position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
	background: var(--f-base);
}
.mm-field i {
	position: absolute; width: 96%; height: 96%; will-change: transform;
	background: radial-gradient(closest-side, var(--c) 0%, color-mix(in srgb, var(--c) 70%, transparent) 38%, transparent 100%);
	animation: mm-field-drift var(--d, 26s) ease-in-out infinite alternate;
}
.mm-field i:nth-child(1) { --c: var(--f-1); left: -34%; top: -34%; --d: 23s; }
.mm-field i:nth-child(2) { --c: var(--f-2); left: 40%; top: -40%; --d: 29s; animation-delay: -9s; }
.mm-field i:nth-child(3) { --c: var(--f-3); left: -28%; top: 44%; --d: 31s; animation-delay: -15s; }
.mm-field i:nth-child(4) { --c: var(--f-4); left: 44%; top: 40%; --d: 27s; animation-delay: -5s; }
.mm-field i:nth-child(5) { --c: var(--f-base); left: 4%; top: 6%; width: 74%; height: 74%; --d: 34s; animation-delay: -20s; } /* a dark pool for depth */
.mm-field::before {
	content: ''; position: absolute; left: -35%; top: -35%; width: 170%; height: 170%;
	opacity: .55; mix-blend-mode: soft-light; filter: blur(36px); will-change: transform;
	background: conic-gradient(from 40deg, var(--f-1), var(--f-3), var(--f-2), var(--f-4), var(--f-1));
	animation: mm-field-turn 70s linear infinite;
}
.mm-field::after {
	content: ''; position: absolute; inset: 0;
	background-image: var(--mm-field-grain); background-size: 200px; opacity: .7; mix-blend-mode: overlay;
}
@keyframes mm-field-drift {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to { transform: translate3d(9%, 7%, 0) scale(1.18); }
}
@keyframes mm-field-turn { to { transform: rotate(1turn); } }
.mm-field--still i, .mm-field--still::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .mm-field i, .mm-field::before { animation: none; } }

/* Round 4 liquid light: field.js draws a canvas over the CSS field and adds is-live;
   the CSS pools then step aside and the grain sits over the canvas. */
.mm-field__gl { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; }
.mm-field.is-live i, .mm-field.is-live::before { display: none; }
.mm-field::after { z-index: 1; }
.mm-field.is-live::after { opacity: .5; }
/* Under the canvas, on every device: a still frame of the same field, rendered from field.js (1 to 3 KB each).
   The CSS pools above are retired: on Ben's phone the field loaded right and then turned to the pools (31 Oct).
   Phones and tablets draw no canvas at all (field.js), so they show these frames and nothing changes after load. */
.mm-field { background: var(--f-base) 50% 50% / cover no-repeat; }
.mm-field i, .mm-field::before { display: none; }
.mm-field::after { opacity: .5; }
.mm-field--brand { background-image: url(../img/field/brand.webp); }
.mm-field--moss { background-image: url(../img/field/moss.webp); }
.mm-field--mint { background-image: url(../img/field/mint.webp); }
.mm-field--cocoa { background-image: url(../img/field/cocoa.webp); }
.mm-field--bloom { background-image: url(../img/field/bloom.webp); }
.mm-field--acid { background-image: url(../img/field/acid.webp); }
.mm-field--night { background-image: url(../img/field/night.webp); }
.mm-field--aura { background-image: url(../img/field/aura.webp); }
.mm-field--iris { background-image: url(../img/field/iris.webp); }
.mm-field--ash { background-image: url(../img/field/ash.webp); }

/* Palettes (the same five colours as field.js): green threads through every one. */
.mm-field--brand { --f-base: #040604; --f-1: #3d7a14; --f-2: #c8e644; --f-3: #0b2a10; --f-4: #6f9e1c; }
.mm-field--moss  { --f-base: #070605; --f-1: #9a6a17; --f-2: #c8e644; --f-3: #2a1d0b; --f-4: #f2c25a; }
.mm-field--mint  { --f-base: #030707; --f-1: #1d8670; --f-2: #c8e644; --f-3: #082824; --f-4: #9be7ff; }
.mm-field--cocoa { --f-base: #080505; --f-1: #8a4a2c; --f-2: #e6ae68; --f-3: #2b150e; --f-4: #c8e644; }
.mm-field--bloom { --f-base: #080409; --f-1: #a8477a; --f-2: #c8e644; --f-3: #30102a; --f-4: #ffc0da; }
.mm-field--acid  { --f-base: #050605; --f-1: #86bc1d; --f-2: #eaff8c; --f-3: #14300a; --f-4: #c8e644; }
.mm-field--night { --f-base: #04050a; --f-1: #3a4ec0; --f-2: #c8e644; --f-3: #0f1538; --f-4: #a6b2ff; }
.mm-field--aura  { --f-base: #050407; --f-1: #1d8670; --f-2: #c8e644; --f-3: #1d0f3a; --f-4: #1d8670; }
.mm-field--iris  { --f-base: #06040b; --f-1: #6646cf; --f-2: #c8e644; --f-3: #1c1038; --f-4: #d8ccff; }
.mm-field--ash   { --f-base: #050505; --f-1: #6e716c; --f-2: #e9eae4; --f-3: #1b1c1b; --f-4: #c8e644; }

/* ==========================================================================
   Home round 3, builder C: the dose scale, the lead tile and the delivery map.
   Markup: the builder C block at the end of inc/kit.php and
   template-parts/home/ordering.php. Behaviour: kit.js (choice tiles drive the
   scale; the carousel starts on a lead tile; the postal code check).
   ========================================================================== */

/* ---------- Dose scale: the doses as tiles on one line, light to strong ---------- */
.mm-dosage { --mm-dosage-n: 6; --mm-dosage-gap: 12px; margin: 0 0 clamp(26px, 2.8vw, 38px); overflow-x: auto; scrollbar-width: none; padding: 2px 6px 10px 2px; }
.mm-dosage::-webkit-scrollbar { display: none; }
.mm-dosage__row {
	position: relative; display: grid; gap: var(--mm-dosage-gap); padding-top: 34px;
	grid-template-columns: repeat(var(--mm-dosage-n), minmax(0, 1fr));
	width: max(100%, calc(var(--mm-dosage-n) * 158px + (var(--mm-dosage-n) - 1) * var(--mm-dosage-gap)));
}
/* The line runs from the first mark to the last, lime (lightest) to pink (strongest). */
.mm-dosage__row::before {
	content: ""; position: absolute; top: 13px; height: 4px;
	left: calc((100% - (var(--mm-dosage-n) - 1) * var(--mm-dosage-gap)) / var(--mm-dosage-n) / 2);
	right: calc((100% - (var(--mm-dosage-n) - 1) * var(--mm-dosage-gap)) / var(--mm-dosage-n) / 2);
	background: linear-gradient(90deg, var(--mm-green), var(--mm-accent));
}
.mm-dosage__tile {
	position: relative; display: grid; justify-items: center; align-content: start; gap: 10px; min-width: 0;
	padding: 18px 10px 16px; color: inherit; background: transparent; border: 2px solid currentColor; cursor: pointer; text-align: center;
	transition: background .2s, color .2s, box-shadow .2s, transform .2s, border-color .2s;
}
/* Each tile's square mark on the line, its colour taken from where it sits on the line. */
.mm-dosage__tile::before {
	content: ""; position: absolute; left: 50%; top: -28px; width: 14px; height: 14px; margin-left: -7px;
	background: color-mix(in srgb, var(--mm-accent) calc((var(--mm-dosage-i) - 1) * 100% / (var(--mm-dosage-n) - 1)), var(--mm-green));
	box-shadow: 0 0 0 3px var(--mm-band-bg, var(--mm-paper)); transition: transform .2s;
}
.mm-dosage__name { font: 400 28px/.95 var(--mm-display); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.mm-dosage__range { font: 700 21px/1.15 var(--mm-body); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mm-dosage__meter { display: flex; gap: 3px; }
.mm-dosage__meter i { width: 12px; height: 12px; background: rgba(13, 13, 13, .14); }
.mm-dosage__meter i.is-on { background: var(--mm-accent); }
.mm-dosage__tile:hover { background: rgba(200, 230, 68, .14); }
.mm-dosage__tile:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: 3px; }
.mm-dosage__tile.is-on { background: var(--mm-accent); color: var(--mm-ink); border-color: var(--mm-ink); box-shadow: none; transform: translate(-2px, -2px); }
.mm-dosage__tile.is-on::before { transform: translate(2px, 2px) scale(1.4); box-shadow: 0 0 0 3px var(--mm-band-bg, var(--mm-paper)), 0 0 0 5px var(--mm-ink); }
.mm-dosage__tile.is-on .mm-dosage__meter i { background: rgba(13, 13, 13, .2); }
.mm-dosage__tile.is-on .mm-dosage__meter i.is-on { background: var(--mm-ink); }
.mm-band--ink .mm-dosage__tile { border-color: rgba(245, 245, 240, .55); }
.mm-band--ink .mm-dosage__meter i { background: rgba(245, 245, 240, .18); }
.mm-band--ink .mm-dosage__tile.is-on { border-color: var(--mm-accent); box-shadow: none; }
.mm-band--ink .mm-dosage__tile.is-on::before { box-shadow: 0 0 0 3px var(--mm-band-bg), 0 0 0 5px var(--mm-green); }
/* What the picked dose is like: one sentence, then its products. */
.mm-dose__say { max-width: 58ch; margin: 0 auto clamp(28px, 3vw, 40px); text-align: center; font-size: 20px; line-height: 1.6; text-wrap: balance; }
.mm-band--light .mm-dose__say { color: #3d3d3a; }
.mm-band--ink .mm-dose__say { color: var(--mm-on-ink); }
@media (max-width: 760px) {
	.mm-dosage { --mm-dosage-gap: 10px; margin-inline: calc(var(--mm-gutter) * -1); padding-inline: var(--mm-gutter); scroll-padding-inline: var(--mm-gutter); }
	.mm-dosage__row { width: calc(var(--mm-dosage-n) * 146px + (var(--mm-dosage-n) - 1) * var(--mm-dosage-gap)); }
	.mm-dosage__name { font-size: 25px; }
	.mm-dosage__range { font-size: 17px; }
	.mm-dose__say { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .mm-dosage__tile, .mm-dosage__tile::before { transition: none; } }

/* ---------- Lead tile: a band's photo and phrase, the first item of its carousel ---------- */
.mm-lead {
	position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end;
	width: 100%; min-height: 100%; overflow: hidden; padding: clamp(20px, 2vw, 28px);
	color: var(--mm-paper); background: var(--mm-ink); text-decoration: none;
}
.mm-lead__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--mm-lead-pos, 50% 50%); transition: transform .8s var(--mm-reveal-ease); }
/* A product cutout (transparent picture) shows whole at the top of the tile, the words under it. */
.mm-lead__img--cutout { inset: 7% 5% auto; width: 90%; height: 58%; object-fit: contain; object-position: 50% 0; }
.mm-lead::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(13, 13, 13, .95) 0%, rgba(13, 13, 13, .82) 30%, rgba(13, 13, 13, .2) 62%, rgba(13, 13, 13, 0) 78%); }
.mm-lead__words { display: grid; gap: 12px; }
.mm-lead__title { margin: 0; font: 400 clamp(38px, 3.3vw, 48px)/.9 var(--mm-display); letter-spacing: .005em; text-transform: uppercase; color: var(--mm-paper); text-wrap: balance; transition: color .2s; }
.mm-lead__text { font-size: var(--mm-text-sm); line-height: 1.6; color: var(--mm-on-ink); }
a.mm-lead:hover .mm-lead__img, a.mm-lead:focus-visible .mm-lead__img { transform: scale(1.05); }
a.mm-lead:hover .mm-lead__title { color: var(--mm-accent-text); }
a.mm-lead:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: 3px; }
.mm-band--ink .mm-lead { box-shadow: inset 0 0 0 1px rgba(245, 245, 240, .08); }
@media (prefers-reduced-motion: reduce) { .mm-lead__img, .mm-lead__title { transition: none; } }

/* ---------- Delivery map: every province and territory with its time, a postal code check ---------- */
.mm-ship { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(24px, 2.6vw, 34px); padding: clamp(20px, 3vw, 40px); color: var(--mm-ink); background: var(--mm-white); }
/* The check: a white block in the questions' look, the first question of the column. */
.mm-ship__check { padding: 20px 24px 24px; color: var(--mm-ink); background: var(--mm-white); }
.mm-ship__label { display: block; margin: 0 0 14px; font: 400 25px/1 var(--mm-display); letter-spacing: .01em; text-transform: uppercase; }
/* The button drops under the field, full width, before the field would cut its placeholder. */
.mm-ship__field { display: flex; flex-wrap: wrap; gap: 10px; }
.mm-ship__input {
	flex: 999 1 220px; min-width: 0; height: 52px; padding: 0 16px; border-radius: 0;
	font: 700 17px/1 var(--mm-body); letter-spacing: .08em; text-transform: uppercase;
	color: var(--mm-ink); background: var(--mm-paper); border: 2px solid var(--mm-ink);
}
.mm-ship__input::placeholder { color: #8a8a84; letter-spacing: .04em; }
.mm-ship__input:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: 3px; }
.mm-ship__field .mm-btn { flex: 1 0 auto; height: 52px; }
.mm-ship__answer { margin: 14px 0 0; font-size: 16px; line-height: 1.55; }
.mm-ship__answer:empty { display: none; }
.mm-ship__answer strong { font-weight: 700; }
.mm-ship__answer.is-error { color: var(--mm-highlight-text); }
/* The map: provinces filled by delivery time, the time set on each one. */
.mm-ship__map { position: relative; aspect-ratio: 1000 / 856; container-type: inline-size; }
.mm-ship__map svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.mm-ship__prov { stroke: var(--mm-white); stroke-width: 1.4; stroke-linejoin: round; transition: opacity .3s; }
.mm-ship__prov.is-fast { fill: var(--mm-accent); }
.mm-ship__prov.is-std { fill: var(--mm-ink); }
.mm-ship__prov.is-tbc { fill: #4a4744; }
.mm-ship__map.has-hit .mm-ship__prov:not(.is-hit), .mm-ship__map.has-hit .mm-ship__tag:not(.is-hit) { opacity: .25; }
.mm-ship__tags { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.mm-ship__tag {
	position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
	display: grid; justify-items: center; gap: 2px; text-align: center; white-space: nowrap; color: var(--mm-paper); transition: opacity .3s;
}
/* A halo in the province's own colour keeps a label readable where it runs past a border. */
.mm-ship__tag { --halo: var(--mm-ink); text-shadow: 0 0 2px var(--halo), 0 0 4px var(--halo), 0 0 7px var(--halo); }
.mm-ship__tag.is-fast { --halo: var(--mm-accent); color: var(--mm-ink); }
.mm-ship__tag.is-tbc { --halo: #4a4744; }
.mm-ship__tag.is-sea { --halo: var(--mm-white); color: var(--mm-ink); }
.mm-ship__code { font: 400 clamp(14px, 3.4cqw, 24px)/1 var(--mm-display); letter-spacing: .05em; }
.mm-ship__time { font: 700 clamp(10px, 2.05cqw, 14px)/1.1 var(--mm-body); }
@container (max-width: 480px) { .mm-ship__time { display: none; } }
/* The list under the map: provinces grouped by delivery time. */
.mm-ship__list { display: grid; gap: 16px; margin: 0; }
.mm-ship__row { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); align-items: baseline; gap: 6px 18px; }
.mm-ship__row dt { display: flex; align-items: center; gap: 12px; font: 400 26px/1 var(--mm-display); letter-spacing: .01em; text-transform: uppercase; }
.mm-ship__key { flex: none; width: 18px; height: 18px; }
.mm-ship__key.is-fast { background: var(--mm-accent); }
.mm-ship__key.is-std { background: var(--mm-ink); }
.mm-ship__key.is-tbc { background: #4a4744; }
.mm-ship__row dd { margin: 0; font-size: var(--mm-text-sm); line-height: 1.6; color: #3d3d3a; }
@media (max-width: 600px) {
	.mm-ship__row { grid-template-columns: 1fr; }
	.mm-ship__row dd { padding-left: 30px; }
	.mm-ship__field .mm-btn { padding-left: 20px; }
}
@media (prefers-reduced-motion: reduce) { .mm-ship__prov, .mm-ship__tag { transition: none; } }

/* ==========================================================================
   Home round 3, builder B: the door bento (mm_bento), the feeling fields
   (mm_feelings) and the featured moment (mm_feature). All three stand on the
   colour field (mm_field). Markup at the end of inc/kit.php.
   ========================================================================== */

/* ---------- Door bento: category doors on colour fields ----------
   Four columns: the large door 2 by 2, the wide door 2 by 1, then small doors; the
   last door spans what is left of its row (--mm-span, set by mm_bento). Phones: two
   columns (--mm-span-m). The photo stands on the door's bottom edge; the words sit
   top left over a soft shade. */
.mm-bento__grid {
	display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(220px, 17.5vw, 256px);
	grid-auto-flow: row dense; gap: clamp(8px, .8vw, 12px); list-style: none; margin: 0; padding: 0;
}
.mm-bento__cell { grid-column: span var(--mm-span, 4); min-width: 0; }
.mm-bento__cell--lg { grid-row: span 2; }
.mm-bento__door {
	--mm-bento-pad: clamp(18px, 1.8vw, 28px);
	position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end;
	height: 100%; overflow: hidden; padding: var(--mm-bento-pad);
	color: var(--mm-paper); text-decoration: none; background: var(--mm-ink);
}
/* The words sit on a calm floor: a shade rises from the bottom edge only. */
.mm-bento__door::after {
	content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(0deg, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .18) 38%, rgba(0, 0, 0, 0) 62%);
}
.mm-bento__words { position: relative; z-index: 3; display: grid; justify-items: start; gap: 8px; }
.mm-bento__name { font: 400 clamp(28px, 2.4vw, 36px)/.9 var(--mm-display); letter-spacing: .01em; text-transform: uppercase; color: var(--mm-paper); text-wrap: balance; }
.mm-bento__sub { max-width: 30ch; font: 500 14px/1.4 var(--mm-body); color: rgba(255, 255, 255, .86); text-wrap: pretty; }
.mm-bento__cell--lg .mm-bento__name { max-width: 7ch; font-size: clamp(64px, 6.6vw, 100px); }
/* Rollout S7: the large door's name breaks between words as before (one word a line) without
   a long word running past its box (the width checks flagged "MUSHROOMS" past 7ch). */
.mm-bento__cell--lg .mm-bento__name { max-width: min-content; }
.mm-bento__cell--lg .mm-bento__sub { font-size: 16px; }
.mm-bento__cell--lg .mm-bento__words { gap: 12px; }
.mm-bento__cell--wide .mm-bento__name { font-size: clamp(40px, 3.6vw, 54px); }
.mm-bento__cell--wide .mm-bento__sub { font-size: 15px; }

/* The arrow cell: the button's icon cell, alone, at the door's top right. */
.mm-bento__go {
	--mm-go: 44px;
	position: absolute; z-index: 3; top: var(--mm-bento-pad); right: var(--mm-bento-pad);
	width: var(--mm-go); height: var(--mm-go); background: var(--mm-green); border-radius: var(--mm-radius);
}
.mm-bento__go::after {
	content: ''; position: absolute; inset: 0; background: var(--mm-ink);
	-webkit-mask: var(--mm-icon-arrow) 50% 50% / 20px no-repeat, var(--mm-icon-arrow) -100% 200% / 20px no-repeat;
	mask: var(--mm-icon-arrow) 50% 50% / 20px no-repeat, var(--mm-icon-arrow) -100% 200% / 20px no-repeat;
	transition: -webkit-mask-position .42s var(--mm-ease-out), mask-position .42s var(--mm-ease-out);
}
.mm-bento__door:hover .mm-bento__go::after, .mm-bento__door:focus-visible .mm-bento__go::after {
	-webkit-mask-position: 200% -100%, 50% 50%; mask-position: 200% -100%, 50% 50%;
}
.mm-bento__cell--lg .mm-bento__go { --mm-go: 52px; }

/* An optional picture or glyph (Shop and Notebook doors): whole, never cropped, in
   the upper part of the door, clear of the words and the arrow cell. */
.mm-bento__pic {
	position: absolute; z-index: 2; inset: var(--mm-bento-pad) calc(var(--mm-bento-pad) + 56px) 46% var(--mm-bento-pad);
	display: grid; place-items: center; pointer-events: none; transition: transform .7s var(--mm-reveal-ease);
}
.mm-bento__pic img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .45)); }
.mm-bento__door:hover .mm-bento__pic, .mm-bento__door:focus-visible .mm-bento__pic { transform: translateY(-8px); }
.mm-bento__door:focus-visible { outline: 3px solid var(--mm-green); outline-offset: 3px; }
@media (max-width: 900px) {
	.mm-bento__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(168px, 44vw, 230px); }
	.mm-bento__cell { grid-column: span var(--mm-span-m, 1); }
	.mm-bento__door { --mm-bento-pad: 16px; }
	.mm-bento__go { --mm-go: 40px; }
	.mm-bento__cell--lg .mm-bento__go { --mm-go: 44px; }
	.mm-bento__name { font-size: clamp(26px, 7vw, 36px); }
	.mm-bento__sub { font-size: 14px; } /* rollout S9: small text at least 14 px (G-04) */
	.mm-bento__cell--lg .mm-bento__name { font-size: clamp(56px, 16vw, 88px); }
	.mm-bento__cell--lg .mm-bento__sub { font-size: 15px; }
	.mm-bento__cell--wide .mm-bento__name { font-size: clamp(36px, 10vw, 52px); }
}
@media (prefers-reduced-motion: reduce) {
	.mm-bento__pic, .mm-bento__go::after { transition: none; }
}

/* ---------- Feeling fields: tall colour fields that widen, pick and combine ----------
   Each field is a toggle button. Pointing at it, focusing it or picking it widens it
   (flex-grow; the name scales with the field's own width through container units).
   Phones: the fields stack as bands, a picked band opens to show its line. */
.mm-feel__fields { display: flex; gap: var(--mm-grid-gap); height: clamp(400px, 34vw, 480px); }
.mm-feel__field {
	--mm-feel-pad: clamp(18px, 1.9vw, 28px);
	position: relative; isolation: isolate; flex: 1 1 0; min-width: 0; overflow: hidden; container-type: inline-size;
	display: flex; flex-direction: column; justify-content: flex-end; padding: var(--mm-feel-pad);
	color: var(--mm-paper); text-align: left; cursor: pointer; border: 0; border-radius: 0; background: #111;
	transition: flex-grow .65s var(--mm-reveal-ease), box-shadow .25s, transform .25s;
}
.mm-feel__field::after {
	content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(to top, rgba(13, 13, 13, .66) 0%, rgba(13, 13, 13, .2) 46%, rgba(13, 13, 13, 0) 70%);
}
.mm-feel__field .mm-field { transition: transform 1.6s var(--mm-reveal-ease); }
.mm-feel__words { position: relative; z-index: 2; display: grid; gap: 14px; width: 100%; }
.mm-feel__name {
	font: 400 clamp(30px, 27cqi, 136px)/.84 var(--mm-display); letter-spacing: .005em; text-transform: uppercase;
	color: var(--mm-paper); white-space: nowrap;
}
.mm-feel__more { display: grid; gap: 10px; }
.mm-feel__line { max-width: 30ch; font: 400 16px/1.5 var(--mm-body); color: rgba(245, 245, 240, .9); text-wrap: pretty; }
.mm-feel__count { font: 700 13px/1.3 var(--mm-body); letter-spacing: .05em; text-transform: uppercase; color: var(--mm-paper); }
.mm-feel__box {
	position: absolute; z-index: 2; top: var(--mm-feel-pad); right: var(--mm-feel-pad);
	display: grid; place-items: center; width: 30px; height: 30px; color: transparent; border: 2px solid rgba(245, 245, 240, .85);
	transition: background .2s, color .2s, border-color .2s;
}
.mm-feel__box .mm-icon { width: 20px; height: 20px; stroke-width: 2.8; }
.mm-feel__field:hover, .mm-feel__field:focus-visible, .mm-feel__field[aria-pressed='true'] { flex-grow: 1.6; }
.mm-feel__field:hover .mm-field, .mm-feel__field:focus-visible .mm-field { transform: scale(1.06); }
.mm-feel__field:focus-visible { outline: 3px solid var(--mm-accent); outline-offset: 3px; }
.mm-feel__field[aria-pressed='true'] { box-shadow: none; transform: translate(-3px, -3px); }
.mm-feel__field[aria-pressed='true'] .mm-feel__box { color: var(--mm-ink); background: var(--mm-accent); border-color: var(--mm-accent); }
.mm-feel__field.is-none .mm-feel__count { opacity: .7; }
.mm-band--ink .mm-feel__field[aria-pressed='true'] { box-shadow: none; }
.mm-feel__status {
	min-height: 1.4em; margin: clamp(30px, 3.2vw, 44px) auto clamp(22px, 2.4vw, 32px); max-width: 64ch;
	text-align: center; font: 400 clamp(26px, 2.4vw, 34px)/1.05 var(--mm-display); letter-spacing: .01em; text-transform: uppercase; text-wrap: balance;
}
.mm-feel__status.is-note { font: 600 17px/1.5 var(--mm-body); letter-spacing: 0; text-transform: none; }
@media (max-width: 760px) {
	.mm-feel__fields { flex-direction: column; height: auto; gap: 10px; }
	.mm-feel__field {
		--mm-feel-pad: 18px; flex: none; min-height: 96px; justify-content: center; padding-right: 64px;
		transition: box-shadow .25s, transform .25s;
	}
	.mm-feel__field::after { background: linear-gradient(90deg, rgba(13, 13, 13, .6) 0%, rgba(13, 13, 13, .15) 60%, rgba(13, 13, 13, 0) 100%); }
	.mm-feel__box { top: 50%; margin-top: -15px; }
	.mm-feel__words { gap: 8px; }
	.mm-feel__name { font-size: 52px; }
	.mm-feel__more { gap: 8px; }
	.mm-feel__line { display: none; max-width: 34ch; font-size: 15px; }
	.mm-feel__field[aria-pressed='true'] { padding-block: 22px; }
	.mm-feel__field[aria-pressed='true'] .mm-feel__line { display: block; }
	.mm-feel__field[aria-pressed='true'] .mm-feel__box { top: 22px; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.mm-feel__field, .mm-feel__field .mm-field, .mm-feel__box { transition: none; }
}

/* ---------- Featured moment: a product told like a magazine page ----------
   Left, the stage: a tilted colour field panel that sways slowly, the product's cut
   out standing on the stage's bottom edge. Right, the copy. The columns share top
   and bottom edges. Made for an ink band. */
.mm-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 80px); align-items: stretch; }
.mm-feature__stage { position: relative; isolation: isolate; min-height: clamp(440px, 40vw, 580px); }
/* Round 4: the band is the green liquid light field; a shade from the right keeps the
   words calm, the picture stands on the field. */
.mm-band--feature { overflow: hidden; }
.mm-band--feature .mm-feature__bg { z-index: 0; }
.mm-band--feature::after {
	content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: linear-gradient(90deg, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .34) 46%, rgba(0, 0, 0, .62) 100%);
}
.mm-band--feature > .mm-wrap { position: relative; z-index: 1; }
.mm-feature__pic {
	position: absolute; z-index: 1; left: 50%; bottom: 0; width: auto; height: 92%; max-width: none; aspect-ratio: 1;
	object-fit: contain; object-position: 50% 100%; transform: translateX(-50%);
	filter: drop-shadow(0 40px 46px rgba(0, 0, 0, .6));
}
.mm-feature__copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-width: 0; }
.mm-feature__title { margin: 0; font: 400 clamp(54px, 6vw, 92px)/.88 var(--mm-display); letter-spacing: .005em; text-transform: uppercase; color: var(--mm-paper); text-wrap: balance; }
.mm-feature__line { margin: 20px 0 0; font: 400 clamp(24px, 2.1vw, 30px)/1.05 var(--mm-display); letter-spacing: .02em; text-transform: uppercase; color: var(--mm-paper); text-wrap: balance; }
.mm-feature__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; width: 100%; margin: 36px 0 0; padding: 0; list-style: none; }
.mm-feature__facts li { display: grid; align-content: start; gap: 8px; min-width: 0; }
.mm-feature__value { font: 400 clamp(36px, 3.4vw, 50px)/.9 var(--mm-display); letter-spacing: .01em; text-transform: uppercase; color: var(--mm-green); }
.mm-band--ink .mm-feature__label, .mm-feature__label { font: 500 15px/1.4 var(--mm-body); color: var(--mm-on-ink); }
.mm-band--ink .mm-feature__text, .mm-feature__text { max-width: 52ch; margin: 32px 0 0; font-size: var(--mm-text); line-height: 1.75; color: var(--mm-on-ink); }
.mm-feature__code { margin: 30px 0 0; }
.mm-feature__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 36px; }
.mm-band--ink .mm-feature__rating, .mm-feature__rating { display: flex; align-items: center; gap: 12px; margin: 0; font: 600 15px/1.3 var(--mm-body); color: var(--mm-on-ink); }
.mm-feature__rating .mm-stars { --mm-star-on: var(--mm-green); --mm-star-off: rgba(245, 245, 240, .22); }
@media (max-width: 860px) {
	.mm-feature { grid-template-columns: 1fr; gap: 32px; }
	.mm-feature__stage { min-height: 0; aspect-ratio: 1; }
	.mm-feature__facts { gap: 14px; margin-top: 28px; }
	.mm-feature__label { font-size: 14px; }
	.mm-feature__text { margin-top: 26px; }
	.mm-feature__actions { width: 100%; margin-top: 30px; }
	.mm-feature__actions .mm-btn { flex: 1 1 100%; }
}

/* ==========================================================================
   Rest round 3, builder C: the delivery block's side layout (mm_delivery with
   side) and even doors with glyphs (mm_bento_glyphs). Markup: the builder C
   block at the end of inc/kit.php.
   ========================================================================== */

/* ---------- Delivery block, side layout: the map alone on the left; on the right
   the check, the times and the questions. The columns share top and bottom edges
   (the map centres in its cell, the open question takes any difference). ---------- */
.mm-order--side { grid-template-rows: auto auto 1fr; grid-template-areas: "map check" "map times" "map qa"; }
.mm-order--side > .mm-ship { justify-content: center; }
.mm-order--side > .mm-ship__times { grid-area: times; padding: 24px; background: var(--mm-white); color: var(--mm-ink); }
.mm-order--side .mm-ship__times .mm-ship__row { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); }
.mm-order--side .mm-ship__times .mm-ship__row dt { font-size: 24px; }
@media (max-width: 1000px) {
	.mm-order--side { grid-template-rows: none; grid-template-areas: "check" "map" "times" "qa"; }
}
@media (max-width: 600px) {
	.mm-order--side .mm-ship__times { padding: 20px; }
	.mm-order--side .mm-ship__times .mm-ship__row { grid-template-columns: 1fr; }
}

/* ---------- Even doors with glyphs: the bento's small doors, four across and two
   on phones, the glyph standing in the cut out's place at the bottom right. ---------- */
.mm-bento--glyphs .mm-bento__pic {
	display: flex; align-items: flex-end; justify-content: flex-end; margin: 0;
	color: var(--mm-paper); --mm-glyph: clamp(72px, 7vw, 104px); --mm-glyph-tone: var(--mm-paper);
}
.mm-bento--glyphs .mm-bento__glyph { filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .35)); }
.mm-bento--glyphs .mm-glyph__tone { opacity: .28; }
.mm-bento--glyphs .mm-bento__name { max-width: 100%; }
@media (max-width: 900px) {
	.mm-bento--glyphs .mm-bento__grid { grid-auto-rows: clamp(150px, 40vw, 210px); }
	.mm-bento--glyphs .mm-bento__pic { --mm-glyph: clamp(52px, 15vw, 80px); }
	.mm-bento--glyphs .mm-bento__name { font-size: clamp(26px, 7vw, 36px); }
}

/* ==========================================================================
   Rest round 3, builder B: the dose scale's other modes and the dose facts'
   formats mode. Markup: mm_dose_scale() and mm_dose_facts() in inc/kit.php
   (Home's tabs and their look are unchanged). Behaviour: the builder B rest
   round 3 block at the end of kit.js (a static scale on a phone shows its mark).
   ========================================================================== */

/* ---------- Dose scale: marks placed by step, a dose with no intensity ---------- */
.mm-dosage[style*="--mm-dosage-of"] .mm-dosage__tile::before {
	background: color-mix(in srgb, var(--mm-accent) calc((var(--mm-dosage-i) - 1) * 100% / (var(--mm-dosage-of) - 1)), var(--mm-green));
}
/* On ink the filled segments stay pink (the faint ink rule came later and won); the
   picked tile's stay ink. */
.mm-band--ink .mm-dosage__meter i.is-on { background: var(--mm-accent); }
.mm-band--ink .mm-dosage__tile.is-on .mm-dosage__meter i.is-on { background: var(--mm-ink); }
.mm-dosage__tile.is-none::before { background: var(--mm-band-bg, var(--mm-paper)); box-shadow: 0 0 0 3px var(--mm-band-bg, var(--mm-paper)), inset 0 0 0 2px currentColor; }

/* Long names (a product's own dose names, the guide's intentions) wrap inside their
   tile; the ranges and meters still line up along the bottom of the row. */
.mm-dosage--wrap .mm-dosage__tile { grid-template-rows: minmax(0, 1fr) auto auto; align-content: stretch; }
.mm-dosage--wrap .mm-dosage__name { align-self: center; font-size: clamp(22px, 1.9vw, 26px); line-height: 1; white-space: normal; text-wrap: balance; }

/* Links: a contents row (every tile opens its band). */
a.mm-dosage__tile { text-decoration: none; }

/* Static: a chart, not a control. Flat tiles without a frame, offset or meter (the
   line already gives the order): faint, the marked doses filled pink; their marks
   on the line stay square and ringed, never enlarged as a picked tab's. */
.mm-dosage--static { margin-bottom: 0; }
ol.mm-dosage__row { margin: 0; padding-bottom: 0; padding-inline: 0; list-style: none; }
.mm-dosage--static .mm-dosage__row { padding-top: 30px; }
.mm-dosage--static .mm-dosage__tile { gap: 6px; padding: 13px 8px 14px; cursor: default; border-color: transparent; }
.mm-dosage--static .mm-dosage__tile:not(.is-on) { background: rgba(13, 13, 13, .05); border-color: transparent; }
.mm-band--ink .mm-dosage--static .mm-dosage__tile:not(.is-on) { background: rgba(245, 245, 240, .06); border-color: transparent; }
.mm-dosage--static .mm-dosage__tile.is-on, .mm-band--ink .mm-dosage--static .mm-dosage__tile.is-on { color: var(--mm-ink); border-color: transparent; box-shadow: none; transform: none; }
.mm-dosage--static .mm-dosage__tile::before { top: -24px; }
.mm-dosage--static .mm-dosage__tile.is-on::before { transform: none; box-shadow: 0 0 0 3px var(--mm-band-bg, var(--mm-paper)), 0 0 0 5px var(--mm-accent); }
.mm-dosage--static .mm-dosage__meter { display: none; }
.mm-dosage__caption { margin: 0 0 2px; text-align: center; font: 700 14px/1.6 var(--mm-body); }
.mm-band--ink .mm-dosage__caption { color: var(--mm-green); }
.mm-dosage--static .mm-dosage__name { font-size: 22px; }
.mm-dosage--static .mm-dosage__range { font-size: 16px; }
@media (max-width: 760px) {
	.mm-dosage--static .mm-dosage__row { width: calc(var(--mm-dosage-n) * 112px + (var(--mm-dosage-n) - 1) * var(--mm-dosage-gap)); }
	.mm-dosage--static .mm-dosage__name { font-size: 20px; }
	.mm-dosage--static .mm-dosage__range { font-size: 14px; }
}

/* ---------- Dose facts, formats mode: the facts centred over one cell per format ---------- */
.mm-dose__facts.mm-dose__facts--formats { display: block; }
.mm-dose__facts--formats .mm-dose__about { max-width: 62ch; margin: 0 auto clamp(26px, 2.8vw, 36px); text-align: center; }
.mm-dose__facts--formats .mm-dose__line { max-width: none; margin: 10px 0 0; font-size: 20px; line-height: 1.6; text-wrap: balance; }
.mm-dose__facts--formats .mm-dose__about:last-child { margin-bottom: 0; }
.mm-dose__facts--formats .mm-dose__about > .mm-dose__line:first-child { margin-top: 0; }
.mm-dose__facts--formats .mm-dose__line + .mm-dose__meta { margin-top: 8px; }
/* One product's own dose, centred: the name, the amount in the dose scale's type. */
.mm-dose__facts--formats .mm-dose__name { font-size: clamp(28px, 2.6vw, 38px); }
.mm-dose__facts--formats .mm-dose__grams { margin: 10px 0 14px; font: 700 clamp(40px, 4.6vw, 66px)/1.02 var(--mm-body); letter-spacing: -.01em; text-transform: none; text-wrap: balance; font-variant-numeric: tabular-nums; }
.mm-dose__formats { display: grid; grid-template-columns: repeat(var(--mm-dose-n, 5), minmax(0, 1fr)); gap: var(--mm-grid-gap); margin: 0; padding: 0; list-style: none; }
.mm-dose__format {
	display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; justify-items: start; gap: 10px; min-width: 0;
	padding: clamp(18px, 1.8vw, 24px); text-align: left; color: var(--mm-ink); background: var(--mm-white);
}
.mm-band--ink .mm-dose__format { color: var(--mm-paper); background: #1b1b1b; box-shadow: inset 0 0 0 1px rgba(245, 245, 240, .08); }
.mm-dose__glyph { display: block; margin-bottom: 4px; --mm-glyph: 44px; --mm-glyph-tone: var(--mm-accent); }
.mm-dose__kind { font: 400 24px/.95 var(--mm-display); letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; }
.mm-dose__count { align-self: end; font: 700 clamp(21px, 1.8vw, 26px)/1.15 var(--mm-body); font-variant-numeric: tabular-nums; text-wrap: balance; }
.mm-dose__each { font-size: 14px; line-height: 1.45; color: #4d4d4a; }
.mm-band--ink .mm-dose__each { color: var(--mm-on-ink); }
.mm-dose__format.is-off .mm-dose__count { font-size: 18px; color: #6f6f6b; }
.mm-band--ink .mm-dose__format.is-off .mm-dose__count { color: rgba(245, 245, 240, .55); }
.mm-dose__format.is-off .mm-dose__glyph { opacity: .45; }
/* Rollout S9 (KS-09): a cell with no glyph (the dosing guide); the name leads. */
.mm-dose__format--plain { grid-template-rows: auto minmax(0, 1fr) auto; }
@media (max-width: 1000px) {
	.mm-dose__formats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mm-dose__formats[style*="--mm-dose-n: 5"] .mm-dose__format:first-child,
	.mm-dose__formats[style*="--mm-dose-n: 3"] .mm-dose__format:first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
	.mm-dose__facts--formats .mm-dose__line { font-size: 17px; }
	.mm-dose__format { grid-template-rows: none; align-content: start; gap: 6px; padding: 16px 14px; }
	.mm-dose__count { align-self: start; }
	.mm-dose__glyph { margin-bottom: 2px; --mm-glyph: 32px; }
	.mm-dose__kind { font-size: 21px; }
	.mm-dose__count { font-size: 19px; }
	.mm-dose__each { font-size: 14px; } /* rollout S9: small text at least 14 px (G-04) */
}

/* ==========================================================================
   Rest round 3, builder D: the heading band (mm_head_band), a plugin's slot
   (mm_plugin_slot), the review strip (mm_review_strip) and the prose column with
   something under the text (mm_prose 'after'). Markup: the builder D block at the
   end of inc/kit.php. The store pages' own styles: store.css.
   ========================================================================== */

/* ---------- Heading band: a short ink band with the page's h1 (cart, checkout) ---------- */
.mm-headband {
	position: relative; isolation: isolate; padding-block: clamp(44px, 5.4vw, 72px) clamp(40px, 4.8vw, 64px); text-align: center;
	background:
		radial-gradient(900px 420px at 92% -40%, rgba(200, 230, 68, .22), transparent 62%),
		radial-gradient(760px 380px at -6% 140%, rgba(200, 230, 68, .08), transparent 62%),
		var(--mm-ink);
}
.mm-headband::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--mm-grain); opacity: .07; mix-blend-mode: screen; }
.mm-headband__title { margin: 0; font: 400 clamp(52px, 6vw, 96px)/.9 var(--mm-display); letter-spacing: .005em; text-transform: uppercase; color: var(--mm-paper); text-wrap: balance; }
.mm-headband__lead { max-width: 60ch; margin: 18px auto 0; font-size: var(--mm-text); line-height: 1.7; color: var(--mm-on-ink); }
.mm-headband__strip { background: #161616; }
.mm-headband__strip .mm-how-strip__list { padding-block: 18px; font: 400 21px/1 var(--mm-display); letter-spacing: .03em; color: var(--mm-paper); }
.mm-headband__strip .mm-icon--sparkle { width: 16px; height: 16px; }
.mm-js .mm-headband__title { animation: mm-rise .8s var(--mm-reveal-ease) both; }
@media (max-width: 700px) {
	.mm-headband { padding-block: 36px 32px; }
	.mm-headband__title { font-size: 52px; }
	.mm-headband__strip .mm-how-strip__list { padding-block: 12px; font-size: 17px; gap: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) { .mm-js .mm-headband__title { animation: none; } }

/* ---------- Plugin slot: the plugin's output, or its frame marked to confirm ---------- */
.mm-slot {
	display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(18px, 2.4vw, 32px);
	padding: clamp(22px, 3vw, 40px); color: var(--mm-ink); background: var(--mm-white);
}
.mm-slot__art { display: grid; place-items: center; width: clamp(88px, 9vw, 128px); aspect-ratio: 1; color: var(--mm-ink); background: var(--mm-paper); --mm-glyph: 62%; --mm-glyph-tone: var(--mm-accent); }
.mm-slot__title { margin: 0 0 10px; font: 400 clamp(30px, 2.6vw, 40px)/.95 var(--mm-display); letter-spacing: .01em; text-transform: uppercase; color: var(--mm-ink); }
.mm-slot__note { margin: 0; font-size: var(--mm-text-sm); line-height: 1.6; }
.mm-slot--live { display: block; }
@media (max-width: 520px) { .mm-slot { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

/* ---------- Review strip: the running strip of quote cards (full width) ---------- */
.mm-strip { padding-block: 6px 10px; }
.mm-strip .mm-quote { align-content: start; }
.mm-strip .mm-quote__text { display: grid; align-content: start; gap: 12px; }
.mm-quote__stars { display: block; --mm-star-on: var(--mm-ink); --mm-star-off: rgba(13, 13, 13, .16); }
.mm-strip .mm-quote__product:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: 3px; }

/* ---------- Prose with something under it (a form, a plugin's slot) ---------- */
.mm-prose-col { display: grid; align-content: start; gap: clamp(28px, 3vw, 40px); min-width: 0; }
.mm-prose-col .mm-prose { max-width: 70ch; }

/* ---------- Rollout S10 (B-05): the age check ----------
   A modal dialog (template-parts/kit/age-gate.php; opened at the top of the body, inc/sitewide.php). Square, on the liquid light field, the words at the bottom left like the
   questions panel; the kit's buttons and email form. Mobile first. */
html.mm-locked { overflow: hidden; }
.mm-gate {
	width: calc(100% - 32px);
	max-height: calc(100dvh - 32px);
	margin: auto;
	padding: 0;
	overflow: auto;
	color: var(--mm-paper);
	background: var(--mm-ink);
	border: 0;
	border-radius: 0;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.mm-gate { max-width: 640px; }
.mm-gate::backdrop { background: rgba(13, 13, 13, .9); }
.mm-gate[open] { animation: mm-dialog-in .45s var(--mm-reveal-ease, ease) both; }
@keyframes mm-dialog-in { from { opacity: 0; transform: translateY(16px); } }

.mm-gate__panel { position: relative; display: flex; align-items: flex-end; min-height: min(520px, calc(100dvh - 32px)); isolation: isolate; }
.mm-gate__field { position: absolute; inset: 0; z-index: -2; }
/* Open from the first paint, so its CSS field stands still until field.js takes it over: the
   turning, blurred swirl held up the hero photo behind it by about 1.3 s on a slow phone (30 Oct). */
.mm-gate__field:not(.is-live) i, .mm-gate__field:not(.is-live)::before { animation: none; }
.mm-gate__panel::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(13, 13, 13, .92) 25%, rgba(13, 13, 13, .35)); }
.mm-gate__say { padding: clamp(24px, 6vw, 56px); }
.mm-gate__logo { margin: 0 0 clamp(24px, 4vw, 40px); color: var(--mm-accent); }
.mm-gate__logo svg { display: block; width: 150px; height: auto; }
.mm-gate__title { margin: 0 0 14px; font: 400 clamp(44px, 7vw, 68px)/.92 var(--mm-display); text-transform: uppercase; color: var(--mm-paper); }
.mm-gate__line { max-width: 46ch; margin: 0 0 24px; font-size: 17px; line-height: 1.6; color: var(--mm-on-ink); }
.mm-gate__no { margin: -8px 0 20px; font: 700 16px/1.5 var(--mm-body); color: var(--mm-highlight); }
.mm-gate__no:empty { display: none; }
.mm-gate__actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (prefers-reduced-motion: reduce) {
	.mm-gate[open] { animation: none; }
}