@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');

/*
 * The news listing is deliberately scoped to this page root. This keeps the
 * editorial treatment from changing the shared header, footer, or other
 * public templates.
 */
.news-editorial {
  --news-paper: #f3f1e9;
  --news-panel: #faf9f4;
  --news-ink: #17342e;
  --news-muted: #64776e;
  --news-line: #d5ddd5;
  --news-moss: #275749;
  --news-rust: #a95334;
  --news-sun: #e8c873;
  background: var(--news-paper);
  color: var(--news-ink);
  font-family: "DM Sans", sans-serif;
}

.news-editorial h1,
.news-editorial h2,
.news-editorial h3,
.news-editorial h4,
.news-editorial .font-serif {
  font-family: Fraunces, Georgia, serif !important;
  letter-spacing: -.035em;
}

.news-editorial p,
.news-editorial label,
.news-editorial input,
.news-editorial select,
.news-editorial button,
.news-editorial a { font-family: "DM Sans", sans-serif; }

.news-editorial .editorial-kicker,
.news-editorial .text-xs,
.news-editorial .uppercase {
  font-family: "DM Mono", monospace !important;
  letter-spacing: .08em;
}

.news-editorial > div.bg-gradient-to-b.from-golf-navy {
  background: var(--news-ink) !important;
  padding: clamp(3.5rem, 7vw, 6.8rem) 0 clamp(4rem, 7vw, 6rem) !important;
  border-bottom: 1px solid rgba(232, 200, 115, .35);
}

.news-editorial > div.bg-gradient-to-b.from-golf-navy nav {
  color: rgba(243, 241, 233, .6) !important;
  font: 500 .65rem "DM Mono", monospace !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.news-editorial > div.bg-gradient-to-b.from-golf-navy nav span:last-child {
  color: var(--news-sun) !important;
}

.news-editorial > div.bg-gradient-to-b.from-golf-navy h1 {
  max-width: 760px;
  font-size: clamp(3.4rem, 7vw, 6.6rem) !important;
  line-height: .9 !important;
  letter-spacing: -.065em;
  color: var(--news-paper) !important;
}

.news-editorial > div.bg-gradient-to-b.from-golf-navy .editorial-kicker {
  color: var(--news-sun) !important;
  font: 500 .68rem "DM Mono", monospace !important;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.news-editorial > div.bg-gradient-to-b.from-golf-navy p:last-child {
  max-width: 38rem;
  color: rgba(243, 241, 233, .72) !important;
  font-size: 1.05rem !important;
}

.news-editorial > div.bg-gray-50,
.news-editorial > div.border-t {
  background: #e6ebe4 !important;
  border-color: var(--news-line) !important;
}

.news-editorial > div.bg-gray-50 .rounded-xl,
.news-editorial > div.border-t .rounded-2xl {
  border-radius: 0 !important;
  background: var(--news-panel) !important;
  border-color: var(--news-line) !important;
  box-shadow: none !important;
}

.news-editorial > div.max-w-7xl.mx-auto {
  padding-top: clamp(3.2rem, 6vw, 5.4rem) !important;
  padding-bottom: clamp(4rem, 7vw, 7rem) !important;
}

.news-editorial > div.max-w-7xl.mx-auto > div.mb-8 h3 {
  color: var(--news-ink) !important;
  font: 500 1.8rem/1 Fraunces, Georgia, serif !important;
  letter-spacing: -.035em;
}

.news-editorial .keyword-filter {
  border-radius: 0 !important;
  border-color: var(--news-moss) !important;
  color: var(--news-moss) !important;
  background: transparent !important;
  font: 500 .65rem "DM Mono", monospace !important;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.news-editorial .keyword-filter.active,
.news-editorial .keyword-filter:hover {
  background: var(--news-moss) !important;
  color: var(--news-paper) !important;
}

.news-editorial #sort-select {
  min-width: 8.5rem;
  border-radius: 0 !important;
  border-color: var(--news-line) !important;
  background: var(--news-panel) !important;
  color: var(--news-ink) !important;
  font: 500 .72rem "DM Mono", monospace !important;
}

.news-editorial .article-card {
  border-radius: 0 !important;
  border: 1px solid var(--news-line) !important;
  background: var(--news-panel) !important;
  box-shadow: none !important;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.news-editorial .article-card:hover {
  transform: translateY(-5px);
  border-color: var(--news-moss) !important;
  box-shadow: 0 14px 28px rgba(23, 52, 46, .1) !important;
}

.news-editorial .article-card > div { padding: clamp(1.5rem, 3vw, 2.2rem) !important; }
.news-editorial .article-card h2 {
  font-size: clamp(1.75rem, 2.4vw, 2.15rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -.045em;
}
.news-editorial .article-card h2 a { color: var(--news-ink) !important; }
.news-editorial .article-card h2 a:hover { color: var(--news-rust) !important; }
.news-editorial .article-card p { color: var(--news-muted) !important; font-size: .95rem; line-height: 1.65; }
.news-editorial .article-card .text-gray-500 {
  color: var(--news-muted) !important;
  font: 500 .63rem "DM Mono", monospace !important;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.news-editorial .article-card span.inline-block {
  border-radius: 0 !important;
  background: #e6ebe4 !important;
  color: var(--news-moss) !important;
  font: 500 .62rem "DM Mono", monospace !important;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.news-editorial .article-card > div > a:last-child {
  color: var(--news-rust) !important;
  font: 700 .67rem "DM Mono", monospace !important;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.news-editorial .article-card > div > a:last-child svg { transition: transform .2s ease; }
.news-editorial .article-card:hover > div > a:last-child svg { transform: translateX(4px); }

.news-editorial .line-clamp-2,
.news-editorial .line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-editorial .line-clamp-2 { -webkit-line-clamp: 2; }
.news-editorial .line-clamp-3 { -webkit-line-clamp: 3; }

.news-editorial a:focus-visible,
.news-editorial button:focus-visible,
.news-editorial input:focus-visible,
.news-editorial select:focus-visible {
  outline: 3px solid var(--news-rust);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .news-editorial > div.bg-gradient-to-b h1 {
    font-size: clamp(3.2rem, 15vw, 5rem) !important;
  }
  .news-editorial > div.max-w-7xl.mx-auto { padding-top: 2.8rem !important; }
  .news-editorial #articles-grid { gap: 1.1rem !important; }
}