.po-article-detail__main > nav {
  margin-inline: 0.35rem;
}

.po-article-sheet {
  border: 1px solid rgba(21, 35, 29, 0.18);
  border-radius: 0.85rem;
  background: #fffef9;
  box-shadow: none;
}

.po-article-header {
  position: relative;
  padding: clamp(2.25rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem) 2rem;
  background: #15231d;
  color: #fffef9;
}

.po-article-header::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  height: 0.5rem;
  background: linear-gradient(
    90deg,
    #4cae50 0 42%,
    #e1493f 42% 68%,
    #5370ff 68% 88%,
    #efb92f 88%
  );
}

.po-article-header__meta {
  margin-top: 1.5rem;
}

.po-article-header__meta > span:first-child {
  border-radius: 0.35rem;
  background: #cdea81;
  color: #15231d;
}

.po-article-header__meta > span:not(:first-child),
.po-article-header__author .text-muted-foreground {
  color: rgba(255, 254, 249, 0.62);
}

.po-article-header__title {
  max-width: 18ch;
  margin: 1rem 0 2rem;
  color: #fffef9;
  font-size: clamp(2.6rem, 5.5vw, 5.6rem);
  font-weight: 850;
  line-height: 0.96;
  letter-spacing: -0.06em;
  text-wrap: balance;
}

.po-article-header__author {
  border-top: 1px solid rgba(255, 254, 249, 0.16);
  padding-top: 1.25rem;
}

.po-article-header__author p {
  color: #fffef9;
}

.po-article-hero-image {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

.po-article-copy,
.po-article-tags {
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 5vw, 4.5rem);
}

.po-article-copy {
  max-width: 52rem;
  padding-top: clamp(2rem, 5vw, 4rem);
}

.po-article-copy .lead {
  color: #15231d;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.35rem, 2.3vw, 1.8rem);
  font-weight: 500;
}

.po-article-tags {
  padding-bottom: 2.5rem;
}

.po-article-sidebar > * {
  border: 1px solid rgba(21, 35, 29, 0.18);
  border-radius: 0.75rem;
  box-shadow: none;
  backdrop-filter: none;
}

.po-article-sidebar__author {
  background: #fffef9;
}

.po-article-sidebar__author img {
  border-radius: 0.4rem;
  filter: grayscale(1);
}

.po-article-sidebar__newsletter {
  background: #e1493f;
}

.po-article-sidebar__trending {
  background: #15231d;
}

.po-article-sidebar__trending h3,
.po-article-sidebar__trending h4 {
  color: #fffef9;
}

.po-article-sidebar__trending p {
  color: rgba(255, 254, 249, 0.58);
}

@media (max-width: 639px) {
  .po-article-detail__grid {
    gap: 2rem;
  }

  .po-article-header {
    padding: 2.25rem 1.25rem 1.5rem;
  }

  .po-article-header__title {
    font-size: clamp(2.45rem, 13vw, 4rem);
  }
}