/* Marchenholm — layout.css : container, sections, alternating paper rhythm, skip-link. */

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

.mh-container--content {
  max-width: var(--content);
}

.mh-container--prose {
  max-width: var(--prose);
}

/* Section rhythm — alternating paper / paper-alt */
.mh-section {
  padding: var(--space-section) 0;
  background: var(--c-paper);
}
.mh-section--alt {
  background: var(--c-paper-alt);
}
/* Hairline separator when two same-bg sections are adjacent (e.g. Operators + Pillars on home). */
.mh-section--alt + .mh-section--alt,
.mh-section:not(.mh-section--alt) + .mh-section:not(.mh-section--alt) {
  border-top: 1px solid var(--c-stone);
}
.mh-section--narrow {
  padding: calc(var(--space-section) * 0.6) 0;
}
.mh-section--quiet {
  padding: calc(var(--space-section) * 0.5) 0;
}

/* Kicker (uppercase mono label above H2) */
.mh-kicker {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: var(--f-label);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 16px;
}

.mh-section h2,
.mh-h2 {
  font-size: var(--f-display-m);
  line-height: 1.15;
  margin-bottom: var(--space-item);
  max-width: 32ch;
}

.mh-section-link {
  display: inline-block;
  margin-top: 32px;
  color: var(--c-accent);
  font-weight: 500;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color 0.15s;
}
.mh-section-link:hover { border-bottom-color: var(--c-accent); }

/* Grids */
.mh-grid { display: grid; gap: var(--space-item); }
.mh-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.mh-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.mh-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Skip-link (WCAG) */
.mh-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--c-ink);
  color: var(--c-paper);
  padding: 12px 20px;
  font-weight: 600;
}
.mh-skip-link:focus {
  left: 16px;
  top: 16px;
}

/* Horizontal divider */
.mh-rule-hair { height: 1px; background: var(--c-stone); width: 100%; }
.mh-rule-cobalt { height: 2px; background: var(--c-accent); width: 100%; }

/* Breadcrumbs */
.mh-breadcrumbs {
  font-family: var(--f-mono);
  font-size: var(--f-label);
  color: var(--c-stone);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-item);
}
.mh-breadcrumbs a { color: var(--c-ink-muted); border-bottom: 1px solid transparent; }
.mh-breadcrumbs a:hover { color: var(--c-accent); border-bottom-color: var(--c-accent); }
.mh-breadcrumbs span[aria-hidden] { margin: 0 8px; }

/* Main landmark spacing — push below sticky masthead */
main { display: block; }