/* ==========================================================================
   Blog — archive, single post, pagination.
   ========================================================================== */

.archive__header { margin-block-end: var(--s-7); }

.archive__count { margin: var(--s-2) 0 0; }

.archive__description { margin-block-start: var(--s-4); }

/* Listing ------------------------------------------------------------------ */

.post-list {
	display: flex;
	flex-direction: column;
}

.post-card {
	padding-block: var(--s-6);
	border-top: 1px solid var(--rule);
}

.post-card:last-child { border-bottom: 1px solid var(--rule); }

.post__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.6ch;
	margin: 0 0 var(--s-3);
	max-width: none;
	font-family: var(--font-data);
	font-size: var(--mono-label);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--muted);
}

.post__sep { color: var(--rule); }
.post__cat { color: var(--signal); }

.post-card__title {
	font-size: clamp(1.375rem, 2.4vw, 1.875rem);
	margin: 0 0 var(--s-3);
	max-width: 24ch;
}

.post-card__title a {
	color: var(--ink);
	text-decoration: none;
	background-image: linear-gradient(var(--signal), var(--signal));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size var(--motion-base) var(--ease);
}

.post-card__title a:hover { background-size: 100% 1px; }

.post-card__excerpt p { color: var(--muted); margin: 0; }

.post-list__empty { color: var(--muted); }

/* Single ------------------------------------------------------------------- */

.post__header {
	padding-block-end: var(--s-5);
	margin-block-end: var(--s-6);
	border-bottom: 1px solid var(--rule);
}

.post__title {
	font-size: var(--display-2);
	margin: 0;
	max-width: 22ch;
}

.post__figure {
	margin: 0 0 var(--s-7);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	overflow: hidden;
}

.post__figure img { display: block; width: 100%; height: auto; }

/* Long-form body ----------------------------------------------------------- */

.post__body > * { margin-block-end: var(--s-5); }

.post__body h2 {
	font-size: 1.5rem;
	margin-block-start: var(--s-7);
	padding-block-end: var(--s-2);
	border-bottom: 1px solid var(--rule);
}

.post__body h3 {
	font-size: 1.1875rem;
	margin-block-start: var(--s-6);
}

.post__body ul,
.post__body ol { padding-inline-start: var(--s-5); }
.post__body li { margin-block-end: var(--s-2); }

.post__body blockquote {
	margin-inline: 0;
	padding-inline-start: var(--s-5);
	border-inline-start: 2px solid var(--signal);
	color: var(--muted);
	font-style: italic;
}

.post__body :not(pre) > code {
	padding: 0.15em 0.4em;
	border: 1px solid var(--rule);
	border-radius: 4px;
	background: color-mix(in srgb, var(--ink) 5%, transparent);
	font-size: 0.875em;
}

.post__body pre {
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--ink) 5%, transparent);
	max-width: none;
}

.post__body img,
.post__body figure { max-width: 100%; border-radius: var(--radius); }

.post__body table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--body-sm);
}

.post__body th,
.post__body td {
	padding: var(--s-2) var(--s-3);
	border-bottom: 1px solid var(--rule);
	text-align: start;
}

.post__body th {
	font-family: var(--font-data);
	font-size: var(--mono-label);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--muted);
}

/* Single footer ------------------------------------------------------------ */

.post__footer {
	margin-block-start: var(--s-8);
	padding-block-start: var(--s-5);
	border-top: 1px solid var(--rule);
}

.post__terms { margin: 0 0 var(--s-5); }
.post__terms a { color: var(--signal); }

.post__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--s-4);
}

.post__nav a { color: var(--muted); text-decoration: none; }
.post__nav a:hover { color: var(--ink); }
.post__nav-next { margin-inline-start: auto; text-align: end; }

/* Pagination --------------------------------------------------------------- */

.pagination {
	margin-block-start: var(--s-7);
	padding-block-start: var(--s-5);
	border-top: 1px solid var(--rule);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-4);
}

.pagination a,
.pagination .page-numbers {
	color: var(--muted);
	text-decoration: none;
}

.pagination a:hover { color: var(--ink); }
.pagination .current { color: var(--signal); }

/* Projects ------------------------------------------------------------------
   The specs are the content, so the spec table is styled as the primary
   element rather than as metadata beneath prose. */

.project-list { display: flex; flex-direction: column; }

.project-card {
	padding-block: var(--s-6);
	border-top: 1px solid var(--rule);
}

.project-card:last-child { border-bottom: 1px solid var(--rule); }

.spec {
	display: grid;
	grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
	gap: var(--s-2) var(--s-5);
	margin-block: var(--s-4) 0;
	max-width: none;
}

.spec dt {
	font-family: var(--font-data);
	font-size: var(--mono-label);
	letter-spacing: var(--track-label);
	text-transform: lowercase;
	color: var(--signal);
	margin: 0;
}

.spec dd {
	margin: 0;
	max-width: var(--measure);
	font-family: var(--font-data);
	font-size: var(--mono-data);
	color: var(--muted);
}

.spec dd a { color: var(--signal); }

@media (max-width: 47.99em) {
	.spec { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
	.spec dd { margin-block-end: var(--s-3); }
}

/* Legal pages ---------------------------------------------------------------
   Long-form, but reference material rather than prose — tighter rhythm and
   clearly marked gaps. */

.section--legal, #legal { max-width: 52rem; }

.legal h2 {
	font-size: 1.125rem;
	margin-block-start: var(--s-6);
	margin-block-end: var(--s-3);
	padding-block-end: var(--s-2);
	border-bottom: 1px solid var(--rule);
}

.legal p, .legal li { font-size: var(--body-sm); }
.legal ul { padding-inline-start: var(--s-5); }
.legal li { margin-block-end: var(--s-2); }

/* Unfilled placeholders must be impossible to miss — an Impressum without an
   address is a legal defect, not a cosmetic one. */
.legal__todo {
	background: color-mix(in srgb, var(--alert) 16%, transparent);
	color: var(--alert);
	padding: 0.1em 0.4em;
	border-radius: 3px;
	font-family: var(--font-data);
	font-size: 0.875em;
}

.legal__updated { color: var(--muted); margin-block-start: var(--s-6); }