/* ============================================================================
   The Maine Meal — brand layer.

   Loads last in the chain (see inc/mainemeal/mainemeal-assets.php). Two jobs:

   1. Redefine the inherited Flynt build tokens, so everything assets/build/
      draws — body, headings, form controls, buttons — comes out in this site's
      palette and typefaces instead of Flynt's blue-on-white defaults.
   2. Define the .mm-* components.

   Every value here comes from the approved static export
   (_docs/The Maine Meal homepage rebuild (1)/export/index.html), where it was
   an inline style attribute. Inline styles were how that export stayed
   portable; they are not how this theme is built, so they are restated once
   here as classes and the markup carries none.

   The hover states are the ones the export README listed as JS-driven and
   therefore missing from the flattened HTML — they are CSS here.
   ========================================================================= */

:root {
	/* ---- Maine Meal palette ---- */
	--mm-cream:       #fdf6ec;
	--mm-sand:        #f4ece1;
	--mm-white:       #fff;
	--mm-maroon:      #853f41;
	--mm-maroon-dark: #6d3134;
	--mm-maroon-deep: #4a2528;
	--mm-clay:        #9c5f41;
	--mm-clay-dark:   #83492f;
	--mm-ink:         #2b2320;
	--mm-body:        #5c4c44;
	--mm-muted:       #6b5b52;
	--mm-muted-2:     #7a6a60;
	--mm-line:        #e8d9c8;
	--mm-line-2:      #e2d3c1;
	--mm-line-3:      #e8dccd;
	--mm-line-soft:   #efe4d6;

	/* Dark band + footer */
	--mm-dark:        #3d2a26;
	--mm-dark-text:   #f0e2d6;
	--mm-dark-dim:    #dcc9bc;
	--mm-dark-dim-2:  #d3bfb2;
	--mm-footer:      #2b1d1a;
	--mm-footer-text: #cdb8ab;
	--mm-footer-link: #c2ada4;
	--mm-footer-mute: #a8938a;

	/* Rose accents used on dark grounds */
	--mm-rose:        #e2b8a4;
	--mm-rose-deep:   #c9836a;
	--mm-rose-pale:   #f0d9c9;
	--mm-rose-line:   #d9b8a4;

	--mm-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--mm-sans:    Lato, Helvetica, Arial, sans-serif;

	--mm-container: 1240px;
	--mm-gutter: 28px;
	--mm-band: clamp(72px, 8vw, 112px);

	/* ---- Redefinitions of the inherited Flynt tokens ----------------------
	   assets/build/base.css styles the document and every form control from
	   these. Overriding them here re-skins that layer in one place instead of
	   fighting each rule on specificity. */
	--font-main:    var(--mm-sans);
	--font-heading: var(--mm-display);

	--theme-white:      #fff;
	--theme-black:      var(--mm-ink);
	--theme-background: var(--mm-cream);
	--theme-text:       var(--mm-body);
	--theme-muted:      var(--mm-muted);
	--theme-heading:    var(--mm-ink);
	--theme-border:     var(--mm-line);
	--theme-field:      #d9c8b5;
	--theme-link:       var(--mm-maroon);
	--theme-primary:      var(--mm-maroon);
	--theme-primary-alt:  var(--mm-maroon-dark);
	--theme-primary-text: var(--mm-cream);
	--theme-secondary:      var(--mm-clay);
	--theme-secondary-alt:  var(--mm-clay-dark);
	--theme-secondary-text: #fff8f0;
}

/* ---------------------------------------------------------------- base ---- */

html {
	scroll-behavior: smooth;
	/* The header is sticky, so an in-page anchor otherwise lands with its
	   heading underneath it — #visit, #delivery, #contact and
	   #home-newsletter are all reachable from the nav and the footer. The
	   value is the contact bar plus the nav bar at their tallest.

	   On `html`, not `body`: scroll-padding applies to the scroll container,
	   and for document scrolling that is addressed through the root element.
	   On `body` it is silently ignored. */
	scroll-padding-top: 132px;
}

body {
	margin: 0;
	background: var(--mm-cream);
	color: var(--mm-ink);
	font-family: var(--mm-sans);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-wrap: pretty;
}

.pageWrapper {
	/* The page is full-bleed and several bands are wider than the viewport
	   mid-animation; without this the horizontal scrollbar appears on iOS.

	   `clip`, not `hidden`. `overflow-x: hidden` forces the used `overflow-y`
	   to `auto`, which makes this element a scroll container — and the sticky
	   header inside it then resolves against a container whose height is
	   content-driven and therefore never scrolls, so it stops sticking.
	   `clip` suppresses the overflow without creating a scroll container. */
	overflow-x: clip;

	/* Flynt's .pageWrapper was a sticky-footer grid whose 1fr middle row
	   stretched <main> to fill the viewport, which opened a blank band above
	   the footer on short pages. That grid lived in the dist stylesheet this
	   theme now dequeues (inc/mainemeal/mainemeal-assets.php), so .pageWrapper
	   is a plain block and the band cannot open. Nothing to override here. */
}

a { color: var(--mm-maroon); text-decoration: none; }
a:hover { color: var(--mm-clay); }

/*
 * Two-tone focus ring.
 *
 * A single maroon ring is the brand-obvious choice and it fails: measured
 * against the grounds this site actually uses it is 1.00:1 on a maroon button
 * (invisible), 1.79:1 on the dark band, 1.76:1 on the contact bar and 2.15:1 in
 * the footer — all under the 3:1 that WCAG 1.4.11 asks of a focus indicator.
 *
 * Two concentric rings fix it without a per-section override: the inner cream
 * ring carries every dark ground (7.0:1 on a maroon button, 12.6:1 on the dark
 * band, 15.1:1 in the footer) and the outer maroon ring carries every light one
 * (7.0:1 on cream, 7.5:1 on a white card). Whichever ground the control is on,
 * one of the two rings is well clear of threshold.
 *
 * outline paints on top of box-shadow, so the order on screen is
 * element / cream / maroon reading outwards.
 *
 * Ring widths (2px / 3px) are separate from the contrast numbers above —
 * those are a colour ratio, not a size, so thinning the ring on request
 * doesn't reopen the 1.4.11 case for a single-tone ring.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--mm-cream);
	outline-offset: 0;
	box-shadow: 0 0 0 3px var(--mm-maroon);
	border-radius: 2px;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 { font-family: var(--mm-display); margin: 0; }
p { margin: 0; }

.visuallyHidden,
.visuallyHidden-focusable:not(:focus):not(:active) {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.visuallyHidden-focusable:focus {
	position: absolute;
	z-index: 100;
	top: 8px; left: 8px;
	padding: 12px 18px;
	background: var(--mm-white);
	color: var(--mm-maroon);
	border: 2px solid var(--mm-maroon);
}

/* ------------------------------------------------------------- layout ----- */

.mm-wrap {
	max-width: var(--mm-container);
	margin: 0 auto;
	width: 100%;
}
.mm-wrap--narrow { max-width: 1160px; }
.mm-wrap--tight  { max-width: 820px; }

.mm-section {
	padding: var(--mm-band) var(--mm-gutter);
	background: var(--mm-cream);
}
.mm-section--cream { background: var(--mm-cream); }
.mm-section--sand  { background: var(--mm-sand); }
.mm-section--dark  { background: var(--mm-dark); color: var(--mm-dark-text); }
.mm-section--tall  { padding-block: clamp(72px, 8vw, 120px); }
.mm-section--capped { padding-block: clamp(64px, 7vw, 96px); border-top: 1px solid var(--mm-line-3); }
.mm-section--ruled {
	border-top: 1px solid var(--mm-line-3);
	border-bottom: 1px solid var(--mm-line-3);
}

/*
 * The gap between a section's heading block and the grid under it.
 *
 * Not one value: the export sets it per section — 52px on "ways to order",
 * 48px on the delivery band and "why choose us", 44px on markets, products and
 * contact. Measured against the export with Playwright; a uniform 52 put the
 * live page 8px out on five of the eleven sections and compounded down the page.
 */
.mm-stack { display: flex; flex-direction: column; gap: 52px; }
.mm-stack--mid   { gap: 48px; }
.mm-stack--tight { gap: 44px; }

.mm-grid { display: grid; gap: 22px; }
.mm-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); }
.mm-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(272px, 100%), 1fr)); }
.mm-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.mm-grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(288px, 100%), 1fr)); gap: 24px; }
.mm-grid--airy { gap: clamp(24px, 3vw, 44px); }

/* --------------------------------------------------------- typography ----- */

.mm-h2 {
	font-family: var(--mm-display);
	font-weight: 600;
	font-size: clamp(34px, 4.2vw, 54px);
	line-height: 1.08;
	color: var(--mm-ink);
}
.mm-h2--light { color: var(--mm-cream); }
.mm-h2--tight { font-size: clamp(34px, 4.4vw, 58px); line-height: 1.06; }
.mm-h2--sm    { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; }

.mm-eyebrow {
	font-family: var(--mm-sans);
	font-size: 12px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--mm-maroon);
}
.mm-eyebrow--clay {
	font-size: 11.5px;
	letter-spacing: 0.2em;
	color: var(--mm-clay);
}
.mm-eyebrow--light    { color: var(--mm-rose); }
/* On a page hero the rose is read against a photo, not a flat background —
   opacity of .mm-hero__scrim varies by photo and by where the eyebrow lands
   in the gradient, so pixel-sampling found it as low as 1.68:1 on 4 of 5
   hero photos (needs 4.5:1). A dedicated plate behind the label, independent
   of the photo underneath, fixes that without touching --mm-rose itself. */
