/* ===========================================================================
 * home.css — the home page, in the spend-and-get page's look
 *
 * Loaded only on a page using `template-home.php`. Nothing here leaks onto the
 * rest of the site.
 *
 * Rebuilt 2026-10-29 (Tyler: redesign the site around the spend-and-get page;
 * the home page is his Claude Design handoff, pages 1–6, in that look). The
 * sections follow the handoff and language brief D1: hero, the dose framework
 * strip, the products with tap-to-add tiles, "Start here" with the Variety
 * Pack, start low go slow, formats, reviews, our own guides, Functional Fungi,
 * the journal.
 *
 * The look is the spend-and-get page's: cream ground, white cards with a
 * --mm-radius-md corner and a soft shadow, amber pill buttons with ink on them,
 * Urbanist set bold for names and light for section headings, JetBrains Mono
 * for every figure.
 *
 * Every colour, size, space and radius is a token from `tokens.css`. The
 * literals are breakpoints inside @media, where custom properties do not
 * resolve, and proportions.
 * ======================================================================== */

/* --- The page ----------------------------------------------------------- */

.mm-home {
  background: var(--mm-color-canvas);
  color: var(--mm-color-ink);
  font-family: var(--mm-font-body);
  font-weight: var(--mm-weight-body);
  line-height: var(--mm-leading-normal);
}

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

.mm-band { padding-block: var(--mm-space-12); }
.mm-band__inner {
  max-width: var(--mm-container-max);
  margin: 0 auto;
  padding-inline: var(--mm-space-5);
  box-sizing: border-box;
}

/* The bands that sit on sand rather than cream, so the page has a rhythm
 * without hard lines — the handoff alternates the two. */
.mm-band--doses,
.mm-band--steps,
.mm-band--teaching { background: var(--mm-color-sand); }

/* --- Type --------------------------------------------------------------- */

/* Headings state their colour: Flatsome sets one on h1–h3, which beats an
 * inherited value (lander.css found that the hard way). */
.mm-home .mm-title {
  margin: var(--mm-space-2) 0 0;
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-light);
  font-size: clamp(var(--mm-text-2xl), 5.5vw, var(--mm-text-3xl));
  line-height: var(--mm-leading-tight);
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--mm-color-ink);
  text-wrap: balance;
}
.mm-home h1.mm-title {
  font-weight: var(--mm-weight-bold);
  font-size: clamp(var(--mm-text-3xl), 9vw, var(--mm-text-4xl));
  letter-spacing: -0.025em;
}

.mm-home .mm-eyebrow {
  margin: 0;
  font-family: var(--mm-font-display);
  font-size: var(--mm-text-2xs);
  font-weight: var(--mm-weight-bold);
  letter-spacing: var(--mm-tracking-wide);
  text-transform: uppercase;
  color: var(--mm-color-brand-deep);
}

.mm-home .mm-lede {
  margin: var(--mm-space-4) 0 0;
  max-width: var(--mm-measure);
  font-size: var(--mm-text-lg);
  line-height: var(--mm-leading-normal);
  color: var(--mm-color-ink-muted);
}
.mm-home .mm-body,
.mm-home .mm-subtitle { margin: var(--mm-space-3) 0 0; font-size: var(--mm-text-sm); color: var(--mm-color-ink-muted); }
.mm-home .mm-subtitle { font-weight: var(--mm-weight-bold); color: var(--mm-color-brand-deep); }
.mm-home .mm-note { margin: var(--mm-space-2) 0 0; font-size: var(--mm-text-xs); color: var(--mm-color-ink-muted); }

.mm-head { margin-bottom: var(--mm-space-8); }

/* A text link with an arrow: the secondary action everywhere on the page. */
.mm-home .mm-link,
.mm-home .mm-button--link {
  display: inline-flex;
  align-items: center;
  gap: var(--mm-space-1);
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-bold);
  font-size: var(--mm-text-sm);
  color: var(--mm-color-ink);
  text-decoration: none;
  box-shadow: inset 0 calc(-1 * var(--mm-focus-ring)) 0 0 var(--mm-color-brand);
}
.mm-home .mm-link::after,
.mm-home .mm-button--link::after { content: '\2192'; }
.mm-home .mm-link:hover,
.mm-home .mm-button--link:hover { color: var(--mm-color-brand-deep); }
.mm-more { margin: var(--mm-space-6) 0 0; }

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

