:root {
	--primary: #C3512F;
	--primary-hover: rgba(220, 81, 47, 1);
	--primary-active: #883d1f;
	--background: #FAF2E6;
	--headings: #292524;
	--body: #3d3835;
	--secondary: #ABA39B;
	--input-bg: #FFFFFF;
	--input-border: #E6E6E6;
	--input-radius: .5rem;
	--border: #E6E6E6;
	--divider: #E6E6E6;
	--photo-edge: rgba(41, 37, 36, .10);
	/* Captions are content, not metadata: darker than --secondary so they
	   clear AA at caption size. */
	--photo-caption: #6F6760;
	--photo-gap: 12px;
	--photo-radius: 8px;
	/* Size of one photo cell — the single knob for how big photos are.
	   Three across the 550px column leaves air either side, which is what
	   lets the block centre deliberately on a post page. */
	--photo-cell: 145px;
	/* Timings for the photo and viewer system, in one place.
	   --t-morph must match MORPH_MS in lightbox.js. */
	--t-chrome: 260ms;
	--t-filter: 350ms;
	--t-move: 420ms;
	--t-morph: 480ms;
}

/* Global
-----------------------------------------*/
body { 
	background-color: var(--background);
	color: var(--body);
 }
@media screen and (max-width: 767px) {
  body { 
  	font-size: .92em;
   }	
}
/* Headings */
h1, h2, h3, h4, h5, h6 {
	color: var(--headings);
    text-transform: uppercase;
    letter-spacing: .2em;
    margin-bottom: .5em;
	font-weight: 600;
}
h1 {
    font-size: .85em;
}
article.post > header {
    margin-bottom: 3em;
}
article.post > header:last-child {
    margin-bottom: 0;
}
article.post:has(> header:only-child) {
    margin-bottom: 3em;
}
h2 {
    font-size: .75em;
}
h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
	color: var(--primary);
}
/* Links */
#footer a,
#post-nav a,
p a {
	color: var(--body);
    font-weight: 500;
    box-shadow: inset 0 -2px 0 rgba(255, 81, 47, .25);
    transition: all .35s;
    transition-timing-function: cubic-bezier(.7, 0, .3, 1);
	padding-inline: 2px;
}
#footer a:hover,
#post-nav a:hover,
p a:hover {
	color: white;
    box-shadow: inset 0 -25px 0 var(--primary);
}
/* Meta*/
.dates {
	color: var(--secondary);
	font-weight: medium;
	/* the base theme uppercases these; "Aug 27, 2026" reads better as written */
	text-transform: none;
}
/* Inputs */
textarea,
input:not([type="submit"]) {
	min-height: 48px;
	border-radius: var(--input-radius);
	background-color: var(--input-bg);
	color: var(--body);
	border: 2px solid var(--input-border);
	padding: .5em 1em;
	font-size: 1em !important;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	box-sizing: border-box;
	font-family: inherit;
	margin-top: 1em;
	width: 100%;
	transition: all .2s ease;
	outline: none;
}
textarea:focus,
input:focus {
	border-color: var(--primary);
}
/* Override inline styles from search plugin */
input.field,
#input_search {
	background-color: var(--input-bg) !important;
	color: var(--body) !important;
	border: 2px solid var(--input-border) !important;
	border-radius: var(--input-radius) !important;
	font-size: 1em !important;
}
input.field:focus,
#input_search:focus {
	border-color: var(--primary) !important;
}
/* Buttons */
input[type="submit"],
button {
	cursor: pointer;
	background-color: var(--primary) !important;
	color: white !important;
	font-weight: 500;
	font-size: 1em !important;
	font-family: inherit;
	border: none !important;
	border-radius: 999px !important;
	padding: .75em 1.5em !important;
	min-height: auto !important;
	width: 100% !important;
	margin-top: 1em;
	transition: all .2s ease;
}
input[type="submit"]:hover,
button:hover {
	background-color: var(--primary-hover) !important;
}
input[type="submit"]:active,
button:active {
	background-color: var(--primary-active) !important;
}
input[type="submit"]:disabled,
button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}


