@font-face {
  font-family: Graphik;
  src: url("/assets/graphik-regular.1ecfa068a5164878ede65383f6cff19d26dce2c3801dd5aaa17440445c2cd68b.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Graphik;
  src: url("/assets/graphik-semibold.c5711ff091da205cb70599ca462ca178da6e93ca25209e191b277f1e83a182ad.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Sharpie;
  src: url("/assets/sharpie.cdbc0e4b0fb41d3ea23b96805406b3c52843e1ffc740b2d558e6e48ecb611c1d.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* The @font-face declarations are generated and prepended to this file, because
   the URLs they point at contain a digest of the font bytes. */

:root {
  color-scheme: light;
  /* Falls back to the system stack, which is already installed, so the page is
     readable from the first paint whatever happens to the download. */
  font-family: Graphik, system-ui, sans-serif;
}

/* Nothing here ships a 700 weight; the semibold face answers for bold, and
   naming it keeps the browser from synthesising one out of the regular. */
b,
strong,
h1,
h2,
h3 {
  font-weight: 600;
}

/* Applied where the display face is wanted, rather than to everything. */
.font-sharpie {
  font-family: Sharpie, Graphik, system-ui, sans-serif;
}

body {
  margin: 0 auto;
  max-width: 48rem;
  padding: 2rem 1rem;
  line-height: 1.5;
}

img {
  height: auto;
  max-width: 100%;
}

nav[aria-label="Breadcrumb"] ol {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.875rem;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

/* The separator is generated rather than written into the markup, so a screen
   reader announces the steps and not a slash between every one of them. */
nav[aria-label="Breadcrumb"] li + li::before {
  color: #595959;
  content: "/";
  margin: 0 0.5rem;
}

nav[aria-label="Breadcrumb"] [aria-current="page"] {
  color: #595959;
}

header {
  align-items: center;
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* The mark stays left and everything else groups to the right, so adding a
   third control later does not strand the second one in the middle. */
header .nav-search {
  margin-left: auto;
}

nav[aria-label="Language"] ul {
  display: flex;
  font-size: 0.875rem;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav[aria-label="Language"] [aria-current="true"] {
  color: #595959;
}