/* ============================================================
   MK EDGE — DESIGN TOKENS v1
   Single source of truth. Nothing in the codebase should hardcode
   a hex value, a font size, or a spacing value that isn't here.
   ============================================================ */

:root {

  /* ---------- COLOR ----------
     RULE: --mk-blue appears on buttons, links, and focus states ONLY.
     It never appears on eyebrows, dividers, borders, icons, or fills.
     This is the entire hierarchy mechanism. Violating it is the one
     change that breaks the identity.
  */
  --mk-blue:        #3679AC;  /* action: buttons, links */
  --mk-blue-press:  #26567A;  /* hover / active only */
  --mk-blue-deep:   #12344A;  /* dark SURFACE — a neutral, not an accent */
  --mk-blue-wash:   #EAF3FA;  /* rare quiet fill; never behind a CTA */

  --mk-ink:         #141719;  /* headings, body, all rules */
  --mk-ink-60:      #5B6165;  /* secondary text, eyebrows, captions */
  --mk-ink-40:      #8A9094;  /* disabled, metadata */

  --mk-paper:       #FFFFFF;
  --mk-paper-alt:   #F6F6F4;  /* alternating section background */
  --mk-hair:        #DDE0E1;  /* card borders, dividers */
  --mk-hair-strong: #C3C7C9;  /* secondary button border, input border */

  --mk-ochre:       #8A6516;  /* application-cycle STATE only.
                                 Never a CTA. Never decorative.
                                 If this rule can't hold, delete the token. */

  /* ---------- TYPE ---------- */
  --mk-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mk-sans:  "Libre Franklin", -apple-system, BlinkMacSystemFont, "Inter",
              system-ui, sans-serif;
  --mk-mono:  ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale — serif for display/headings, sans for everything functional.
     Hard rule: no serif below 17px, no sans above 20px. */
  --mk-display:   3.5rem;   /* 56 — hero only, once per page   */
  --mk-h1:        2.5rem;   /* 40 */
  --mk-h2:        1.75rem;  /* 28 */
  --mk-h3:        1.25rem;  /* 20 */
  --mk-body:      1.0625rem;/* 17 */
  --mk-small:     0.875rem; /* 14 */
  --mk-eyebrow:   0.6875rem;/* 11 */

  --mk-lh-display: 1.06;
  --mk-lh-head:    1.2;
  --mk-lh-body:    1.65;

  --mk-ls-display: -0.02em;
  --mk-ls-head:    -0.01em;
  --mk-ls-eyebrow:  0.16em;
  --mk-ls-wordmark: 0.22em;

  --mk-w-regular: 400;
  --mk-w-medium:  500;
  --mk-w-semi:    600;   /* heaviest weight in the system — no bold, no 700+ */

  /* Measure */
  --mk-measure:      62ch;  /* body copy max width */
  --mk-measure-lead: 54ch;  /* lede paragraphs */
  --mk-measure-head: 22ch;  /* display headlines */

  /* ---------- SPACE ----------
     4px base. Use tokens, not arbitrary values. */
  --mk-1:  0.25rem;  /*  4 */
  --mk-2:  0.5rem;   /*  8 */
  --mk-3:  0.75rem;  /* 12 */
  --mk-4:  1rem;     /* 16 */
  --mk-5:  1.5rem;   /* 24 */
  --mk-6:  2rem;     /* 32 */
  --mk-7:  2.75rem;  /* 44 */
  --mk-8:  4rem;     /* 64 */
  --mk-9:  5.5rem;   /* 88 — standard section rhythm */
  --mk-10: 7.5rem;   /* 120 — major section breaks, desktop only */

  --mk-gutter:     2.5rem;  /* 40 desktop */
  --mk-gutter-sm:  1.25rem; /* 20 mobile  */
  --mk-container:  1080px;
  --mk-container-narrow: 720px; /* long-form reading */

  /* ---------- SURFACE ----------
     No shadows anywhere. Elevation is communicated by rules and
     whitespace. A drop shadow is the fastest way to look SaaS-coded. */
  --mk-radius: 2px;         /* buttons, cards, inputs — everything */
  --mk-hairline: 1px;
  --mk-rule-strong: 2px;    /* card top border, active nav underline */
  --mk-shadow: none;

  /* ---------- MOTION ----------
     Color and border transitions only. No transforms, no scale on hover,
     no scroll-triggered reveals, no parallax. */
  --mk-transition: 150ms ease;

  /* ---------- SIGNATURE ---------- */
  --mk-edge-overshoot: 112%; /* the wordmark rule's width vs. the wordmark */
}

/* ============================================================
   BASE
   ============================================================ */