.mm-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mm-space-3) var(--mm-space-6);
  margin-top: var(--mm-space-6);
}

/* The amber pill, ink on it — the landing page's button. */
.mm-home .mm-button--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--mm-space-12) + var(--mm-space-1));
  margin: 0;
  padding: 0 var(--mm-space-8);
  border: 0;
  border-radius: var(--mm-radius-pill);
  background: var(--mm-color-brand);
  color: var(--mm-color-on-brand);
  font-family: var(--mm-font-display);
  font-size: var(--mm-text-lg);
  font-weight: var(--mm-weight-bold);
  letter-spacing: normal;
  text-transform: none;
  line-height: var(--mm-leading-tight);
  text-decoration: none;
  box-shadow: 0 var(--mm-space-1) var(--mm-space-5) rgba(255, 179, 1, .45);
  transition: background var(--mm-motion-base) var(--mm-ease);
}
.mm-home .mm-button--primary:hover { background: var(--mm-color-star); color: var(--mm-color-on-brand); }

/* The quiet button on the guide cards: outlined, pill. */
.mm-home .mm-button--quiet {
  display: inline-flex;
  align-items: center;
  min-height: var(--mm-control-height);
  padding: 0 var(--mm-space-5);
  border: var(--mm-hairline) solid var(--mm-color-ink);
  border-radius: var(--mm-radius-pill);
  background: transparent;
  color: var(--mm-color-ink);
  font-family: var(--mm-font-display);
  font-size: var(--mm-text-sm);
  font-weight: var(--mm-weight-bold);
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
}
.mm-home .mm-button--quiet:hover { background: var(--mm-color-ink); color: var(--mm-color-on-contrast); }

.mm-home a:focus-visible {
  outline: var(--mm-focus-ring) solid var(--mm-color-brand-deep);
  outline-offset: var(--mm-focus-ring);
}

/* The trust line — the spend-and-get page's, each item after a tick,
 * so a wrapped line never starts with a separator (launch audit, 2026-10-30:
 * on a phone the second line began "· 30-day make-it-right"). */
.mm-trust {
  display: flex;
  background: none;
  flex-wrap: wrap;
  gap: var(--mm-space-1) var(--mm-space-3);
  margin: var(--mm-space-6) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--mm-text-xs);
  color: var(--mm-color-ink-muted);
}
.mm-trust li { margin: 0; white-space: nowrap; }
.mm-trust li::before { content: '\2713'; margin-inline-end: var(--mm-space-1); font-weight: var(--mm-weight-bold); color: var(--mm-color-brand-deep); }

/* --- 1 · Hero ----------------------------------------------------------- */

.mm-band--hero { padding-block: var(--mm-space-6) var(--mm-space-12); }
.mm-hero { display: grid; gap: var(--mm-space-6); align-items: center; }
/* The photograph first on a phone, like the landing page's card. */
.mm-hero__media { order: -1; }
.mm-hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 45%;
  border-radius: var(--mm-radius-md);
  box-shadow: var(--mm-shadow-raised);
}

/* --- 2 · The dose framework strip -------------------------------------- */

/* A sideways scroll on a phone, three across on a wide screen. The next card
 * peeks in at the edge, so it reads as a row and not as one card. */
.mm-doses {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: var(--mm-space-3);
  margin: 0 calc(-1 * var(--mm-space-5));
  padding: var(--mm-space-1) var(--mm-space-5) var(--mm-space-3);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--mm-space-5);
  -webkit-overflow-scrolling: touch;
}
.mm-dose {
  scroll-snap-align: start;
  margin: 0;
  padding: var(--mm-space-5);
  background: var(--mm-color-surface);
  border: var(--mm-hairline) solid var(--mm-color-border);
  border-top: var(--mm-space-1) solid var(--mm-color-border);
  border-radius: var(--mm-radius-md);
  box-shadow: var(--mm-shadow-card);
}
/* Each strength carries its pouch's colour on its top edge only — the brief's
 * "the dose chip is the only colour besides the gold CTA". */
