@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  --mk-paper: #F5F2EA;
  --mk-ink: #14110E;
  --mk-navy: #1B2A4A;
  --mk-gold: #C5A55A;
  --mk-signal: #EE8031;
  --mk-error: #621C1B;
  --mk-focus: color-mix(in srgb, var(--mk-gold) 78%, white 22%);
}

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

body {
  font-family: "EB Garamond", Georgia, serif;
  color: var(--mk-ink);
  background: var(--mk-paper);
}

button,
input,
select,
textarea {
  font: inherit;
}

code,
pre,
.mono,
[data-mk-utility],
[data-mk-figure],
[data-mk-timestamp],
[data-mk-source] {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

[data-mk-figure] {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

:focus-visible {
  outline: 2px solid var(--mk-focus);
  outline-offset: 2px;
}

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