@import url("./site.css");
@import url("./filters.css");

/* ==========================================================================
   Writing page — post boxes, type chip colors, rainbow tags
   ========================================================================== */

/* ── Box kind chip backgrounds ── */
.box-title.essay .n  { background: var(--essay); }
.box-title.devlog .n { background: var(--devlog); }
.box-title.til .n    { background: var(--til); }

/* ── Post box inner layout ── */
.writing-card:hover {
	background: var(--accent-dim);
	text-decoration: none;
	& .post-title {
		color: var(--accent);
	}

	& img {
		filter: brightness(1.15);
	}
}

/* ── Hero image ── */
.writing-hero {
	flex: 0 0 auto;
	width: 280px;
	aspect-ratio: 16/9;
	border: var(--border-rule);
	border-radius: var(--border-radius);
	overflow: hidden;
	background: var(--bg-alt);
	align-self: center;
	& a {
		display: block;
		text-decoration: none;
		width: 100%;
		height: 100%;
	}
	& img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		transition: filter .15s;
	}
}

.writing-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-flow: column;
}
.meta-line {
	display: flex;
	gap: var(--space-md);
	align-items: center;
	font-size: var(--text-label);
	color: var(--ink-faint);
	letter-spacing: var(--tracking-label);
	font-variant-numeric: tabular-nums;

	& .read {
		margin-left: auto;
	}
}
.box-inner {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: var(--space-xl);

	& .post-title {
		display: block;
		font-family: var(--font-sans);
		font-size: var(--text-title);
		font-weight: 600;
		color: var(--ink);
		text-decoration: none;
		letter-spacing: var(--tracking-normal);
		line-height: var(--lh-tight);
	}

	& .description {
		margin-top: var(--space-sm);
		color: var(--ink-dim);
		font-family: var(--font-sans);
		font-size: var(--text-base);
		line-height: var(--lh-base);
		flex: 1;
	}

	& .post-tags {
		margin-top: var(--space-md);
		display: flex;
		gap: var(--space-md);
		flex-wrap: wrap;
		font-size: var(--text-micro);
		letter-spacing: var(--tracking-data);
	}

	& .post-tags .hash {
		opacity: 0.5;
	}
}

/* ── Responsive ── */
@media (max-width: 820px) {
	.box {
		margin-bottom: var(--space-lg);
	}
	.box-inner {
		flex-direction: column;
	}
	.writing-hero {
		width: 100%;
		margin-right: 0;
	}
}