/* ---------------------------------------------------------------
   making marks
   Familjen Grotesk (SIL OFL 1.1, see /fonts/OFL.txt)
   Variable, weight 400 to 700, roman and italic. One file each.
   --------------------------------------------------------------- */
@font-face {
	font-family: "Familjen Grotesk";
	src: url("/fonts/FamiljenGrotesk-Roman-VF.woff2") format("woff2-variations"),
	     url("/fonts/FamiljenGrotesk-Roman-VF.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Familjen Grotesk";
	src: url("/fonts/FamiljenGrotesk-Italic-VF.woff2") format("woff2-variations"),
	     url("/fonts/FamiljenGrotesk-Italic-VF.woff2") format("woff2");
	font-weight: 400 700;
	font-style: italic;
	font-display: swap;
}

/* Tokens. Everything visual comes from these; change them here.
   --page is the background, --paper is a slightly darker ground (currently unused),
   --red is the one accent, --invert flips the wordmark in dark mode. */
:root {
	--paper: #E7EAEE;
	--page: #FFFFFF;
	--ink: #16181D;
	--graphite: #5A6069;
	--rule: #D3D9E0;
	--faint: #EDF0F3;
	--red: #B24232;
	--invert: 0;

	--color-draft-bg: #fdecea;
	--color-draft-text: #b3261e;

	--font-family-sans: "Familjen Grotesk", system-ui, -apple-system, sans-serif;
	--font-family-serif: var(--font-family-sans);
	--font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;

	--syntax-tab-size: 2;
}

/* Dark follows the OS. */
@media (prefers-color-scheme: dark) {
	:root {
		--paper: #111317;
		--page: #1A1D22;
		--ink: #EDEFF1;
		--graphite: #9AA1AA;
		--rule: #2C3138;
		--faint: #20242A;
		--red: #E0705C;
		--invert: 1;
		--color-draft-bg: #4a2320;
		--color-draft-text: #ff8a80;
	}
}

/* Global stylesheet */
* {
	box-sizing: border-box;
}

@view-transition {
	navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	/* The universal selector above does not reach these browser-generated
	   pseudo-elements, so the page's cross-document view transition
	   (@view-transition, base.njk) needs its own override. */
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

html {
	overflow-y: scroll;
}
html,
body {
	padding: 0;
	margin: 0;
}
body {
	background: var(--page);
	color: var(--ink);
	font-family: var(--font-family-sans);
	font-weight: 400;
	font-size: 1.3rem;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

:focus-visible {
	outline: 3px solid var(--red);
	outline-offset: 3px;
}

/* Type: headings are 700 with tracking that tightens as size goes up,
   since Familjen Grotesk sets loose at display sizes. */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-family-serif);
	font-weight: 700;
	letter-spacing: -0.022em;
	line-height: 1.08;
	margin: 0;
}
h1 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 3rem); }
h2 { font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.3rem); letter-spacing: -0.02em; }
h3 { font-size: 1.32rem; font-weight: 600; letter-spacing: -0.015em; }
h4 { font-size: 1.02rem; font-weight: 600; letter-spacing: 0; }
h5, h6 { font-size: 1rem; font-weight: 600; letter-spacing: 0; }

/* https://www.a11yproject.com/posts/how-to-hide-content/ */
.visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Fluid images via https://www.zachleat.com/web/fluid-images/ */
img {
	max-width: 100%;
}
img[width][height] {
	height: auto;
}
img[src$=".svg"] {
	width: 100%;
	height: auto;
	max-width: none;
}
video,
iframe {
	width: 100%;
	height: auto;
}
iframe {
	aspect-ratio: 16/9;
}

p:last-child {
	margin-bottom: 0;
}

/* Links inherit the text colour and carry the accent in the underline. */
a {
	color: inherit;
	text-decoration-line: underline;
	text-decoration-color: var(--red);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

.links-nextprev {
	display: flex;
	justify-content: space-between;
	gap: .5em 1em;
	list-style: "";
	border-top: 1px solid var(--rule);
	padding: 1.5em 0;
	font-size: 0.9375rem;
}
.links-nextprev > * {
	flex-grow: 1;
}
.links-nextprev-next {
	text-align: right;
}

table {
	border-collapse: collapse;
	width: 100%;
	margin: 2em 0;
	font-size: 0.97rem;
}
caption {
	text-align: left;
	font-size: 0.875rem;
	color: var(--graphite);
	padding-bottom: 0.6rem;
}
th, td {
	text-align: left;
	padding: 0.7rem 0.85rem;
	border-bottom: 1px solid var(--rule);
	vertical-align: top;
}
thead th {
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--graphite);
	border-bottom: 2px solid var(--ink);
}
tbody tr:hover {
	background: var(--faint);
}
.num {
	font-variant-numeric: tabular-nums;
}