/* Homepage items order
-----------------------------------------*/
body {
	flex-direction: column;
	display: flex;
}
#wrapper {
	width: 100%;
}
.site-header { order: 1; }
.site-name { order: 2; }
#wrapper { order: 3; }
#social-section { order: 4; margin-top: 4em; }
#custom-footer { order: 5; }
#footer { order: 6; }


/* Site header
-----------------------------------------*/
.site-header {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	box-sizing: border-box;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	padding: 2.5em 25px 0;
}
.site-header--home {
	justify-content: center;
	padding-top: 4em;
}
.site-header__avatar img {
	display: block;
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 999px;
	border: 2px solid var(--background);
	box-shadow: 0 0 0 2px var(--primary);
	filter: saturate(125%);
	transition: transform .25s ease, box-shadow .25s ease;
}
.site-header--home .site-header__avatar img {
	width: 104px;
	height: 104px;
	border-width: 3px;
	box-shadow: 0 0 0 3px var(--primary);
}
.site-header__avatar:hover img {
	transform: scale(1.03);
	box-shadow: 0 0 0 2px var(--primary-hover);
}
.site-header--home .site-header__avatar:hover img {
	box-shadow: 0 0 0 3px var(--primary-hover);
}
.site-header__back {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	color: var(--primary);
	line-height: 1;
	box-shadow: none !important;
	padding: 0;
	font-size: .8em;
	text-transform: uppercase;
	letter-spacing: .2em;
	font-weight: 600;
	transition: color .2s ease, transform .2s ease;
}
.site-header__back-arrow {
	font-size: 1.3em;
	line-height: 1;
}
.site-header__back:hover {
	color: var(--primary-hover);
	transform: translateX(-2px);
}
.site-header__toggle {
	position: fixed;
	top: 1.5rem;
	right: 1.5rem;
	z-index: 100;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: auto !important;
	min-height: auto !important;
	font-size: 1.6em !important;
	line-height: 1 !important;
	cursor: pointer;
	transition: opacity .2s ease-in-out, transform .2s ease;
	vertical-align: middle;
}
.site-header__toggle:hover {
	background: none !important;
	transform: scale(1.08);
}
.site-name {
	text-align: center;
	margin-top: 1.2em;
	margin-bottom: 0;
	font-size: 1em;
	text-transform: uppercase;
	letter-spacing: .22em;
	font-weight: 600;
	color: var(--headings);
}

#wrapper.bio h2 {
	text-align: center;
	margin-top: 6em;
	margin-bottom: 2em;
}

.photos-grid-container {
	display: grid;
	gap: 15px;
	grid-template-columns: 33% 33% 33%;
	align-items: start;
}

/* Photos grid — lightbox trigger
-----------------------------------------*/
button.photos-grid-item {
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	min-height: auto !important;
	cursor: pointer;
	overflow: hidden;
	transition: transform var(--t-filter) ease;
}
button.photos-grid-item:hover {
	transform: scale(1.015);
	background: none !important;
}
button.photos-grid-item img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
	transition: filter var(--t-filter) ease;
}
button.photos-grid-item:hover img {
	filter: saturate(115%);
}

/* Post photos
   Every photo is one cell of a three-column grid, at every screen size.
   A lone photo occupies one cell; a set is stacked into one cell.
   Photos carry no visible text — captions live in the lightbox.
-----------------------------------------*/
/* The photos of a post lead it, above the title, laid out three across.
   A lone photo is one cell; a stack is one cell with a pile in it. */
.post-photos {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--photo-gap);
	margin-bottom: 3em;
}
.post-photos > * {
	/* flex rather than grid so a part-filled row can centre on the post page
	   instead of hanging off the left edge */
	flex: 0 0 var(--photo-cell);
	/* without this, min-width:auto on a replaced element floors the basis at
	   the image's own declared width and every photo fills the column */
	min-width: 0;
}
/* On a post page the title and date are centred, so the photos are too.
   The feed keeps its left edge, where the titles are left-aligned. */
.post .post-photos {
	justify-content: center;
}

