/*
Theme Name: Holopoiesis Foil
Theme URI: https://holo-poiesis.com
Author: Kazi Adi Shakti
Description: A minimalist, iridescent theme for Holopoiesis. Posts are laid out as a grid of square, holographic-foil tiles that catch the light as the cursor moves across them.
Version: 1.7.0
Requires at least: 6.2
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: holopoiesis
Tags: blog, grid-layout, minimal, one-column, custom-menu, threaded-comments
*/

/* ------------------------------------------------------------------
   Tokens
   ------------------------------------------------------------------ */
:root {
	--pearl: #e6e6ea;
	--glass: rgba(255, 255, 255, 0.5);
	--glass-strong: rgba(255, 255, 255, 0.72);
	--ink: #000;
	--ink-2: rgba(0, 0, 0, 0.64);
	--ink-3: rgba(0, 0, 0, 0.45);
	--hair: rgba(0, 0, 0, 0.14);

	/* thin-film spectrum: the colours a soap bubble shows */
	--f-rose: #f2b6d9;
	--f-gold: #f3dcab;
	--f-mint: #b6e8d7;
	--f-sky: #b4d5f0;
	--f-violet: #c9bbf0;
	--film: var(--f-rose), var(--f-gold), var(--f-mint), var(--f-sky), var(--f-violet), var(--f-rose);

	/* the wordmark: one pearl body, iridescence only where light catches the edges */
	--pearl-fill: linear-gradient(180deg, #ffffff 8%, #f5f3f8 30%, #e2e0ea 54%, #cdccd7 74%, #e8e7ee 90%, #f8f7fb 100%);
	--pearl-shadow: drop-shadow(0 0 0.6px rgba(60, 60, 95, 0.45)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.95)) drop-shadow(0 2px 3px rgba(40, 40, 70, 0.26)) drop-shadow(0 12px 24px rgba(40, 40, 70, 0.12));
	/* a classic, warm rainbow, softened toward pearl */
	--r-red: #ef9f9a;
	--r-orange: #f2bd8d;
	--r-yellow: #efdd9f;
	--r-green: #b3d9a9;
	--r-blue: #a1c5ec;
	--r-violet: #bcaaec;
	--rainbow: var(--r-red), var(--r-orange), var(--r-yellow), var(--r-green), var(--r-blue), var(--r-violet);
	--glimmer: transparent 0% 5.9%,
		var(--r-red) 6.50%, var(--r-orange) 7.10%, var(--r-yellow) 7.70%, var(--r-green) 8.30%, var(--r-blue) 8.90%, var(--r-violet) 9.50%,
		transparent 10.1% 21.9%,
		var(--r-red) 22.50%, var(--r-orange) 23.10%, var(--r-yellow) 23.70%, var(--r-green) 24.30%, var(--r-blue) 24.90%, var(--r-violet) 25.50%,
		transparent 26.1% 37.9%,
		var(--r-red) 38.50%, var(--r-orange) 39.10%, var(--r-yellow) 39.70%, var(--r-green) 40.30%, var(--r-blue) 40.90%, var(--r-violet) 41.50%,
		transparent 42.1% 53.9%,
		var(--r-red) 54.50%, var(--r-orange) 55.10%, var(--r-yellow) 55.70%, var(--r-green) 56.30%, var(--r-blue) 56.90%, var(--r-violet) 57.50%,
		transparent 58.1% 69.9%,
		var(--r-red) 70.50%, var(--r-orange) 71.10%, var(--r-yellow) 71.70%, var(--r-green) 72.30%, var(--r-blue) 72.90%, var(--r-violet) 73.50%,
		transparent 74.1% 85.9%,
		var(--r-red) 86.50%, var(--r-orange) 87.10%, var(--r-yellow) 87.70%, var(--r-green) 88.30%, var(--r-blue) 88.90%, var(--r-violet) 89.50%,
		transparent 90.1% 100%;

	--glass-hover: rgba(255, 255, 255, 0.8);
	/* glass: a bright top edge, a cool sheen across the upper face, a soft lift */
	--glass-edge: rgba(255, 255, 255, 0.85);
	--glass-edge-low: rgba(255, 255, 255, 0.3);
	--glass-sheen: rgba(255, 255, 255, 0.55);
	--glass-shadow: 0 1px 2px rgba(40, 40, 80, 0.06), 0 18px 40px -18px rgba(40, 40, 80, 0.28);
	--text-lift: none;
	--glow-max: 0.6;
	--glint-max: 0.95;
	--sheen-rest: 0.15;
	--sheen-blend: normal;

	--radius-tile: 22px;
	--radius-field: 12px;

	color-scheme: light;

	--font-logo: "Michroma", "Eurostile", "Helvetica Neue", Arial, sans-serif;
	--font-display: "Unbounded", "Helvetica Neue", Arial, sans-serif;
	--font-text: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

	--gutter: clamp(16px, 4vw, 48px);
	--gap: clamp(10px, 1.3vw, 18px);
	--wide: 1320px;
	--measure: 40rem;
}

