@layer sidecar {
  :root {
    --ok-color-fg: #374151;
  }
  nav {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    column-gap: var(--ok-line-height);
    display: flex;

    /* On article pages these four lines of margin-bottom are used for:

       - Two empty lines after the navbar.
       - One line for the article tagline itself.
       - One empty line after the article tagline.

       (Two lines of negative margin are added to the article tagline below so
       that it eats up into the nav bar's four lines of margin-bottom by two
       lines.)

       Four lines is therefore the minimum amount of space necessary for the
       tagline to be visually associated closer to the article title below it
       than to the nav bar above it: at a minimum, if you want to have more empty
       lines above the tagline than below, you need two empty lines above it and
       one below. Plus one line for the tagline itself = four lines total.

       Four lines is therefore the minimum amount of margin-bottom that is
       required below the nav bar!

       This also applies to non-article pages that don't have a tagline:
       on those pages I want the page title <h1> to be in the same vertical
       position as the <h1> on article pages despite the absence of the tag line.
       So non-article pages just get four lines of blank space.

       As it happens I think four lines is just about right as well:
       just enough space after the nav bar for it to not feel cramped,
       not so much that it looks like a weirdly large and noticeable vertical gap.
    */
    margin-bottom: calc(4 * var(--ok-line-height));

    /* The nav bar's contents are deliberately a bit wider than the main contents:
       it looks nicer and better visually distinguishes the nav bar from the main
       contents. */
    max-width: 50rem;

    overflow-x: auto;
    /* -1px to account for the 1px border. */
    padding-bottom: calc(var(--ok-line-height) - 1px);
    padding-left: calc(2 * var(--ok-line-height));
    padding-right: calc(2 * var(--ok-line-height));
    padding-top: var(--ok-line-height);
    text-transform: lowercase;
  }
  nav > * {
    /* Don't allow the GitHub logo image in the nav bar to be horizontally
       squished on small screens. */
    flex-shrink: 0;
  }
  nav .space {
    margin-left: auto;
  }
  nav a {
    color: inherit;
    text-decoration: none;
  }
  nav a:hover {
    text-decoration: underline;
  }
  nav img {
    height: var(--ok-line-height);
    margin: 0;
    width: auto;
  }
  nav,
  main {
    margin-left: auto;
    margin-right: auto;
  }
  .bio {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-bottom: calc(5 * var(--ok-line-height));
    margin-left: auto;
    margin-right: auto;
    max-width: 25rem;
    row-gap: var(--ok-line-height);
    text-align: center;
  }
  .bio > * {
    margin: 0;
    padding: 0;
  }
  .bio > img {
    border-radius: 100%;
    border: none;
    height: calc(3 * var(--ok-line-height));
    width: calc(3 * var(--ok-line-height));
  }
  .bio a {
    color: inherit;
  }
  .bio,
  main {
    padding-left: calc(0.5 * var(--ok-line-height));
    padding-right: calc(0.5 * var(--ok-line-height));
  }
  main {
    max-width: 40rem;
  }
  main h1:first-of-type {
    padding-top: 0;
  }
  footer:has(+ :is(h1, hgroup)) {
    margin-top: calc(-2 * var(--ok-line-height));
  }
  .articles {
    margin-bottom: var(--ok-line-height);
    margin-top: var(--ok-line-height);
  }
  .articles caption {
    font-weight: bold;
    text-align: left;
  }
  .articles a {
    color: inherit;
    text-decoration: none;
  }
  .pagination {
    color: var(--ok-color-fg);
    display: flex;
    justify-content: space-between;
    margin-top: calc(2 * var(--ok-line-height));
  }
  .pagination :is(a[rel="prev"], a[rel="next"]) {
    text-decoration: none;
  }
  .pagination a[rel="next"] {
    margin-left: auto;
  }
  nav,
  .articles td {
    border-color: #ececec;
  }
  .search {
    text-align: center;
  }
  .search input[type="search"] {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23374151'  stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m17 17 5 5'/%3E%3C/svg%3E") no-repeat 10px center;
    border-radius: var(--ok-border-radius);
    border: 1px solid var(--ok-color-border);
    color: var(--ok-color-block-fg);
    margin-top: var(--ok-line-height);
    padding: calc(0.5 * var(--ok-line-height));
    padding-left: calc((0.5 * var(--ok-line-height)) + var(--ok-line-height));
    width: 100%;
  }
  @media (max-width: 50rem) {
    nav {
      column-gap: calc(0.5 * var(--ok-line-height));
      padding-bottom: calc(0.5 * var(--ok-line-height) - 1px);
      padding-left: calc(0.5 * var(--ok-line-height));
      padding-right: calc(0.5 * var(--ok-line-height));
      padding-top: calc(0.5 * var(--ok-line-height));
    }
    .bio {
      margin-bottom: calc(2 * var(--ok-line-height));
    }
  }
  .highlight {
    border-radius: var(--ok-border-radius);
  }
  .highlight :is(code, pre) {
    background-color: inherit;
    color: inherit;
  }
}