/* Side rail — a short post (a poem) does not need the whole column, so one
   or two photos sit beside the text rather than above the title. Inside the
   container, so the photos stay within the post's own boundary: in the feed
   the divider under each post is what marks where a post ends.
   Poems have short lines — the widest in the archive is 284px — so the text
   column narrowing to ~373px costs them nothing.
-----------------------------------------*/
@media (min-width: 641px) {
	.post--rail {
		display: grid;
		grid-template-columns: 1fr var(--photo-cell);
		column-gap: 2rem;
		align-items: start;
	}
	.post--rail > .post-photos {
		grid-column: 2;
		align-self: center;
		margin-bottom: 0;
		justify-content: flex-start;
	}
	/* In the rail the photos run down a single column, not three across */
	.post--rail .post-photos > * {
		flex: 0 0 100%;
	}

	/* Post page: the title spans the full width so it stays centred with
	   every other post's, and the poem sits beside the photos below it */
	.post.post--rail > header {
		grid-column: 1 / -1;
		grid-row: 1;
	}
	.post.post--rail > .post-body {
		grid-column: 1;
		grid-row: 2;
	}
	.post.post--rail > .post-photos {
		grid-row: 2;
	}

	/* Feed: title, body and timestamp share the text column, photos beside */
	#post-list .post--rail > *:not(.post-photos) {
		grid-column: 1;
	}
	#post-list .post--rail > .post-photos {
		grid-row: 1 / -1;
	}
}

.post-photos > img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border-radius: 0;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--photo-radius);
	/* Hairline so a photo with light edges does not bleed into the page */
	outline: 1px solid var(--photo-edge);
	outline-offset: -1px;
	transition: filter var(--t-filter) ease, transform var(--t-move) cubic-bezier(.2, .8, .2, 1);
}

/* A tile outside a stack (an inline image sharing a paragraph with prose)
   falls back to the lone-photo treatment */
.post-photos .photo-tile {
	display: block;
	box-sizing: border-box;
	max-width: 100%;
}
.post-photos .photo-tile > img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0;
	padding: 0;
	border-radius: var(--photo-radius);
	outline: 1px solid var(--photo-edge);
	outline-offset: -1px;
	transition: filter var(--t-filter) ease;
}
.post-photos .photo-tile:has(> img[data-lightbox-type="video"]) {
	position: relative;
}
.post-photos .photo-tile:has(> img[data-lightbox-type="video"])::before,
.post-photos .photo-tile:has(> img[data-lightbox-type="video"])::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 6;
	pointer-events: none;
}
.post-photos .photo-tile:has(> img[data-lightbox-type="video"])::before {
	width: 34px;
	height: 34px;
	background: rgba(20, 18, 16, .66);
	border: 1px solid rgba(255, 255, 255, .72);
	border-radius: 999px;
	box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .85);
	transform: translate(-50%, -50%);
}
.post-photos .photo-tile:has(> img[data-lightbox-type="video"])::after {
	width: 0;
	height: 0;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 11px solid rgba(255, 255, 255, .94);
	transform: translate(-38%, -50%);
}
.post-photos p:has(> .photo-tile + .photo-tile) > .photo-tile:has(> img[data-lightbox-type="video"])::before,
.post-photos p:has(> .photo-tile + .photo-tile) > .photo-tile:has(> img[data-lightbox-type="video"])::after {
	content: none;
}

/* Photo sets — two or more photos written on consecutive lines (no blank
   line between them) become a stack: one cell of the grid, photos piled
   one in front of the other. Clicking opens the lightbox to page through.
   Rotation here is structural — it is what makes the pile read as a pile.
-----------------------------------------*/
.post-photos p:has(> .photo-tile + .photo-tile) {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin: 0;
	cursor: pointer;
}
.post-photos p:has(> .photo-tile + .photo-tile) > .photo-tile {
	position: absolute;
	inset: 0;
	border-radius: var(--photo-radius);
	box-shadow: 0 1px 2px rgba(41, 37, 36, .16), 0 8px 18px -8px rgba(41, 37, 36, .34);
	transition: transform var(--t-move) cubic-bezier(.2, .8, .2, 1);
}
.post-photos p:has(> .photo-tile + .photo-tile) > .photo-tile > img {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
}
/* First photo faces up; the ones behind fan out just enough to be seen */
.post-photos p:has(> .photo-tile + .photo-tile) > .photo-tile:nth-child(1) { z-index: 5; transform: rotate(0deg); }
.post-photos p:has(> .photo-tile + .photo-tile) > .photo-tile:nth-child(2) { z-index: 4; transform: rotate(-4.5deg); }
.post-photos p:has(> .photo-tile + .photo-tile) > .photo-tile:nth-child(3) { z-index: 3; transform: rotate(3.5deg); }
.post-photos p:has(> .photo-tile + .photo-tile) > .photo-tile:nth-child(4) { z-index: 2; transform: rotate(-1.5deg); }
/* Anything deeper is invisible under the pile: keep it out of the layout so
   it is not downloaded, and let the lightbox fetch it on demand */