.mm-eyebrow--rule.mm-eyebrow--light {
	background: rgba(43, 29, 26, .92);
	padding: 5px 12px 5px 10px;
	/* Square corners on purpose: a border-radius here leaves the exact pixel
	   at each corner of the box partially uncovered by this background (the
	   corner falls outside the rounded rect), which is exactly the pixel the
	   contrast script samples — a rounded chip re-introduced photo bleed at
	   the corners that a square one does not. */
}
.mm-eyebrow--onmaroon { font-size: 11.5px; letter-spacing: 0.2em; color: var(--mm-rose-pale); }
.mm-eyebrow--onclay   { font-size: 11.5px; letter-spacing: 0.2em; color: #fff3e8; }

/* The rule-and-label pairing that opens the hero. */
.mm-eyebrow--rule {
	display: flex;
	align-items: center;
	gap: 14px;
	letter-spacing: 0.24em;
	font-weight: 700;
}
.mm-eyebrow--rule::before {
	content: "";
	width: 36px;
	height: 1px;
	background: var(--mm-rose-deep);
}

/*
 * The heading column is not one width. The export sets it per section — 760 on
 * "ways to order", 720 on "why choose us", 700 on the delivery band, 680 on
 * contact, 660 on products, 640 on markets — and those numbers are load-bearing,
 * because they decide where each h2 wraps. Running everything at 760 put the
 * delivery heading on one line instead of two and the section 57px short of the
 * export. Measured with Playwright; the values are read back out of the export.
 */
.mm-lede { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.mm-lede--640 { max-width: 640px; }
.mm-lede--660 { max-width: 660px; }
.mm-lede--680 { max-width: 680px; }
.mm-lede--700 { max-width: 700px; }
.mm-lede--720 { max-width: 720px; }
.mm-lede__text { font-size: 18px; color: var(--mm-body); max-width: 660px; }
.mm-section--dark .mm-lede__text { color: var(--mm-dark-dim); }

/* Heading on the left, a button or link on the right, stacking on narrow. */
.mm-headrow {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: flex-end;
	justify-content: space-between;
}

.mm-prose { color: var(--mm-body); font-size: 17px; }
.mm-prose p { margin: 0 0 16px; }
.mm-prose p:last-child { margin-bottom: 0; }
.mm-prose a {
	color: var(--mm-maroon);
	text-decoration: underline;
	text-decoration-color: var(--mm-rose-line);
	text-underline-offset: 3px;
}
.mm-prose a:hover { color: var(--mm-clay); text-decoration-color: currentColor; }
.mm-prose--lead { font-size: 18.5px; color: #4a3b35; }

/* -------------------------------------------------------------- buttons --- */

.mm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--mm-sans);
	font-size: 12.5px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	padding: 14px 24px;
	border: 1px solid transparent;
	border-radius: 2px;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.mm-btn--lg { font-size: 13.5px; letter-spacing: 0.16em; padding: 19px 40px; }
/* The export gives the hero's outline button slightly tighter sides than the
   filled one beside it, so the pair reads as primary/secondary by weight as
   well as by colour. */
.mm-btn--ghost.mm-btn--lg { padding-inline: 34px; }

.mm-btn--maroon { background: var(--mm-maroon); color: var(--mm-cream); }
.mm-btn--maroon:hover { background: var(--mm-maroon-dark); color: var(--mm-cream); }

.mm-btn--clay {
	background: var(--mm-clay);
	color: #fff8f0;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}
.mm-btn--clay:hover { background: var(--mm-clay-dark); color: #fff8f0; }

.mm-btn--outline { border-color: var(--mm-maroon); color: var(--mm-maroon); background: none; letter-spacing: 0.15em; padding: 16px 30px; }
.mm-btn--outline:hover { background: var(--mm-maroon); color: var(--mm-cream); }

/* On a photo or the dark band: a hairline that fills in on hover. Pixel-
   sampled worst case on the homepage hero ("Visit The Shop") was 2.58:1
   against the photo (needs 4.5:1) — `background: none` let the raw photo
   show through the label. A resting backdrop (not a hover-only one) fixes
   the text contrast. The border's own alpha also had to come down: the
   contrast script samples right at the button's edge, which sits on the
   1px border stroke — at the original .5 alpha that stroke was itself the
   worst-sampled pixel (blending 50% pure cream over the new backdrop still
   only reached ~3:1). Same rgba(253,246,236,*) hex as before, just lower
   opacity — still a visible hairline, no color changed.
   Follow-up (1.4.11): the text-fix backdrop at .88 opacity still let enough
   photo bleed through that the button's own fill/edge dropped to 1.04:1
   against the photo just outside it, in the photo's darkest region — the
   button was legible but hard to perceive as a distinct shape there. A
   *dark* ring doesn't fix this: in that same dark region of the photo, a
   dark ring is nearly the same tone as both the fill and the photo (tried
   this — measured 1.00:1, worse). A solid (unblurred) light ring in the
   existing --mm-cream, at high opacity so it isn't just re-blending with
   the photo, reliably separates from a dark photo region since the ring's
   own color no longer depends on what's behind it. Worst-case ring-vs-photo
   re-sampled at 5.86:1 after this change (need 3:1); border alpha stays at
   .3 so the hairline-vs-text sampling from the earlier fix is unaffected. */
.mm-btn--ghost {
	border-color: rgba(253, 246, 236, .3);
	color: var(--mm-cream);
	background: rgba(43, 29, 26, .97);
	box-shadow: 0 0 0 10px rgba(253, 246, 236, .85);
}
.mm-section--dark .mm-btn--ghost { border-color: var(--mm-rose); }
.mm-btn--ghost:hover { background: var(--mm-cream); color: var(--mm-maroon-deep); border-color: var(--mm-cream); }

.mm-arrowlink {
	font-size: 12.5px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.13em;
	color: var(--mm-maroon);
	align-self: flex-start;
}
.mm-arrowlink:hover { color: var(--mm-clay); }

/* ================================================================= header == */

.mm-bar {
	background: var(--mm-maroon-deep);
	color: var(--mm-rose-pale);
	font-size: 13.5px;
	letter-spacing: 0.04em;
}
.mm-bar__inner {
	max-width: var(--mm-container);
	margin: 0 auto;
	padding: 9px var(--mm-gutter);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	align-items: center;
	justify-content: space-between;
}
.mm-bar__contact { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.mm-bar a { color: var(--mm-rose-pale); }
.mm-bar a:hover { color: var(--mm-cream); }
.mm-bar__tagline {
	text-transform: uppercase;
	font-size: 11.5px;
	letter-spacing: 0.16em;
	color: #c9a49a;
}

.mm-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--mm-cream);
	border-bottom: 1px solid #e4d5c4;
	box-shadow: 0 1px 14px rgba(74, 37, 40, .06);
}
.mm-header__inner {
	max-width: var(--mm-container);
	margin: 0 auto;
	padding: 14px var(--mm-gutter);
	display: flex;
	align-items: center;
	gap: 28px;
}

.mm-brand { flex: 0 0 auto; display: block; }
.mm-brand img,
.mm-brand .custom-logo { width: 190px; height: auto; }

.mm-nav { flex: 1 1 auto; }
/*
 * Flynt's own dist/assets/main-*.css (enqueued as `Flynt/assets/main` by the
 * inherited inc/assets.php) ships:
 *
 *   :where(ul,ol):not([class])          { --item-spacing: .66em }
 *   :where(ul,ol):not([class]) li + li  { margin-block-start: var(--item-spacing) }
 *
 * so ANY list in this theme that goes out without a class picks up an ~11px top
 * margin on every item after the first. In a flex row with the default
 * `stretch` that made the first item fill the line and pushed the rest down —
 * the nav read as "Home sits higher than everything else". Found with CDP
 * matched-rules against the live page; nothing in this stylesheet or in
 * assets/build/ sets it, which is why reading the CSS did not turn it up.
 *
 * The fix that does the work is the CLASS on the <ul> — `:not([class])` then
 * stops matching. The reset below is a second line, and it has to be written
 * as `li + li` to have any effect: the Flynt selector scores (0,1,2), so a
 * plainer `.mm-nav li` at (0,1,1) would lose to it. This ties on specificity
 * and wins on order, because mainemeal.css is enqueued at priority 20 and
 * Flynt's at the default 10.
 */
.mm-nav__list li + li,
.mm-drawer__list li + li { margin-block-start: 0; }

.mm-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 26px;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.mm-nav a {
	display: inline-block;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	font-weight: 700;
	color: #4a3b35;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
}
.mm-nav a:hover { color: var(--mm-maroon); border-bottom-color: var(--mm-rose-line); }
.mm-nav .is-current > a { color: var(--mm-maroon); border-bottom-color: var(--mm-maroon); }

/* A nav item classed `cta` in Appearance → Menus becomes the filled button. */
.mm-nav__cta a {
	background: var(--mm-maroon);
	color: var(--mm-cream);
	border-bottom: 0;
	padding: 10px 18px;
	border-radius: 2px;
	letter-spacing: 0.14em;
	font-weight: 900;
}
.mm-nav__cta a:hover { background: var(--mm-maroon-dark); color: var(--mm-cream); border-bottom-color: transparent; }

.mm-header__actions {
	flex: 0 0 auto;
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
}
.mm-header__phone {
	border-color: #ddcab7;
	color: #4a3b35;
	font-size: 14px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	padding: 12px 15px;
}
.mm-header__phone:hover { background: var(--mm-maroon); color: var(--mm-cream); border-color: var(--mm-maroon); }

.mm-navtoggle {
	display: none;
	align-items: center;
	gap: 9px;
	background: none;
	border: 1px solid #ddcab7;
	color: #4a3b35;
	padding: 11px 14px;
	border-radius: 2px;
	cursor: pointer;
	font-family: var(--mm-sans);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 900;
}
.mm-navtoggle__bars { display: flex; flex-direction: column; gap: 3.5px; width: 16px; }
.mm-navtoggle__bars span { height: 2px; background: currentColor; }

/* The panel the toggle opens. */
.mm-drawer { display: none; border-top: 1px solid #e4d5c4; background: var(--mm-cream); }
.mm-drawer__list { list-style: none; margin: 0; padding: 8px var(--mm-gutter) 18px; }
.mm-drawer li { border-bottom: 1px solid var(--mm-line-soft); }
.mm-drawer li:last-child { border-bottom: 0; }
.mm-drawer a {
	display: block;
	padding: 14px 0;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	font-weight: 700;
	color: #4a3b35;
}
.mm-drawer a:hover,
.mm-drawer .is-current > a { color: var(--mm-maroon); }
.mm-drawer__phone a { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--mm-maroon); }

/* Below the nav breakpoint the inline nav is replaced by the drawer.

   Progressive enhancement, and the order of these four rules is the whole of
   it: without JavaScript the drawer is simply open and the toggle is not
   rendered, so every link is still reachable. nav.js adds `mm-header--js`,
   which is what flips the drawer to collapsed and the toggle to visible — so
   the nav can only ever be hidden when there is something able to reopen it. */
@media (max-width: 1340px) {
	.mm-nav { display: none; }
	.mm-drawer { display: block; }
	.mm-header--js .mm-drawer { display: none; }
	.mm-header--js .mm-navtoggle { display: flex; }
	.mm-header--js.is-open .mm-drawer { display: block; }
}
@media (max-width: 1080px) {
	.mm-header__phone { display: none; }
}
@media (max-width: 560px) {
	.mm-brand img,
	.mm-brand .custom-logo { width: 168px; }
	.mm-header__inner { gap: 14px; }
}

/* =================================================================== hero == */

/*
 * The two full-bleed bands are bare <section> elements, and the inherited
 * assets/build/base.css styles `section` directly:
 *
 *   section { padding: calc(var(--gap-section-top) …) var(--gap-section-side) … }
 *   section:first-of-type { --gap-section-top: var(--gap-section) }
 *
 * Every component renders inside its own <flynt-component>, so every section is
 * :first-of-type within its parent and picks up 80px top AND bottom. .mm-section
 * sets its own padding and is therefore immune; these two carry their padding on
 * __inner instead, so they were inheriting it — measured 160px too tall on both,
 * against the export, with Playwright.
 */
.mm-hero,
.mm-ctaband { padding: 0; }

.mm-hero {
	position: relative;
	min-height: clamp(520px, 76vh, 760px);
	display: flex;
	align-items: center;
	background-color: var(--mm-ink);
	background-size: cover;
	background-position: center 42%;
}
.mm-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(43, 29, 26, .88) 0%, rgba(43, 29, 26, .66) 46%, rgba(43, 29, 26, .25) 100%);
}
.mm-hero__inner {
	position: relative;
	max-width: var(--mm-container);
	margin: 0 auto;
	padding: clamp(72px, 9vw, 132px) var(--mm-gutter);
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 26px;
}
/* The copy column, not the band: the scrim is widest on the left, so the text
   has to stop before it reaches the bright side of the photo. */
.mm-hero__inner > * { max-width: 720px; }
.mm-hero__title {
	font-family: var(--mm-display);
	font-weight: 600;
	font-size: clamp(44px, 6.2vw, 86px);
	line-height: 1.02;
	color: var(--mm-cream);
	letter-spacing: -0.015em;
}
.mm-hero__intro {
	font-size: clamp(18px, 1.5vw, 21px);
	line-height: 1.6;
	color: var(--mm-dark-text);
	max-width: 600px;
}
.mm-hero__intro p { margin: 0 0 12px; }
.mm-hero__intro p:last-child { margin-bottom: 0; }
.mm-hero__intro strong { letter-spacing: 0.05em; }
.mm-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
/* Pixel-sampled worst case was 1.1:1 on About Us and 1.26:1 on the homepage
   (needs 4.5:1) — the note sits over a brighter part of the photo than the
   scrim alone darkens enough on those two pages. A plate behind the text,
   not a text-color change, fixes it on every hero without special-casing
   which photo it happens to sit on. */
.mm-hero__note {
	font-size: 15px;
	color: #d9c3b4;
	margin-top: 4px;
	display: inline-block;
	background: rgba(43, 29, 26, .85);
	padding: 4px 10px;
	border-radius: 3px;
}

/* ============================================================== ordering == */

.mm-numcard {
	background: var(--mm-white);
	border: 1px solid var(--mm-line);
	border-top: 3px solid var(--mm-maroon);
	padding: 38px 32px 34px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.mm-numcard:hover { border-color: var(--mm-clay); box-shadow: 0 14px 34px rgba(74, 37, 40, .13); }
.mm-numcard__num { font-family: var(--mm-display); font-size: 36px; color: var(--mm-clay); line-height: 1; }
/* No line-height in the export means it inherits the body's 1.65 — but the
   inherited base.css sets h1-h6 to 1.2, so this heading came out 13px short.
   Stated explicitly rather than left to inheritance for that reason. */
.mm-numcard__title {
	font-family: var(--mm-display);
	font-weight: 700;
	font-size: 27px;
	line-height: 1.65;
	color: var(--mm-maroon-deep);
}
.mm-numcard p { font-size: 16.5px; color: var(--mm-body); }
.mm-numcard .mm-arrowlink { margin-top: auto; padding-top: 12px; align-self: stretch; }

/* ================================================================= visit == */

.mm-visit {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
	gap: clamp(32px, 4vw, 64px);
}
.mm-visit__main { display: flex; flex-direction: column; gap: 26px; }

.mm-visit__address { display: flex; flex-direction: column; gap: 6px; }
.mm-visit__address a,
.mm-visit__address span {
	font-family: var(--mm-display);
	font-size: 31px;
	font-weight: 600;
	color: var(--mm-maroon);
	line-height: 1.2;
}
.mm-visit__address a:hover { color: var(--mm-clay); }
.mm-visit__addressnote { font-family: var(--mm-sans); font-size: 15px; color: var(--mm-muted); }

.mm-dotlist {
	list-style: none;
	margin: 0;
	padding: 22px 0 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	border-top: 1px solid #ded0bf;
}
.mm-dotlist li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	font-size: 16.5px;
	color: var(--mm-body);
}
.mm-dotlist__dot {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--mm-clay);
	margin-top: 10px;
}
.mm-dotlist strong { color: var(--mm-maroon); }

