@layer reset, base, components, article, responsive;

@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		scroll-behavior: smooth;
	}

	body,
	h1,
	h2,
	h3,
	p,
	ul,
	ol,
	blockquote,
	figure {
		margin: 0;
	}

	ul,
	ol {
		padding: 0;
	}

	button,
	input,
	textarea,
	select {
		font: inherit;
	}

	button,
	a {
		-webkit-tap-highlight-color: transparent;
	}

	a {
		color: inherit;
		text-decoration: none;
	}

	img {
		display: block;
		max-width: 100%;
	}
}

@layer base {
	:root {
		--paper: #f3f0e8;
		--paper-soft: #e9e4d9;
		--ink: #171715;
		--muted: #6b675f;
		--line: #c9c3b7;
		--signal: #e94b2f;
		--white: #fffdf8;
		--display: 'Arial Narrow', 'DIN Condensed', 'Roboto Condensed', 'PingFang SC', sans-serif;
		--serif: 'Iowan Old Style', 'Baskerville', 'Times New Roman', 'Songti SC', serif;
		--sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
			'Microsoft YaHei', sans-serif;
		font-family: var(--sans);
		color: var(--ink);
		background: var(--paper);
		font-synthesis: none;
	}

	body {
		min-width: 320px;
		min-height: 100vh;
		background:
			linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(23, 23, 21, 0.05) 50%, transparent calc(50% + 0.5px)),
			var(--paper);
	}

	::selection {
		color: var(--white);
		background: var(--signal);
	}

	a:focus-visible,
	button:focus-visible,
	input:focus-visible,
	textarea:focus-visible,
	select:focus-visible {
		outline: 3px solid var(--signal);
		outline-offset: 3px;
	}

	.skip-link {
		position: fixed;
		top: 0.75rem;
		left: 0.75rem;
		z-index: 1000;
		padding: 0.8rem 1rem;
		color: var(--white);
		background: var(--ink);
		transform: translateY(-160%);
		transition: transform 160ms ease;
	}

	.skip-link:focus {
		transform: translateY(0);
	}

	[hidden] {
		display: none !important;
	}
}

