/* =========================================================
   archive.css — shared layout for archive-style pages
   (category, tag, author, date, search, 404). home.css loads
   this as a dependency for the homepage too.
   ========================================================= */

.archive-wrap {
	max-width: var(--site-max);
	margin: 0 auto;
	padding: var(--space-7) var(--space-4);
}
.archive-header {
	margin-bottom: var(--space-6);
}
.archive-header__title {
	font-family: var(--font-prose);
	font-size: clamp(2rem, 4.5vw, 2.75rem);
	margin: 0 0 var(--space-3);
	color: var(--text-strong);
}
.archive-header__lede {
	color: var(--text-muted);
	font-size: 1.1rem;
	max-width: 640px;
}

.posts-grid {
	display: grid;
	gap: var(--space-5);
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.archive-wrap--search .search-results {
	display: grid;
	gap: var(--space-4);
	max-width: var(--content-max);
}

.search-result {
	background: var(--surface-card);
	border-radius: var(--radius-card);
	padding: var(--space-4);
	border: 1px solid var(--surface-border);
}
.search-result__title {
	margin: 0 0 var(--space-2);
	font-family: var(--font-prose);
	font-size: 1.3rem;
}
.search-result__title a { color: var(--text-strong); text-decoration: none; }
.search-result__title a:hover { color: var(--sonix-blue); }
.search-result__meta {
	display: flex;
	gap: var(--space-2);
	align-items: center;
	color: var(--text-muted);
	font-size: .85rem;
	margin-bottom: var(--space-2);
}
.search-result__cat { color: var(--sonix-blue); text-decoration: none; }
.search-result__excerpt {
	margin: 0;
	color: var(--text-default);
}

.archive-header__search {
	display: flex;
	gap: var(--space-2);
	max-width: 540px;
	margin-top: var(--space-4);
}
.archive-header__search input { flex: 1; }

.error-404 {
	max-width: 640px;
	margin: 0 auto;
	padding: var(--space-8) var(--space-4);
	text-align: center;
}
.error-404__eyebrow {
	font-size: 6rem;
	line-height: 1;
	margin: 0 0 var(--space-3);
	color: var(--sonix-blue);
	font-family: var(--font-prose);
	font-weight: 700;
}
.error-404__title {
	font-family: var(--font-prose);
	font-size: 2rem;
	margin: 0 0 var(--space-3);
}
.error-404__lede { color: var(--text-muted); margin-bottom: var(--space-5); }
.error-404__search { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); }
.error-404__search input { flex: 1; }
.error-404__home { font-weight: 700; }