/* Archive page. Loaded after /styles.css. */
.page-head { padding-block: clamp(40px, 8vw, 96px) var(--s6); }
.page-head h1 { font-size: clamp(3.2rem, 11vw, 8rem); line-height: .96; letter-spacing: -.05em; }
.page-head .prose { margin-top: var(--s5); color: var(--muted); font-size: 1.15rem; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.month { font: 400 .8rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: var(--s7) 0 var(--s3); }
.month:first-of-type { margin-top: 0; }
.posts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.posts li { display: grid; grid-template-columns: 5rem 1fr; gap: var(--s4); padding-block: var(--s3); border-bottom: 1px solid var(--line); align-items: baseline; }
.posts time { font: 400 .85rem var(--font-mono); letter-spacing: .04em; color: var(--accent); }
.posts a { font-size: 1.15rem; line-height: 1.35; letter-spacing: -.01em; display: inline-block; padding-block: 4px; }
@media (max-width: 599px) { .posts li { grid-template-columns: 1fr; gap: 2px; } }