.post-photos p:has(> .photo-tile + .photo-tile) > .photo-tile:nth-child(n+5) { display: none; }

.post-photos p:has(> .photo-tile + .photo-tile):hover > .photo-tile:nth-child(1) { transform: rotate(1.8deg); }
.post-photos p:has(> .photo-tile + .photo-tile):hover > .photo-tile:nth-child(2) { transform: rotate(-7.5deg); }
.post-photos p:has(> .photo-tile + .photo-tile):hover > .photo-tile:nth-child(3) { transform: rotate(6deg); }
.post-photos p:has(> .photo-tile + .photo-tile):hover > .photo-tile:nth-child(4) { transform: rotate(-3deg); }

/* Ring the pile, not the photo inside it, and only for keyboard focus —
   :focus-within would leave a ring sitting there after every mouse click */
.post-photos p:has(> .photo-tile + .photo-tile):has(:focus-visible) {
	outline: 2px solid var(--primary);
	outline-offset: 6px;
}
.post-photos p:has(> .photo-tile + .photo-tile) .photo-zoom:focus-visible {
	outline: none;
}

/* Photo is a lightbox trigger once lightbox.js wires it up */
.post-photos .photo-zoom {
	cursor: pointer;
}
.post-photos .photo-zoom:hover {
	filter: saturate(115%);
}
/* A photo on its own tips the same way the front of a pile does. Direct
   children only — inside a stack the tile does the rotating, not the image. */
.post-photos > img.photo-zoom:hover {
	transform: rotate(1.8deg);
}
.post-photos .photo-zoom:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 3px;
}

/* Lightbox
-----------------------------------------*/
/* While the viewer is open, a sideways swipe belongs to it, not to the
   browser's back/forward gesture */
html.has-lightbox,
html.has-lightbox body {
	overscroll-behavior-x: none;
}

.lightbox {
	--lightbox-dim: 1;
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--t-move) ease, visibility 0s linear var(--t-move);
	overflow: hidden;
	overscroll-behavior: contain;
}
.lightbox.open {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--t-move) ease, visibility 0s linear;
}
.lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 18, 16, .94);
	opacity: var(--lightbox-dim);
	cursor: zoom-out;
}

/* Three slides wide, sitting side by side, so a swipe drags the real
   neighbouring photo in rather than cross-fading to it */
.lightbox__track {
	/* Absolute, not a flex child: as a flex item it would shrink from three
	   viewports wide back to one and render every slide at a third size. */
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	width: 300%;
	height: 100%;
	align-items: center;
	touch-action: none;
	cursor: grab;
}
.lightbox__track:active {
	cursor: grabbing;
}
.lightbox__slide {
	flex: 0 0 calc(100% / 3);
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 7vh 4vw 11vh;
	box-sizing: border-box;
}
.lightbox__slide[hidden] {
	display: flex;
	visibility: hidden;
}
.lightbox__slide > img,
.lightbox__slide > video {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--photo-radius);
	box-shadow: 0 30px 80px -10px rgba(0, 0, 0, .5);
	user-select: none;
	-webkit-user-drag: none;
}
.lightbox__slide > video {
	background: #000;
}

.lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	border: none !important;
	color: rgba(255, 255, 255, .7) !important;
	font-size: 1.6em !important;
	width: 44px !important;
	height: 44px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0 !important;
	margin: 0 !important;
	min-height: auto !important;
	background: rgba(0, 0, 0, .35) !important;
	border-radius: 999px !important;
	transition: color var(--t-chrome) ease, background var(--t-chrome) ease, opacity var(--t-chrome) ease;
	z-index: 2;
}
.lightbox__nav:hover {
	color: #fff !important;
	background: rgba(0, 0, 0, .55) !important;
}
.lightbox__nav:disabled {
	opacity: 0;
	pointer-events: none;
}
.lightbox__nav--prev { left: 2vw; }
.lightbox__nav--next { right: 2vw; }