pre,
code {
	font-family: var(--font-family-monospace);
}
pre:not([class*="language-"]) {
	margin: .5em 0;
	line-height: 1.375; /* 22px /16 */
	-moz-tab-size: var(--syntax-tab-size);
	-o-tab-size: var(--syntax-tab-size);
	tab-size: var(--syntax-tab-size);
	-webkit-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	direction: ltr;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	overflow-x: auto;
}
code {
	word-break: break-all;
}

/* Site header */
.site-header {
	border-bottom: 1px solid var(--rule);
	background: var(--page);
}
.site-header-inner {
	max-width: 740px;
	margin: 0 auto;
	padding: 1.25rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
}

.site-title {
	display: block;
	flex: none;
	line-height: 0;
}
.site-header .site-title .site-wordmark {
	display: block;
	height: 7rem;
	width: auto;
	filter: invert(var(--invert));
}

.nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.625rem;
	padding: 0;
	margin: 0;
	list-style: none;
}
.nav-item {
	display: block;
}
.nav-item a[href] {
	position: relative;
	display: block;
	font-size: 1rem;
	font-weight: 500;
	padding: 4px 0;
	text-decoration: none;
}

/* Ink splotch marking the current page, or (fainter) the section the current
   page belongs to — a scanned mark instead of a drawn underline. Hangs to
   the left of the link as an outdent (like a hanging bullet) rather than
   sitting inline before the text, so every nav item's text still lines up
   on the same left edge whether or not it carries the mark. Painted as a
   solid --red block masked by the scan's alpha, the same technique the
   brush-stroke swipe used, so it follows the light and dark accent color
   with no separate dark asset. Sized off font-size so it scales with the
   breakpoint below; aspect-ratio keeps the scan's proportions as it scales. */
.nav-splotch {
	display: block;
	position: absolute;
	top: 50%;
	right: 100%;
	margin-right: 0.5em;
	transform: translateY(-50%);
	height: 1.65em;
	width: auto;
	aspect-ratio: 252 / 214;
	background: var(--red);
	-webkit-mask-image: url("/img/nav-splotch.png");
	mask-image: url("/img/nav-splotch.png");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	mask-mode: alpha;
}
.nav a.is-section .nav-splotch {
	opacity: 0.45;
}

/* Site header: index column
   Wordmark left, links stacked in a left-aligned column at the right.
   Same layout at every width. */
.site-header-inner {
	align-items: center;
	gap: 0.75rem 1rem;
	padding: 1rem 1.25rem;
}
.site-header .site-title {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
}
.site-header .site-title .site-wordmark {
	height: 4.5rem;
	max-width: 100%;
	object-fit: contain;
	object-position: left center;
}
.nav {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
}
.nav-item a[href] {
	padding: 0;
	line-height: 1.5;
}
/* Bigger hit area (32px tall) without changing the layout. */
.nav-item a[href]::before {
	content: "";
	position: absolute;
	inset: -4px -0.75rem;
}

@media (min-width: 600px) {
	.site-header-inner {
		padding: 1.25rem 1.5rem;
	}
	.site-header .site-title .site-wordmark {
		height: 7rem;
	}
	.nav {
		gap: 0.625rem;
	}
	.nav-item a[href] {
		font-size: 1.0625rem;
	}
}

/* Main content */
main {
	max-width: 740px;
	margin: 0 auto;
	padding: 2.5rem 1.5rem 3rem;
}
main :first-child {
	margin-top: 0;
}

/* Secondary text: deck under a title, and meta rows */
.deck,
.page-intro-dek {
	font-size: clamp(1.12rem, 1rem + 0.6vw, 1.35rem);
	color: var(--graphite);
	line-height: 1.45;
	margin: 1.1rem 0 0;
	max-width: 46ch;
}
.kicker {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--red);
	margin: 0 0 0.75rem;
}

/* Page intros (Journal / Art / Archive landing pages) */
.page-intro {
	margin-bottom: 2.5rem;
}

.empty-state {
	color: var(--graphite);
	font-style: italic;
	padding: 2rem 0;
	border-top: 1px solid var(--rule);
}