.mm-dotlist--light {
	border-top-color: rgba(226, 184, 164, .22);
	padding-top: 18px;
	gap: 11px;
}
.mm-dotlist--light li { font-size: 16px; color: var(--mm-dark-dim-2); }
.mm-dotlist--light .mm-dotlist__dot { width: 6px; height: 6px; background: var(--mm-rose-deep); margin-top: 9px; }

.mm-feature {
	display: flex;
	gap: 20px;
	align-items: center;
	background: var(--mm-white);
	border: 1px solid var(--mm-line);
	padding: 18px;
	margin-top: 4px;
}
.mm-feature img { width: 112px; height: 112px; object-fit: cover; flex: 0 0 auto; }
.mm-feature__body { display: flex; flex-direction: column; gap: 5px; }
.mm-feature__title {
	font-family: var(--mm-display);
	font-size: 23px;
	font-weight: 600;
	color: var(--mm-maroon-deep);
	line-height: 1.2;
}
.mm-feature__text { font-size: 15px; color: var(--mm-muted); }

.mm-hours {
	background: var(--mm-white);
	border: 1px solid var(--mm-line-2);
	padding: clamp(28px, 3vw, 40px);
	align-self: start;
}
.mm-hours__title {
	font-family: var(--mm-display);
	font-weight: 600;
	font-size: 30px;
	/* As .mm-numcard__title: the export inherits the body's 1.65 here. */
	line-height: 1.65;
	color: var(--mm-ink);
	padding-bottom: 18px;
	border-bottom: 2px solid var(--mm-maroon);
}
.mm-hours__table { width: 100%; border-collapse: collapse; }
.mm-hours__row > * {
	padding: 15px 0;
	border-bottom: 1px solid var(--mm-line-soft);
	vertical-align: baseline;
}
.mm-hours__row:last-child > * { border-bottom: 0; }
.mm-hours__day {
	font-family: var(--mm-sans);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.13em;
	font-weight: 900;
	color: var(--mm-maroon-deep);
	text-align: left;
	/* The export's `min-width:112px` on a flex row. In a table this is the
	   equivalent: auto layout treats it as a floor and hands the remaining
	   width to the hours cell, which is what keeps the times flush right. */
	width: 112px;
	padding-right: 18px;
}
.mm-hours__time { font-size: 16.5px; color: var(--mm-body); text-align: right; }
.mm-hours__row.is-closed .mm-hours__day,
.mm-hours__row.is-closed .mm-hours__time { color: var(--mm-muted-2); }
.mm-hours__note {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--mm-line-soft);
	font-size: 15px;
	color: var(--mm-muted-2);
}

/* =============================================================== markets == */

