/* =================================================================== Archive — both the bespoke /archive/ page and WP's generic archive fallback (CPT, category, date, search results) share these styles. Body class "midnight" added by is_home_midnight() / archive logic. =================================================================== */ /* Hero — used by bespoke /archive/ page only */ .archive-hero { padding: var(--s-9) var(--gutter) var(--s-7); border-bottom: 1px solid var(--cream); display: grid; grid-template-columns: 1fr 320px; gap: var(--s-7); align-items: end; } .archive-hero .lbl { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-dark); margin-bottom: var(--s-3); } .archive-hero h1 { font-size: clamp(40px, 6vw, 88px); font-weight: 700; line-height: 0.98; margin: 0; letter-spacing: -0.03em; } .archive-hero h1 em { color: var(--purple-bright); font-style: normal; } .archive-hero .stats { border-left: 2px solid var(--cream); padding-left: var(--s-5); font-family: var(--font-mono); font-size: var(--t-micro); line-height: 1.8; text-transform: uppercase; letter-spacing: 0.16em; } .archive-hero .stats .big { font-family: var(--font-sans); font-size: 40px; font-weight: 800; color: var(--gold); letter-spacing: -0.02em; line-height: 1; margin-bottom: 6px; } .archive-hero .stats b { color: var(--cream); } /* Filter bar — chips + search */ .filters { padding: var(--s-5) var(--gutter); border-bottom: 1px solid var(--cream); display: flex; gap: var(--s-3) var(--s-5); flex-wrap: wrap; align-items: center; font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: 0.18em; text-transform: uppercase; } .filters .group { display: flex; gap: 8px; align-items: center; } .filters .group .lbl { color: var(--muted-dark); margin-right: 4px; } .chip { padding: 6px 12px; border: 1px solid var(--cream); color: var(--cream); text-decoration: none; transition: background 0.15s; } .chip:hover { background: var(--purple-tab); } .chip.active { background: var(--purple); border-color: var(--purple); color: #fff; } .chip.is-note.active { background: var(--purple-bright); border-color: var(--purple-bright); color: var(--purple-deep); } .chip.is-photo.active { background: var(--gold); border-color: var(--gold); color: var(--purple-deep); } .chip.is-link.active { background: var(--warm-soft); border-color: var(--warm-soft); color: var(--purple-deep); } /* MUST stay qualified as `form.search`: on search-results pages WordPress adds class="search" to , so a bare `.search { display:flex }` would turn the whole page into a flex row and scatter every section. The qualifier keeps this scoped to the

only. */ form.search { margin-left: auto; display: flex; align-items: center; gap: 8px; background: var(--purple-deeper); border: 1px solid var(--cream); padding: 6px 12px; } form.search input { background: transparent; border: none; color: var(--cream); font-family: inherit; font-size: var(--t-meta); letter-spacing: 0.1em; outline: none; width: 200px; } form.search input::placeholder { color: var(--muted-dark); text-transform: uppercase; } /* The list */ .archive { padding: var(--s-7) var(--gutter) var(--s-9); } .year-block { margin-bottom: var(--s-8); } .year-head { display: grid; grid-template-columns: 200px 1fr auto; align-items: baseline; gap: var(--s-5); border-top: 4px solid var(--cream); padding-top: var(--s-4); margin-bottom: var(--s-5); } .year-head .year { font-size: clamp(48px, 5vw, 72px); font-weight: 800; line-height: 0.9; letter-spacing: -0.03em; color: var(--gold); } .year-head .by-type { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-dark); display: flex; gap: var(--s-5); flex-wrap: wrap; } .year-head .by-type b { color: var(--cream); } .year-head .count { font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: 0.18em; color: var(--muted-dark); text-transform: uppercase; } .row { display: grid; grid-template-columns: 120px 90px 1fr 200px; gap: var(--s-5); padding: var(--s-4) 0; border-top: 1px solid var(--purple-tab); text-decoration: none; color: var(--cream); align-items: baseline; transition: background 0.15s; } .row:hover { background: rgba(255,255,255,0.04); } .row .date { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-dark); } .row .type { font-family: var(--font-mono); font-size: var(--t-tag); letter-spacing: 0.22em; text-transform: uppercase; color: var(--purple-bright); } .row.is-note .type { color: var(--purple-bright); } .row.is-article .type { color: var(--gold); } .row.is-photo .type { color: var(--cream); } .row.is-link .type { color: var(--warm-soft); } .row .title { font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; } .row .meta { text-align: right; font-family: var(--font-mono); font-size: var(--t-tag); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-dark); } .row .meta .tag { color: var(--cream); margin-right: 6px; } .row.is-photo { grid-template-columns: 120px 90px 1fr 80px 200px; } .row.is-photo .thumb { width: 80px; height: 54px; background: repeating-linear-gradient(135deg, #2a1a5e, #2a1a5e 6px, #1a1144 6px, #1a1144 12px); background-size: cover; background-position: center; border: 1px solid var(--purple-tab); } /* Pagination */ .archive-pagination { padding: var(--s-6) var(--gutter); text-align: center; font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: 0.22em; text-transform: uppercase; } .archive-pagination .page-numbers { padding: 8px 14px; border: 1px solid var(--cream); color: var(--cream); text-decoration: none; margin: 0 4px; display: inline-block; } .archive-pagination .page-numbers.current { background: var(--purple); border-color: var(--purple); } .archive-pagination .page-numbers:hover { background: var(--purple-tab); } @media (max-width: 900px) { .archive-hero { grid-template-columns: 1fr; } .row { grid-template-columns: 1fr; gap: 4px; } .row.is-photo { grid-template-columns: 1fr; } .row.is-photo .thumb { display: none; } .row .meta { text-align: left; } form.search { width: 100%; } }