.editorial-feed a {
  color: inherit;
  text-decoration: none;
}

.editorial-feed__featured {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(20px, 4vw, 44px);
  align-items: center;
  margin-bottom: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(33, 78, 52, 0.18);
}

.editorial-feed__featured-media-frame {
  width: 100%;
  height: clamp(240px, 32vw, 400px);
  overflow: hidden;
  border-radius: 4px;
}

.editorial-feed__card-media-frame {
  width: 100%;
  height: 210px;
  overflow: hidden;
  background-color: rgba(var(--color-media-background));
  border-radius: 4px;
}

.editorial-feed__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 0.9, 0.3, 1);
}

.editorial-feed__featured:hover .editorial-feed__media,
.editorial-feed__card:hover .editorial-feed__media {
  transform: scale(1.04);
}

.editorial-feed__meta {
  font-size: 11px;
  font-weight: 700;
  line-height: normal;
  color: rgba(var(--color-button-text-link));
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.editorial-feed__featured-content .editorial-feed__meta {
  margin-bottom: 14px;
}

.editorial-feed .editorial-feed__featured-title {
  display: inline;
  margin: 0 0 14px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 700;
  line-height: 1.14;
  color: #173824;
  text-wrap: balance;
}

.editorial-feed .editorial-feed__featured-title,
.editorial-feed .editorial-feed__card-title {
  padding-bottom: 2px;
  background-image: linear-gradient(rgba(var(--color-button-text-link)), rgba(var(--color-button-text-link)));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size 0.35s cubic-bezier(0.22, 0.9, 0.3, 1), color 0.25s;
}

.editorial-feed__featured:hover .editorial-feed__featured-title,
.editorial-feed__card:hover .editorial-feed__card-title {
  color: rgba(var(--color-button-text-link));
  background-size: 100% 1.5px;
}

.editorial-feed .editorial-feed__featured-copy {
  max-width: 520px;
  margin: 14px 0 18px;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(var(--color-light-text));
}

.editorial-feed__featured-cta {
  display: inline;
  padding-bottom: 4px;
  font-size: 13px;
  font-weight: 700;
  line-height: normal;
  color: rgba(var(--color-button-text-link));
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: 2px solid rgba(var(--color-button-text-link));
}

.editorial-feed__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 28px 24px;
}

.editorial-feed__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.editorial-feed__card-title {
  align-self: flex-start;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.3;
  color: #173824;
}

.editorial-feed__card-excerpt {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(var(--color-light-text));
}

@media (prefers-reduced-motion: reduce) {
  .editorial-feed__media,
  .editorial-feed__featured-title,
  .editorial-feed__card-title {
    transition-duration: 0.001ms;
  }

  .editorial-feed__featured:hover .editorial-feed__media,
  .editorial-feed__card:hover .editorial-feed__media {
    transform: none;
  }
}

/* Sep 3: the feed renders real articles now, and their covers come from the
   article-cover component rather than a plain img. That component only carried
   sizing scoped to the hero and keep-reading sections, so inside these frames
   it had no height at all and the picture was invisible behind an empty panel.
   It fills the frame here, and takes the same hover push the img had. */
.editorial-feed__featured-media-frame .article-cover,
.editorial-feed__card-media-frame .article-cover {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  transition: transform 0.5s cubic-bezier(0.22, 0.9, 0.3, 1);
}

.editorial-feed__featured:hover .article-cover,
.editorial-feed__card:hover .article-cover {
  transform: scale(1.04);
}

/* The headline is deliberately inline, so its underline hugs the text. That
   left the call to action sitting on the end of the last word whenever there
   was no paragraph between them. It owns the gap now and always starts its own
   line, whether or not the article has copy to show. */
.editorial-feed .editorial-feed__featured-cta {
  display: block;
  width: fit-content;
  margin-top: 18px;
}

.editorial-feed .editorial-feed__featured-copy {
  margin-bottom: 0;
}

/* Body text standing in for a missing excerpt is a whole article, so it is held
   to a few lines rather than running the length of the page. */
.editorial-feed__featured-copy,
.editorial-feed__card-excerpt {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

@media (prefers-reduced-motion: reduce) {
  .editorial-feed__featured:hover .article-cover,
  .editorial-feed__card:hover .article-cover {
    transform: none;
  }
}