.news-page [hidden], .news-latest[hidden] { display: none !important; }
.news-page, .news-latest { color: var(--cream); font-family: "Mona Sans", system-ui, sans-serif; }
.news-wrap { width: min(88%, 78rem); margin-inline: auto; }
.news-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(18rem, 52vh, 36rem);
  overflow: clip;
  background: var(--cream);
  color: var(--ink);
}
.news-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--red);
  clip-path: polygon(76% 0, 100% 0, 100% 100%, 55% 100%, 69% 45%);
}
.news-hero img { position: absolute; z-index: -1; right: 7%; width: min(29%, 22rem); }
.news-hero p { max-width: 30ch; }
.news-kicker { font-weight: 700; letter-spacing: .09em; font-size: .8rem; text-transform: uppercase; }
.news-hero h1, .news-article h1, .news-latest h2 {
  margin: .35rem 0;
  font: 900 clamp(2.4rem, 8vw, 7.3rem)/.98 "Mona Sans Wide", sans-serif;
  letter-spacing: -.07em;
  overflow-wrap: anywhere;
}
.news-list, .news-latest, .news-article { padding-block: clamp(2.5rem, 6vw, 5rem); }
.news-filters { display: flex; flex-wrap: wrap; gap: 1rem; }
.news-filters label { display: grid; gap: .35rem; }
.news-filters select { color: var(--ink); background: var(--cream); padding: .65rem; font: inherit; }
.news-empty { border-left: .35rem solid var(--yellow); padding: .7rem 1rem; }
.news-empty:empty { display: none; }
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1.6rem; margin-block: 1.25rem; }
.news-card { position: relative; padding: .85rem; background: var(--green); box-shadow: .35rem .4rem var(--red); }
.news-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.news-card a::after { content: ""; position: absolute; inset: 0; }
.news-card:focus-within { outline: 2px solid var(--yellow); }
.news-card h3, .news-card p { margin: .8rem 0; }
.news-article { max-width: 55rem; }
.news-article h1 { font-size: clamp(2rem, 5vw, 4rem); }
.news-article img { display: block; max-width: 100%; height: auto; margin-block: 1.25rem; }
.news-article > p:not(.news-kicker) { max-width: 68ch; font-size: 1.1rem; line-height: 1.7; }
.news-button { display: inline-block; padding: .8rem 1rem; background: var(--yellow); color: var(--ink); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .news-hero img, .news-card, .news-article { animation: news-enter .42s cubic-bezier(.22,.7,.28,1) both; }
  @keyframes news-enter { from { opacity: 0; transform: translateY(1rem) scale(.985); } }
}