.mm-dose--micro { border-top-color: var(--mm-color-dose-micro); }
.mm-dose--mini { border-top-color: var(--mm-color-dose-mini); }
.mm-dose--mega { border-top-color: var(--mm-color-dose-mega); }

/* Both faces of the pouch, the back tucked behind the front — the
 * spend-and-get page's "What's in your free gift". */
.mm-dose__packs {
  position: relative;
  height: calc(var(--mm-space-20) * 2);
  margin-bottom: var(--mm-space-4);
}
.mm-home .mm-dose__pack {
  position: absolute;
  bottom: 0;
  height: 100%;
  width: auto;
  max-width: none;
  filter: drop-shadow(0 var(--mm-space-2) var(--mm-space-3) rgba(17, 17, 17, .18));
}
.mm-dose__pack--back { left: 50%; transform: translateX(-80%) rotate(-6deg); opacity: .9; }
.mm-dose__pack--front { left: 50%; transform: translateX(-20%) rotate(4deg); }

.mm-home .mm-dose__name {
  margin: 0;
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-bold);
  font-size: var(--mm-text-2xl);
  line-height: var(--mm-leading-tight);
  letter-spacing: normal;
  text-transform: none;
  color: var(--mm-color-ink);
}
.mm-dose__name .mm-num { white-space: nowrap; font-size: var(--mm-text-lg); font-weight: var(--mm-weight-regular); color: var(--mm-color-brand-deep); }
/* What is in the capsule, set as the shop card's detail line (site.css
 * .mm-card-detail), so the two read as one (Tyler, 2026-11-03). */
.mm-home .mm-dose__strain {
  margin: var(--mm-space-1) 0 0;
  font-family: var(--mm-font-display);
  font-size: var(--mm-text-sm);
  font-weight: var(--mm-weight-regular);
  line-height: var(--mm-leading-tight);
  color: var(--mm-color-ink-muted);
}
.mm-home .mm-dose__count { margin: var(--mm-space-1) 0 0; font-size: var(--mm-text-xs); color: var(--mm-color-ink-muted); }
.mm-home .mm-dose__line { margin: var(--mm-space-3) 0 var(--mm-space-4); font-size: var(--mm-text-sm); color: var(--mm-color-ink); }

/* --- 3 · The products: tap to add ---------------------------------------- */

/* The spend-and-get tiles: two across on a phone, four on a wide screen. */
.mm-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mm-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mm-tile {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--mm-space-3);
  background: var(--mm-color-surface);
  border: var(--mm-hairline) solid var(--mm-color-border);
  border-radius: var(--mm-radius-md);
  box-shadow: var(--mm-shadow-card);
  transition: border-color var(--mm-motion-base) var(--mm-ease);
}
.mm-tile:hover { border-color: var(--mm-color-brand-tint-border); }
.mm-tile__media {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--mm-radius-sm);
  background: var(--mm-color-sand);
}
.mm-tile__media img { width: 100%; height: 100%; object-fit: cover; }
.mm-tile__noimg { display: block; width: 100%; height: 100%; }
.mm-tile__body { flex: 1 1 auto; padding: var(--mm-space-3) 0 var(--mm-space-2); }
/* Set as the shop's cards are (site.css §5, Tyler 2026-10-30: "I specifically
 * like the font and text"): a bold name, the size in grey, a large price in
 * the display face, one full-width button in capitals. */
.mm-home .mm-tile__name {
  margin: 0;
  padding: 0;
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-bold);
  font-size: var(--mm-text-lg);
  line-height: var(--mm-leading-tight);
  letter-spacing: -0.01em;
  text-transform: none;
}
.mm-home .mm-tile__name a { color: var(--mm-color-ink); text-decoration: none; }
.mm-home .mm-tile__size { margin: var(--mm-space-1) 0 0; font-family: var(--mm-font-display); font-size: var(--mm-text-sm); line-height: var(--mm-leading-tight); color: var(--mm-color-ink-muted); }
.mm-home .mm-tile__price.mm-num {
  margin: var(--mm-space-3) 0 0;
  font-family: var(--mm-font-display);
  font-size: var(--mm-text-2xl);
  font-weight: var(--mm-weight-bold);
  line-height: var(--mm-leading-tight);
  letter-spacing: -0.01em;
  color: var(--mm-color-ink);
}