@layer components {
	.site-header {
		position: relative;
		z-index: 20;
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		min-height: 5.25rem;
		padding: 0 4vw;
		border-bottom: 1px solid var(--ink);
		background: color-mix(in srgb, var(--paper) 92%, transparent);
		backdrop-filter: blur(12px);
	}

	.wordmark,
	.live-status,
	.eyebrow,
	.section-label,
	.footer-kicker,
	.post-index,
	.post-meta,
	.tag,
	.article-kicker {
		font-family: var(--display);
		font-weight: 800;
		letter-spacing: 0.14em;
		text-transform: uppercase;
	}

	.wordmark {
		display: inline-flex;
		align-items: center;
		gap: 0.72rem;
		width: fit-content;
		font-size: 0.8rem;
	}

	.wordmark-mark {
		width: 0.72rem;
		height: 0.72rem;
		background: var(--signal);
		border-radius: 50%;
	}

	.site-header nav {
		display: flex;
		gap: clamp(1.5rem, 4vw, 4rem);
		font-size: 0.76rem;
		font-weight: 750;
		letter-spacing: 0.08em;
	}

	.site-header nav a,
	.site-footer a,
	.article-back {
		text-decoration: underline;
		text-decoration-color: transparent;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.35em;
		transition: text-decoration-color 160ms ease;
	}

	.site-header nav a:hover,
	.site-footer a:hover,
	.article-back:hover {
		text-decoration-color: currentColor;
	}

	.live-status {
		display: inline-flex;
		align-items: center;
		justify-self: end;
		gap: 0.5rem;
		font-size: 0.68rem;
	}

	.live-status span {
		width: 0.45rem;
		height: 0.45rem;
		background: var(--signal);
		border-radius: 50%;
		box-shadow: 0 0 0 0 rgba(233, 75, 47, 0.4);
		animation: pulse 2.4s infinite;
	}

	.blog-hero {
		display: grid;
		grid-template-columns: minmax(0, 1.28fr) minmax(18rem, 0.72fr);
		align-items: center;
		gap: 7vw;
		min-height: min(54rem, calc(100svh - 5.25rem));
		padding: clamp(4.5rem, 10vw, 9rem) 7vw;
		border-bottom: 1px solid var(--ink);
	}

	.eyebrow,
	.section-label,
	.footer-kicker,
	.article-kicker {
		font-size: 0.68rem;
	}

	.eyebrow::before,
	.section-label::before,
	.article-kicker::before {
		display: inline-block;
		width: 2.4rem;
		height: 1px;
		margin-right: 0.8rem;
		vertical-align: middle;
		content: '';
		background: currentColor;
	}

	.blog-hero h1 {
		max-width: 11ch;
		margin-top: clamp(2rem, 5vw, 4.6rem);
		font-family: var(--display);
		font-size: clamp(4rem, 8.4vw, 9.5rem);
		font-weight: 900;
		line-height: 0.88;
		letter-spacing: -0.07em;
	}

	.blog-hero h1 em {
		font-family: var(--serif);
		font-weight: 400;
		color: var(--signal);
	}

	.hero-intro {
		max-width: 42rem;
		margin-top: clamp(2.4rem, 5vw, 3.8rem);
		font-size: clamp(1rem, 1.4vw, 1.16rem);
		line-height: 1.85;
	}

	.primary-link {
		display: inline-flex;
		align-items: center;
		justify-content: space-between;
		min-width: 12.5rem;
		min-height: 3.5rem;
		margin-top: 2.5rem;
		padding: 0.85rem 1rem;
		color: var(--white);
		font-size: 0.84rem;
		font-weight: 750;
		background: var(--ink);
		border: 1px solid var(--ink);
		transition: color 160ms ease, background 160ms ease;
	}

	.primary-link:hover {
		color: var(--ink);
		background: transparent;
	}

	.edition-card {
		position: relative;
		display: grid;
		place-items: center;
		justify-self: end;
		width: min(31vw, 26rem);
		aspect-ratio: 0.76;
		padding: 2rem;
		color: var(--white);
		background: var(--signal);
		box-shadow: 1.25rem 1.25rem 0 transparent, 1.25rem 1.25rem 0 1px var(--ink);
		transform: rotate(2.5deg);
	}

	.edition-card::before {
		position: absolute;
		inset: 1rem;
		content: '';
		border: 1px solid rgba(255, 255, 255, 0.7);
	}

	.edition-card p,
	.edition-card span {
		font-family: var(--display);
		font-size: 0.63rem;
		font-weight: 800;
		letter-spacing: 0.16em;
	}

	.edition-card strong {
		font-family: var(--display);
		font-size: clamp(7rem, 14vw, 12rem);
		line-height: 0.72;
		letter-spacing: -0.1em;
	}

	.posts-section {
		padding: clamp(5rem, 9vw, 9rem) 7vw;
		border-bottom: 1px solid var(--ink);
	}

	.section-heading {
		display: grid;
		grid-template-columns: 0.5fr 1fr 0.65fr;
		gap: 4vw;
		align-items: end;
		margin-bottom: clamp(3.5rem, 7vw, 6.5rem);
	}

	.section-heading h2 {
		font-family: var(--display);
		font-size: clamp(3.2rem, 6vw, 6.8rem);
		font-weight: 900;
		line-height: 0.9;
		letter-spacing: -0.055em;
	}

	.section-heading > p:last-child {
		color: var(--muted);
		font-size: 0.9rem;
		line-height: 1.8;
	}

	.post-grid {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		border-top: 1px solid var(--ink);
	}

	.post-card {
		position: relative;
		display: flex;
		grid-column: span 6;
		flex-direction: column;
		min-height: 27rem;
		padding: 2rem;
		border-right: 1px solid var(--ink);
		border-bottom: 1px solid var(--ink);
		transition: color 180ms ease, background 180ms ease;
	}

	.post-card:nth-child(even) {
		border-right: 0;
	}

	.post-card:hover {
		color: var(--white);
		background: var(--ink);
	}

	.post-card.has-cover {
		min-height: 33rem;
		overflow: hidden;
	}

	.post-cover {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		filter: grayscale(1) contrast(1.05);
		transition: filter 220ms ease, transform 400ms ease;
	}

	.post-card.has-cover::after {
		position: absolute;
		inset: 0;
		content: '';
		background: linear-gradient(180deg, rgba(10, 10, 9, 0.18), rgba(10, 10, 9, 0.88));
	}

	.post-card.has-cover:hover .post-cover {
		filter: grayscale(0.15) contrast(1.08);
		transform: scale(1.02);
	}

	.post-card-content {
		position: relative;
		z-index: 1;
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	.post-card.has-cover .post-card-content {
		color: var(--white);
	}

	.post-index,
	.post-meta {
		font-size: 0.64rem;
	}

	.post-card h3 {
		max-width: 15ch;
		margin-top: auto;
		font-family: var(--display);
		font-size: clamp(2.2rem, 4vw, 4.5rem);
		font-weight: 900;
		line-height: 0.94;
		letter-spacing: -0.05em;
	}

	.post-card .post-excerpt {
		max-width: 40rem;
		margin-top: 1.5rem;
		color: var(--muted);
		font-size: 0.92rem;
		line-height: 1.75;
	}

	.post-card:hover .post-excerpt,
	.post-card.has-cover .post-excerpt {
		color: #c7c3ba;
	}

	.post-card-footer {
		display: flex;
		align-items: end;
		justify-content: space-between;
		gap: 1rem;
		margin-top: 2rem;
		padding-top: 1.25rem;
		border-top: 1px solid currentColor;
	}

	.tags {
		display: flex;
		flex-wrap: wrap;
		gap: 0.45rem;
	}

	.tag {
		padding: 0.28rem 0.45rem;
		font-size: 0.56rem;
		border: 1px solid currentColor;
	}

	.empty-state {
		grid-column: 1 / -1;
		padding: 5rem 2rem;
		color: var(--muted);
		text-align: center;
		border-bottom: 1px solid var(--ink);
	}

	.blog-signal {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		min-height: 7.5rem;
		border-bottom: 1px solid var(--ink);
	}

	.blog-signal p {
		display: grid;
		place-items: center;
		padding: 1.5rem;
		font-family: var(--display);
		font-size: 0.76rem;
		font-weight: 800;
		letter-spacing: 0.14em;
		text-align: center;
		border-right: 1px solid var(--ink);
	}

	.blog-signal p:last-child {
		border-right: 0;
	}

	.site-footer {
		display: flex;
		align-items: end;
		justify-content: space-between;
		min-height: 20rem;
		padding: 4rem 7vw;
	}

	.site-footer div > p:last-child {
		max-width: 27rem;
		margin-top: 1.35rem;
		font-family: var(--display);
		font-size: clamp(2rem, 3.4vw, 3.6rem);
		font-weight: 900;
		line-height: 1;
		letter-spacing: -0.045em;
	}

	.site-footer a {
		min-height: 44px;
		font-size: 0.82rem;
		font-weight: 700;
	}

	@keyframes pulse {
		0%,
		100% {
			box-shadow: 0 0 0 0 rgba(233, 75, 47, 0.4);
		}

		50% {
			box-shadow: 0 0 0 0.42rem rgba(233, 75, 47, 0);
		}
	}
}

@layer article {
	.article-page {
		background: var(--white);
	}

	.article-shell {
		display: grid;
		grid-template-columns: minmax(12rem, 0.3fr) minmax(0, 1fr) minmax(12rem, 0.3fr);
		gap: 4vw;
		padding: clamp(4rem, 8vw, 8rem) 5vw 8rem;
	}

	.article-side {
		position: sticky;
		top: 2rem;
		align-self: start;
		font-size: 0.76rem;
		line-height: 1.7;
	}

	.article-side .tags {
		margin-top: 1.5rem;
	}

	.article-side-block {
		margin-top: 1rem;
	}

	.article-main {
		max-width: 50rem;
		margin: 0 auto;
	}

	.article-header {
		padding-bottom: clamp(3rem, 6vw, 5rem);
		border-bottom: 1px solid var(--ink);
	}

	.article-header h1 {
		margin-top: 2rem;
		font-family: var(--display);
		font-size: clamp(3.4rem, 7.2vw, 7.6rem);
		font-weight: 900;
		line-height: 0.9;
		letter-spacing: -0.065em;
	}

	.article-deck {
		max-width: 42rem;
		margin-top: 2.2rem;
		color: var(--muted);
		font-family: var(--serif);
		font-size: clamp(1.15rem, 2vw, 1.45rem);
		line-height: 1.75;
	}

	.article-cover {
		width: 100%;
		max-height: 38rem;
		margin-top: 3rem;
		object-fit: cover;
	}

	.article-body {
		padding-top: clamp(3rem, 6vw, 5rem);
		font-family: var(--serif);
		font-size: clamp(1.05rem, 1.55vw, 1.18rem);
		line-height: 1.95;
	}

	.article-body > * + * {
		margin-top: 1.55em;
	}

	.article-body h1,
	.article-body h2,
	.article-body h3,
	.article-body h4 {
		margin-top: 2.2em;
		font-family: var(--display);
		font-weight: 900;
		line-height: 1.04;
		letter-spacing: -0.035em;
	}

	.article-body h1 {
		font-size: 2.7rem;
	}

	.article-body h2 {
		font-size: 2.2rem;
	}

	.article-body h3 {
		font-size: 1.65rem;
	}

	.article-body ul,
	.article-body ol {
		padding-left: 1.35em;
	}

	.article-body li + li {
		margin-top: 0.55em;
	}

	.article-body blockquote {
		padding: 0.3rem 0 0.3rem 1.5rem;
		color: var(--muted);
		font-size: 1.14em;
		border-left: 4px solid var(--signal);
	}

	.article-body a {
		color: var(--signal);
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}

	.article-body img {
		width: 100%;
		margin: 2.4rem 0;
	}

	.article-body pre {
		overflow-x: auto;
		padding: 1.25rem;
		color: #f5f2eb;
		font: 0.9rem/1.7 ui-monospace, SFMono-Regular, Consolas, monospace;
		background: #1c1c1a;
	}

	.article-body :not(pre) > code {
		padding: 0.15em 0.35em;
		font: 0.9em ui-monospace, SFMono-Regular, Consolas, monospace;
		background: var(--paper-soft);
	}

	.article-body table {
		width: 100%;
		border-collapse: collapse;
		font-family: var(--sans);
		font-size: 0.9rem;
	}

	.article-body th,
	.article-body td {
		padding: 0.75rem;
		text-align: left;
		border: 1px solid var(--line);
	}

	.article-end {
		margin-top: 5rem;
		padding-top: 2rem;
		font-family: var(--display);
		font-size: 0.72rem;
		font-weight: 800;
		letter-spacing: 0.14em;
		border-top: 1px solid var(--ink);
	}

	.not-found {
		display: grid;
		place-items: center;
		min-height: 70vh;
		padding: 3rem;
		text-align: center;
	}

	.not-found strong {
		display: block;
		font-family: var(--display);
		font-size: clamp(6rem, 18vw, 15rem);
		line-height: 0.8;
		color: var(--signal);
	}

	.not-found h1 {
		margin-top: 2rem;
		font-family: var(--display);
		font-size: clamp(2.5rem, 5vw, 5rem);
	}

	.not-found a {
		display: inline-block;
		margin-top: 2rem;
		text-decoration: underline;
	}
}

@layer responsive {
	@media (max-width: 960px) {
		.blog-hero {
			grid-template-columns: 1fr;
		}

		.edition-card {
			justify-self: center;
			width: min(70vw, 24rem);
		}

		.section-heading {
			grid-template-columns: 0.45fr 1fr;
		}

		.section-heading > p:last-child {
			grid-column: 2;
		}

		.article-shell {
			grid-template-columns: minmax(9rem, 0.25fr) minmax(0, 1fr);
		}

		.article-shell > .article-side:last-child {
			display: none;
		}
	}

	@media (max-width: 700px) {
		.site-header {
			grid-template-columns: 1fr auto;
			min-height: 4.5rem;
			padding: 0 1.25rem;
		}

		.site-header nav {
			display: none;
		}

		.blog-hero,
		.posts-section {
			padding-right: 1.25rem;
			padding-left: 1.25rem;
		}

		.blog-hero h1 {
			font-size: clamp(3.45rem, 15vw, 4.5rem);
		}

		.primary-link {
			width: 100%;
		}

		.section-heading {
			grid-template-columns: 1fr;
			gap: 1.7rem;
		}

		.section-heading > p:last-child {
			grid-column: auto;
		}

		.post-card {
			grid-column: 1 / -1;
			min-height: 24rem;
			padding: 1.5rem;
			border-right: 0;
		}

		.blog-signal {
			grid-template-columns: 1fr;
		}

		.blog-signal p {
			min-height: 4.5rem;
			border-right: 0;
			border-bottom: 1px solid var(--ink);
		}

		.blog-signal p:last-child {
			border-bottom: 0;
		}

		.site-footer {
			align-items: flex-start;
			flex-direction: column;
			gap: 3rem;
			padding: 3rem 1.25rem;
		}

		.article-shell {
			grid-template-columns: 1fr;
			padding: 3.5rem 1.25rem 5rem;
		}

		.article-side {
			position: static;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 1rem;
		}

		.article-side .tags {
			justify-content: end;
			margin-top: 0;
		}

		.article-header h1 {
			font-size: clamp(3rem, 14vw, 4.6rem);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		html {
			scroll-behavior: auto;
		}

		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
		}
	}
}