.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.archive-nav { position: relative; }

.archive-main {
  width: min(820px, calc(100% - 48px));
  min-height: calc(100vh - 90px);
  margin: 0 auto;
  padding: 90px 0 120px;
}

.archive-header { margin-bottom: 64px; }
.archive-header .eyebrow { color: var(--accent); margin-bottom: 14px; }
.archive-header h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); letter-spacing: -0.04em; margin-bottom: 18px; }
.archive-header p:last-child { color: var(--text-muted); line-height: 1.7; }

.archive-list { border-top: 1px solid var(--line); }
.archive-item { border-bottom: 1px solid var(--line); }
.archive-item a { display: block; padding: 30px 0; }
.archive-item h2 { font-size: 1.35rem; margin: 10px 0; transition: color .2s; }
.archive-item a:hover h2 { color: var(--accent); }
.archive-item p { color: var(--text-muted); line-height: 1.7; }
.archive-meta { display: flex; flex-wrap: wrap; gap: 10px; color: var(--text-faint); font-size: .75rem; }
.archive-read { display: inline-block; margin-top: 14px; color: var(--text-muted); font-size: .8rem; font-weight: 600; }
.archive-status { padding: 36px 0; color: var(--text-muted); }

@media (max-width: 640px) {
  .archive-main { width: min(100% - 40px, 820px); padding: 64px 0 90px; }
  .archive-header { margin-bottom: 42px; }
  .archive-item a { padding: 24px 0; }
}