.mm-tile__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mm-space-2); margin-top: auto; }
/* The Add pill. It also carries WooCommerce's own classes, so it is styled
 * against `.button` from Flatsome and has to set every property that theme
 * sets: margin, case, tracking, line height. */
.mm-home .mm-tile__add.button,
.mm-home .mm-tile__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mm-space-2);
  width: 100%;
  min-height: var(--mm-control-height);
  margin: 0;
  padding: 0 var(--mm-space-2);
  white-space: nowrap;
  border: 0;
  border-radius: var(--mm-radius-pill);
  background: var(--mm-color-brand);
  color: var(--mm-color-on-brand);
  font-family: var(--mm-font-display);
  font-size: var(--mm-text-sm);
  font-weight: var(--mm-weight-bold);
  letter-spacing: var(--mm-tracking-display);
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
}
.mm-home .mm-tile__add:hover { background: var(--mm-color-star); color: var(--mm-color-on-brand); }
.mm-home .mm-tile__add span { font-size: var(--mm-text-lg); line-height: 1; }
/* The smallest phones (320–359px): smaller words, no arrow, still one line. */
@media (max-width: 359px) {
  .mm-home .mm-tile__add.button,
  .mm-home .mm-tile__add { font-size: var(--mm-text-2xs); letter-spacing: normal; }
  .mm-home .mm-tile__add span { display: none; }
}
/* While WooCommerce is adding, and once it has: a tick, and its "View cart". */
.mm-home .mm-tile__add.loading { opacity: .6; }
.mm-home .mm-tile__add.added span { display: none; }
.mm-home .mm-tile__add.added::after { content: '\2713'; margin-inline-start: var(--mm-space-1); }
.mm-home .mm-tile__actions .added_to_cart {
  font-size: var(--mm-text-xs);
  font-weight: var(--mm-weight-bold);
  color: var(--mm-color-brand-deep);
  text-decoration: none;
  padding: 0;
  margin: 0;
}

/* --- 4 · Start here: the Variety Pack ------------------------------------- */

/* One card: the pack's own photo on sand (as on the shop cards, badge and
 * all), then the words, the three pouches in their tier colours, and the
 * price and button on one line (Tyler, 2026-11-02: "more cohesive"). */
.mm-start {
  display: grid;
  overflow: hidden;
  background: var(--mm-color-surface);
  border: var(--mm-hairline) solid var(--mm-color-border);
  border-radius: var(--mm-radius-md);
  box-shadow: var(--mm-shadow-card);
}
.mm-start__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  background: var(--mm-color-sand);
}
.mm-start__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mm-start__copy { padding: var(--mm-space-6) var(--mm-space-5); }
.mm-start__inside {
  display: grid;
  gap: var(--mm-space-2);
  margin: var(--mm-space-5) 0 0;
  padding: 0;
  list-style: none;
}
.mm-start__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mm-space-3);
  margin: 0;
  padding: var(--mm-space-3) var(--mm-space-4);
  border-left: var(--mm-space-1) solid var(--mm-color-border);
  border-radius: var(--mm-radius-sm);
  background: var(--mm-color-canvas);
}
.mm-start__row--micro { border-left-color: var(--mm-color-dose-micro); }
.mm-start__row--mini { border-left-color: var(--mm-color-dose-mini); }
.mm-start__row--mega { border-left-color: var(--mm-color-dose-mega); }
.mm-start__tier { font-family: var(--mm-font-display); font-weight: var(--mm-weight-bold); font-size: var(--mm-text-base); color: var(--mm-color-ink); }
.mm-start__size { font-size: var(--mm-text-sm); color: var(--mm-color-ink-muted); white-space: nowrap; }
.mm-start__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mm-space-3) var(--mm-space-4);
  margin-top: var(--mm-space-5);
  padding-top: var(--mm-space-5);
  border-top: var(--mm-hairline) solid var(--mm-color-border);
}
.mm-home .mm-start__price { display: flex; flex-direction: column; margin: 0; }
.mm-start__name { font-size: var(--mm-text-sm); color: var(--mm-color-ink-muted); }
.mm-home .mm-start__amount.mm-num { font-family: var(--mm-font-display); font-size: var(--mm-text-3xl); font-weight: var(--mm-weight-bold); line-height: var(--mm-leading-tight); letter-spacing: -0.01em; color: var(--mm-color-ink); }
.mm-home .mm-start__buy .mm-tile__add.button,
.mm-home .mm-start__buy .mm-tile__add { width: auto; padding: 0 var(--mm-space-6); }
.mm-home .mm-start__doses { margin: var(--mm-space-4) 0 0; font-size: var(--mm-text-sm); color: var(--mm-color-ink-muted); }
.mm-home .mm-start__more { margin: var(--mm-space-4) 0 0; }
.mm-start .add_to_cart_button.added::after { content: ' \2713'; }
.mm-start .added_to_cart { font-size: var(--mm-text-sm); font-weight: var(--mm-weight-bold); color: var(--mm-color-brand-deep); }