.mm-market {
	background: var(--mm-white);
	border: 1px solid var(--mm-line);
	padding: 34px 30px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.mm-market:hover { border-color: var(--mm-clay); box-shadow: 0 14px 34px rgba(74, 37, 40, .13); }
.mm-market__name {
	font-family: var(--mm-display);
	font-weight: 700;
	font-size: 27px;
	color: var(--mm-maroon-deep);
	line-height: 1.15;
}
.mm-market__addr { font-size: 16.5px; color: var(--mm-body); }
.mm-market__time {
	font-family: var(--mm-display);
	font-size: 24px;
	font-weight: 600;
	color: var(--mm-maroon);
	margin-top: 6px;
}

/* ============================================================== delivery == */

.mm-panel {
	background: rgba(253, 246, 236, .06);
	border: 1px solid rgba(226, 184, 164, .28);
	padding: clamp(28px, 3vw, 40px);
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.mm-panel--grow { flex: 1 1 auto; }
.mm-panel__title {
	font-family: var(--mm-display);
	font-weight: 600;
	font-size: 30px;
	color: var(--mm-cream);
	line-height: 1.15;
}
.mm-panel__window { font-family: var(--mm-display); font-size: 27px; font-weight: 600; color: #e8b79c; }
.mm-panel__text { font-size: 16.5px; color: var(--mm-dark-dim); }
.mm-panel__cta { margin-top: auto; align-self: flex-start; }

.mm-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.mm-tag {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
	background: rgba(226, 184, 164, .16);
	color: var(--mm-rose-pale);
	padding: 7px 13px;
}

.mm-highlight {
	margin-top: 6px;
	background: var(--mm-clay);
	padding: 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.mm-highlight p { font-size: 16.5px; color: #fff6ee; }

.mm-ruledlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
	gap: 10px 20px;
}
.mm-ruledlist li {
	font-size: 16px;
	color: #e8d6c9;
	border-bottom: 1px solid rgba(226, 184, 164, .18);
	padding-bottom: 9px;
}

.mm-delivery__side { display: flex; flex-direction: column; gap: 22px; }

.mm-footnote {
	border: 1px dashed rgba(226, 184, 164, .35);
	padding: 22px 26px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	align-items: baseline;
}
.mm-footnote__text { font-size: 16.5px; color: var(--mm-footer-text); }

/* ============================================================== products == */

.mm-product {
	display: flex;
	flex-direction: column;
	background: var(--mm-white);
	border: 1px solid var(--mm-line);
	overflow: hidden;
	color: inherit;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.mm-product:hover { border-color: var(--mm-clay); box-shadow: 0 14px 34px rgba(74, 37, 40, .13); color: inherit; }
.mm-product__media { aspect-ratio: 4 / 3; overflow: hidden; }
.mm-product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.mm-product:hover .mm-product__media img { transform: scale(1.04); }
.mm-product__body { padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 9px; }
.mm-product__title {
	font-family: var(--mm-display);
	font-weight: 700;
	font-size: 26px;
	color: var(--mm-maroon-deep);
	line-height: 1.2;
}
.mm-product__body p { font-size: 16px; color: var(--mm-body); }

.mm-promo {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 28px;
	background: var(--mm-maroon);
	border: 1px solid var(--mm-maroon);
	padding: 34px 30px;
	min-height: 280px;
	color: var(--mm-cream);
	transition: background-color .18s ease;
}
.mm-promo:hover { background: var(--mm-maroon-dark); color: var(--mm-cream); }
.mm-promo__body { display: flex; flex-direction: column; gap: 12px; }
.mm-promo__title {
	font-family: var(--mm-display);
	font-weight: 600;
	font-size: 34px;
	color: var(--mm-cream);
	line-height: 1.12;
}
.mm-promo__body p { font-size: 16.5px; color: var(--mm-rose-pale); }
.mm-promo__more {
	font-size: 12.5px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--mm-cream);
}

/* =============================================================== reasons == */

.mm-reason { display: flex; flex-direction: column; gap: 14px; }
.mm-reason__rule { display: flex; align-items: center; gap: 12px; }
.mm-reason__num {
	font-family: var(--mm-display);
	font-size: 19px;
	font-weight: 700;
	color: var(--mm-maroon);
	letter-spacing: 0.04em;
}
.mm-reason__line { flex: 1 1 auto; height: 2px; background: #dccbb8; }
.mm-reason__title {
	font-family: var(--mm-display);
	font-weight: 700;
	font-size: 25px;
	color: var(--mm-maroon-deep);
	line-height: 1.2;
}
.mm-reason .mm-prose { font-size: 16.5px; }

/* ================================================================= story == */

.mm-story {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: clamp(36px, 5vw, 80px);
	align-items: start;
}
.mm-story__aside { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; }
.mm-story__portrait {
	width: 100%;
	max-width: 420px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
	border: 8px solid var(--mm-white);
	box-shadow: 0 18px 44px rgba(74, 37, 40, .16);
}
.mm-story__byline { display: flex; flex-direction: column; gap: 3px; padding-left: 6px; }
.mm-story__name { font-family: var(--mm-display); font-size: 26px; font-weight: 700; color: var(--mm-maroon-deep); }
.mm-story__cred {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: 700;
	color: #7f6357;
}
.mm-story__body { display: flex; flex-direction: column; gap: 22px; }
.mm-story__actions { margin-top: 8px; }

.mm-quote {
	margin: 8px 0 0;
	border-left: 3px solid var(--mm-clay);
	padding: 6px 0 6px 26px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.mm-quote p {
	font-family: var(--mm-display);
	font-style: italic;
	font-size: clamp(24px, 2.6vw, 33px);
	line-height: 1.3;
	color: var(--mm-maroon-deep);
}
.mm-quote cite {
	font-family: var(--mm-sans);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-weight: 700;
	font-style: normal;
	color: #7f6357;
}

/* ============================================================== CTA band == */

.mm-ctaband {
	position: relative;
	min-height: clamp(340px, 42vh, 460px);
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--mm-ink);
	background-size: cover;
	background-position: center 55%;
}
.mm-ctaband__scrim { position: absolute; inset: 0; background: rgba(43, 29, 26, .68); }
.mm-ctaband__inner {
	position: relative;
	max-width: 820px;
	padding: clamp(60px, 7vw, 96px) var(--mm-gutter);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	text-align: center;
}
.mm-ctaband__text { font-size: 18px; color: #e8d6c9; max-width: 600px; }
.mm-ctaband .mm-btn { margin-top: 8px; }

/* =============================================================== contact == */

.mm-contactcard {
	background: var(--mm-white);
	border: 1px solid var(--mm-line-2);
	padding: 34px 30px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: inherit;
	transition: border-color .18s ease, box-shadow .18s ease;
}
a.mm-contactcard:hover { border-color: var(--mm-clay); box-shadow: 0 14px 34px rgba(74, 37, 40, .13); color: inherit; }
.mm-contactcard__value {
	font-family: var(--mm-display);
	font-size: 33px;
	font-weight: 600;
	color: var(--mm-maroon-deep);
	line-height: 1.15;
	overflow-wrap: anywhere;
}
/* The email address is 22 characters and wraps to two lines at 33px, which made
   the whole card row 38px taller than the export. The export set that one card
   to 27px by hand; the component decides it from the value's length instead, so
   a future long value gets the same treatment without anyone remembering to. */
.mm-contactcard__value--sm { font-size: 27px; }
.mm-contactcard__note { font-size: 15.5px; color: var(--mm-muted); }

.mm-strip {
	background: var(--mm-maroon);
	padding: clamp(28px, 3vw, 40px);
	display: flex;
	flex-wrap: wrap;
	gap: 20px 40px;
	align-items: center;
	justify-content: space-between;
}
.mm-strip__who { display: flex; flex-direction: column; gap: 6px; }
.mm-strip__name {
	font-family: var(--mm-display);
	font-size: 31px;
	font-weight: 600;
	color: var(--mm-cream);
	line-height: 1.15;
}
.mm-strip__links { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; font-size: 17px; }
.mm-strip__links a {
	color: var(--mm-cream);
	text-decoration: underline;
	text-decoration-color: rgba(253, 246, 236, .4);
	text-underline-offset: 4px;
}
.mm-strip__links a:hover { color: var(--mm-rose-pale); text-decoration-color: currentColor; }

/* ============================================================ newsletter == */

.mm-newsletter {
	display: flex;
	flex-direction: column;
	gap: 22px;
	align-items: center;
	text-align: center;
}
.mm-newsletter__note { font-size: 14.5px; color: var(--mm-muted-2); }
.mm-newsletter__embed { width: 100%; max-width: 560px; }
/*
 * Fluent Forms' own defaults render every field labelled and stacked full
 * width, with its own small left-aligned button — a different product from
 * the single-row "type your email, press Sign up" band this design calls
 * for. This scopes just enough of Fluent Forms' own classes (verified
 * against the live markup: .ff-el-group / .ff-el-input--label /
 * .ff-el-form-control / .ff-btn-submit) to match the site's inputs and
 * .mm-btn--maroon button, without touching Fluent Forms' own CSS or the
 * contact form, whose stacked, labelled layout is the intended look there.
 *
 * Every rule below is prefixed with BOTH `.mm-newsletter` and
 * `.mm-newsletter__embed` — two classes, not one — because Fluent Forms
 * ships its own same-specificity rules (e.g. `.ff-default .ff-el-form-control`)
 * loaded after this stylesheet; at equal specificity source order wins, which
 * silently lost the border/background to Fluent Forms' defaults. Confirmed
 * via Chrome DevTools' matched-styles inspection (CSS.getMatchedStylesForNode),
 * not assumed — verify the same way after editing this block.
 */
.mm-newsletter .mm-newsletter__embed fieldset {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-start;
}
.mm-newsletter .mm-newsletter__embed .ff-el-group { margin: 0; flex: 1 1 240px; }
.mm-newsletter .mm-newsletter__embed .ff-el-group.ff_submit_btn_wrapper { flex: 0 0 auto; }
.mm-newsletter .mm-newsletter__embed .ff-el-input--label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.mm-newsletter .mm-newsletter__embed .ff-el-form-control {
	width: 100%;
	background: var(--mm-white);
	border: 1px solid #d9c8b5;
	border-radius: 2px;
	padding: 17px 20px;
	font-family: var(--mm-sans);
	font-size: 16.5px;
	color: var(--mm-ink);
}
.mm-newsletter .mm-newsletter__embed .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--mm-maroon);
	color: var(--mm-cream);
	border: 1px solid transparent;
	border-radius: 2px;
	padding: 17px 32px;
	font-family: var(--mm-sans);
	font-size: 12.5px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	cursor: pointer;
}
.mm-newsletter .mm-newsletter__embed .ff-btn-submit:hover { background: var(--mm-maroon-dark); }
.mm-newsletter__warning {
	max-width: 560px;
	font-size: 14px;
	line-height: 1.6;
	color: #a8331f;
	background: rgba(168, 51, 31, .05);
	border: 1px dashed #a8331f;
	padding: 14px 18px;
}

/* ================================================================ footer == */

.mm-footer {
	background: var(--mm-footer);
	color: var(--mm-footer-text);
	padding: clamp(60px, 7vw, 88px) var(--mm-gutter) 0;
}
.mm-footer__inner { max-width: var(--mm-container); margin: 0 auto; }
.mm-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
	gap: clamp(32px, 4vw, 56px);
	padding-bottom: 56px;
}
.mm-footer__brand { display: flex; flex-direction: column; gap: 18px; min-width: 200px; }
.mm-footer__brand img { width: 196px; height: auto; }
.mm-footer__brand p { font-size: 15.5px; color: var(--mm-footer-mute); }

.mm-footer__col { display: flex; flex-direction: column; gap: 15px; }
.mm-footer h2 {
	font-family: var(--mm-sans);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-weight: 900;
	color: var(--mm-cream);
}
.mm-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.mm-footer a { font-size: 15.5px; color: var(--mm-footer-link); }
.mm-footer a:hover { color: var(--mm-cream); }
/* ---- widget markup inside a footer column -------------------------------

   The columns are widget areas now, so the markup between the column div and
   the list is WordPress's, not ours: the Navigation Menu widget wraps its <ul>
   in a `.menu-<slug>-container`, and the Text widget wraps its copy in
   `.textwidget`. Both are plain blocks with no margins of their own, so the
   column's own flex gap still does the spacing — these rules only restate the
   type that used to be applied to hand-written elements. */

.mm-footer__col .menu { list-style: none; margin: 0; padding: 0; }

/* Widgets stack inside their column. The export set the hours block 6px below
   the social list, on top of the column's own 15px gap. */
.mm-footer__widget { display: flex; flex-direction: column; gap: 15px; }
.mm-footer__widget + .mm-footer__widget { margin-top: 6px; }

.mm-footer .textwidget { font-size: 15px; color: var(--mm-footer-mute); }
.mm-footer .textwidget p { font-size: inherit; color: inherit; margin: 0 0 8px; }
.mm-footer .textwidget p:last-child { margin-bottom: 0; }

/* A widget's title is the column heading; a widget with no title should not
   leave a gap where one would have been. */
.mm-footer__col > .widget-title:empty,
.mm-footer__col > h2:empty { display: none; }

.mm-footer__legal {
	border-top: 1px solid rgba(226, 184, 164, .18);
	padding: 26px 0 34px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	color: var(--mm-footer-mute);
}
.mm-footer__legal a {
	font-size: inherit;
	color: #d6c2b8;
	text-decoration: underline;
	text-decoration-color: rgba(226, 184, 164, .35);
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------- motion ----- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.mm-product__media img,
	.mm-btn,
	.mm-numcard,
	.mm-market,
	.mm-product,
	.mm-promo,
	.mm-contactcard { transition: none; }
}

/* ############################################################################
   PAGES 2–5 — about, producers, where to find us, contact.

   Everything above this line is the homepage, which is pixel-verified against
   export/index.html at 1440px. Nothing above this line is touched: this section
   only adds, and only the classes the build contract names.

   Values come from the same place the homepage's did — the inline styles in
   export/{about-us,meet-our-producers,where-to-find-us,contact-us}.html. Where
   two sections that share a component disagree (the two prose sections use a
   28→56 and a 28→60 column gap, for instance), the value here is the one that
   appears on the section the component was named for, and the difference is
   noted in the rule.

   Grid floors are all `minmax(min(NNNpx, 100%), 1fr)`. A bare `minmax(300px,
   1fr)` is wider than the 264px content column at 320px, and .pageWrapper's
   `overflow-x: clip` does not scroll — it CLIPS. The overflowing half of every
   card would simply be gone.
   ######################################################################### */

/* ---------------------------------------------------- page typography ----- */

/*
 * One more heading size, and deliberately only one.
 *
 * The export sets eight different h2 clamps across the five pages, several of
 * them 2px apart at the top of their range. They are not eight type sizes; they
 * are one size and several accidents of hand-authoring in a flattened mock, and
 * matching each of them would leave six near-identical modifiers named after
 * pixel values for a maintainer to choose between forever.
 *
 * So four sizes carry every heading on the site: .mm-h2 at 54 for a section
 * head, --tight at 58 for the story, --sm at 44 for a small band, and --md here
 * for the 46-52 cluster — the directories, the prose sections, both galleries
 * and the newsletter photo band. Worst case that is 4px at a 1440px viewport on
 * a handful of sub-page headings.
 */
.mm-h2--md { font-size: clamp(32px, 4vw, 50px); line-height: 1.08; }

/* ========================================================== hero — page == */

/*
 * The four inner pages use the same hero component with the copy pinned to the
 * bottom of a shorter band and a vertical scrim instead of the homepage's
 * diagonal one. Nothing in the `home` rules is overridden that the modifier
 * does not restate.
 */
.mm-hero--page {
	min-height: clamp(400px, 54vh, 560px);
	align-items: flex-end;
}
.mm-hero--page .mm-hero__scrim {
	background: linear-gradient(180deg, rgba(43, 29, 26, .42) 0%, rgba(43, 29, 26, .62) 40%, rgba(43, 29, 26, .9) 100%);
}
.mm-hero--page .mm-hero__inner {
	padding: clamp(64px, 8vw, 112px) var(--mm-gutter);
	gap: 24px;
}
.mm-hero--page .mm-hero__inner > * { max-width: 920px; }
.mm-hero--page .mm-hero__title {
	font-size: clamp(38px, 5.4vw, 76px);
	line-height: 1.04;
}
/* The meta line under the title — "Mark & Kelly LaCasse · 4 Madison Avenue…" —
   is the `note` field, one step larger here than on the homepage. */
.mm-hero--page .mm-hero__note { font-size: 17px; margin-top: 0; }
/* Belt and braces: the page hero has no buttons in the design. The component
   should not render them at all — this only makes sure a stray pair cannot
   break the layout. */
.mm-hero--page .mm-hero__actions { display: none; }

/*
 * The three heights the export actually uses, which the `height` select now
 * chooses between: about-us is tall, producers and where-to-find-us medium,
 * contact short. The base value above is `medium`, so a row saved before the
 * field existed still lands on the middle one.
 *
 * Scoped to --page. The homepage hero never emits a height modifier, and this
 * makes sure it could not be affected if it ever did.
 */
/*
 * The three sub-page hero sizes are not just three min-heights: the export
 * scales the frame with them, so a shorter hero also has tighter padding and a
 * narrower copy column. Porting only the min-height left the contact hero 45px
 * tall and its heading wrapping one line late. Values read off each page.
 */
.mm-hero--page.mm-hero--tall { min-height: clamp(460px, 62vh, 640px); }
.mm-hero--page.mm-hero--tall .mm-hero__inner { padding: clamp(64px, 8vw, 112px) var(--mm-gutter); }
.mm-hero--page.mm-hero--tall .mm-hero__inner > * { max-width: 920px; }

.mm-hero--page.mm-hero--medium { min-height: clamp(400px, 54vh, 560px); }
.mm-hero--page.mm-hero--medium .mm-hero__inner { padding: clamp(56px, 7vw, 96px) var(--mm-gutter); }
/* Producers sets 900 and Where To Find Us 860; 880 splits them rather than
   giving one page a modifier it does not otherwise need. */
.mm-hero--page.mm-hero--medium .mm-hero__inner > * { max-width: 880px; }

.mm-hero--page.mm-hero--short { min-height: clamp(320px, 42vh, 440px); }
.mm-hero--page.mm-hero--short .mm-hero__inner { padding: clamp(52px, 6vw, 84px) var(--mm-gutter); }
.mm-hero--page.mm-hero--short .mm-hero__inner > * { max-width: 820px; }

/* ========================================================== story — flip == */

/*
 * Kelly's section mirrors Mark's: portrait on the right, copy on the left.
 * `order` on grid items, so at one column the copy still comes first and the
 * portrait follows it — which is the reading order the export has too.
 *
 * The flipped section is also vertically centred where Mark's is top-aligned;
 * its aside holds nothing but the portrait, so `start` left the image hanging.
 */
.mm-story--flip { align-items: center; }
.mm-story--flip .mm-story__aside { order: 2; align-items: center; }
.mm-story--flip .mm-story__body  { order: 1; }

/* ================================================================= prose == */

.mm-prose-section {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}
/* The two prose sections disagree slightly: the producers intro stacks its
   copy at 18px and the wholesale notice at 20px. The fuller section wins. */
.mm-prose-section__body { display: flex; flex-direction: column; gap: 20px; }

.mm-prose-section__media { display: flex; flex-direction: column; gap: 12px; }
.mm-prose-section__media img { width: 100%; }

/*
 * `side` decides what the grid holds, and there are two shapes of it.
 *
 * side = none  — .mm-lede and .mm-prose ARE the two columns, and the section
 *                carries --split to say so. The producers intro.
 * side = image | note
 *              — both of those nest inside .mm-prose-section__body, which is
 *                then one column and the picture or the notice card the other.
 *                The wholesale notice.
 *
 * Nothing reorders: the side column is always second, in the markup and on
 * screen, so the collapsed stack reads heading, copy, then aside.
 */
.mm-prose-section--split { gap: clamp(28px, 4vw, 60px); }
.mm-prose-section--split .mm-lede { max-width: none; gap: 18px; }
.mm-prose-section--split .mm-prose p { margin-bottom: 18px; }
.mm-prose-section--split .mm-prose p:last-child { margin-bottom: 0; }

/* Nested, the lede's own 16px gap would put the eyebrow closer to the heading
   than the heading is to the copy. The column runs at one rhythm. */
.mm-prose-section__body .mm-lede { max-width: none; gap: 20px; }
.mm-prose-section__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

/* The export opens the body one step larger than the rest of it. The field is a
   single WYSIWYG, so the first paragraph is picked out here rather than asking
   the editor to remember to. */
.mm-prose-section .mm-prose > p:first-child { font-size: 18px; color: #4a3b35; }

.mm-prose-section--dark .mm-prose { color: var(--mm-dark-dim); }
.mm-prose-section--dark .mm-prose > p:first-child { color: var(--mm-dark-text); }
.mm-prose-section--dark .mm-prose a { color: var(--mm-rose); text-decoration-color: rgba(226, 184, 164, .5); }
.mm-prose-section--dark .mm-prose a:hover { color: var(--mm-rose-pale); text-decoration-color: currentColor; }

/* side = note. A sand card on the cream ground, held by a clay edge — the
   same treatment .mm-form__note gives the contact page's standing note. */
.mm-prose-section__aside { align-self: start; }
.mm-aside,
.mm-form__note {
	background: var(--mm-sand);
	border: 1px solid var(--mm-line-2);
	border-left: 4px solid var(--mm-clay);
	padding: clamp(26px, 3vw, 38px);
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.mm-aside__eyebrow {
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-weight: 900;
	color: var(--mm-maroon);
}
/* An h3, so the line-height is stated rather than left to base.css. */
.mm-aside__title {
	font-family: var(--mm-display);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--mm-ink);
}
.mm-aside__text { font-size: 17px; color: var(--mm-body); }
/* .mm-dotlist carries the rest; the export runs it a little tighter here. */
.mm-aside__list { padding-top: 18px; gap: 12px; }

/* ============================================================== timeline == */

/*
 * The component has a `tone` field, so the entries are written for a light
 * ground and the dark band overrides them. The export only ever shows the dark
 * one — "The journey", on about-us — so those are the measured values and the
 * light ones are the site's own tokens at the same weights.
 */
.mm-timeline {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: clamp(32px, 4vw, 60px);
	align-items: start;
}

/* Sits inside the .mm-lede, under the h2 — the same paragraph .mm-lede__text
   is on every other section, restated because it is the timeline's own field. */
.mm-timeline__intro { font-size: 18px; color: var(--mm-body); max-width: 660px; }
.mm-section--dark .mm-timeline__intro { color: var(--mm-dark-dim); }

.mm-timeline__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.mm-timeline__entry {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 0 0 28px 26px;
	margin-left: 6px;
	border-left: 1px solid var(--mm-line-2);
}
/* The rule is the thread between entries, so it stops at the last one — but the
   border stays, transparent, or the final entry would sit 1px left of the rest. */
.mm-timeline__entry:last-child {
	border-left-color: transparent;
	padding-bottom: 0;
}
.mm-timeline__when {
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-weight: 900;
	color: var(--mm-maroon);
}
/* An h3 in the markup, so base.css's 1.2 would decide this if it were left out.
   The export's value happens to agree; stated anyway, as .mm-numcard__title is. */
.mm-timeline__title {
	font-family: var(--mm-display);
	font-size: 25px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--mm-maroon-deep);
}
.mm-timeline__text { font-size: 16.5px; color: var(--mm-body); }

.mm-timeline__media { display: flex; flex-direction: column; gap: 16px; }
.mm-timeline__media img {
	width: 100%;
	object-fit: cover;
	border: 8px solid var(--mm-white);
}
.mm-timeline__caption { font-size: 14.5px; color: var(--mm-muted); padding-left: 8px; }

.mm-section--dark .mm-timeline__entry { border-left-color: rgba(226, 184, 164, .3); }
.mm-section--dark .mm-timeline__entry:last-child { border-left-color: transparent; }
.mm-section--dark .mm-timeline__when { color: #e8b79c; }
.mm-section--dark .mm-timeline__title { color: var(--mm-cream); }
.mm-section--dark .mm-timeline__text { color: var(--mm-footer-text); }
.mm-section--dark .mm-timeline__media img { border-color: rgba(253, 246, 236, .9); }
.mm-section--dark .mm-timeline__caption { color: #b8a49a; }

/* ============================================================= directory == */

/*
 * One component, two grounds: producers sits on sand, stockists on the dark
 * band, and every colour that changes between them is keyed off .mm-section--dark
 * the way .mm-lede__text and .mm-btn--ghost already are.
 *
 * Nothing here hides a row. The filtering is directory.js's job and it works by
 * setting `hidden` on individual cards; with the script absent or broken the
 * full list is what renders, which is the required no-JS behaviour.
 */
.mm-directory { display: flex; flex-direction: column; gap: 34px; }
.mm-directory__controls { display: flex; flex-direction: column; gap: 18px; }

.mm-directory__searchrow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.mm-directory__search {
	flex: 1 1 300px;
	/* min-width:0 as well as the 300px basis. A flex item's automatic minimum
	   size is its content, and an <input>'s content width comes from its
	   `size` attribute, not from what is typed in it — so without this the
	   field has a floor of ~20 characters that the 300px basis cannot shrink
	   past, and the row overflows the narrowest screens. */
	min-width: 0;
	background: var(--mm-white);
	border: 1px solid #d9c8b5;
	border-radius: 2px;
	padding: 16px 20px;
	font-family: var(--mm-sans);
	font-size: 16.5px;
	color: var(--mm-ink);
}
/* The visible result count. The export left this element empty — it was one of
   the JS features that did not survive the flattening (export/README.md §3) —
   so only its type is taken from there.

   Its colour is NOT the export's #7a6a60: that is 4.42:1 on sand, under the 4.5
   this size and weight needs. --mm-muted is 5.53:1 and is already the token for
   secondary text on light grounds. */
.mm-directory__count {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 900;
	color: var(--mm-muted);
}
.mm-section--dark .mm-directory__count { color: var(--mm-rose); }

.mm-directory__chiprow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* Stockists have two rows — region, then type. The rule between them is the
   export's; on a light ground the rose line would be invisible, so it takes the
   section divider colour there instead. */
.mm-directory__chiprow + .mm-directory__chiprow {
	border-top: 1px solid var(--mm-line-3);
	padding-top: 16px;
}
.mm-section--dark .mm-directory__chiprow + .mm-directory__chiprow {
	border-top-color: rgba(226, 184, 164, .22);
}
.mm-directory__chiplabel {
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-weight: 900;
	color: var(--mm-maroon);
}
.mm-section--dark .mm-directory__chiplabel { color: var(--mm-rose); }

.mm-directory__chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

/*
 * The chips had no styling in the export either, so they are built from the
 * outline button the site already has: hairline and label in the ground's
 * accent, filled when on. The on/off difference is a 6.44:1 change of fill, far
 * clear of the 3:1 WCAG 1.4.11 asks of a state indicator, so the state does not
 * depend on the aria-pressed value alone.
 */
.mm-chip {
	font-family: var(--mm-sans);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding: 8px 14px;
	background: none;
	border: 1px solid var(--mm-maroon);
	border-radius: 2px;
	color: var(--mm-maroon);
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.mm-chip__count { margin-left: 6px; font-weight: 900; }
.mm-chip:hover { background: var(--mm-white); }
/* `is-active` and `aria-pressed` both, because directory.js writes both and
   neither should be able to drift from the other. */
.mm-chip.is-active,
.mm-chip[aria-pressed="true"] {
	background: var(--mm-maroon);
	border-color: var(--mm-maroon);
	color: var(--mm-cream);
}
.mm-section--dark .mm-chip { border-color: var(--mm-rose); color: var(--mm-rose); }
.mm-section--dark .mm-chip:hover { background: rgba(226, 184, 164, .16); }
.mm-section--dark .mm-chip.is-active,
.mm-section--dark .mm-chip[aria-pressed="true"] {
	background: var(--mm-rose-pale);
	border-color: var(--mm-rose-pale);
	color: var(--mm-maroon-deep);
}

.mm-directory__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 18px;
}

.mm-dircard {
	background: var(--mm-white);
	border: 1px solid var(--mm-line-2);
	border-left: 3px solid var(--mm-clay);
	padding: 26px 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: inherit;
	transition: border-color .18s ease, box-shadow .18s ease;
}
/* Producer cards are plain divs; only the stockist cards that carry a url are
   links, and only those get the hover the export README recorded. */
a.mm-dircard:hover {
	border-color: var(--mm-clay);
	box-shadow: 0 14px 34px rgba(74, 37, 40, .13);
	color: inherit;
}
.mm-dircard__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.mm-dircard__type {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-weight: 900;
	color: var(--mm-maroon);
}
.mm-dircard__region {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 700;
	color: var(--mm-muted);
}
/* An h3: line-height stated so base.css's 1.2 is a decision and not a default. */
.mm-dircard__name {
	font-family: var(--mm-display);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--mm-maroon-deep);
}
.mm-dircard__town {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 900;
	color: var(--mm-clay);
}
.mm-dircard__when {
	font-family: var(--mm-display);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--mm-maroon);
}
.mm-dircard__items { font-size: 16.5px; color: var(--mm-body); }

/*
 * How a filtered-out card actually disappears — and the one rule the whole
 * filter depends on.
 *
 * directory.js filters by setting `hidden` on a .mm-dircard — and .mm-dircard
 * is `display: flex`, an author declaration, which outranks the UA sheet's
 * `[hidden] { display: none }`. Without this rule the attribute is set, the
 * card stays on screen, and the filter appears to do nothing at all.
 *
 * It hides nothing on its own: no card ships with `hidden`, so with the script
 * absent the full list still renders.
 */
.mm-dircard[hidden] { display: none; }

/*
 * The "nothing matches" message. It ships with the `hidden` attribute, so this
 * must not set `display` — an author `display: flex` here outranks the UA
 * sheet's `[hidden] { display: none }` and the message would show against a
 * full, unfiltered list. The attribute guard below is the second line of that.
 */
.mm-directory__empty {
	background: var(--mm-white);
	border: 1px dashed var(--mm-line-2);
	padding: 28px 26px;
	font-size: 16.5px;
	color: var(--mm-body);
}
.mm-directory__empty[hidden] { display: none; }
.mm-section--dark .mm-directory__empty {
	background: rgba(253, 246, 236, .06);
	border-color: rgba(226, 184, 164, .28);
	color: var(--mm-dark-dim);
}

/* =============================================================== gallery == */

.mm-gallery { display: flex; flex-direction: column; gap: 40px; }

/*
 * Two densities, because the two uses are different pictures: nine ingredient
 * tiles with one-word labels on cream, and four captioned photographs on the
 * dark band. auto-fit does the rest — at 1240px the cream grid is five across
 * and the dark one four, and both collapse the same way.
 */
.mm-gallery__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 16px;
}
.mm-section--dark .mm-gallery__grid {
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: 18px;
}
.mm-gallery__item { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.mm-section--dark .mm-gallery__item { gap: 12px; }
.mm-gallery__item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
/* Cream: a label. Dark: a sentence that names the producer. */
.mm-gallery__caption {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 700;
	color: var(--mm-muted);
}
.mm-section--dark .mm-gallery__caption {
	font-size: 15px;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	color: var(--mm-footer-text);
}

/*
 * The panel that closes "Land and sea". It is the delivery block's .mm-panel —
 * same translucent ground, same hairline — laid out as two columns instead of
 * a stack, so only the layout is restated here and none of the colour.
 *
 * .mm-panel is a column flexbox at the same specificity, so these win on order
 * rather than on weight. They are below it, and they stay below it, because
 * this section only ever appends.
 */
.mm-gallery__cta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 28px 44px;
	align-items: center;
	padding: clamp(28px, 3.5vw, 44px);
}
/* The title and the paragraph share a column. */
.mm-panel__body { display: flex; flex-direction: column; gap: 12px; }
.mm-gallery__cta .mm-panel__title { font-size: 31px; }
.mm-gallery__cta .mm-panel__text { font-size: 17px; }
/* .mm-panel__cta pushes itself to the bottom of a stack; in a centred grid row
   there is no bottom to reach for. */
.mm-gallery__cta .mm-panel__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 0;
	align-self: center;
}

/* ================================================================= stats == */

/*
 * The maroon counter strip. `padding: 0 var(--mm-gutter)` is not decoration: it
 * is a bare <section>, and the inherited base.css puts 80px of top and bottom
 * padding on every section that is :first-of-type in its parent — which every
 * component is, inside its own <flynt-component>. The same measured bug the
 * `.mm-hero, .mm-ctaband { padding: 0 }` rule above fixes.
 */
.mm-stats-band {
	background: var(--mm-maroon);
	padding: 0 var(--mm-gutter);
}
.mm-stats {
	max-width: var(--mm-container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}
.mm-stats__item {
	padding: 34px 24px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: inherit;
	border-right: 1px solid rgba(253, 246, 236, .16);
	transition: background-color .18s ease;
}
/* Only the last cell overall loses its divider, so a wrapped row keeps a
   trailing hairline at the fold. That does happen: there are five stockist
   types and the grid takes four cells at ~800px. Left as is — the hairline is
   the same one that separates the cells above it, and the alternative (a
   negative-margin overflow trick) is more machinery than it is worth. */
.mm-stats__item:last-child { border-right: 0; }
a.mm-stats__item:hover { background: var(--mm-maroon-dark); }
.mm-stats__number {
	font-family: var(--mm-display);
	font-size: 46px;
	font-weight: 600;
	line-height: 1;
	color: var(--mm-cream);
}
.mm-stats__label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-weight: 900;
	color: var(--mm-rose-pale);
}

/*
 * style = cards. The same numbers, off the band and onto cream: sand tiles
 * under a maroon edge. The grid is the only thing carried over from the strip.
 */
.mm-stats--cards {
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 22px;
}
.mm-statcard {
	background: var(--mm-sand);
	border: 1px solid var(--mm-line-2);
	border-top: 3px solid var(--mm-maroon);
	padding: 30px 26px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: inherit;
}
.mm-statcard__value {
	font-family: var(--mm-display);
	font-size: 44px;
	font-weight: 600;
	line-height: 1;
	color: var(--mm-maroon);
}
/* A value like "Pre-K – Grade 12" cannot be set at 44px and stay on one line,
   so anything over three characters drops to 27px. The Twig decides from the
   value's length, as .mm-contactcard__value--sm already does for the email. */
.mm-statcard__value--sm { font-size: 27px; line-height: 1.15; padding-top: 8px; }
.mm-statcard__text { font-size: 16px; color: var(--mm-body); }

/* ================================================================== form == */

.mm-form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
	gap: clamp(32px, 4vw, 64px);
	align-items: start;
}
.mm-form__main { display: flex; flex-direction: column; gap: 24px; }
.mm-form__aside { display: flex; flex-direction: column; gap: 22px; }
/* Both, because the aside is a COLUMN flexbox and the two axes need different
   answers: `flex: 0 0 auto` stops the height being shrunk on the main axis, and
   `align-self` stops the default `stretch` pulling a 116px circle out to the
   full width of the column on the cross axis, where the border-radius would
   then render it as a lozenge. The export's frame is a 5px white ring, no
   shadow — the shadow belongs to the story portraits, which are three times
   the size. */