/* Light is always the default; dark comes only from the switch. */
:root[data-theme="dark"] {
	color-scheme: dark;
	--pearl: #000;
	--glass: rgba(255, 255, 255, 0.035);
	--glass-strong: rgba(255, 255, 255, 0.07);
	--ink: #f3f3f5;
	--ink-2: rgba(243, 243, 245, 0.68);
	--ink-3: rgba(243, 243, 245, 0.48);
	--hair: rgba(255, 255, 255, 0.16);
	--pearl-shadow: drop-shadow(0 0 20px rgba(255, 255, 255, 0.1));
	--glass-hover: rgba(255, 255, 255, 0.085);
	--glass-edge: rgba(255, 255, 255, 0.22);
	--glass-edge-low: rgba(255, 255, 255, 0.06);
	--glass-sheen: rgba(255, 255, 255, 0.09);
	--glass-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9);
	--glow-max: 0.1;
	--glint-max: 0.4;
	--sheen-rest: 0.11;
	--sheen-blend: screen;
	--haze: 0.32;
}

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

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

body {
	margin: 0;
	min-height: 100vh;
	background: var(--pearl);
	color: var(--ink);
	text-shadow: var(--text-lift);
	font-family: var(--font-text);
	font-size: 1.0625rem;
	line-height: 1.6;
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* a faint, still haze of bubble colour behind everything */
body::before {
	content: "";
	position: fixed;
	inset: -20vmax;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(40vmax 28vmax at 18% 14%, color-mix(in srgb, var(--f-rose) 30%, transparent), transparent 70%),
		radial-gradient(36vmax 30vmax at 82% 10%, color-mix(in srgb, var(--f-sky) 32%, transparent), transparent 70%),
		radial-gradient(40vmax 34vmax at 70% 92%, color-mix(in srgb, var(--f-violet) 24%, transparent), transparent 70%),
		radial-gradient(30vmax 24vmax at 10% 80%, color-mix(in srgb, var(--f-mint) 20%, transparent), transparent 70%);
	filter: blur(30px);
	opacity: var(--haze, 0.7);
}

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

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover {
	text-decoration-color: var(--ink-3);
}

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

::selection {
	background: color-mix(in srgb, var(--f-violet) 60%, transparent);
	color: var(--ink);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 100;
	width: auto;
	height: auto;
	padding: 0.6em 1em;
	clip: auto;
	background: var(--glass-strong);
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 0.85rem;
}

.wrap {
	width: 100%;
	max-width: var(--wide);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* ------------------------------------------------------------------
   Masthead
   ------------------------------------------------------------------ */
.masthead {
	position: relative;
	padding-top: clamp(56px, 6vw, 72px);
}

/* tiny soap bubbles drifting edge to edge behind the wordmark; click one to pop it */
.bubbles {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.bubble {
	--pad: 9px;
	position: absolute;
	top: var(--y);
	left: 0;
	width: calc(var(--s) + 2 * var(--pad));
	height: calc(var(--s) + 2 * var(--pad));
	margin: calc(-1 * var(--pad));
	border-radius: 50%;
	cursor: pointer;
	pointer-events: auto;
	animation: bubble-drift var(--t) linear var(--d) infinite;
	animation-direction: var(--dir, normal);
	-webkit-tap-highlight-color: transparent;
}

.bubble::before,
.bubble::after {
	content: "";
	position: absolute;
	inset: var(--pad);
	border-radius: 50%;
	animation: bubble-bob var(--b, 7s) ease-in-out infinite alternate;
}

/* the clear body with a bright highlight */
.bubble::before {
	background:
		radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95) 0 9%, rgba(255, 255, 255, 0) 24%),
		radial-gradient(circle, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.4) 82%, rgba(255, 255, 255, 0.1) 100%);
	box-shadow: 0 1px 3px rgba(50, 50, 80, 0.12);
}