/* On a phone the card is shorter (Tyler, 2026-11-04: "condense it slightly
 * vertically so that it fits better on a phone screen"): a wider, shorter crop
 * of the same photo, and tighter spacing. A computer keeps the side-by-side
 * card exactly as it was. */
@media (max-width: 899px) {
  .mm-start__media { aspect-ratio: 4 / 3; }
  .mm-start__media img { object-fit: cover; object-position: 50% 55%; }
  .mm-start__copy { padding: var(--mm-space-5); }
  .mm-home .mm-start .mm-lede { margin-top: var(--mm-space-2); font-size: var(--mm-text-base); }
  .mm-start__inside { gap: var(--mm-space-1); margin-top: var(--mm-space-4); }
  .mm-start__row { padding: var(--mm-space-2) var(--mm-space-3); }
  .mm-start__buy { margin-top: var(--mm-space-4); padding-top: var(--mm-space-4); }
  .mm-home .mm-start__amount.mm-num { font-size: var(--mm-text-2xl); }
  .mm-home .mm-start__more { margin-top: var(--mm-space-3); }
}

/* --- 5 · Start low, go slow --------------------------------------------- */

.mm-steps {
  display: grid;
  gap: var(--mm-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mm-step {
  position: relative;
  margin: 0;
  padding: var(--mm-space-5) var(--mm-space-5) var(--mm-space-5) calc(var(--mm-space-16) + var(--mm-space-2));
  background: var(--mm-color-surface);
  border-radius: var(--mm-radius-md);
  box-shadow: var(--mm-shadow-card);
}
.mm-step__n {
  position: absolute;
  left: var(--mm-space-5);
  top: var(--mm-space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--mm-space-10);
  height: var(--mm-space-10);
  border-radius: var(--mm-radius-pill);
  background: var(--mm-color-brand);
  color: var(--mm-color-on-brand);
  font-weight: var(--mm-weight-bold);
}
.mm-home .mm-step__title { margin: 0; font-family: var(--mm-font-display); font-weight: var(--mm-weight-bold); font-size: var(--mm-text-lg); line-height: var(--mm-leading-tight); letter-spacing: normal; text-transform: none; color: var(--mm-color-ink); }
.mm-home .mm-step__body { margin: var(--mm-space-1) 0 0; font-size: var(--mm-text-sm); color: var(--mm-color-ink-muted); }

/* --- 6 · Formats -------------------------------------------------------- */

/* White cards like the shop's product cards: the product photo on sand,
 * square and whole, then the name and an arrow on one line (Tyler,
 * 2026-11-02: images were cut off and "Functional Fungi" took two lines). */
.mm-cards { display: grid; gap: var(--mm-space-3); }
.mm-cards--category { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm-home .mm-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--mm-color-surface);
  border: var(--mm-hairline) solid var(--mm-color-border);
  border-radius: var(--mm-radius-md);
  box-shadow: var(--mm-shadow-card);
  color: var(--mm-color-ink);
  text-decoration: none;
  transition: border-color var(--mm-motion-base) var(--mm-ease);
}
.mm-home .mm-card:hover { border-color: var(--mm-color-brand); }
.mm-cards--category .mm-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mm-space-1);
  padding: var(--mm-space-3) var(--mm-space-3) var(--mm-space-3) var(--mm-space-4);
}
.mm-home .mm-cards--category .mm-card__title {
  min-width: 0;
  overflow: hidden;
  font-size: clamp(var(--mm-text-sm), 4vw, var(--mm-text-base));
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mm-home .mm-card__title {
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-bold);
  font-size: var(--mm-text-base);
  line-height: var(--mm-leading-tight);
  color: var(--mm-color-ink);
}
.mm-card__cta {
  flex: 0 0 auto;
  font-family: var(--mm-font-display);
  font-size: var(--mm-text-xl);
  font-weight: var(--mm-weight-bold);
  line-height: 1;
  color: var(--mm-color-brand-deep);
}
.mm-cards--category .mm-card__media {
  display: block;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  overflow: hidden;
  background: var(--mm-color-sand);
}
.mm-cards--category .mm-card__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* The smallest phones (320–359px): the names stay on one line, with no
 * arrow and a little less padding. */