.mm-form__portrait {
	flex: 0 0 auto;
	align-self: flex-start;
	width: 116px;
	height: 116px;
	object-fit: cover;
	border-radius: 50%;
	border: 5px solid var(--mm-white);
}
.mm-form__embed { width: 100%; }

.mm-formcard {
	background: var(--mm-white);
	border: 1px solid var(--mm-line-2);
	border-top: 3px solid var(--mm-maroon);
	padding: clamp(26px, 3vw, 36px);
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.mm-formcard__label {
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-weight: 900;
	color: var(--mm-maroon);
}
.mm-formcard__value {
	font-family: var(--mm-display);
	font-size: 29px;
	font-weight: 600;
	line-height: 1.18;
	color: var(--mm-maroon-deep);
	/* The address and the email address are both long enough to need it. */
	overflow-wrap: anywhere;
}
/* A card with an href reads as a link, so its value takes the link colour. */
.mm-formcard__value a,
a.mm-formcard .mm-formcard__value { color: var(--mm-maroon); }
/* As .mm-contactcard__value--sm: a long value wraps at 29px and takes the whole
   card row with it, so the component steps it down from the value's length. */
.mm-formcard__value--sm { font-size: 27px; }
.mm-formcard__note { font-size: 16.5px; color: var(--mm-body); }

/* The contact page's standing note is the same card as the prose section's
   aside — one idiom, styled once above; only the stack is a shade tighter. */
.mm-form__note { gap: 14px; }
.mm-form__notetitle {
	font-family: var(--mm-display);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--mm-ink);
}
.mm-form__notetext { font-size: 16.5px; color: var(--mm-body); }

