/* News & patch notes page. Layers on the tokens in style.css. */

.news-head-page {
  border-bottom: 1px solid var(--line-faint);
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(200, 169, 94, 0.08), transparent 60%),
    var(--bg-panel);
}
.news-head-inner { max-width: 780px; margin: 0 auto; padding: 56px 24px 40px; }
.news-head-inner h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 0 0 14px; }
.news-lede { color: var(--muted); max-width: 58ch; margin: 0 0 26px; }

.shop-kicker {
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  margin: 0 0 10px;
}

.news-filters { display: flex; gap: 10px; flex-wrap: wrap; }
.news-filter {
  font-family: Cinzel, serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line-faint);
  border-radius: 999px;
  padding: 7px 18px;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.news-filter:hover { color: var(--gold-bright); border-color: var(--gold-deep); }
.news-filter:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.news-filter[aria-pressed="true"] {
  color: #241b06;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 60%, var(--gold-deep));
  border-color: var(--gold-deep);
}

/* PATCH NOTES: the pointer to the changelog page (js/news.js shows it while that filter is on). */
.news-changelog {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--gold-wash);
}
.news-changelog[hidden] { display: none; }
.news-changelog p { color: var(--ink); margin: 0; flex: 1 1 280px; min-width: 0; }

.news-list { max-width: 780px; margin: 0 auto; padding: 8px 24px 80px; }
.news-loading { color: var(--muted); padding: 40px 0; text-align: center; }

.post {
  padding: 40px 0;
  border-bottom: 1px solid var(--line-faint);
}
.post:last-of-type { border-bottom: none; }

.post-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.post-meta time {
  color: var(--gold);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
}
.post-kind {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gold-bright);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
}

.post h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin: 0 0 16px; }

.post-body p { color: var(--muted); margin: 0 0 14px; }
.post-body ul { margin: 0 0 16px; padding-left: 22px; }
.post-body li { color: var(--muted); margin-bottom: 9px; }
.post-body strong { color: var(--ink); font-weight: 600; }

.btn-sm { font-size: 0.74rem; padding: 9px 20px; }

@media (max-width: 560px) {
  .news-head-inner { padding: 40px 20px 30px; }
  .post { padding: 30px 0; }
}