@media (max-width: 359px) {
  .mm-home .mm-cards--category .mm-card__cta { display: none; }
  .mm-cards--category .mm-card__body { padding: var(--mm-space-3) var(--mm-space-2); }
  .mm-home .mm-cards--category .mm-card__title { font-size: var(--mm-text-xs); }
}

/* --- 7 · Reviews -------------------------------------------------------- */

.mm-quotes { display: grid; gap: var(--mm-space-3); }
.mm-quote {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--mm-space-5);
  background: var(--mm-color-surface);
  border: var(--mm-hairline) solid var(--mm-color-border);
  border-radius: var(--mm-radius-md);
  box-shadow: var(--mm-shadow-card);
}
.mm-quote__head { display: flex; align-items: center; gap: var(--mm-space-3); }
.mm-stars { display: inline-flex; gap: var(--mm-space-1); color: var(--mm-color-brand); line-height: 1; }
.mm-quote figcaption {
  font-size: var(--mm-text-2xs);
  font-weight: var(--mm-weight-bold);
  letter-spacing: var(--mm-tracking-wide);
  text-transform: uppercase;
  color: var(--mm-color-ink-muted);
}
.mm-home .mm-quote blockquote {
  margin: var(--mm-space-3) 0 0;
  padding: 0;
  border: 0;
  font-size: var(--mm-text-base);
  font-style: normal;
  line-height: var(--mm-leading-normal);
  color: var(--mm-color-ink);
}
/* The product the review is about, at the foot of the card: its photo and
 * this page's name for it (Tyler, 2026-11-03). Pushed to the bottom so the
 * badges line up across a row of cards of different lengths. */
.mm-home .mm-quote__product {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--mm-space-2);
  margin-top: auto;
  padding-top: var(--mm-space-4);
  font-size: var(--mm-text-xs);
  font-weight: var(--mm-weight-bold);
  color: var(--mm-color-ink-muted);
  text-decoration: none;
}
.mm-home .mm-quote__product img {
  flex: none;
  width: var(--mm-space-10);
  height: var(--mm-space-10);
  object-fit: cover;
  background: var(--mm-color-sand);
  border-radius: var(--mm-radius-card);
}
.mm-home a.mm-quote__product:hover .mm-quote__product-name,
.mm-home a.mm-quote__product:focus-visible .mm-quote__product-name { color: var(--mm-color-brand-deep); text-decoration: underline; }

/* --- 8 · Our guides ----------------------------------------------------- */

.mm-cards--teaching { grid-template-columns: minmax(0, 1fr); }
.mm-cards--teaching .mm-card__body { display: flex; flex-direction: column; height: 100%; padding: var(--mm-space-6) var(--mm-space-5); box-sizing: border-box; }
.mm-home .mm-cards--teaching .mm-title {
  font-size: var(--mm-text-2xl);
  font-weight: var(--mm-weight-bold);
  letter-spacing: normal;
}
.mm-cards--teaching .mm-actions { margin-top: auto; padding-top: var(--mm-space-5); }