/* Same warning the newsletter shows an editor when nothing is wired up. */
.mm-form__warning {
	max-width: 560px;
	font-size: 14px;
	line-height: 1.6;
	color: #a8331f;
	background: rgba(168, 51, 31, .05);
	border: 1px dashed #a8331f;
	padding: 14px 18px;
}

/* =========================================================== newsletter == */

/*
 * The sign-up band over a photograph — about-us runs it that way where the
 * homepage runs it on cream. Same construction as the hero: the scrim is an
 * element rather than part of the image, so the copy stays legible whichever
 * photo is chosen. The cream band is untouched; these rules only apply when
 * the component has an image and emits --photo.
 */
.mm-newsletter--photo {
	position: relative;
	background-color: var(--mm-ink);
	background-size: cover;
	background-position: center;
}
.mm-newsletter__scrim { position: absolute; inset: 0; background: rgba(43, 29, 26, .8); }
/* The scrim is absolutely positioned inside the section, so the content needs
   a stacking position of its own to sit on top of it. */
.mm-newsletter--photo .mm-wrap { position: relative; }
/*
 * The hero's note colour, so the two photo bands read the same — and NOT the
 * export's own #bda79c for this one. Against the worst ground this scrim can
 * produce — 80% of #2b1d1a over a white photograph, #554a48 — #bda79c is
 * 3.73:1 at 14px, under 4.5. The photo is the editor's choice, so the value has
 * to hold for any photo she picks; #d9c3b4 is 5.05:1 at that same worst case.
 */
