/* Miller Carter — reset + base elements */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--mc-font-body);
  font-size: var(--mc-text-base);
  line-height: 1.6;
  color: var(--mc-text);
  background: var(--mc-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}

h1,h2,h3,h4 {
  font-family: var(--mc-font-display);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: var(--mc-track-display);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--mc-text-3xl); }
h2 { font-size: var(--mc-text-2xl); }
h3 { font-size: var(--mc-text-xl); letter-spacing: var(--mc-track-tight); font-weight: 500; }

p { margin: 0 0 var(--mc-space-4); text-wrap: pretty; }

/* Yellow is never a link colour on white — see tokens.css contrast rule */
a { color: var(--mc-text); text-decoration-color: var(--mc-gray-400); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--mc-yellow); }

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

:focus-visible {
  outline: 2px solid var(--mc-gold);
  outline-offset: 3px;
  border-radius: 3px;
}
.mc-invert :focus-visible { outline-color: var(--mc-yellow); }

.mc-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.mc-skip-link {
  position: absolute; left: var(--mc-space-4); top: -100px; z-index: 999;
  background: var(--mc-yellow); color: var(--mc-gray-900);
  padding: var(--mc-space-3) var(--mc-space-4);
  border-radius: var(--mc-radius-sm); font-weight: 500; text-decoration: none;
  transition: top var(--mc-dur-fast) var(--mc-ease);
}
.mc-skip-link:focus { top: var(--mc-space-4); }

/* Layout */
.mc-container {
  width: 100%; max-width: var(--mc-container);
  margin-inline: auto; padding-inline: var(--mc-gutter);
}
.mc-section { padding-block: var(--mc-space-24); }

/* Buttons — yellow as FILL with ink label (11.9:1), never yellow text */
.mc-btn {
  display: inline-flex; align-items: center; gap: var(--mc-space-2);
  font-family: var(--mc-font-body); font-size: var(--mc-text-sm); font-weight: 500;
  padding: var(--mc-space-3) var(--mc-space-6);
  border: 1px solid transparent; border-radius: var(--mc-radius-pill);
  text-decoration: none; cursor: pointer;
  transition: background var(--mc-dur-fast) var(--mc-ease),
              transform var(--mc-dur-fast) var(--mc-ease);
}
.mc-btn:active { transform: scale(.97); }

.mc-btn--primary { background: var(--mc-yellow); color: var(--mc-gray-900); }
.mc-btn--primary:hover { background: var(--mc-yellow-hover); }

.mc-btn--ghost { background: transparent; color: var(--mc-text); border-color: var(--mc-border); }
.mc-btn--ghost:hover { border-color: var(--mc-text); }

/* Scroll-reveal — opt-in via data-mc-reveal, JS adds .is-visible */
[data-mc-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--mc-ease-out), transform .8s var(--mc-ease-out);
  transition-delay: var(--mc-reveal-delay, 0ms);
}
[data-mc-reveal].is-visible { opacity: 1; transform: none; }

/* Anyone who asked their OS for less movement gets none of it. */
@media (prefers-reduced-motion: reduce) {
  [data-mc-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}