/*
 * Layout: the page frame shared by every page (nav, content, footer),
 * reading widths, and the sidebar column used by the blog, posts and resumé.
 */

/* === NAV === */
.brand-emoji {
  font-size: 1.375rem;
  line-height: 1;
  margin-right: 0.25rem;
  vertical-align: -0.125rem;
}

/* === PAGE === */
.content {
  padding: 0.5rem 0 1rem;
}

/* Page text (About, resumé) at about 80 characters per line.
   Screen only: print.css owns the printed resumé layout. */
@media screen {
  .measure-text {
    max-width: var(--measure-text);
  }
}

/* === FOOTER === */
footer {
  font-size: 0.875rem;
}

/* === SIDEBAR === */
@media (min-width: 992px) {
  .blog-sidebar {
    border-left: var(--bs-border-width) solid var(--bs-border-color);
  }

  /* Keep tags and archive in view while scrolling long posts */
  .sidebar-sticky {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }
}