.lightbox__close {
	position: absolute;
	top: 2vh;
	right: 2vw;
	z-index: 3;
	width: 44px !important;
	height: 44px !important;
	min-height: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	font-size: 1.15em !important;
	color: rgba(255, 255, 255, .75) !important;
	background: rgba(0, 0, 0, .35) !important;
	border: none !important;
	border-radius: 999px !important;
	cursor: pointer;
	transition: color var(--t-chrome) ease, background var(--t-chrome) ease;
}
.lightbox__close:hover {
	color: #fff !important;
	background: rgba(0, 0, 0, .55) !important;
}

.lightbox__audio,
.lightbox__play {
	position: absolute;
	z-index: 3;
	min-height: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, .86) !important;
	background: rgba(0, 0, 0, .42) !important;
	border: none !important;
	border-radius: 999px !important;
	cursor: pointer;
	transition: color var(--t-chrome) ease, background var(--t-chrome) ease, opacity var(--t-chrome) ease;
}
.lightbox__audio {
	right: max(16px, calc(2vw + env(safe-area-inset-right)));
	bottom: max(18px, calc(2.4vh + env(safe-area-inset-bottom)));
	width: 44px !important;
	height: 44px !important;
}
.lightbox__play {
	width: 64px !important;
	height: 64px !important;
	background: rgba(50, 38, 36, .52) !important;
	box-shadow: 0 18px 42px -18px rgba(0, 0, 0, .75);
}
.lightbox__audio[hidden],
.lightbox__play[hidden] {
	display: none !important;
}
.lightbox__audio:hover,
.lightbox__play:hover {
	color: #fff !important;
	background: rgba(0, 0, 0, .62) !important;
}
.lightbox__audio:focus-visible,
.lightbox__play:focus-visible {
	outline: 2px solid rgba(255, 255, 255, .78);
	outline-offset: 3px;
}
.lightbox__audio .ph-fill {
	font-size: 22px;
	line-height: 1;
}
.lightbox__play .ph-fill {
	font-size: 34px;
	line-height: 1;
	transform: translateX(2px);
}

/* The photo travelling between the pile and the viewer. object-fit stays
   cover the whole way, so the square crop opens out into the full frame. */
.lightbox__morph {
	position: fixed;
	z-index: 1001;
	margin: 0;
	object-fit: cover;
	border-radius: var(--photo-radius);
	pointer-events: none;
	/* the shadow is animated with the clone so it does not pop on landing */
}
/* Used for a single frame while the viewer is dismissed after a morph, so
   nothing transitions back into view on its way out */
.lightbox--instant,
.lightbox--instant * {
	transition: none !important;
}
/* While it travels, the viewer's own photo and chrome stay out of the way */
.lightbox.morphing .lightbox__track,
.lightbox.morphing .lightbox__nav,
.lightbox.morphing .lightbox__bar,
.lightbox.morphing .lightbox__close,
.lightbox.morphing .lightbox__audio,
.lightbox.morphing .lightbox__play {
	opacity: 0;
}
.lightbox__nav,
.lightbox__bar,
.lightbox__close,
.lightbox__audio,
.lightbox__play {
	transition: opacity var(--t-chrome) ease;
}
.lightbox.morphing .lightbox__track {
	transition: opacity var(--t-chrome) ease;
}
/* Closing: the backdrop leaves with the photo instead of after it */
.lightbox.closing .lightbox__backdrop {
	opacity: 0;
	transition: opacity var(--t-morph) ease;
}

.lightbox__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2.4vh;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5em;
	padding: 0 6vw;
	pointer-events: none;
}
.lightbox__caption {
	max-width: min(90vw, 60ch);
	color: rgba(255, 255, 255, .88);
	font-size: .8em;
	line-height: 1.5;
	text-align: center;
	text-wrap: balance;
}
.lightbox__caption:empty {
	display: none;
}
.lightbox__counter {
	color: rgba(255, 255, 255, .55);
	font-size: .75em;
	letter-spacing: .22em;
	text-transform: uppercase;
	font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
	.lightbox__track {
		transition: none !important;
	}
}