/* "New to mushrooms and want to learn more?" — the handoff's resources band,
 * as one dark card under the guides. */
.mm-cta {
  margin-top: var(--mm-space-6);
  padding: var(--mm-space-8) var(--mm-space-6);
  border-radius: var(--mm-radius-md);
  background: var(--mm-color-contrast);
  text-align: center;
}
.mm-home .mm-cta .mm-title { color: var(--mm-color-on-contrast); font-weight: var(--mm-weight-light); }
.mm-cta .mm-actions { justify-content: center; }

/* --- 9 · Functional Fungi: a quiet band --------------------------------- */

.mm-feature {
  display: grid;
  gap: var(--mm-space-5);
  align-items: center;
  padding: var(--mm-space-6) var(--mm-space-5);
  border: var(--mm-hairline) solid var(--mm-color-border);
  border-radius: var(--mm-radius-md);
  background: var(--mm-color-surface);
}
.mm-feature__media img { width: 100%; border-radius: var(--mm-radius-sm); }
.mm-home .mm-feature .mm-button--primary {
  min-height: var(--mm-control-height);
  padding-inline: var(--mm-space-6);
  font-size: var(--mm-text-sm);
  background: transparent;
  border: var(--mm-hairline) solid var(--mm-color-ink);
  color: var(--mm-color-ink);
  box-shadow: none;
}
.mm-home .mm-feature .mm-button--primary:hover { background: var(--mm-color-ink); color: var(--mm-color-on-contrast); }

/* --- 10 · The journal --------------------------------------------------- */

.mm-cards--post { grid-template-columns: minmax(0, 1fr); }
.mm-cards--post .mm-card { flex-direction: row; align-items: center; gap: var(--mm-space-4); padding: var(--mm-space-3); }
.mm-cards--post .mm-card__media { flex: 0 0 auto; width: var(--mm-space-20); }
.mm-cards--post .mm-card__media img { width: var(--mm-space-20); height: var(--mm-space-20); object-fit: cover; border-radius: var(--mm-radius-sm); }
.mm-home .mm-cards--post .mm-card__title { font-size: var(--mm-text-base); }

/* --- Wider screens ------------------------------------------------------ */

@media (min-width: 700px) {
  .mm-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mm-cards--category { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Three across. Six tracks, two each, so a short last row sits centred:
   * five reviews are three, then two under the gaps (Tyler, 2026-11-03). */
  .mm-quotes { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mm-quote { grid-column: span 2; }
  .mm-quote:nth-child(3n + 1):nth-last-child(2) { grid-column: 2 / span 2; }
  .mm-quote:nth-child(3n + 1):last-child { grid-column: 3 / span 2; }
  .mm-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mm-step { padding: var(--mm-space-16) var(--mm-space-5) var(--mm-space-5); }
}

@media (min-width: 900px) {
  .mm-band { padding-block: var(--mm-space-16); }
  .mm-band--hero { padding-block: var(--mm-space-10) var(--mm-space-16); }
  .mm-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--mm-space-12); }
  .mm-hero__media { order: 0; }
  .mm-hero__media img { aspect-ratio: 1; }
  .mm-doses {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    gap: var(--mm-space-5);
  }
  .mm-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mm-space-4); }
  .mm-start { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .mm-start__media { aspect-ratio: auto; min-height: 100%; }
  .mm-start__copy { align-self: center; padding: var(--mm-space-10); }
  .mm-cards--teaching { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mm-cards--category { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mm-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); padding: var(--mm-space-8); }
  .mm-cards--post { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mm-cards--post .mm-card { flex-direction: column; align-items: stretch; padding: 0; }
  .mm-cards--post .mm-card__media { width: 100%; }
  .mm-cards--post .mm-card__media img { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 0; }
  .mm-cards--post .mm-card__title { padding: var(--mm-space-4); }
}

@media (prefers-reduced-motion: reduce) {
  .mm-home * { transition: none !important; scroll-behavior: auto !important; }
}