/* a thin film of colour around the rim */
.bubble::after {
	background: conic-gradient(from var(--h, 0deg), var(--rainbow), var(--r-red));
	-webkit-mask: radial-gradient(closest-side, transparent 72%, #000 86%, #000 94%, transparent 100%);
	mask: radial-gradient(closest-side, transparent 72%, #000 86%, #000 94%, transparent 100%);
	opacity: 0.8;
}

/* a new bubble grows from a point */
.bubble.is-born {
	animation:
		bubble-drift var(--t) linear var(--d) infinite,
		bubble-grow 1.4s cubic-bezier(0.2, 0.8, 0.3, 1.15) both;
	animation-direction: var(--dir, normal), normal;
}

/* popping: the film flashes outward and vanishes */
.bubble.is-popping {
	pointer-events: none;
}

.bubble.is-popping::before,
.bubble.is-popping::after {
	animation: bubble-pop 0.22s ease-out forwards;
}

.pop-burst {
	position: absolute;
	inset: var(--pad);
	pointer-events: none;
}

.pop-burst i {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 3px;
	height: 3px;
	margin: -1.5px;
	border-radius: 50%;
	background: var(--c, #fff);
	animation: droplet 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes bubble-grow {
	from {
		scale: 0;
	}
	to {
		scale: 1;
	}
}

@keyframes bubble-pop {
	0% {
		scale: 1;
		opacity: 1;
	}
	100% {
		scale: 1.6;
		opacity: 0;
	}
}

@keyframes droplet {
	from {
		transform: translate(0, 0);
		opacity: 1;
	}
	to {
		transform: translate(var(--dx), var(--dy));
		opacity: 0;
	}
}

@keyframes bubble-drift {
	from {
		transform: translateX(-40px);
	}
	to {
		transform: translateX(calc(100vw + 40px));
	}
}

@keyframes bubble-bob {
	from {
		transform: translateY(-7px);
	}
	to {
		transform: translateY(9px);
	}
}

.masthead .wrap {
	position: relative;
	z-index: 1;
	pointer-events: none;
	text-align: center;
}

.wordmark {
	margin: 0;
	font-family: var(--font-logo);
	font-weight: 400;
	font-size: clamp(1.45rem, 7.2vw, 5.6rem);
	line-height: 1.15;
	letter-spacing: 0.01em;
	overflow-wrap: anywhere;
	text-align: center;
}

.wordmark a {
	pointer-events: auto;
	position: relative;
	display: inline-block;
	isolation: isolate;
	color: var(--ink);
	text-decoration: none;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.wordmark a {
		filter: var(--pearl-shadow);
	}

	/* iridescent rim: the same letters, stroked a little wider, sitting just behind the pearl */
	.wordmark a::before {
		content: attr(data-text);
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		color: transparent;
		-webkit-text-stroke: 0.032em transparent;
		background-image: linear-gradient(105deg, var(--glimmer));
		background-size: 160% 100%;
		background-position: calc(var(--px, 0.5) * 100%) 50%;
		-webkit-background-clip: text;
		background-clip: text;
		filter: blur(0.004em) saturate(1.3);
		animation: glimmer-sweep 2.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	/* the glint that follows the cursor: a brighter rainbow rim right where the light is */
	.wordmark a::after {
		content: attr(data-text);
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		color: transparent;
		-webkit-text-stroke: 0.04em transparent;
		background-image: conic-gradient(from 20deg at var(--wx, 50%) var(--wy, 50%), var(--rainbow), var(--r-red));
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-mask-image: radial-gradient(circle at var(--wx, 50%) var(--wy, 50%), #000 0, rgba(0, 0, 0, 0.5) 0.35em, transparent 1em);
		mask-image: radial-gradient(circle at var(--wx, 50%) var(--wy, 50%), #000 0, rgba(0, 0, 0, 0.5) 0.35em, transparent 1em);
		filter: blur(0.006em);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.wordmark a:hover::after {
		opacity: 1;
	}

	/* the pearl surface also catches a soft, rainbow-edged highlight under the cursor */
	.wordmark__pearl {
		position: relative;
		z-index: 1;
		color: transparent;
		background-image:
			radial-gradient(circle at var(--wx, 50%) var(--wy, 50%),
				rgb(255 255 255 / var(--wg)) 0,
				rgb(255 244 214 / calc(var(--wg) * 0.85)) 0.22em,
				rgb(255 214 222 / calc(var(--wg) * 0.7)) 0.42em,
				rgb(214 228 255 / calc(var(--wg) * 0.6)) 0.62em,
				rgb(255 255 255 / 0) 0.95em),
			var(--pearl-fill);
		-webkit-background-clip: text;
		background-clip: text;
		transition: --wg 0.3s ease;
	}

	.wordmark a:hover .wordmark__pearl {
		--wg: 1;
	}
}

@property --wg {
	syntax: "<number>";
	inherits: false;
	initial-value: 0;
}

@keyframes glimmer-sweep {
	from {
		background-position: 0% 50%;
	}
	to {
		background-position: 50% 50%;
	}
}

/* smaller masthead inside posts and pages */
.is-inner .masthead {
	padding-top: 60px;
}

.is-inner .wordmark {
	font-size: clamp(1.25rem, 3vw, 2.2rem);
}

.masthead__bar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	margin-top: clamp(14px, 2vw, 22px);
	padding-bottom: clamp(14px, 2vw, 20px);
	border-bottom: 1px solid transparent;
	border-image: linear-gradient(90deg, var(--hair), var(--f-rose), var(--f-gold), var(--f-mint), var(--f-sky), var(--f-violet), var(--hair)) 1;
}

.tagline {
	margin: 0;
	font-style: italic;
	font-size: 1.05rem;
	color: var(--ink-2);
}

.site-nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem 1.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav ul ul {
	display: none;
}

/* light / dark switch */
.mode-switch {
	position: absolute;
	top: calc(-1 * clamp(44px, 4.6vw, 58px));
	right: var(--gutter);
	display: flex;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--hair);
	border-radius: 999px;
	background: var(--glass);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	pointer-events: auto;
}

.mode-switch button {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--ink-3);
	transition: color 0.2s ease, background-color 0.2s ease;
}

.mode-switch button:hover {
	background: transparent;
	color: var(--ink);
}

.mode-switch button[aria-pressed="true"] {
	background: var(--glass-hover);
	color: var(--ink);
	box-shadow: inset 0 1px 0 var(--glass-edge), 0 1px 3px rgba(0, 0, 0, 0.12);
}

.mode-switch svg {
	width: 16px;
	height: 16px;
}

.site-nav a {
	pointer-events: auto;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 0.82rem;
	letter-spacing: 0.01em;
	text-decoration: none;
	color: var(--ink-2);
	padding-block: 0.3em;
	background-image: linear-gradient(90deg, var(--film));
	background-size: 0% 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size 0.35s ease, color 0.2s ease;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a {
	color: var(--ink);
	background-size: 100% 1px;
}

/* ------------------------------------------------------------------
   Index headings (archives, search)
   ------------------------------------------------------------------ */
.page-intro {
	margin-top: clamp(28px, 4vw, 48px);
}

.page-intro h1 {
	margin: 0;
	font-weight: 400;
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem);
	line-height: 1.15;
}

.page-intro p {
	margin: 0.4rem 0 0;
	color: var(--ink-2);
}

/* ------------------------------------------------------------------
   The grid of foil tiles
   ------------------------------------------------------------------ */
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: var(--gap);
	margin-top: clamp(24px, 4vw, 48px);
	padding: 0;
}

@property --glow {
	syntax: "<number>";
	inherits: false;
	initial-value: 0;
}

@property --tile-fill {
	syntax: "<color>";
	inherits: false;
	initial-value: rgba(255, 255, 255, 0.5);
}

.tile {
	--seed: 0;
	position: relative;
	isolation: isolate;
	aspect-ratio: 1 / 1;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: clamp(18px, 1.8vw, 26px);
	overflow: hidden;
	border-radius: var(--radius-tile);
	--tile-fill: var(--glass);
	/* cursor light, a sheen across the upper face, a faint caustic low on the far side, then the glass */
	background:
		radial-gradient(farthest-corner circle at var(--mx, 50%) var(--my, 35%), rgb(255 255 255 / calc(var(--glow) * var(--glow-max))), rgb(255 255 255 / 0) 65%),
		linear-gradient(160deg, var(--glass-sheen) 0%, rgb(255 255 255 / 0) 42%),
		radial-gradient(120% 60% at 100% 100%, var(--glass-edge-low), rgb(255 255 255 / 0) 60%),
		var(--tile-fill);
	box-shadow:
		inset 0 1px 0 var(--glass-edge),
		inset 1px 0 0 var(--glass-edge-low),
		inset 0 -1px 0 var(--glass-edge-low),
		var(--glass-shadow);
	transition: --glow 0.45s ease, --tile-fill 0.45s ease;
	-webkit-backdrop-filter: blur(22px) saturate(1.5);
	backdrop-filter: blur(22px) saturate(1.5);
}

/* a faint soap-film wash, a different slice of the spectrum on every tile */
.tile::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	border-radius: inherit;
	background-image: repeating-linear-gradient(128deg, var(--f-rose) 0%, var(--f-gold) 6%, var(--f-mint) 12%, var(--f-sky) 18%, var(--f-violet) 24%, var(--f-rose) 30%);
	background-size: 260% 260%;
	background-position: calc(var(--seed) / 360 * 100%) 50%;
	mix-blend-mode: var(--sheen-blend);
	opacity: var(--sheen-rest);
}

/* hairline foil edge, a different slice of the spectrum on every tile */
.tile::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	padding: 1px;
	border-radius: inherit;
	background: conic-gradient(from calc(var(--seed) * 1deg + var(--edge, 0deg)), var(--film));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	opacity: 0.75;
}

/* hover: a brief glisten and bright glow, settling to a gently brighter glass */
.tile:hover,
.tile:focus-within {
	--glow: 1;
	--tile-fill: var(--glass-hover);
	animation: tile-glow 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tile__glint {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	border-radius: inherit;
	background-image: linear-gradient(115deg,
		rgb(255 255 255 / 0) 34%,
		rgb(255 228 196 / calc(var(--glint-max) * 0.45)) 43%,
		rgb(255 255 255 / var(--glint-max)) 50%,
		rgb(206 226 255 / calc(var(--glint-max) * 0.45)) 57%,
		rgb(255 255 255 / 0) 66%);
	background-repeat: no-repeat;
	background-size: 260% 100%;
	background-position: 100% 0;
	opacity: 0;
}

.tile:hover .tile__glint,
.tile:focus-within .tile__glint {
	animation: tile-glisten 0.9s cubic-bezier(0.25, 0.6, 0.3, 1);
}

.tile:hover::after,
.tile:focus-within::after {
	animation: tile-edge 1s ease-out;
}

@keyframes tile-glow {
	0% {
		--glow: 0;
	}
	18% {
		--glow: 2.4;
	}
	100% {
		--glow: 1;
	}
}

@keyframes tile-glisten {
	0% {
		opacity: 1;
		background-position: 100% 0;
	}
	70% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		background-position: 0% 0;
	}
}

@keyframes tile-edge {
	0% {
		filter: none;
	}
	20% {
		filter: brightness(1.35) saturate(1.3);
	}
	100% {
		filter: none;
	}
}

.tile:focus-within {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
}

.tile:focus-within .tile__link:focus-visible {
	outline: none;
}

.tile__date {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 0.72rem;
	letter-spacing: 0.01em;
	color: var(--ink-3);
}

.tile__title {
	margin: 0;
	font-family: var(--font-text);
	font-weight: 500;
	font-size: clamp(1.2rem, 1rem + 0.55vw, 1.5rem);
	line-height: 1.15;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.tile__link {
	text-decoration: none;
	color: var(--ink);
}

/* the whole square is the link */
.tile__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.tile__excerpt {
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--ink-2);
	-webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 92%);
	mask-image: linear-gradient(to bottom, #000 45%, transparent 92%);
}

.tile__excerpt p {
	margin: 0;
}

.tile--image .tile__thumb {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.22;
	filter: saturate(0.6);
}

/* ------------------------------------------------------------------
   Infinite scroll
   ------------------------------------------------------------------ */
.has-infinite .pagination {
	display: none;
}

.more-status {
	min-height: 1.5rem;
	margin-top: clamp(24px, 3vw, 40px);
	text-align: center;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 0.78rem;
	color: var(--ink-3);
}

.more-status a {
	color: var(--ink);
}

.tile.is-new {
	animation: tile-arrive 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	animation-delay: var(--arrive, 0ms);
}

@keyframes tile-arrive {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------------------------------------
   Pagination (shown when scripts are off)
   ------------------------------------------------------------------ */
.pagination {
	margin-top: clamp(28px, 4vw, 48px);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.4rem 1.1rem;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 0.8rem;
}

.pagination .page-numbers {
	color: var(--ink-2);
	text-decoration: none;
	padding: 0.35em 0.2em;
}

.pagination a.page-numbers:hover {
	color: var(--ink);
}

.pagination .page-numbers.current {
	color: var(--ink);
	background: linear-gradient(90deg, var(--film)) no-repeat 0 100% / 100% 1px;
}

.pagination .prev,
.pagination .next {
	color: var(--ink);
}

/* ------------------------------------------------------------------
   Single posts and pages
   ------------------------------------------------------------------ */
.entry {
	max-width: var(--measure);
	margin: clamp(36px, 6vw, 80px) auto 0;
}

.entry__date {
	display: block;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 0.78rem;
	color: var(--ink-3);
}

.entry__title {
	margin: 0.6rem 0 0;
	font-weight: 500;
	font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.2rem);
	line-height: 1.08;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.entry__rule {
	height: 1px;
	margin: clamp(22px, 3vw, 34px) 0;
	border: 0;
	background: linear-gradient(90deg, var(--film));
}

.entry__thumb {
	margin: 0 0 2rem;
}

.entry__thumb img,
.entry__content img {
	border-radius: 16px;
}

.entry__content {
	font-size: clamp(1.06rem, 1rem + 0.2vw, 1.15rem);
	line-height: 1.65;
}

.entry__content > * {
	margin-block: 0 1.15em;
}

.entry__content h2,
.entry__content h3,
.entry__content h4 {
	font-weight: 500;
	line-height: 1.2;
	margin-top: 1.8em;
	margin-bottom: 0.5em;
}

.entry__content h2 {
	font-size: 1.55em;
}

.entry__content h3 {
	font-size: 1.25em;
}

.entry__content h4 {
	font-size: 1.05em;
}

.entry__content blockquote,
.entry__content .wp-block-quote {
	margin-inline: 0;
	padding: 0.2em 0 0.2em 1.2em;
	border-left: 1px solid transparent;
	border-image: linear-gradient(180deg, var(--film)) 1;
	font-style: italic;
	color: var(--ink-2);
}

.entry__content blockquote cite {
	display: block;
	margin-top: 0.4em;
	font-style: normal;
	font-size: 0.85em;
	color: var(--ink-3);
}

.entry__content .wp-block-pullquote {
	padding: 1.5em 0;
	border-block: 1px solid var(--hair);
	text-align: center;
	font-size: 1.3em;
	font-style: italic;
}

.entry__content .wp-block-pullquote blockquote {
	border: 0;
	padding: 0;
	color: var(--ink);
}

.entry__content figure {
	margin-inline: 0;
}

.entry__content figcaption,
.entry__content .wp-element-caption {
	margin-top: 0.5em;
	font-size: 0.82em;
	color: var(--ink-3);
	text-align: center;
}

.entry__content .alignwide {
	width: min(100vw - 2 * var(--gutter), 60rem);
	max-width: none;
	margin-inline: calc((min(100vw - 2 * var(--gutter), 60rem) - 100%) / -2);
}

.entry__content .alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

.entry__content .alignleft {
	float: left;
	margin: 0.3em 1.5em 1em 0;
	max-width: 50%;
}

.entry__content .alignright {
	float: right;
	margin: 0.3em 0 1em 1.5em;
	max-width: 50%;
}

.entry__content .aligncenter {
	margin-inline: auto;
	text-align: center;
}

.entry__content hr,
.entry__content .wp-block-separator {
	height: 1px;
	margin: 2.4em auto;
	border: 0;
	background: linear-gradient(90deg, transparent, var(--f-rose), var(--f-mint), var(--f-violet), transparent);
	opacity: 0.8;
}

.entry__content code,
.entry__content kbd {
	font-size: 0.86em;
	padding: 0.08em 0.3em;
	border-radius: 6px;
	background: var(--glass-strong);
}

.entry__content pre {
	overflow-x: auto;
	padding: 1em 1.2em;
	font-size: 0.85em;
	line-height: 1.5;
	border-radius: var(--radius-field);
	background: var(--glass-strong);
}

.entry__content pre code {
	padding: 0;
	background: none;
}

.entry__content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9em;
}

.entry__content th,
.entry__content td {
	padding: 0.5em 0.6em;
	border-bottom: 1px solid var(--hair);
	text-align: left;
}

.entry__content ul,
.entry__content ol {
	padding-left: 1.3em;
}

.entry__content li + li {
	margin-top: 0.3em;
}

.entry__content::after {
	content: "";
	display: table;
	clear: both;
}

.page-links {
	font-family: var(--font-display);
	font-size: 0.8rem;
}

.entry__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	margin-top: 2.4rem;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 0.74rem;
	color: var(--ink-3);
}

.entry__terms a {
	color: var(--ink-2);
	text-decoration: none;
}

.entry__terms a:hover {
	color: var(--ink);
}

/* previous / next post */
.post-navigation {
	max-width: var(--measure);
	margin: clamp(40px, 6vw, 72px) auto 0;
}

.post-navigation .nav-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap);
}