@media (max-width: 640px) {
	/* Photos keep three across on a phone: they are a way in to the lightbox,
	   not the viewing surface. A third of the narrower column, so the cell
	   is smaller here than on a desktop. */
	:root {
		--photo-cell: 105px;
	}
	.post-photos {
		margin-bottom: 2.25em;
	}
	.photos-grid-container {
		grid-template-columns: 50% 50%;
		gap: 10px;
	}
	/* On a phone the gesture is the control; the arrows only get in the way */
	.lightbox__nav {
		display: none !important;
	}
	.lightbox__slide {
		padding: 8vh 3vw 13vh;
	}
	.lightbox__close {
		top: 1.6vh;
		right: 4vw;
	}
	.lightbox__audio {
		right: max(16px, calc(4vw + env(safe-area-inset-right)));
		bottom: max(18px, calc(2vh + env(safe-area-inset-bottom)));
	}
	.lightbox__play {
		width: 58px !important;
		height: 58px !important;
	}
	.lightbox__play .ph-fill {
		font-size: 31px;
	}
}


/* Margin tops for content main wrapper 
-----------------------------------------*/
#wrapper {
	margin-top: 3em;
	padding-bottom: 6em;
}
.post {
    margin: 0;
}


/* Footer social media
-----------------------------------------*/
#custom-footer {
	padding-top: 4em;
}
.social-media {
    max-width: 600px;
    margin: auto;
    justify-content: center;
    gap: 1.5em;
    display: flex;
}
.social-media a {
	color: var(--primary);
    font-size: 24px;
}
@media (min-width: 769px) {
    .social-media a {
        font-size: 28px;
    }
}
.social-media a:hover {
	color: var(--primary-hover) !important;
}


/* Borders & Separators
-----------------------------------------*/
span.divider {
	background-color: var(--divider);
}
hr {
	border-color: var(--divider);
}
blockquote {
	border-left-color: var(--divider);
}
#header {
	border-bottom-color: var(--divider);
}
tr > td {
	border-top-color: var(--divider);
}
.post + .post,
article + article {
	border-top: 1px solid var(--divider);
}


/* Theme switch
   The new theme is wiped in as a circle growing from the toggle (see
   theme-toggle.js), so nothing cross-fades and no element lags behind the
   rest. Both snapshots are pinned still and simply stacked: old below, new
   above, with the clip-path doing the work. Browsers without view
   transitions ignore all of this and swap instantly.
-----------------------------------------*/
::view-transition-old(root),
::view-transition-new(root) {
	animation: none;
	mix-blend-mode: normal;
}
::view-transition-old(root) {
	z-index: 1;
}
::view-transition-new(root) {
	z-index: 2147483646;
}
/* The circle's soft edge. The gradient is fixed here and theme-toggle.js grows
   the mask's size and position instead — animating the gradient itself snaps
   to the end value rather than interpolating. Starts at zero size so nothing
   of the new theme shows until the wipe begins. The soft band scales with the
   circle, so it reads as light spreading rather than a shape being scaled. */
:root.theme-switching::view-transition-new(root) {
	-webkit-mask-image: radial-gradient(circle closest-side, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 100%);
	mask-image: radial-gradient(circle closest-side, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 100%);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 0 0;
	mask-size: 0 0;
}
/* Colour transitions are suppressed for the length of the wipe, otherwise the
   live page animates underneath the snapshot and the circle edge goes muddy. */
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
	transition: none !important;
}

/* Dark Mode
-----------------------------------------*/
[data-theme="dark"] {
	--primary: #C9634A;
	--primary-hover: #E07A5F;
	--primary-active: #C45A3F;
	--background: #1A1918;
	--headings: #F5F5F4;
	--body: #D6D3D1;
	--secondary: #78716C;
	--input-bg: #252322;
	--input-border: #4A4543;
	--border: #4A4543;
	--divider: #2E2C2A;
	--photo-edge: rgba(245, 245, 244, .14);
	--photo-caption: #A8A29B;
}

[data-theme="dark"] #footer a:hover,
[data-theme="dark"] #post-nav a:hover,
[data-theme="dark"] p a:hover {
	color: #FFFFFF;
}

[data-theme="dark"] .site-header__icon:hover {
	color: var(--primary-hover);
}

[data-theme="dark"] .social-media a:hover {
	color: #FFFFFF !important;
}