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

/* ==========================================================================
   About page — layout, prose sections, timeline, sidebar readouts
   ========================================================================== */

/* ── Page layout (main content + sidebar) ── */
.about-layout {
	display: grid;
	grid-template-columns: 5fr 2fr;
	gap: var(--space-xl);
	align-items: start;
}

/* ── Prose sections ── */
.prose {
	font-family: var(--font-sans);
	font-size: var(--text-prose);
	color: var(--ink-dim);
	line-height: var(--lh-base);
	font-weight: 400;

	& p {
		margin: 0 0 1em;
	}

	& strong {
		color: var(--ink);
	}

	& code {
		font-family: var(--font-mono);
		background: var(--bg-alt);
		border: var(--border-rule);
		padding: var(--space-3xs);
		border-radius: var(--border-radius);
		color: var(--ink);
	}

	& h2 {
		font-family: var(--font-mono);
		font-size: var(--text-micro);
		font-weight: 400;
		letter-spacing: var(--tracking-kicker);
		text-transform: uppercase;
		color: var(--ink-faint);
		margin: var(--space-2xl) 0 var(--space-md);
		display: flex;
		align-items: center;
		gap: var(--space-md);

		&::after {
			content: "";
			flex: 1;
			height: 0;
			border-top: 1px dashed var(--border);
		}

		&:first-child {
			margin-top: 0;
		}
	}
}

/* ── Timeline ── */
.timeline {
	display: grid;
	gap: 0;
}
.tl-item {
	display: grid;
	grid-template-columns: var(--sidebar-row-width) 1fr;
	gap: var(--space-md);
	font-size: var(--text-label);
	padding: var(--space-md) 0;
	border-bottom: 1px dashed var(--border);
	align-items: start;
}
.tl-item:last-child {
	border-bottom: none;
}
.tl-item .year {
	color: var(--ink-faint);
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	padding-top: var(--space-2xs);
}
.tl-item .detail {
	font-family: var(--font-sans);
	color: var(--ink-dim);
	line-height: var(--lh-base);
}
.tl-item .detail strong {
	display: block;
	color: var(--ink);
	font-weight: 600;
}
.tl-item .detail .detail-label {
	font-size: var(--text-micro);
	letter-spacing: var(--tracking-meta);
	color: var(--ink-faint);
	display: block;
	margin-top: var(--space-3xs);
}

/* ── Resume ── */
.resume-grid {
	display: flex;
	gap: var(--space-lg);
	margin-top: var(--space-md);
}
.resume-card {
	flex: 1;
	display: block;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	overflow: hidden;
	position: relative;
	transition: border-color 0.1s;
	text-decoration: none;
	&:hover {
		border-color: var(--accent);
	}
	img {
		display: block;
		width: 100%;
		height: auto;
	}
}
.resume-label {
	display: block;
	padding: var(--space-xs) var(--space-sm);
	font-family: var(--font-mono);
	font-size: var(--text-micro);
	letter-spacing: var(--tracking-meta);
	text-transform: uppercase;
	color: var(--ink-faint);
	background: var(--panel);
	text-align: center;
}

/* ── Live chip status (now-playing.js sets data-live) ── */
.box > .box-tag[data-live="ok"] {
	border-color: var(--ok);
	color: var(--ok);
}
.box > .box-tag[data-live="err"] {
	border-color: var(--err);
	color: var(--err);
}

/* ── Responsive ── */
@media (max-width: 820px) {
	.about-layout {
		grid-template-columns: 1fr;
	}
	.resume-grid {
		flex-direction: column;
	}
}