/* What every page of the website shares: the base and the bar at the top. Light only, with its own background, so
   that a dark browser or a host frame does not show dark text on a dark canvas. Not part of the bundle. */
html {
  color-scheme: light;
  background: #fff;
  color: #111;
  scroll-padding-top: 64px;
}

body {
  margin: 0;
  font: 16px/1.5 system-ui, sans-serif;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: #0b5cad;
}

/* The bar is as wide as the window, and what is in it a little wider than the pages. */
.topbar {
  --bar-width: 1120px;
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 24px;
  padding: 10px max(16px, (100% - var(--bar-width)) / 2);
  background: rgb(255 255 255 / .95);
  border-bottom: 1px solid #ddd;
}

.brand {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.brand a {
  color: inherit;
  text-decoration: none;
}

.topbar nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.topbar nav a {
  text-decoration: none;
}

/* The pages of the site, at the end of the bar. */
.topbar .site-nav {
  margin-inline-start: auto;
}

/* Where all fits on one line, the sections of a page stand in the middle of the bar. */
@media (width >= 1000px) {
  .topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .topbar .sections {
    grid-column: 2;
  }

  .topbar .site-nav {
    grid-column: 3;
    justify-self: end;
  }
}

.topbar [aria-current="page"] {
  color: #14213d;
  font-weight: 600;
}