@import url("./index.css");

.page-hero {
  padding: clamp(96px, 14vw, 150px) 0 clamp(48px, 8vw, 72px);
  animation: fadeRise 0.9s ease forwards;
}

.page-hero .container {
  max-width: 880px;
}

.page-hero .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent-primary);
  font-weight: 600;
  margin-bottom: 18px;
}

.page-hero h1 {
  margin: 0 0 16px;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
}

.page-hero .lede {
  color: var(--text-soft);
  margin: 0;
}

.blog-layout {
  padding: clamp(64px, 8vw, 110px) 0 clamp(120px, 12vw, 150px);
}

.blog-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 6vw, 48px);
}

@media (min-width: 960px) {
  .blog-grid {
    grid-template-columns: 240px minmax(0, 1fr) 280px;
  }
}

.filters,
.subscription {
  background: rgba(12, 9, 18, 0.82);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: var(--shadow-soft);
  animation: fadeRise 1s ease forwards;
}

.filters h2,
.subscription h2 {
  margin-top: 0;
  font-size: 1.2rem;
}

.filter-form {
  display: grid;
  gap: 16px;
}

.filter-form label {
  display: grid;
  gap: 8px;
  color: var(--text-soft);
}

.filter-form select,
.subscription-form input {
  background: rgba(9, 7, 14, 0.8);
  border: 1px solid rgba(168, 85, 247, 0.28);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--text-primary);
  font: inherit;
}

.articles {
  display: grid;
  gap: clamp(20px, 4vw, 28px);
}

.article-card {
  background: rgba(12, 9, 18, 0.75);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 36px);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 14px;
  animation: fadeRise 1s ease forwards;
}

.article-card__meta {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

.article-card h2 {
  margin: 0;
  font-size: 1.4rem;
}

.article-card p {
  margin: 0;
  color: var(--text-soft);
}

.article-card__link {
  color: var(--accent-primary);
  font-weight: 600;
  justify-self: flex-start;
  border-bottom: 1px solid transparent;
  padding-bottom: 4px;
  transition: border-color var(--transition-base), color var(--transition-base);
}

.article-card__link:hover,
.article-card__link:focus-visible {
  color: var(--text-primary);
  border-color: var(--accent-primary);
}

.subscription p {
  color: var(--text-soft);
}

.subscription-form {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.subscription-form label {
  display: grid;
  gap: 8px;
  color: var(--text-soft);
}

.article-detail-wrapper {
  padding: clamp(96px, 12vw, 140px) 0 clamp(96px, 14vw, 150px);
}

.article-detail {
  width: min(760px, calc(100% - 40px));
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: clamp(20px, 4vw, 32px);
  background: rgba(12, 9, 18, 0.78);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 6vw, 52px);
  box-shadow: var(--shadow-soft);
  animation: fadeRise 0.9s ease forwards;
}

.article-detail__meta {
  color: var(--text-soft);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  margin: 0 0 8px;
}

.article-detail__title {
  margin: 0 0 18px;
  font-size: clamp(1.9rem, 4.6vw, 2.6rem);
}

.article-detail__lede {
  margin: 0;
  color: var(--text-soft);
  font-size: 1.1rem;
}

.article-detail__body {
  display: grid;
  gap: clamp(18px, 4vw, 28px);
  color: var(--text-soft);
}

.article-detail__body h3 {
  margin: 24px 0 8px;
  color: var(--text-primary);
  font-size: 1.2rem;
}

.article-detail__body p {
  margin: 0;
}

.article-detail__body ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
}

.article-detail__body li {
  color: var(--text-soft);
}

.article-detail__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.article-detail__back {
  color: var(--accent-primary);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--transition-base);
}

.article-detail__back::before {
  content: "←";
  font-size: 0.9em;
}

.article-detail__back:hover,
.article-detail__back:focus-visible {
  color: var(--text-primary);
}

.article-detail__note {
  color: var(--text-soft);
  font-size: 0.9rem;
  margin: 0;
}