/* ============================================================
   Macnitech — Base element styles & primitives
   Light, opinionated reset + brand defaults.
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--selection-bg); }

/* ---- Headings: Cormorant Garamond, light, tight ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  color: var(--text-strong);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  margin: 0 0 0.4em;
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--text-h4); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); }

p { margin: 0 0 1em; text-wrap: pretty; }

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--oxblood); }

strong { font-weight: var(--fw-semibold); color: var(--text-strong); }

hr { border: 0; border-top: var(--border-hair) solid var(--border); margin: var(--space-6) 0; }

/* ============================================================
   Utility classes (brand primitives)
   ============================================================ */

/* Display headline — the signature editorial serif */
.mt-display {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--text-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
  margin: 0;
}

.mt-lead {
  font-size: var(--text-lead);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
  font-weight: var(--fw-light);
}

/* Eyebrow / kicker — uppercase tracked label, the structural signature */
.mt-eyebrow {
  font-family: var(--font-label);
  font-weight: var(--fw-bold);
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--accent);
}
.mt-eyebrow--muted { color: var(--text-muted); }

/* Oxblood tick / divider often paired with eyebrows */
.mt-eyebrow--tick { display: inline-flex; align-items: center; gap: var(--space-2); }
.mt-eyebrow--tick::before {
  content: "";
  width: 18px; height: 2px;
  background: var(--accent);
  display: inline-block;
}

/* Container helpers */
.mt-container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.mt-container--wide { max-width: var(--container-wide); }
.mt-prose { max-width: var(--container-prose); }

/* Focusable elements get the brand ring */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}