.post-navigation .nav-next {
	grid-column: 2;
	text-align: right;
}

.post-navigation a {
	display: block;
	text-decoration: none;
}

.post-navigation .meta-nav {
	display: block;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 0.72rem;
	color: var(--ink-3);
}

.post-navigation .post-title {
	display: block;
	margin-top: 0.3rem;
	font-size: 1.15rem;
	line-height: 1.25;
}

.post-navigation a:hover .post-title {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

/* ------------------------------------------------------------------
   Comments
   ------------------------------------------------------------------ */
.comments {
	max-width: var(--measure);
	margin: clamp(40px, 6vw, 72px) auto 0;
	padding-top: 2rem;
	border-top: 1px solid var(--hair);
	font-size: 1rem;
}

.comments__title,
.comment-reply-title {
	margin: 0 0 1.2rem;
	font-weight: 400;
	font-size: 1.4rem;
}

.comment-list,
.comment-list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.comment-list .children {
	padding-left: clamp(14px, 3vw, 32px);
}

.comment-body {
	padding-block: 1.1rem;
	border-bottom: 1px solid var(--hair);
}

.comment-author {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 500;
}

.comment-author .avatar {
	border-radius: 50%;
}

.comment-author .says {
	display: none;
}

.comment-metadata,
.reply {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 0.72rem;
	color: var(--ink-3);
}

.comment-metadata a,
.reply a {
	color: inherit;
	text-decoration: none;
}

.comment-content p {
	margin: 0.5em 0;
}

.comment-form label {
	display: block;
	margin-bottom: 0.25rem;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 0.75rem;
	color: var(--ink-2);
}

.comment-form p {
	margin: 0 0 1rem;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea {
	width: 100%;
	padding: 0.65em 0.8em;
	border: 1px solid var(--hair);
	border-radius: var(--radius-field);
	background: var(--glass-strong);
	color: var(--ink);
	font: inherit;
	font-size: 1rem;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus {
	outline: 2px solid var(--ink);
	outline-offset: 0;
}

button,
input[type="submit"] {
	position: relative;
	padding: 0.75em 1.4em;
	border: 1px solid var(--ink);
	border-radius: 999px;
	background: var(--ink);
	color: var(--pearl);
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 0.8rem;
	cursor: pointer;
}

button:hover,
input[type="submit"]:hover {
	background: color-mix(in srgb, var(--ink) 78%, var(--pearl));
}

/* ------------------------------------------------------------------
   Search form, empty states, footer
   ------------------------------------------------------------------ */
.search-form {
	display: flex;
	gap: 0.5rem;
	max-width: 26rem;
}

.search-form label {
	flex: 1;
}

.empty {
	max-width: var(--measure);
	margin: clamp(36px, 6vw, 80px) auto 0;
}

.empty h1 {
	margin: 0 0 0.6rem;
	font-weight: 400;
	font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem);
	line-height: 1.1;
}

.empty p {
	color: var(--ink-2);
}

.colophon {
	margin-top: clamp(56px, 8vw, 110px);
	padding-block: 1.6rem 2.4rem;
	border-top: 1px solid var(--hair);
}

.colophon .wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 0.74rem;
	color: var(--ink-3);
}

.colophon a {
	color: var(--ink-2);
	text-decoration: none;
}

.colophon .search-form {
	flex: 0 1 22rem;
}

.colophon .search-field {
	padding: 0.5em 0.7em;
	font-size: 0.9rem;
}

.colophon .search-submit {
	padding: 0.55em 1em;
}

/* ------------------------------------------------------------------
   Small screens
   ------------------------------------------------------------------ */
@media (max-width: 600px) {
	body {
		font-size: 1.0625rem;
	}

	.masthead__bar {
		flex-direction: column;
		align-items: center;
	}

	.site-nav ul {
		gap: 0.3rem 1.2rem;
	}

	.tile {
		padding: 20px;
	}

	.post-navigation .nav-links {
		grid-template-columns: 1fr;
	}

	.post-navigation .nav-next {
		grid-column: 1;
	}
}

/* ------------------------------------------------------------------
   Phones: one column, and each tile fits its text instead of being square.
   Desktop and tablet keep their squares.
   ------------------------------------------------------------------ */
@media (max-width: 640px) {
	.grid {
		grid-template-columns: 1fr;
	}

	.tile {
		aspect-ratio: auto;
	}

	.tile__excerpt {
		flex: none;
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* ------------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.bubbles {
		display: none;
	}

	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}