/* ──────────────────────────────────────────
   NEWS ARCHIVE PAGE
   Builds on news.css (the .news-card pattern from the home page).
   Adds: intro band, featured article (image-left/meta-right), and the
   full grid + pagination below.
─────────────────────────────────────────── */
.archive {
  max-width: 1500px;
  margin: 0 auto;
  padding: 150px 48px 120px;
}

/* ──────────────────────────────────────────
   INTRO BAND
─────────────────────────────────────────── */
.archive-intro {
  text-align: center;
  margin-bottom: 96px;
}
.archive-eyebrow {
  display: inline-block;
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--light-dim);
  margin-bottom: 24px;
}
.archive-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 88px);
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--light);
  margin: 0 0 28px;
}
.archive-lead {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.7;
  color: var(--light-dim);
  max-width: 620px;
  margin: 0 auto;
}

/* ──────────────────────────────────────────
   FEATURED ARTICLE — image left, meta right
─────────────────────────────────────────── */
.archive-featured {
  margin-bottom: 120px;
  padding-bottom: 80px;
  border-bottom: 1px solid var(--light-faint);
}
.featured-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.featured-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: #1a1a1a;
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.6);
}
.featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s var(--ease-out-quint);
}
.featured-card:hover .featured-image img { transform: scale(1.05); }

.featured-meta { padding: 0 8px; }
.featured-eyebrow {
  display: block;
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--light-dim);
  margin-bottom: 18px;
}
.featured-category {
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--light-dim);
  margin-bottom: 22px;
}
.featured-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.18;
  color: var(--light);
  margin: 0 0 22px;
}
.featured-excerpt {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.65;
  color: var(--light-dim);
  margin: 0 0 28px;
  max-width: 480px;
}
.featured-date {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--light-dim);
}

/* ──────────────────────────────────────────
   SECTION HEADER above the grid
─────────────────────────────────────────── */
.archive-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
}
.archive-section-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2.5vw, 36px);
  color: var(--light);
  margin: 0;
}
.archive-section-count {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--light-dim);
}

/* ──────────────────────────────────────────
   GRID
   Reuses .news-grid + .news-card from news.css.
   Override here: bigger row gap, since the archive page is longer.
─────────────────────────────────────────── */
.archive .news-grid { gap: 56px 32px; }

/* ──────────────────────────────────────────
   PAGINATION (visual only — wire to JS later)
─────────────────────────────────────────── */
.archive-pagination {
  margin-top: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.page-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--light-faint);
  color: var(--light);
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.4s ease, background-color 0.4s ease;
}
.page-arrow:hover {
  border-color: var(--light);
  background: rgba(196, 186, 176, 0.06);
}
.page-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.page-current {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.28em;
  color: var(--light-dim);
}

/* ──────────────────────────────────────────
   RESPONSIVE
─────────────────────────────────────────── */
@media (max-width: 1000px) {
  .archive { padding: 130px 28px 80px; }
  .archive-intro { margin-bottom: 64px; }
  .archive-featured { margin-bottom: 80px; padding-bottom: 60px; }
  .featured-card { grid-template-columns: 1fr; gap: 32px; }
  .featured-image { aspect-ratio: 16 / 9; }
  .archive .news-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 24px; }
}
@media (max-width: 700px) {
  .archive { padding: 110px 16px 60px; }
  .archive-title { font-size: clamp(40px, 12vw, 56px); }
  .archive-lead { font-size: 16px; }
  .featured-title { font-size: 26px; }
  .archive-section-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .archive .news-grid { grid-template-columns: 1fr; gap: 40px; }
}