/* Essay list — the homepage/tag feed */
.essay-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.essay-list-item {
	border-top: 1px solid var(--rule);
}
.essay-list-item:last-child {
	border-bottom: 1px solid var(--rule);
}
.essay-list-link {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	padding: 1.75rem 0;
	text-decoration: none;
	color: inherit;
}
.essay-list-title {
	text-decoration: underline;
	text-decoration-color: var(--red);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 4px;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
}
.essay-list-link:hover .essay-list-title {
	text-decoration: underline;
	text-decoration-color: var(--red);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
.essay-list-dek {
	color: var(--graphite);
	font-size: 1rem;
	line-height: 1.5;
}
.essay-list-date {
	color: var(--graphite);
	font-size: 0.875rem;
}

/* Archive list — compact old-blog index, grouped by year */
.archive-year {
	font-size: 1.375rem;
	margin: 3rem 0 1rem;
}
.archive-year:first-child {
	margin-top: 0;
}
.archive-list {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 1.2rem;
}
.archive-list-item {
	display: flex;
	gap: 1rem;
	padding: 0.375rem 0;
}
.archive-list-item time {
	flex-shrink: 0;
	width: 4.5rem;
	color: var(--graphite);
	font-family: var(--font-family-monospace);
	font-size: 1em;
	font-variant-numeric: tabular-nums;
}

.archive-list-item a:hover {
	text-decoration: underline;
	text-decoration-color: var(--red);
}

/* Tags */
.post-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-transform: lowercase;
	font-size: 0.875rem;
	font-weight: 500;
	text-transform: capitalize;
}
.post-tag:hover {
	border-color: var(--ink);
}

.draft-badge {
	display: inline-block;
	padding: 0.0625rem 0.5rem;
	border-radius: 999px;
	background: var(--color-draft-bg);
	color: var(--color-draft-text);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	vertical-align: middle;
}
.essay-header h1 .draft-badge {
	font-size: 0.9rem;
	vertical-align: middle;
	position: relative;
	top: -0.2em;
}

/* Post metadata row (tags) */
.post-metadata {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em;
	list-style: none;
	padding: 0;
	margin: 0 0 1rem;
	font-size: 0.875rem;
	color: var(--graphite);
}
.post-metadata time {
	margin-right: 0.5em;
}

/* Author byline: circular avatar + name + date */
.byline {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 1.5rem 0 0;
}
.byline-avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.byline-text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}
.byline-name {
	font-weight: 700;
	font-size: 0.9375rem;
}
.byline-date {
	color: var(--graphite);
	font-size: 0.875rem;
}

/* Essay / archive-post article */
.essay-header,
.art-piece-footer {
	margin-bottom: 2.25rem;
}

.essay-content,
.archive-post .essay-content {
	max-width: 66ch;
}
.essay-content p,
.essay-content li {
	margin-bottom: 1.25em;
}
.essay-content h2 {
	margin: 2.2em 0 0.6em;
}
.essay-content h3 {
	margin: 1.9em 0 0.5em;
}
.essay-content ul,
.essay-content ol {
	margin: 0 0 1.35em;
	padding-left: 1.3em;
}
.essay-content li {
	margin-bottom: 0.5em;
}
.essay-content li::marker {
	color: var(--red);
}
.essay-content strong {
	font-weight: 700;
}
.essay-content blockquote {
	margin: 2em 0;
	padding-left: 1.6rem;
	border-left: 3px solid var(--red);
	font-style: italic;
}
.essay-content blockquote p {
	font-size: 1.25rem;
	margin: 0 0 0.5em;
}
.essay-content blockquote cite {
	font-style: normal;
	font-size: 0.875rem;
	color: var(--graphite);
}
.essay-content figure {
	margin: 2.2em 0;
}
.essay-content figcaption {
	font-size: 0.875rem;
	color: var(--graphite);
	margin-top: 0.6rem;
	max-width: 52ch;
}
.essay-content img {
	border: 1px solid var(--rule);
}

.callout {
	background: var(--faint);
	border: 1px solid var(--rule);
	padding: 1.4rem 1.5rem;
	margin: 2.2em 0;
}
.callout h4 {
	margin-bottom: 0.5rem;
}

.archive-post-banner {
	font-size: 0.875rem;
	color: var(--graphite);
	background: var(--faint);
	border: 1px solid var(--rule);
	padding: 0.75rem 1rem;
	margin-bottom: 2rem;
}

/* Comments. The vertical rule is the structure, the tick marks the entry,
   and the date leads because this is a closed archive thread, not a live
   conversation. */
.comments {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--rule);
}
.comments-title {
	font-size: 1.7rem;
	margin: 0 0 1.5rem;
}
.comments-count {
	color: var(--graphite);
	font-weight: 400;
}

.comment-list {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0 0 0 2px; /* room for the rule, drawn by ::before */
}
/* The vertical rule, fading into the background over 15px at each end. */
.comment-list::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	background: linear-gradient(
		to bottom,
		transparent,
		var(--rule) 15px,
		var(--rule) calc(100% - 15px),
		transparent
	);
}
.comment {
	position: relative;
	padding: 0.9rem 0 0.9rem 1.5rem;
}
.comment::before {
	content: "";
	position: absolute;
	left: -2px;
	top: 1.65rem;
	width: 13px;
	height: 2px;
	background: var(--rule);
}
.comment-mine::before {
	background: var(--red);
	width: 13px;
}
.comment-mine .comment-date {
	color: var(--red);
	font-weight: bold;
}
.comment:target {
	background: var(--faint);
}