.mm-newsletter--photo .mm-newsletter__note { color: #d9c3b4; }

/* ====================================================== reasons — cards == */

/*
 * "Why choose us" as four linked cards, which is how about-us runs the section
 * the homepage runs as four unpadded columns.
 *
 * Keyed off the grid class alone. The tile is .mm-reason in both modes, so
 * these are descendants of .mm-reasons--cards rather than a modifier on the
 * item — which also means they hold if an item-level class is ever added
 * alongside, and there is nothing to keep in step if it is not.
 *
 * The export sets the card's heading at 24px/1.22 and its body at 16px against
 * the columns variant's 25px/1.2 and 16.5px. Those are not restated. A 1px
 * heading and a half-pixel body are the same class of hand-authoring accident
 * as the eight h2 clamps, and a --card modifier that redeclares the type is a
 * second component pretending to be a modifier.
 *
 * NOT .mm-numcard's treatment, which would have been the obvious reuse: that
 * card carries a 3px maroon top edge and this one does not — plain #e2d3c1 on
 * all four sides in the export. Checked rather than assumed, because the two
 * cards look alike in a screenshot.
 */
.mm-reasons--cards {
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 22px;
}
.mm-reasons--cards .mm-reason {
	background: var(--mm-white);
	border: 1px solid var(--mm-line-2);
	padding: 32px 28px;
	/* The card is an <a>; without this the title and body would take the
	   document link colour ahead of their own. */
	color: inherit;
	transition: border-color .18s ease, box-shadow .18s ease;
}
/* The hover every other card on the site uses — the values the export README
   recorded for the states that were JS-driven and did not survive flattening. */
.mm-reasons--cards .mm-reason:hover {
	border-color: var(--mm-clay);
	box-shadow: 0 14px 34px rgba(74, 37, 40, .13);
	color: inherit;
}
/* Clay, not the columns variant's maroon. There the numeral is paired with a
   rule line and reads as part of it; here it stands alone above the heading.
   5.09:1 on the white card at 19px/700. */
.mm-reasons--cards .mm-reason__num { color: var(--mm-clay); }

/*
 * The 2px rule beside the numeral is the columns variant's device; the export's
 * card has the numeral standing alone. Hidden rather than left to the template
 * because the span is pure decoration — empty, aria-hidden, nothing lost when
 * it is not painted — and because this rule is correct whether the Twig emits
 * it in both modes or branches it out of cards. A row of CONTENT would have had
 * to come out of the Twig instead; that is the line this does not cross.
 */
.mm-reasons--cards .mm-reason__line { display: none; }


/* ------------------------------------------------------------- motion ----- */

/* The existing reduced-motion block is above, and this section only appends,
   so the new hover transitions opt out in a block of their own. */
@media (prefers-reduced-motion: reduce) {
	.mm-chip,
	.mm-dircard,
	.mm-reasons--cards .mm-reason,
	.mm-stats__item { transition: none; }
}


/* ====================================================== contact-us spacing ==

   Three measured corrections, all against contact-us.html in the export. The
   page was running +12% at 1440 with the structure, content and behaviour
   already correct; this is the spacing that was left.
   ========================================================================= */

/*
 * The form band is set tighter than a homepage band: clamp(64px,7vw,100px)
 * against .mm-section's clamp(72px,8vw,112px). 24px at 1440, and it is the
 * section's own value rather than a general sub-page rule — the other sub-page
 * sections disagree with each other, so a shared modifier would be a guess.
 *
 * `> .mm-form`, not `> .mm-wrap > .mm-form`: the component puts both classes on
 * the SAME element (`<div class="mm-wrap mm-form">`), so the nested form was a
 * level that never existed and the rule silently matched nothing. Caught by
 * testing every theme selector against the live DOM rather than by reading it.
 */
.mm-section:has(> .mm-form) { padding-block: clamp(64px, 7vw, 100px); }

/*
 * The portrait belongs INSIDE the first aside card, beside its text — not on a
 * row of its own above the stack. As a sibling it added 167px to the aside
 * column, and because the section is a two-column grid whose height is the
 * taller of the two, that 167px was most of the page's overshoot.
 */
.mm-formcard--portrait {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
}
.mm-formcard--portrait .mm-formcard__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 240px;
}

