.page {
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--block-space);
  padding-block: calc(var(--block-space) * 2);
}

.site-nav {
  --nav-border-width: 1.5px;
  --nav-border-color: var(--color-ink-muted);
  display: flex;
  align-items: flex-end;
  margin-block-end: calc(var(--block-space) * 2);
  border-block-end: var(--nav-border-width) solid var(--nav-border-color);
}

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

.site-nav__tabs {
  display: flex;
  flex: 1;
}

/* Bordered, folder-style tabs: each sits on the nav's own baseline (the
   -2px margins overlap it), and the active tab erases its share of that
   line so it reads as fused to the page below, rather than underlined. */
.site-nav__tab {
  --tab-border-radius: calc(var(--border-radius) * 2);
  padding: 0.2em 1em;
  border: var(--nav-border-width) solid var(--nav-border-color);
  border-start-start-radius: var(--tab-border-radius);
  border-start-end-radius: var(--tab-border-radius);
  margin-inline-end: -2px;
  margin-block-end: -2px;
  font-weight: 400;
  font-size: calc(var(--font-size-m) * 1.2);
  color: var(--color-ink-muted);
  /* character spacing */
  letter-spacing: 0.02em;

  /* text-transform: uppercase; */
  background-color: var(--color-canvas);

  &:hover {
    color: var(--color-ink);
  }
}

.site-nav__tab--active {
  color: var(--color-ink);
  /* font-weight: 700; */
  border-block-end-color: var(--color-canvas);
}

/* The action tab, not a destination - same shape as the others, just bold
   rather than filled, so it reads as an option, not a wall of black. */
.site-nav__tab--primary {
  margin-inline-start: auto;
  /* font-weight: 700; */
  color: var(--color-ink);
}

.flash {
  padding: var(--block-space);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  margin-block-end: var(--block-space);
}