/*
Theme Name: Dominic Dale
Theme URI: https://github.com/DomDale/koji-edit
Author: Dominic Dale
Description: A personal theme: pixel display type, hard shadows, a proportional timeline and a filterable grid of every post.
Version: 0.3.55
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: dominicdale
*/

/* Pixelify Sans by Stefie Justprince and Space Grotesk by Florian Karsten,
   from Google Fonts (SIL Open Font License 1.1). Self-hosted. */
@font-face {
	font-family: "Pixelify Sans";
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url("fonts/pixelify-sans-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Pixelify Sans";
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url("fonts/pixelify-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Space Grotesk";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("fonts/space-grotesk-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Space Grotesk";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("fonts/space-grotesk-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--bg: #f6f3ec;
	--ink: #111111;
	--muted: #8a8378;
	--muted-2: #6b655c;
	--paper: #ffffff;
	--pixel: "Pixelify Sans", ui-monospace, monospace;
	--sans: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
	--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--title-size: clamp(68px, 12.5vw, 175px);
	--frame: 1240px;  /* whole page */
	--card: 760px;    /* post card, incl. padding: a ~660px text column */
	--side: 280px;    /* featured lists beside posts and archives (from 1200px) */
	--side-gap: 44px;
	--intro-pad: clamp(20px, 3.5vw, 40px); /* inside the intro card */
	--gap: 56px;      /* between sections */
	color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 16px/1.45 var(--sans);
	-webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

::selection { background: #ffd84a; }

img, video, iframe { max-width: 100%; height: auto; }

.page { padding: 28px 4% 80px; overflow-x: clip; }
.wrap {
	max-width: var(--frame);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--gap);
}
.site-main { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
.skip-link:focus {
	z-index: 100;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	padding: 8px 16px;
	clip: auto;
	clip-path: none;
	background: var(--paper);
	border: 3px solid var(--ink);
}

.swatch {
	display: inline-block;
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	border: 2px solid var(--ink);
	background: var(--c, var(--paper));
}

/* ------------------------------------------------------------------
   Home: header
   ------------------------------------------------------------------ */

.home-header {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: end;
	border-bottom: 4px solid var(--ink);
}
.home-header__text {
	grid-area: 1 / 1;
	align-self: end;
	margin-bottom: 16px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.home-title {
	margin: 0;
	font: 700 var(--title-size)/0.82 var(--pixel);
	letter-spacing: -0.02em;
	text-transform: uppercase;
}
.home-title .suffix { color: var(--muted); }
.home-contact {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 0;
	list-style: none;
	font: 500 18px var(--pixel);
}
.home-contact a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 4px 16px;
	border: 3px solid var(--ink);
	box-shadow: 4px 4px 0 var(--ink);
	background: var(--paper);
}
.home-photo {
	grid-area: 1 / 1;
	justify-self: end;
	align-self: end;
	position: relative;
	display: block;
	/* As tall as the two title lines, the 20px gap and the buttons together. */
	height: calc(var(--title-size) * 1.64 + 80px);
	width: auto;
	max-width: 48%;
	object-fit: contain;
	object-position: bottom right;
}

/* ------------------------------------------------------------------
   Home: bio
   ------------------------------------------------------------------ */

.bio {
	max-width: 1000px;
	font: 500 clamp(22px, 2.6vw, 32px)/1.3 var(--sans);
}
.bio p { margin: 0; }
.bio p + p { margin-top: 0.6em; }
.bio a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bio mark { color: inherit; padding: 0 6px; }
.bio mark:nth-of-type(4n+1) { background: #ffd84a; }
.bio mark:nth-of-type(4n+2) { background: #8ec5ff; }
.bio mark:nth-of-type(4n+3) { background: #ff9ec7; }
.bio mark:nth-of-type(4n+4) { background: #9be3a8; }

/* ------------------------------------------------------------------
   Home: timeline (column widths are set inline, proportional to time)
   ------------------------------------------------------------------ */

.tl {
	display: grid;
	margin: 0;
	padding: 8px 0 0 4px;
	list-style: none;
}
.tl > li { min-width: 0; }
.tl-ev {
	position: relative;
	min-width: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-right: 24px;
}
/* Photos are all the same size and shape (3:2), cropped to fill. Columns are at least
   230px wide (inc/timeline.php), so every photo fits at full size; with more than five
   entries the columns can be narrower, and photos then shrink as a whole. Each sits at
   the bottom of a fixed-height slot, so the years and the line stay level. */
.tl-photo,
.tl-spacer {
	display: flex;
	align-items: flex-end;
	height: 137px;
	margin-bottom: 6px;
}
.tl-photo img {
	display: block;
	width: min(100%, 206px);
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border: 3px solid var(--ink);
	box-shadow: 5px 5px 0 var(--ink);
}
.tl-year { font: 700 30px/1 var(--pixel); white-space: nowrap; }
.tl-row { position: relative; height: 20px; margin-right: -24px; }
.tl-line { position: absolute; top: 8px; left: 0; right: 0; height: 4px; background: var(--ink); }
.tl-line--first { left: 10px; }
.tl-line--period { top: 3px; height: 14px; border: 3px solid var(--ink); }
.tl-marker {
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	height: 20px;
	border: 4px solid var(--ink);
}
.tl-text { max-width: 206px; font: 700 20px/1.3 var(--sans); } /* as wide as the photos, however long the bar */
/* More than five milestones: narrower columns, so smaller years and text. */
.tl--dense .tl-year { font-size: 22px; }
.tl--dense .tl-text { font-size: 16px; }
.tl-future { display: flex; flex-direction: column; gap: 12px; }
.tl-future .tl-year { color: var(--muted-2); min-height: 1em; } /* one line high even when empty, so the dotted line stays level */
.tl-dots { position: relative; height: 20px; }
.tl-dots::before {
	content: "";
	position: absolute;
	top: 7px;
	left: 0;
	right: -100vw;
	border-top: 6px dotted var(--ink);
}

/* ------------------------------------------------------------------
   Home: intro and featured lists
   ------------------------------------------------------------------ */

.intro {
	margin: 0 0 32px; /* extra room before the posts: 56px section gap + 32px */
	display: flex; /* card and lists side by side at every width from 820px */
	align-items: stretch; /* the intro card is as tall as the featured lists */
	gap: 32px 56px;
	font: 500 clamp(18px, 1.8vw, 22px)/1.45 var(--sans);
}
.intro-text {
	flex: 1 1 0; /* takes the space the lists leave */
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	/* On a white card, like the posts. */
	padding: var(--intro-pad);
	border: 3px solid var(--ink);
	box-shadow: 6px 6px 0 var(--ink);
	background: var(--paper);
}
.intro-text p { margin: 0; max-width: 860px; }
.intro-text a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.intro-text .latest { margin-top: auto; } /* sits at the bottom of the card */
.intro-text .latest a { font-weight: 700; }

.featured {
	align-self: flex-start;
	flex: 0 0 clamp(260px, 30%, 340px);
	display: flex;
	flex-direction: column;
	gap: 22px;
	font: 500 16px/1.3 var(--sans); /* its own size, so lines aren't as tall as the intro's */
}
.featured-list > * { margin-top: 0; margin-bottom: 0; }
/* Widget titles, and Heading blocks used as titles. */
.featured-title,
.featured-list h2,
.featured-list h3,
.featured-list h4 {
	margin: 0 0 6px;
	font: 700 18px/1.3 var(--sans);
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 5px;
}
/* The year (posts) or count (series, categories) after each item: inc/featured.php. */
.featured-meta {
	margin-left: 6px;
	color: var(--muted-2);
	font-size: 0.8em;
	font-weight: 500;
	white-space: nowrap;
}
/* A Heading block widget directly followed by a List block widget reads as one list. */
.featured-list:has(> :is(h2, h3, h4):only-child) + .featured-list { margin-top: -20px; }
.featured-list ul,
.featured-list ol {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.featured-list li {
	position: relative;
	margin: 0;
	padding-left: 16px; /* wrapped lines line up with the text, not the bullet */
}
/* Small ink squares, like the timeline markers. */
.featured-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 7px;
	height: 7px;
	background: var(--ink);
}
.featured-list .sub-menu { display: none; }
.featured-list a { font: inherit; }

/* ------------------------------------------------------------------
   Home: browse sidebar and dropdown
   ------------------------------------------------------------------ */

.browse {
	display: flex;
	flex-wrap: wrap;
	gap: 32px 48px;
	align-items: flex-start;
}
.sidebar {
	flex: 0 0 250px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.all-btn {
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 44px;
	padding: 0 14px;
	border: 3px solid var(--ink);
	box-shadow: 4px 4px 0 var(--ink);
	background: var(--paper);
	font-weight: 700;
}
.all-btn[aria-current],
.dd-all[aria-current] { background: var(--ink); color: var(--paper); }
.all-btn[aria-current]:focus-visible,
.dd-all[aria-current]:focus-visible { outline-color: var(--ink); }
.side-group { display: flex; flex-direction: column; }
.side-group h2 {
	margin: 0 0 6px;
	padding-bottom: 8px;
	border-bottom: 4px solid var(--ink);
	font: 700 24px var(--pixel);
}
.side-item {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 6px 8px;
	border-bottom: 2px solid var(--ink);
}
.side-item .name,
.dd-item .name { flex: 1; font-weight: 700; line-height: 1.25; }
.side-item .n,
.dd-item .n { font-size: 13px; }
.n.pill {
	padding: 0 8px;
	border: 2px solid var(--ink);
	border-radius: 999px;
	background: var(--paper);
	font-size: 12px;
	font-weight: 700;
}
.side-item[aria-current],
.dd-item[aria-current] { background: var(--c); }

.dropdown {
	display: none;
	flex: 1 1 100%;
	border: 3px solid var(--ink);
	box-shadow: 4px 4px 0 var(--ink);
	background: var(--paper);
}
.dropdown summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 48px;
	padding: 0 16px;
	cursor: pointer;
	font: 700 20px var(--pixel);
	list-style: none;
}
.dropdown summary::-webkit-details-marker { display: none; }
.dd-body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 8px 16px 20px;
	border-top: 3px solid var(--ink);
}
.dd-body .group { display: flex; flex-direction: column; gap: 6px; }
.dd-body .group-title { font: 700 18px var(--pixel); }
.dd-item,
.dd-all {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 40px;
	padding: 0 10px;
	border: 2px solid var(--ink);
}
.dd-all { align-self: flex-start; font-weight: 700; }

.browse-main {
	flex: 999 1 400px; /* stays beside the sidebar down to the 820px breakpoint */
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.chip {
	display: none;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	font-weight: 700;
}
.chip.on { display: flex; }
.chip__label { padding: 6px 14px; border: 3px solid var(--ink); }
.chip__clear {
	min-height: 40px;
	padding: 0 12px;
	border: 2px solid var(--ink);
	background: var(--paper);
	color: var(--ink);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

/* ------------------------------------------------------------------
   Post grid (home, archives, search). Masonry-style: 3 columns, or 4 once the grid
   is at least 760px wide (the column counts are listed in inc/posts.php).
   Each tile keeps its image's aspect ratio (--ratio) and spans as many fine rows as
   its height needs. Spans, tilts and the spacing (--cg, --rg3/4, --ru, all in cqw) are
   set inline from inc/posts.php, and again by home.js after filtering.
   Labels hang half below their tile, so the row gaps (--rg3, --rg4) leave room for them.
   ------------------------------------------------------------------ */

.post-grid-wrap {
	container: post-grid / inline-size;
	padding: 6px 6px 10px; /* room for the tilt and shadows */
}
.post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: var(--ru, 0.5cqw);
	grid-auto-flow: dense;
	column-gap: var(--cg, 2.5cqw);
	row-gap: 0;
}
.tile {
	position: relative;
	display: block;
	grid-column: var(--x3, auto) / span var(--w3, 1);
	grid-row: var(--y3, auto) / span var(--h3, 50);
	align-self: start;
	aspect-ratio: var(--ratio, 4 / 3);
	margin-bottom: var(--rg3, 7cqw); /* the gap below; counted in the row span */
	border: 3px solid var(--ink);
	box-shadow: 6px 6px 0 var(--ink);
	background: var(--paper);
}
.tile[hidden] { display: none; }
.tile img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.tile__label {
	position: absolute;
	z-index: 1;
	left: -3px;
	/* Centred on the tile's bottom border: 1.5px below the inner edge, then down half its height. */
	bottom: -1.5px;
	transform: translateY(50%);
	max-width: calc(100% - 24px);
	padding: 6px 12px;
	background: var(--c);
	border: 3px solid var(--ink);
	font: 700 15px/1.25 var(--sans);
}
.tile__label small { font-weight: 400; font-size: 13px; }
/* Long titles on small tiles: cut off rather than spill out of the tile.
   Clamped on an inner span, so no part of the next line shows in the label's padding. */
.tile__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
}
/* Series tab: sits on the label's top border, like a folder tab. "GARDEN WORKSHOP 3/15". */
.tile__series {
	position: absolute;
	left: -3px;
	bottom: 100%;
	display: flex;
	gap: 6px;
	max-width: var(--tab-max, 28cqw); /* about one column, so it never outgrows a small tile */
	padding: 4px 7px 3px;
	background: var(--ink);
	color: var(--paper);
	font: 500 11px/1 var(--pixel);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}
.tile__series-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tile__series-n { flex: none; }
.tile--text .tile__series { left: 0; }
.tile:hover .tile__label,
.tile:focus-visible .tile__label { text-decoration: underline; }
.tile:hover, .tile:focus-visible { text-decoration: none; }
/* No image: the whole tile in the post colour, title larger. */
.tile--text { background: var(--c); }
.tile--text .tile__label {
	left: 0;
	bottom: 0;
	transform: none;
	max-width: 100%;
	padding: 12px 14px;
	border: 0;
	font-size: clamp(16px, 1.8vw, 22px);
}

/* 4 columns once the grid is wide enough. */
@container post-grid (min-width: 760px) {
	.post-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.post-grid .tile { grid-column: var(--x4, auto) / span var(--w4, 1); grid-row: var(--y4, auto) / span var(--h4, 40); margin-bottom: var(--rg4, 5cqw); --tab-max: 21cqw; }
}
/* Compact labels unless the columns are roomy (wide 3-column grids, e.g. archives at ~1000px). */
@container post-grid (min-width: 760px) or (max-width: 699px) {
	.tile__label { max-width: calc(100% - 12px); padding: 5px 10px; font-size: 13px; }
	.tile__label small { font-size: 12px; }
	.tile__text { -webkit-line-clamp: 3; line-clamp: 3; }
	.tile--text .tile__label { max-width: 100%; padding: 10px 12px; font-size: 17px; }
	.tile__series { font-size: 10px; padding: 3px 6px 2px; gap: 5px; }
}
/* Phones: 2 columns, so tiles are wide enough for the whole title (up to 4 lines). */
@container post-grid (max-width: 499px) {
	.post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.post-grid .tile { grid-column: var(--x2, auto) / span var(--w2, 1); grid-row: var(--y2, auto) / span var(--h2, 60); margin-bottom: var(--rg2, 11cqw); --tab-max: 44cqw; }
	.post-grid .tile__text { -webkit-line-clamp: 4; line-clamp: 4; }
}

/* ------------------------------------------------------------------
   Other pages: small header, archive header, footer
   ------------------------------------------------------------------ */

.site-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	padding-bottom: 16px;
	border-bottom: 4px solid var(--ink);
}
.site-title {
	margin: 0;
	font: 700 clamp(32px, 5vw, 48px)/1 var(--pixel);
	letter-spacing: -0.02em;
	text-transform: uppercase;
}
.site-title .suffix { color: var(--muted); }
.site-title a:hover { text-decoration: none; }
.site-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	font: 500 18px var(--pixel);
}
.site-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 4px 14px;
	border: 3px solid var(--ink);
	box-shadow: 4px 4px 0 var(--ink);
	background: var(--paper);
}
.site-nav .current-menu-item a { background: var(--ink); color: var(--paper); }

.archive-header { display: flex; flex-direction: column; gap: 12px; margin-bottom: calc(20px - var(--gap)); }
.page-title {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	font: 700 clamp(32px, 5vw, 56px)/1.05 var(--pixel);
}
.page-title .swatch { width: 0.6em; height: 0.6em; border-width: 3px; }
.archive-description { max-width: 860px; font-size: 18px; }
.archive-description p { margin: 0; }

.pagination .nav-links,
.empty { font-weight: 700; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 2px solid var(--ink);
	background: var(--paper);
}
.pagination .current { background: var(--ink); color: var(--paper); }

.site-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 8px 24px;
	padding-top: 16px;
	border-top: 4px solid var(--ink);
	font-size: 14px;
}
.social-links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.social-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* ------------------------------------------------------------------
   Single post / page
   ------------------------------------------------------------------ */

/* The post sits on a white card, centred and narrow enough to read comfortably
   (about 68 characters a line). Previous/next links sit below it at the same width. */
body:is(.single, .page) .site-main { align-items: center; }
body:is(.single, .page) .site-main > * { width: 100%; max-width: var(--card); }
.entry-card {
	--card-pad: clamp(18px, 5vw, 48px);
	padding: var(--card-pad);
	border: 3px solid var(--ink);
	box-shadow: 6px 6px 0 var(--ink);
	background: var(--paper);
}

.entry-header { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }
.entry-title {
	margin: 0;
	font: 700 clamp(32px, 4.5vw, 52px)/1.05 var(--pixel);
	letter-spacing: -0.01em;
}

/* Date, series and part, categories and tags, together in one row. */
.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
}
.entry-meta__date { font-weight: 700; }
.entry-meta__group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.meta-series {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 28px;
	padding: 4px 9px 3px;
	background: var(--ink);
	color: var(--paper);
	font: 500 13px/1 var(--pixel);
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
.meta-cat {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 2px 10px;
	border: 2px solid var(--ink);
	border-radius: 999px;
	background: var(--c, var(--paper));
	font-weight: 700;
}
.meta-tag { color: var(--muted-2); font-weight: 500; }
.meta-tag:hover, .meta-tag:focus-visible { color: var(--ink); }

.entry-content {
	font-size: 18px;
	line-height: 1.6;
}
.entry-content > * { margin-top: 0; margin-bottom: 1.3rem; }
.entry-content a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.entry-content a:hover { text-decoration-thickness: 2px; }
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-top: 2.5rem;
	margin-bottom: 0.75rem;
	font-weight: 700;
	line-height: 1.25;
}
.entry-content h2 { font: 700 28px/1.15 var(--pixel); }
.entry-content h3 { font-size: 21px; }
.entry-content h4 { font-size: 18px; }
.entry-content figure { margin-left: 0; margin-right: 0; }
.entry-content figcaption,
.entry-content .wp-element-caption {
	margin-top: 0.5rem;
	font-size: 14px;
	text-align: center;
}
.entry-content blockquote {
	margin-left: 0;
	padding: 4px 0 4px 18px;
	border-left: 4px solid var(--ink);
	font-weight: 500;
}
.entry-content hr { border: 0; border-top: 6px dotted var(--ink); margin: 3rem 0; }
.entry-content code { font: 0.85em var(--mono); }
.entry-content pre {
	overflow-x: auto;
	padding: 1rem 1.25rem;
	border: 3px solid var(--ink);
	background: var(--paper);
	font: 14px/1.6 var(--mono);
}
.entry-content pre code { font-size: inherit; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: 16px; }
.entry-content th,
.entry-content td { padding: 0.4rem 0.6rem; border-bottom: 2px solid var(--ink); text-align: left; }
.entry-content th { font-weight: 700; }

/* "Table of contents" block from the Spectra plugin (live site). Fallbacks in case its
   own styles are missing; otherwise its arrow icon fills the screen. */
.entry-content .uagb-toc__wrap {
	padding: 14px 18px;
	border: 2px solid var(--ink);
	background: var(--bg);
}
.entry-content .uagb-toc__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 700 18px/1.2 var(--pixel);
}
.entry-content .uagb-toc__title svg { width: 14px; height: 14px; flex: none; }
.entry-content .uagb-toc__list-wrap ol,
.entry-content .uagb-toc__list-wrap ul { margin: 8px 0 0; padding-left: 1.4em; }
.entry-content .uagb-toc__list-wrap li:not(:has(a)) { display: none; } /* empty items in its markup */

/* Wide and full-width blocks (mostly galleries). On phones they run to the very edges of
   the screen, through the card's border. From 820px they break out of the card, centred
   on it: wide to ~1100px, full to the page width. Either way the card is centred, so 50%
   of its text column is the middle of the screen. */
.entry-content > .alignwide,
.entry-content > .alignfull {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
@media (min-width: 820px) {
	.entry-content > .alignwide { --bleed: min(1100px, 92vw); }
	.entry-content > .alignfull { --bleed: min(var(--frame), 92vw); }
	.entry-content > :is(.alignwide, .alignfull) {
		width: var(--bleed);
		margin-left: calc(50% - var(--bleed) / 2);
		margin-right: calc(50% - var(--bleed) / 2);
		margin-top: 2rem;
		margin-bottom: 2.5rem;
	}
}
/* Images in breakout blocks read as prints laid on the page: a white background, so
   transparent diagrams and renders never sit half on the card and half on the page with
   the card's border showing through, and an edge. A single wide image gets the full
   border and shadow; images in wide galleries, groups and columns a lighter border. */
.entry-content > :is(.alignwide, .alignfull) img {
	background: var(--paper);
	border: 2px solid var(--ink);
}
.entry-content > .wp-block-image:is(.alignwide, .alignfull) img {
	display: block;
	width: 100%;
	border-width: 3px;
	box-shadow: 6px 6px 0 var(--ink);
}
@media (max-width: 819px) {
	/* Edge to edge on phones: no side borders or shadow at the screen's edges. */
	.entry-content > .wp-block-image:is(.alignwide, .alignfull) img {
		border-left: 0;
		border-right: 0;
		box-shadow: none;
	}
}

.post-nav {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-weight: 700;
}
.post-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 6px 14px;
	border: 3px solid var(--ink);
	box-shadow: 4px 4px 0 var(--ink);
	background: var(--paper);
}
.post-nav .next { margin-left: auto; text-align: right; }

/* ------------------------------------------------------------------
   Below 820px: smaller header, no timeline, featured lists first, dropdown filter
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   Search: above the home grid, in the header on other pages, and on the results page.
   ------------------------------------------------------------------ */

.search-form {
	display: flex;
	min-width: 0;
	box-shadow: 4px 4px 0 var(--ink);
}
.search-form input {
	flex: 1;
	min-width: 0;
	min-height: 44px;
	margin: 0;
	padding: 6px 12px;
	border: 3px solid var(--ink);
	border-right: 0;
	border-radius: 0;
	background: var(--paper);
	color: var(--ink);
	font: 500 16px var(--sans); /* 16px stops phones zooming in on focus */
	-webkit-appearance: none;
	appearance: none;
}
.search-form input::placeholder { color: var(--muted-2); }
.search-form input:focus-visible { outline-offset: -6px; }
.search-form button {
	flex: none;
	min-height: 44px;
	margin: 0;
	padding: 4px 16px;
	border: 3px solid var(--ink);
	border-radius: 0;
	background: var(--ink);
	color: var(--paper);
	font: 500 17px var(--pixel);
	cursor: pointer;
}
.search-form--header { width: 240px; }
.search-form--page { max-width: 560px; }
.search .search-form--header { display: none; } /* the results page has its own, under the heading */
@media (max-width: 819px) {
	/* Header: its own full-width row under the title. */
	.site-header__menus { flex: 1 1 100%; }
	.search-form--header { flex: 1 1 200px; width: auto; }
}

/* ------------------------------------------------------------------
   Featured lists on other pages: in a "Featured" dropdown in the header, and from
   1200px beside posts, pages, archives and search instead.
   ------------------------------------------------------------------ */

.site-header { position: relative; }
.site-header__menus { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.featured-menu summary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 4px 14px;
	border: 3px solid var(--ink);
	box-shadow: 4px 4px 0 var(--ink);
	background: var(--paper);
	font: 500 18px var(--pixel);
	cursor: pointer;
	list-style: none;
}
.featured-menu summary::-webkit-details-marker { display: none; }
.featured-menu[open] summary { background: var(--ink); color: var(--paper); }
.featured.featured--menu {
	position: absolute;
	z-index: 30;
	top: calc(100% - 6px);
	right: 0;
	width: min(360px, 100%);
	padding: 20px 22px;
	border: 3px solid var(--ink);
	box-shadow: 6px 6px 0 var(--ink);
	background: var(--paper);
}

.featured.featured--side { display: none; }

/* Archives and search, from 1200px: the grid and the lists side by side. */
@media (min-width: 1200px) {
	body.has-featured-side:not(.single):not(.page) .featured-menu { display: none; }
	.archive-layout > .featured.featured--side { display: flex; flex: none; align-self: start; min-width: 0; }
	.has-featured-side .archive-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--side);
		gap: var(--side-gap);
		align-items: start;
	}
}

/* Posts and pages: the card stays centred and the lists sit in the margin to its right,
   when there's room (assets/post.js measures it and adds .dd-side-on). Each section is
   placed separately, and any that would run into a wide image moves below it. */
.entry-layout { position: relative; }
.dd-side-on .featured-menu { display: none; }
.dd-side-on .entry-layout > .featured.featured--side {
	display: block;
	position: absolute;
	top: 0;
	padding: 0;
	border: 0;
}
.featured-side-group {
	position: absolute;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

/* Below 1100px the timeline swipes: desktop's proportional columns no longer have room
   for full-size photos. */
@media (max-width: 1099px) {
	/* Timeline: a swipeable row. Two milestones a screen on phones (about four on a
	   tablet), with the next one peeking in; each swipe snaps to the next pair. Evenly
	   spaced (proportional spacing is a desktop thing); the line runs on through the
	   markers. */
	.timeline {
		margin: 0 -4vw;
		padding: 0 4vw;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 4vw;
		scrollbar-width: none;
	}
	.timeline::-webkit-scrollbar { display: none; }
	.tl {
		grid-template-columns: none !important; /* overrides the proportional columns set inline */
		grid-auto-flow: column;
		grid-auto-columns: max(150px, min(46%, 230px));
		padding: 4px 0 8px 2px;
	}
	.tl > li:nth-child(odd) { scroll-snap-align: start; }
	.tl-ev,
	.tl-future { gap: 10px; padding-right: 16px; } /* the end column sized like the others, so its dotted line lines up */
	.tl-row { margin-right: -16px; }
	/* Columns are all the same width here, so every photo is identical: full width, 3:2. */
	.tl-photo, .tl-spacer { height: auto; }
	.tl-spacer { aspect-ratio: 3 / 2; }
	.tl-photo img { width: 100%; box-shadow: 4px 4px 0 var(--ink); }
	.tl-year { font-size: 22px; }
	.tl-text { font-size: 15px; }
	.tl-dots::before { right: 0; } /* ends with the row instead of running off the page */
}

@media (max-width: 819px) {
	.home-title { font-size: clamp(44px, 15vw, 90px); }
	.home-contact { max-width: 60%; gap: 8px; font-size: 15px; }
	.home-contact a { min-height: 40px; padding: 4px 10px; box-shadow: 3px 3px 0 var(--ink); }
	.home-photo { height: clamp(110px, 34vw, 170px); max-width: 42%; }
	.bio { font-size: 22px; }

	/* Spacing: tighter than desktop's 56px between sections. */
	:root { --gap: 36px; }

	.intro { margin: 0; flex-direction: column; align-items: stretch; gap: 28px; }
	.intro-text { flex: none; }
	.featured { flex: none; align-self: stretch; min-width: 0; margin-left: 0; padding: 0 calc(var(--intro-pad) + 3px); border-left: 0; gap: 20px; } /* lined up with the card's text: its padding plus its border */
	/* Under the intro card: one column, or three across from 700px (see below). */
	.intro .featured {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 26px 28px;
		align-items: start;
	}

	.sidebar { display: none; }
	.dropdown { display: block; }
	.browse-main { flex-basis: 100%; }

	.post-grid-wrap { padding: 4px 4px 8px; }
	.tile { box-shadow: 4px 4px 0 var(--ink); }
	.tile__label { max-width: calc(100% - 8px); padding: 4px 8px; font-size: 13px; }
	.tile__label small { font-size: 11px; }
	.tile__text { -webkit-line-clamp: 2; line-clamp: 2; }
	.tile--text .tile__label { padding: 8px 10px; font-size: 15px; }
}

/* Wide enough for three lists across: straight from one column to three, never two. */
@media (min-width: 700px) and (max-width: 819px) {
	.intro .featured { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
	.tile__label { padding: 3px 6px; font-size: 12px; border-width: 2px; }
	.tile__series { left: -2px; }
	.tile__label small { display: none; }
	.entry-content { font-size: 17px; }
}

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