.articles-page {
  background: var(--bg);
}

.articles-intro {
  padding: clamp(52px, 8vw, 116px) 0 clamp(44px, 6vw, 84px);
  border-bottom: 1px solid var(--line);
  background: radial-gradient(ellipse at 75% 0%, #183239 0%, transparent 65%);
}

.articles-tagline {
  max-width: 12ch;
  margin-block: 16px 22px;
  font: 400 clamp(48px, 7.8vw, 116px)/.98 var(--serif);
  letter-spacing: -.055em;
}

.articles-tagline em {
  color: var(--aqua);
}

.articles-description,
.articles-teaser {
  max-width: 62ch;
  color: var(--muted);
  font-size: clamp(16px, 1.5vw, 20px);
}

.articles-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.articles-actions .button {
  min-height: 48px;
}

.articles-actions .button:first-child {
  background: var(--aqua);
  border-color: var(--aqua);
  color: var(--bg);
}

.articles-actions .button:first-child:hover {
  background: var(--cream);
  border-color: var(--cream);
}

.articles-feature {
  padding-block: clamp(40px, 6vw, 80px) clamp(56px, 8vw, 112px);
}

.articles-feature article {
  margin-top: 16px;
}

.articles-card {
  display: block;
  padding: clamp(22px, 3.4vw, 44px) clamp(22px, 5vw, 64px);
  background: linear-gradient(135deg, #142227, var(--panel));
  border: 1px solid #45818a;
  text-decoration: none;
  transition: border-color .2s;
}

.articles-card:hover,
.articles-card:focus-visible {
  border-color: var(--aqua);
}

.articles-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  color: var(--muted);
  font-size: 14px;
}

.articles-meta span {
  color: var(--aqua);
}

.articles-card h3 {
  max-width: 24ch;
  margin-block: 16px;
  font: 400 clamp(29px, 4vw, 58px)/1.1 var(--serif);
  letter-spacing: -.025em;
}

.articles-card .inline-link {
  margin-top: 24px;
}

.articles-cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: 20px;
}

.articles-archive {
  border-top: 1px solid var(--line);
  padding-block: clamp(32px, 5vw, 64px) clamp(56px, 8vw, 112px);
}

.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px;
  margin-top: 16px;
}

.articles-grid .articles-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(18px, 3vw, 28px);
  overflow-wrap: anywhere;
}

.articles-grid .articles-card h3 {
  max-width: none;
  font-size: clamp(24px, 2.4vw, 34px);
}

.articles-grid .articles-teaser {
  margin-bottom: 20px;
  font-size: 16px;
}

.articles-grid .articles-card .inline-link {
  margin-top: auto;
}

a[aria-current="page"][href="/articles"] {
  color: var(--aqua);
}

@media (prefers-reduced-motion: reduce) {
  .articles-card {
    transition: none;
  }
}