:root {
  --sidecar-sidebar-border: 1px solid #eee;
}
body {
  display: grid;
  padding-left: 1rem;
  padding-right: 1rem;
  justify-content: center;
  grid-template-columns: 16rem minmax(auto, 40rem);
  grid-template-rows: auto;
  grid-template-areas:
    "nav content"
}
.ribbon {
  position: absolute;
  top: 0;
  right: 0;
}
.ribbon__image {
  margin: 0 !important;
}
.sidebar,
.content {
  margin-top: calc(2 * var(--oatcake-line-height));
  grid-area: content;
}
.sidebar {
  grid-area: nav;
  text-align: right;
}
.sidebar ul,
.sidebar h4 {
  margin-bottom: 0;
  padding-right: 2rem;
  margin-right: 2rem;
}
.sidebar h4 {
  margin-top: var(--oatcake-line-height);
}
.sidebar ul:first-child {
  border-right: var(--sidecar-sidebar-border);
}
.sidebar ul:not(:first-child) {
  padding-right: calc(2rem + 1px);
}
.sidebar li {
  list-style-type: none;
}
.sidebar a {
  color: inherit;
  text-decoration: none;
  border-radius: 3px;
}
.sidebar a {
  /* Apply padding to all nav menu links (not just current and hovered ones)
   * so that the widths of links don't change and push following links around
   * when current/hovered. */
  padding-left: 3px;
  padding-right: 3px;
  /* Slightly less padding above and below than to the left and right.
     This is to leave some gap between the background colors of adjacent
     links that're both higlighted (when hover over one of them). */
  padding-top: 1px;
  padding-bottom: 1px;
}
.sidebar a[aria-current="page"],
.sidebar a:hover {
  background-color: var(--oatcake-highlight-background-color);
}
.article__hgroup a {
  color: inherit;
  text-decoration: none;
}
.article__hgroup a:hover {
  text-decoration: underline;
}
.article__heading,
.page__heading {
  padding-top: 0;
}
.article--summary .article__heading {
  padding-bottom: 0;
}
.article__tagline {
  margin-top: calc(0.25 * var(--oatcake-line-height));
  margin-bottom: calc(0.75 * var(--oatcake-line-height));
}
.article__tagline {
  margin-top: 0;
}
.article__tagline a {
  color: inherit;
  text-decoration: none;
}
.article--archives .article__heading {
  font-weight: normal;
}
.article--summary:not(:last-child) {
  margin-bottom: calc(2 * var(--oatcake-line-height));
}
.pagination {
  margin-bottom: var(--oatcake-line-height);
}
.pagination__prev {
  float: left;
}
.pagination__next {
  float: right;
}
.pagination a {
  color: inherit;
  text-decoration: none;
}
@media screen and (max-width: 52rem){
  body {
    grid-template-columns: 100%;
    grid-template-areas:
      "nav"
      "content"
  }
  .nomobile {
    display: none;
  }
  .content {
    margin-top: var(--oatcake-line-height);
  }
  .sidebar {
    text-align: left;
    overflow-x: scroll;
    white-space: nowrap;
  }
  .sidebar ul {
    padding-right: 0;
    margin-right: 0;
    padding-bottom: var(--oatcake-line-height);
    margin-bottom: var(--oatcake-line-height);
    border-bottom: var(--sidecar-sidebar-border);
  }
  .sidebar ul:first-child {
    border-right: none;
  }
  .sidebar li {
    display: inline;
    margin-left: 1rem;
    padding-inline-start: 0;
  }
  .sidebar li:first-child {
    margin-left: 0;
  }
}