/* ==========================================================================
   01 — BASE
   Reset, typography, container, section rhythm.
   Depends on: 00-tokens.css
   ========================================================================== */

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

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

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

/* --- Document ------------------------------------------------------------- */

body {
  margin: 0;
  background: var(--mo-bg);
  color: var(--mo-text);
  font-family: var(--mo-font-body);
  font-size: var(--mo-fs-base);
  line-height: var(--mo-lh-base);
  letter-spacing: var(--mo-ls-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Typography ----------------------------------------------------------- */
/* The reference's elegance is in the metrics, not the face: light weights,
   wide tracking, tall leading. Preserve those even if the family changes. */

h1, h2, h3, h4, h5, h6,
.mo-h1, .mo-h2, .mo-h3 {
  margin: 0 0 .5em;
  color: var(--mo-heading);
  font-family: var(--mo-font-heading);
  font-weight: var(--mo-fw-heading);
  line-height: var(--mo-lh-heading);
  letter-spacing: var(--mo-ls-heading);
}

h1, .mo-h1 { font-size: var(--mo-fs-h1); }
h2, .mo-h2 { font-size: var(--mo-fs-h2); }
h3, .mo-h3 { font-size: var(--mo-fs-h3); }

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

a {
  color: var(--mo-link);
  text-decoration: none;
  transition: color var(--mo-dur) var(--mo-ease);
}

a:hover { color: var(--mo-green-700); }

/* Visible focus for keyboard users only — never suppress it outright. */
:focus-visible {
  outline: 2px solid var(--mo-green-700);
  outline-offset: 3px;
}

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

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

@media (min-width: 750px) {
  .mo-container { padding-inline: var(--mo-gutter); }
}

/* Full-bleed band that still respects the container for its inner text. */
.mo-bleed {
  width: 100%;
  margin-inline: 0;
  max-width: none;
}

.mo-section { padding-block: var(--mo-section-y); }
.mo-section--flush { padding-block: 0; }
.mo-section--alt  { background: var(--mo-bg-alt); }

/* Section heading block: small title, optional subtitle, left aligned. */
.mo-section__head { margin-bottom: 1.5rem; }
.mo-section__title { margin-bottom: .25em; }

.mo-section__sub {
  margin: 0;
  font-size: var(--mo-fs-small);
  color: var(--mo-text);
}

.mo-section--center { text-align: center; }
.mo-section--center .mo-section__head { margin-inline: auto; max-width: 46rem; }

/* --- Grid ----------------------------------------------------------------- */
/* Mobile stays 2-up: square product shots read fine at 375px and it halves
   the scroll depth on a page this long. */

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

@media (min-width: 750px) {
  .mo-grid { gap: var(--mo-gutter); }
  .mo-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 990px) {
  .mo-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

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

.mo-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}