/* ============================================ blog, search and 404 templates ==

   These four templates (404, single, the archives, search) were the only pages
   on the site not built from blocks, and they were rendering unstyled: the
   inherited Flynt components they used are styled by dist/assets/main-*.css,
   which this theme dequeues, and templates/single.twig still carried `c-*`
   class names from the 122 Corson fork that never existed here. Rewritten with
   the theme's own classes; this is the CSS they need, built from the same
   tokens as everything else.
   ========================================================================== */

.mm-notfound { display: flex; flex-direction: column; gap: 18px; }
.mm-notfound__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }

.mm-article__image {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	margin-bottom: 32px;
	border: 8px solid var(--mm-white);
	box-shadow: 0 18px 44px rgba(74, 37, 40, .16);
}

/* ---- post / result card ---- */

.mm-postcard {
	display: flex;
	flex-direction: column;
	background: var(--mm-white);
	border: 1px solid var(--mm-line);
	border-top: 3px solid var(--mm-maroon);
	overflow: hidden;
	color: inherit;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.mm-postcard:hover {
	border-color: var(--mm-clay);
	box-shadow: 0 14px 34px rgba(74, 37, 40, .13);
	color: inherit;
}
.mm-postcard__media { aspect-ratio: 3 / 2; overflow: hidden; }
.mm-postcard__media img { width: 100%; height: 100%; object-fit: cover; }
.mm-postcard__body { padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 9px; }
.mm-postcard__title {
	font-family: var(--mm-display);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.2;
	color: var(--mm-maroon-deep);
}
.mm-postcard__body p { font-size: 16px; color: var(--mm-body); }

/* ---- search form ---- */

.mm-searchform { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; max-width: 560px; }
.mm-searchform__input {
	flex: 1 1 240px;
	background: var(--mm-white);
	border: 1px solid #d9c8b5;
	padding: 15px 18px;
	font-size: 16.5px;
	color: var(--mm-ink);
	border-radius: 2px;
}

/* ---- pagination ---- */

.mm-pagination { display: flex; flex-wrap: wrap; gap: 8px; }
.mm-pagination__link,
.mm-pagination__gap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--mm-line-2);
	background: var(--mm-white);
	color: var(--mm-maroon);
	font-size: 15px;
	font-weight: 700;
}
.mm-pagination__link:hover { border-color: var(--mm-clay); color: var(--mm-clay); }
.mm-pagination__link.is-current {
	background: var(--mm-maroon);
	border-color: var(--mm-maroon);
	color: var(--mm-cream);
}
.mm-pagination__gap { border-color: transparent; background: none; color: var(--mm-muted-2); }

@media (prefers-reduced-motion: reduce) {
	.mm-postcard { transition: none; }
}

/* The About page's sign-up says what the emails contain; the homepage's does
   not. Sized between the heading and the small print so it reads as lede copy
   rather than as another line of fine print. */
.mm-newsletter__intro { font-size: 17px; color: var(--mm-body); max-width: 620px; }
.mm-newsletter--photo .mm-newsletter__intro { color: var(--mm-dark-text); }

/* a11y follow-up (1.4.3): the Contact Us form's "Send message" button gets
   its background-color from an inline <style> block FluentForm generates
   per-form (from the form's own Advanced Styler setting, background-color:
   #853f41 — the same value as --mm-maroon, not read from the token itself).
   That inline block is emitted in the page body where the form renders, so
   it always loses to plugin/theme <head> stylesheets on document order —
   it can only be beaten by higher selector specificity, not by load order.
   axe measured the cream text (#fdf6ec) against it at 4.41:1 (need 4.5:1).
   User authorized a scrim/overlay, not a brand-color change: same
   technique already used on the hero "Visit The Shop" button above — a
   darkened backdrop layered on top of the button, not an edit to the
   --mm-maroon token or to FluentForm's own inline declaration. First
   tried as an inset box-shadow so background-color stayed literally
   #853f41, but axe's contrast check only reads background-color/
   background-image, not box-shadow (the same class of blind spot as a
   photo background) — it kept reporting the pre-fix 4.41:1 even though
   the rendered pixel measured 5.57:1. #683133 is that same darkened tone
   (--mm-maroon at roughly 78% opacity over black, pre-blended into a
   literal color axe can read) rather than an approximation invented for
   axe's sake. ".ff-btn" (already one of the button's own classes) added
   to the selector purely for specificity over FluentForm's rule — not a
   new class on the markup. */
form.fluent_form_1 .ff-btn.ff-btn-submit:not(.ff_btn_no_style) {
	background-color: #683133;
}