.comment-head {
	display: flex;
	gap: 0.85rem;
	align-items: baseline;
	margin: 0 0 0.2rem;
}
.comment-date {
	flex: none;
	font-family: var(--font-family-monospace);
	font-size: 0.8125rem;
	color: var(--graphite);
	font-variant-numeric: tabular-nums;
}
.comment-author {
	font-size: 0.9375rem;
	font-weight: 600;
}
.comment-mine .comment-author {
	color: var(--red);
}

.comment-body {
	font-size: 1.0625rem;
	line-height: 1.5;
	max-width: 62ch;
}
.comment-body p {
	margin: 0 0 0.75em;
}
.comment-body p:last-child {
	margin-bottom: 0;
}
/* A commenter quoting something must not look like a pull quote in the post.
   The red bar keeps meaning "Kevin chose to quote this". */
.comment-body blockquote {
	margin: 0 0 0.75em;
	padding-left: 0.9rem;
	border-left: 2px solid var(--rule);
	color: var(--graphite);
	font-style: normal;
}
.comment-body blockquote p {
	font-size: inherit;
}
.comment-body pre {
	font-size: 0.8125rem;
}

.trackbacks {
	margin-top: 2.5rem;
}
.trackbacks h3 {
	font-size: 1rem;
	margin-bottom: 0.75rem;
}
.trackback-list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.9375rem;
	color: var(--graphite);
}
.trackback-list li {
	padding: 0.35rem 0;
}
.trackback-list a {
	font-weight: 500;
}

/* Art piece page */
.art-piece-content img {
	display: block;
	margin: 0 auto;
	border: 1px solid var(--rule);
}
/* Big images break out of the 740px column: 150% of the well, centered on it.
   Only where the viewport is wide enough to hold that. */
@media (min-width: 1100px) {
	.art-piece-content img.art-wide {
		position: relative;
		left: 50%;
		width: 150%;
		max-width: 150%;
		margin: 0;
		transform: translateX(-50%);
	}
}
.art-piece-content p {
	font-size: 1.125rem;
	line-height: 1.6;
	margin-top: 1.25rem;
	max-width: 66ch;
}
.art-piece-footer h1 {
	font-size: 1.75rem;
	margin: 0 0 0.25rem 0;
}
.art-piece-footer time {
	font-size: 0.875rem;
	color: var(--graphite);
}

/* Art gallery — masonry via CSS columns (fallback): 1 column on mobile, then 2, then 3.
   Images keep their own aspect ratio (width/height attributes reserve the space),
   and each card stays whole within its column. */
.art-grid {
	columns: 1;
	column-gap: 1.25rem;
}
@media (min-width: 480px) {
	.art-grid {
		columns: 2;
	}
}
@media (min-width: 720px) {
	.art-grid {
		columns: 3;
		column-gap: 1.75rem;
	}
}
.art-grid-item {
	display: block;
	break-inside: avoid;
	margin-bottom: 1.75rem;
}

/* JS-placed masonry (see artgrid.njk): plain flex columns, items already in order. */
.art-grid.art-grid-js {
	columns: auto;
	display: flex;
	gap: 1.75rem;
}
.art-grid-col {
	flex: 1 1 0;
	min-width: 0;
}

/* Native masonry where the browser supports it: unlike columns, items keep
   left-to-right order and each one lands in the shortest lane. */
@supports (display: grid-lanes) {
	.art-grid {
		display: grid-lanes;
		columns: auto;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
		gap: 1.75rem;
	}
	.art-grid-item {
		margin-bottom: 0;
	}
}
.art-grid-image {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid var(--rule);
	border-radius: 15px;
	background: var(--faint);
	transition: opacity 0.15s ease;
}
.art-grid-frame {
	position: relative;
	display: block;
}
.art-grid-date {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: rgb(22 24 29 / 0.72);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.5;
	backdrop-filter: blur(6px);
	pointer-events: none;
}
.art-grid-item:hover .art-grid-image {
	opacity: 0.85;
}
.art-grid-title {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.35;
	color: var(--graphite);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Footer */
.site-footer {
	max-width: 740px;
	margin: 0 auto;
	padding: 2rem 1.5rem 3rem;
	border-top: 1px solid var(--rule);
	font-size: 0.875rem;
	color: var(--graphite);
}
.site-footer p {
	margin: 0.25rem 0;
}
.site-footer a {
}
.site-footer a:hover {
	color: var(--ink);
}

.footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem 1.25rem;
	list-style: none;
	padding: 0;
	margin: 0 0 0.75rem 0;
}