/* Article pages and index use one fixed, shared navigation bar. */
body { padding-top: 76px; }

.top {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: 76px;
  box-shadow: 0 7px 24px rgba(23, 58, 89, .08);
}

/* Older article markup does not have the `top-inner` helper class. */
.top > .shell:not(.top-inner) {
  height: 76px;
  display: flex;
  align-items: center;
  gap: 25px;
}

.top > .shell:not(.top-inner) .nav { margin-left: auto; }
.top .brand, .top .nav { white-space: nowrap; }
.article { padding-top: 78px; }

/* `article-hero` is now a figure. Keep the image inside its rounded frame. */
.article-hero {
  height: 390px;
  margin: 36px 0 44px;
  padding: 0;
  overflow: hidden;
  border-radius: 20px;
  background: #ecf2f6;
}

.article-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 640px) {
  body { padding-top: 68px; }
  .top, .top > .shell:not(.top-inner) { height: 68px; }
  .article { padding-top: 45px; }
  .article-hero { height: 245px; margin: 27px 0 34px; border-radius: 15px; }
}