@font-face {
  font-family: "Young Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/young-serif-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-latin.woff2") format("woff2");
}

:root {
  --mb-oat: #f4eedf;
  --mb-oat-deep: #e8dfc7;
  --mb-rule: #cdbf9c;
  --mb-loam: #2a2318;
  --mb-loam-muted: #5d5340;
  --mb-bottle: #1d3a2a;
  --mb-bottle-soft: #2d4f3b;
  --mb-on-bottle: #f4eedf;
  --mb-on-bottle-muted: #c3cdb9;
  --mb-clipping: #c6db5a;
  --mb-clay: #9b4321;
  --mb-white: #fffcf4;
  --mb-error: #9a2617;
  --mb-veil: rgb(42 35 24 / 10%);
  --mb-veil-strong: rgb(42 35 24 / 22%);
  --mb-shade: rgb(29 58 42 / 72%);

  --mb-display: "Young Serif", "Iowan Old Style", Georgia, serif;
  --mb-text: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mb-size-hero: clamp(2.6rem, 1.4rem + 4.2vw, 4.25rem);
  --mb-size-h2: clamp(2.1rem, 1.5rem + 2.2vw, 3.375rem);
  --mb-size-h3: clamp(1.3125rem, 1.2rem + .4vw, 1.6875rem);
  --mb-size-lede: clamp(1.0625rem, 1rem + .3vw, 1.3125rem);
  --mb-size-small: .8125rem;
  --mb-content: 1320px;
  --mb-gutter: clamp(1rem, 4vw, 3.5rem);
  --mb-inset: max(var(--mb-gutter), calc((100% - var(--mb-content)) / 2));
  --mb-band: clamp(4rem, 2.5rem + 6vw, 8.5rem);
  --mb-ease: cubic-bezier(.2, .7, .2, 1);
  --mb-stripe: -12deg;

  --ui-color-background: var(--mb-oat);
  --ui-color-surface: var(--mb-white);
  --ui-color-text: var(--mb-loam);
  --ui-color-muted: var(--mb-loam-muted);
  --ui-color-border: var(--mb-rule);
  --ui-color-accent: var(--mb-bottle);
  --ui-color-accent-text: var(--mb-on-bottle);
  --ui-color-error: var(--mb-error);
  --ui-font-body: var(--mb-text);
  --ui-font-heading: var(--mb-display);
  --ui-size-body: 1.0625rem;
  --ui-size-icon: 1.25em;
  --ui-space-sm: .5rem;
  --ui-space-md: 1rem;
  --ui-space-lg: 2rem;
  --ui-radius-control: 2px;
  --ui-radius-surface: 4px;
  --ui-border-width: 1.5px;
}