:root { color-scheme: light; }
html, body { margin: 0; min-height: 100%; }
body.archive-page {
  max-width: none;
  padding: 0;
  background: #f3f6fb;
  color: #202b3c;
  font: 16px/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.archive-page a { color: inherit; }
.archive-page header {
  margin: 0;
  padding: 76px max(24px, calc((100% - 1120px) / 2));
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #18243a 0%, #263e62 55%, #2c6d86 100%);
}
.archive-page header::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin-top: 24px;
  border-radius: 4px;
  background: #65d6c6;
}
.archive-page .archive-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
  color: #b9d2e7;
  font-size: .95rem;
}
.archive-page .archive-nav a {
  color: #fff;
  text-decoration: none;
}
.archive-page .archive-nav a:hover { color: #65d6c6; }
.archive-page h1 { margin: 0; color: #fff; font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1.05; letter-spacing: -.04em; }
.archive-page header .meta { max-width: 680px; margin: 18px 0 0; color: #d9e6f2; font-size: 1.05rem; }
.archive-page main { max-width: 1120px; margin: -28px auto 0; padding: 0 24px 72px; position: relative; }
.archive-page .archive { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.archive-page .archive li { min-height: 112px; padding: 22px 22px 18px; border: 1px solid #e1e8f0; border-radius: 12px; background: #fff; box-shadow: 0 8px 22px rgba(23, 42, 70, .07); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.archive-page .archive li:hover { transform: translateY(-3px); border-color: #8ed8cf; box-shadow: 0 14px 30px rgba(23, 42, 70, .13); }
.archive-page .archive a { display: block; color: #1e4775; font-size: 1.05rem; font-weight: 700; line-height: 1.35; text-decoration: none; }
.archive-page .archive a:hover { color: #0d8c87; }
.archive-page .archive .meta { display: block; margin-top: 12px; color: #78889b; font-size: .86rem; }
.archive-page .archive .empty { grid-column: 1 / -1; color: #78889b; }
@media (max-width: 850px) { .archive-page .archive { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .archive-page header { padding: 54px 20px 64px; } .archive-page main { padding: 0 14px 48px; } .archive-page .archive { grid-template-columns: 1fr; } }