body {
  font-family: var(--mk-sans);
  font-size: var(--mk-body);
  line-height: var(--mk-lh-body);
  color: var(--mk-ink);
  background: var(--mk-paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .mk-display {
  font-family: var(--mk-serif);
  font-weight: var(--mk-w-regular);
  color: var(--mk-ink);
}

.mk-display { font-size: var(--mk-display); line-height: var(--mk-lh-display); letter-spacing: var(--mk-ls-display); max-width: var(--mk-measure-head); }
h1 { font-size: var(--mk-h1); line-height: 1.14; letter-spacing: var(--mk-ls-head); }
h2 { font-size: var(--mk-h2); line-height: 1.24; letter-spacing: var(--mk-ls-head); }
h3 { font-size: var(--mk-h3); line-height: 1.35; font-weight: var(--mk-w-medium); }

p { max-width: var(--mk-measure); }
.text-center p { margin-inline: auto; }

a {
  color: var(--mk-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--mk-blue-press); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--mk-ink);
  outline-offset: 3px;
}

/* ============================================================
   THE RULE — the signature device.
   One hairline doing five jobs. Do not introduce a sixth without
   deciding it belongs to the system.
   ============================================================ */

/* 1 — eyebrow: hairline lead-in + tracked label. Ink, never blue. */
.mk-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mk-sans);
  font-size: var(--mk-eyebrow);
  font-weight: var(--mk-w-semi);
  letter-spacing: var(--mk-ls-eyebrow);
  text-transform: uppercase;
  color: var(--mk-ink-60);
  margin: 0 0 var(--mk-6);
}
.mk-eyebrow::before {
  content: "";
  flex: none;
  width: 32px;
  height: var(--mk-hairline);
  background: var(--mk-ink);
}

/* 2 — section divider */
.mk-rule { display: block; height: var(--mk-hairline); background: var(--mk-ink); border: 0; margin: 0; }
.mk-rule--hair { background: var(--mk-hair); }

/* 3 — card: strong rule on top, hairline elsewhere, no shadow, no fill */
.mk-card {
  background: var(--mk-paper);
  border: var(--mk-hairline) solid var(--mk-hair);
  border-top: var(--mk-rule-strong) solid var(--mk-ink);
  border-radius: var(--mk-radius);
  padding: var(--mk-6) var(--mk-5);
  box-shadow: var(--mk-shadow);
}

/* 4 — active nav underline. Ink, not blue. */
.mk-nav-link { padding-bottom: 7px; color: var(--mk-ink-60); text-decoration: none; font-size: var(--mk-small); font-weight: var(--mk-w-medium); }
.mk-nav-link[aria-current="page"] { color: var(--mk-ink); border-bottom: var(--mk-rule-strong) solid var(--mk-ink); }

/* 5 — the wordmark overshoot. The only place the rule breaks its box. */
.mk-wordmark { display: inline-block; }
.mk-wordmark__text {
  display: block;
  font-family: var(--mk-serif);
  font-weight: var(--mk-w-regular);
  letter-spacing: var(--mk-ls-wordmark);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: var(--mk-ink);
}
.mk-wordmark__edge {
  display: block;
  width: var(--mk-edge-overshoot);
  height: var(--mk-hairline);
  background: var(--mk-ink);
  margin-top: 12px;
}
.mk-wordmark--reversed .mk-wordmark__text { color: var(--mk-paper); }
.mk-wordmark--reversed .mk-wordmark__edge { background: var(--mk-paper); }

/* ============================================================
   BUTTONS — two. A third style is how hierarchy dies.
   Anything else that must be clickable is a blue text link.
   ============================================================ */
.mk-btn {
  display: inline-block;
  font-family: var(--mk-sans);
  font-size: var(--mk-small);
  font-weight: var(--mk-w-semi);
  letter-spacing: 0.02em;
  padding: 15px 30px;
  border-radius: var(--mk-radius);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--mk-transition), border-color var(--mk-transition), color var(--mk-transition);
}

/* Primary — the only solid-filled element on the page. One per screen region. */
.mk-btn--primary { background: var(--mk-blue); border: var(--mk-hairline) solid var(--mk-blue); color: var(--mk-paper); }
.mk-btn--primary:hover { background: var(--mk-blue-press); border-color: var(--mk-blue-press); color: var(--mk-paper); }

/* Secondary — border darkens on hover. No fill, no color change. */
.mk-btn--secondary { background: transparent; border: var(--mk-hairline) solid var(--mk-hair-strong); color: var(--mk-ink); }
.mk-btn--secondary:hover { background: transparent; border-color: var(--mk-ink); color: var(--mk-ink); }

/* On ink-blue surfaces, primary inverts to white. */
.mk-surface--deep .mk-btn--primary { background: var(--mk-paper); border-color: var(--mk-paper); color: var(--mk-blue-deep); }
.mk-surface--deep .mk-btn--primary:hover { background: #E8EDEC; border-color: #E8EDEC; }

/* ============================================================
   SURFACES
   ============================================================ */
.mk-surface--alt  { background: var(--mk-paper-alt); }
.mk-surface--deep { background: var(--mk-blue-deep); color: var(--mk-paper); }
.mk-surface--deep h1, .mk-surface--deep h2, .mk-surface--deep h3 { color: var(--mk-paper); }
.mk-surface--deep p { color: rgba(255,255,255,0.72); }
.mk-surface--deep .mk-eyebrow { color: rgba(255,255,255,0.62); }
.mk-surface--deep .mk-eyebrow::before { background: rgba(255,255,255,0.45); }

/* ============================================================
   STATUS — ochre, one job.
   ============================================================ */
.mk-status {
  color: var(--mk-ochre);
  font-size: 0.78rem;
  font-weight: var(--mk-w-semi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.mk-container { max-width: var(--mk-container); margin-inline: auto; padding-inline: var(--mk-gutter); }
.mk-container--narrow { max-width: var(--mk-container-narrow); }
.mk-section { padding-block: var(--mk-9); }

@media (max-width: 680px) {
  .mk-container { padding-inline: var(--mk-gutter-sm); }
  :root {
    --mk-display: 2.25rem;  /* 36 */
    --mk-h1:      1.875rem; /* 30 */
    --mk-h2:      1.5rem;   /* 24 */
  }
  .mk-section { padding-block: var(--mk-8); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}