/*
Theme Name: Hatzimenas
Theme URI: https://github.com/
Author: Built for Jannis Hatzimenas
Author URI: https://
Description: A quiet, reading-first block theme for a philosopher's personal site: a painting the full first screen with the name across its sky, oat paper and a single column of writing below. Ordinary WordPress underneath — posts in categories, a menu, a homepage that is a page — with a one-screen Site Setup for the name, the picture, the fonts and the colours.
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
Version: 3.4.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hatzimenas
Tags: blog, one-column, block-patterns, full-site-editing, editor-style, wide-blocks, accessibility-ready
*/

/* -------------------------------------------------------------------------
   0. Foundations

   theme.json carries the design tokens: the palette, the fonts, the sizes.
   This file carries what tokens cannot express — the painting the page rises
   over, the margin of years, the newspaper columns — and is written against
   those tokens only. It never names a typeface or a colour of its own, so a
   change in Site Setup → Fonts and colours, or in the Site Editor's Styles,
   reaches every corner of the site. (The one exception is the white of the
   words set on the painting, which belongs to the painting, not the paper.)

   House rules, applied everywhere below:
     - nothing is a card;
     - a rule is drawn only where it separates two things;
     - no tracked-out capitals, no arrows appended to link text;
     - emphasis comes from size, weight and space, never from a hue.
   ---------------------------------------------------------------------- */

:root {
	--hz-measure: var(--wp--custom--measure, 40rem);
	--hz-rule: var(--wp--preset--color--rule);
	--hz-plate-h: var(--wp--custom--plate-height, 100svh);
	--hz-on-picture: #fbfaf6;
	--hz-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* The gutter: the space at either side of the column, on any screen narrow
   enough to reach it — every line on a phone, the wide Notes columns on a
   tablet. It is the root padding (Styles → Layout → Padding), never less than
   1.25rem. theme.json asks for spacing 30 there, but WordPress's own spacing
   presets share that slug and win (defaultSpacingSizes), so it comes out at
   0.67rem, and on a phone the text ran 11px from the glass. The floor is set
   on .wp-site-blocks, below the body that carries the setting, so it can read
   the setting without referring to itself. Everything inside the site reads
   the gutter from these two variables; the editor keeps its own. */
body {
	--hz-root-pad-left: var(--wp--style--root--padding-left, 0px);
	--hz-root-pad-right: var(--wp--style--root--padding-right, 0px);
}

.wp-site-blocks {
	--wp--style--root--padding-left: max(1.25rem, var(--hz-root-pad-left));
	--wp--style--root--padding-right: max(1.25rem, var(--hz-root-pad-right));
}

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

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-variant-numeric: oldstyle-nums proportional-nums;
}

/* Keep long words and URLs from blowing out the narrow measure. */
.entry-content,
.hz-prose {
	overflow-wrap: break-word;
}

/* Visible focus everywhere — this site is mostly links. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 1px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 0.7em 1.2em;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.skip-link:focus {
	left: 0.5rem;
	top: 0.5rem;
}

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

/* -------------------------------------------------------------------------
   1. The plate — the painting the front page opens on

   The painting fills the first screen and is pinned to the viewport; the
   page below it is opaque, so scrolling slides the paper up over the picture
   the way a mount slides over a plate. Nothing animates; the effect is two
   elements and a background colour.

   The name and the line under it are set across the head of the sky and
   scroll away with the page; the credit is pinned to the foot of the picture.
   A veil darkens both ends of the canvas and leaves the middle alone.
   ---------------------------------------------------------------------- */

.hz-plate {
	height: var(--hz-plate-h);
	position: relative;
}

/* The spacer is the picture's height and nothing else. Left to the site's
   block gap it takes a margin above and below, which slides the paper out of
   line with the foot of a picture that is measured from the viewport. */
.wp-site-blocks > .hz-plate,
.wp-site-blocks > .hz-plate + * {
	margin-block-start: 0;
}

.hz-plate__media {
	position: fixed;
	inset: 0 0 auto 0;
	height: calc(var(--hz-plate-h) + var(--hz-plate-over, 0px));
	overflow: hidden;
	background: #1b1f23;
	z-index: 0;
}

/* Logged in, the document starts below the admin bar but a fixed child still
   measures from the top of the viewport, so the picture comes up short by the
   bar's height and a band of bare paper shows under it. Over-draw rather than
   offset: the admin bar is fixed on a desktop and absolute on a phone, and an
   offset can only be right for one of them. The surplus hides behind the
   sheet either way. */
body.admin-bar .hz-plate__media {
	--hz-plate-over: 3.5rem;
}

body.admin-bar .hz-plate__head {
	top: var(--wp-admin--admin-bar--height, 32px);
}

body.admin-bar .hz-plate__foot {
	bottom: calc(3.5rem - var(--wp-admin--admin-bar--height, 32px));
}

/* A full screen of the painting shows the whole canvas, so the crop can sit
   low and keep the sky above the monk. */
.hz-plate__media > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 82%;
}

/* A phone's tall crop is a sliver of the canvas; keep the monk in it. */
@media (max-width: 40rem) {
	.hz-plate__media > img {
		object-position: 34% 82%;
	}
}

/* Everything after the plate is opaque and sits above it. Between them, the
   whole effect. */
.hz-sheet,
.hz-footer {
	position: relative;
	z-index: 1;
	background: var(--wp--preset--color--base);
}

/* A hairline where the paper meets the picture, so the edge is deliberate
   rather than an accident of two greys meeting. */
.hz-sheet {
	box-shadow: 0 -1px 0 rgba(28, 27, 25, 0.14);
}

.hz-plate__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(
			to bottom,
			rgba(9, 12, 14, 0.44) 0%,
			rgba(9, 12, 14, 0.26) 24%,
			rgba(9, 12, 14, 0.06) 48%,
			rgba(9, 12, 14, 0) 62%
		),
		linear-gradient(
			to top,
			rgba(9, 12, 14, 0.5) 0%,
			rgba(9, 12, 14, 0.2) 10%,
			rgba(9, 12, 14, 0) 26%
		);
}

/* Under the sections along the top edge, then a little sky. */
.hz-plate__head {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 2;
	padding-top: calc(clamp(1rem, 3vh, 1.6rem) + 4.5rem + 4vh);
}

.hz-plate__foot {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	padding-bottom: clamp(1rem, 2.5vh, 1.75rem);
}

/* The words keep the column the page below them is set in, so the name and
   the first line of prose stand on the same left edge across the fold. */
.hz-plate__head > *,
.hz-plate__foot > * {
	width: min(
		100% - 2 * var(--wp--style--root--padding-left),
		var(--wp--style--global--content-size, 40rem)
	);
	margin-inline: auto;
}

/* The largest thing on the site, and still a size that leaves the sky room.
   `--hz-name-scale` is the "Size" slider on the painting in the editor: it
   scales the whole clamp, so the name still shrinks to fit a phone. */
.hz-plate__name {
	margin: 0 auto;
	color: var(--hz-on-picture);
	font-size: calc(clamp(2rem, 4.4vw, 3.4rem) * var(--hz-name-scale, 1));
	font-weight: 450;
	line-height: 0.98;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.hz-plate__tagline {
	margin: 0.8rem auto 0;
	color: rgba(251, 250, 246, 0.84);
	font-size: calc(var(--wp--preset--font-size--xl) * var(--hz-tagline-scale, 1));
	font-style: italic;
	line-height: 1.3;
	letter-spacing: -0.012em;
	text-wrap: balance;
}

.hz-plate__credit {
	margin: 0 auto;
	color: rgba(251, 250, 246, 0.68);
	font-size: calc(var(--wp--preset--font-size--xs) * var(--hz-credit-scale, 1));
	font-style: italic;
}

/* The opening paragraph on the homepage, the first thing on paper. Bigger
   than the body, and set to read as prose rather than as a standfirst. */
.hz-intro {
	margin-top: 0;
	line-height: 1.42;
	letter-spacing: -0.008em;
	text-wrap: pretty;
}

/* Reduced motion: no pinning. The plate simply scrolls with the page. */
@media (prefers-reduced-motion: reduce) {
	.hz-plate__media {
		position: absolute;
	}
}

/* The sections along the top edge of the picture. Absolute, not fixed: they
   scroll away with the page, and the paper that rises over the picture is
   what takes their place. They start on the name's left edge but are free to
   run past the column's right one rather than wrap a section onto a second
   line. */
.hz-topnav {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 5;
	margin: 0 !important;
	padding: clamp(1rem, 3vh, 1.6rem) var(--wp--style--root--padding-left);
	color: var(--hz-on-picture);
}

.hz-topnav .hz-menu__list {
	box-sizing: border-box;
	width: 100%;
	padding-left: max(0px, (100% - var(--wp--style--global--content-size, 40rem)) / 2);
	column-gap: 1.4em;
}

.hz-topnav .hz-menu__item a:hover {
	text-decoration-color: rgba(251, 250, 246, 0.7);
}

/* The footer's top margin is a gap in the paper, and the pinned picture shows
   through a gap. The main column's bottom padding gives the same space. */
.hz-footer,
.wp-site-blocks > * {
	margin-block-start: 0 !important;
}

.hz-sheet {
	padding-bottom: var(--wp--preset--spacing--60) !important;
}

/* Every other page ends the same way: the column, the same gap of paper,
   then the footer's rule. Without it the last line sat on the rule. */
.wp-site-blocks > main:not(.hz-sheet) {
	padding-bottom: var(--wp--preset--spacing--60);
}

/* The same goes for the space under the footer. A bottom padding set for the
   whole site (Styles → Layout → Padding) lands on .wp-site-blocks, below the
   footer, where it is a transparent strip — and on the homepage the pinned
   picture shows through it. Give that space to the footer instead, so the
   paper runs to the foot of the page and the spacing stays what was set. */
body .wp-site-blocks {
	padding-bottom: 0;
}

.hz-footer {
	padding-bottom: var(--wp--style--root--padding-bottom, 0px);
}

/* A small plate of the painting, for anywhere a picture belongs at postcard
   size. Cropped to the shoreline: at this size the monk is the only part of
   the canvas that survives. */
.hz-info__plate {
	display: block;
	width: 100%;
	height: 9rem;
	object-fit: cover;
	object-position: 50% 78%;
}

/* -------------------------------------------------------------------------
   2. The header on every other page: the name small, the sections under it
   ---------------------------------------------------------------------- */

.hz-header .hz-header__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
}

.hz-header__name a {
	color: inherit;
	text-decoration: none;
}

/* Seven sections on one line of the column. */
.hz-header .hz-header__menu {
	font-size: 1.0625rem !important;
	margin-top: 0.3rem !important;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--hz-rule);
}

/* 2a. Over a picture. A page that opens on a picture — the About page, a
   section, any page given one in the editor — sets the name and the sections
   over the picture's upper edge, in the painting's white, the way the
   homepage does. The band says it is there (body class, set in
   inc/blocks.php); a page without one keeps the header on the paper. */
body.hz-has-top-band .wp-site-blocks {
	position: relative;
	padding-top: 0;
}

body.hz-has-top-band .hz-header {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 5;
	color: var(--hz-on-picture);
	/* With the shade over the top of the picture (enhance.css §4a), a soft
	   shadow keeps every letter apart from whatever is painted behind it. */
	text-shadow: 0 1px 2px rgba(9, 12, 14, 0.55), 0 0 18px rgba(9, 12, 14, 0.4);
}

body.hz-has-top-band .hz-header .hz-header__menu {
	border-bottom-color: rgba(251, 250, 246, 0.3);
}

body.hz-has-top-band .hz-header .hz-menu__item a:hover {
	text-decoration-color: rgba(251, 250, 246, 0.7);
}

@media print {
	body.hz-has-top-band .hz-header {
		position: static;
		color: #000;
	}
}

/* 2b. On a phone the header is one line: the name, and at the end of it the
   ☰ that holds the sections (§3a). The rule under the menu moves under the
   whole line. Only where the browser can open the menu; anywhere else the
   sections stay under the name, as on a wide screen. */
@supports selector(:popover-open) {
	@media (max-width: 40rem) {
		.hz-header:has(> .hz-menu--fold) {
			display: grid;
			grid-template-columns: minmax(0, 1fr) auto;
			align-items: center;
			column-gap: 1rem;
		}

		/* Anything else put in the header takes a line of its own. */
		.hz-header:has(> .hz-menu--fold) > * {
			grid-column: 1 / -1;
			margin: 0 !important;
		}

		.hz-header:has(> .hz-menu--fold) > .hz-header__name {
			grid-column: 1;
		}

		.hz-header > .hz-menu--fold {
			grid-column: 2;
			padding-bottom: 0;
			border-bottom: 0;
		}

		.hz-header:has(> .hz-menu--fold)::after {
			content: "";
			grid-column: 1 / -1;
			margin-top: 0.75rem;
			border-top: 1px solid var(--hz-rule);
		}

		body.hz-has-top-band .hz-header::after {
			border-top-color: rgba(251, 250, 246, 0.3);
		}
	}
}

/* -------------------------------------------------------------------------
   3. The section menu
   ---------------------------------------------------------------------- */

.hz-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 1.5em;
	row-gap: 0.3em;
}

.hz-menu--center .hz-menu__list {
	justify-content: center;
}

.hz-menu--left .hz-menu__list {
	justify-content: flex-start;
}

.hz-menu--right .hz-menu__list {
	justify-content: flex-end;
}

.hz-menu--between .hz-menu__list {
	justify-content: space-between;
	width: 100%;
}

.hz-menu--stack .hz-menu__list {
	flex-direction: column;
	align-items: flex-start;
	row-gap: 0.1em;
}

.hz-menu__item {
	display: inline-flex;
	align-items: baseline;
}

.hz-menu__item a {
	color: inherit;
	text-decoration: none;
}

.hz-menu__item a:hover,
.hz-menu__item a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
}

.hz-menu__item.is-current > a {
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 1.5px;
}

/* Glyph separators are available to anyone editing the block, but the site
   ships without one: on a menu that wraps they strand a bar at the start of a
   line, and spacing says the same thing without a mark. */
.hz-menu--pipe .hz-menu__list,
.hz-menu--dot .hz-menu__list {
	column-gap: 0;
}

.hz-menu--pipe .hz-menu__item:not(:last-child)::after,
.hz-menu--dot .hz-menu__item:not(:last-child)::after {
	margin-inline: 0.55em;
	color: currentColor;
	opacity: 0.4;
	font-weight: 400;
}

.hz-menu--pipe .hz-menu__item:not(:last-child)::after {
	content: "|";
}

.hz-menu--dot .hz-menu__item:not(:last-child)::after {
	content: "\00b7";
}

.hz-menu--space .hz-menu__list {
	column-gap: 1.6em;
}

.hz-menu--stack .hz-menu__item::after {
	content: none !important;
}

/* Core Navigation, for anyone who swaps the section menu out for it. */
.wp-block-navigation a:where(:not(.wp-element-button)) {
	text-decoration: none;
}

.wp-block-navigation a:where(:not(.wp-element-button)):hover {
	text-decoration: underline;
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
}

.wp-block-navigation .current-menu-item > a,
.wp-block-navigation .current_page_item > a,
.wp-block-navigation-item.current-menu-item > a {
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 1.5px;
}

@media (max-width: 40rem) {
	.hz-menu--space .hz-menu__list {
		column-gap: 1.1em;
	}

	/* A phone wraps every menu, and a wrapped menu strands its bars and
	   dots at the line ends (see above): there, space separates them. */
	.hz-menu--pipe .hz-menu__item:not(:last-child)::after,
	.hz-menu--dot .hz-menu__item:not(:last-child)::after {
		content: none;
	}

	.hz-menu--pipe .hz-menu__list,
	.hz-menu--dot .hz-menu__list {
		column-gap: 1.1em;
	}

	.hz-topnav .hz-menu__list {
		column-gap: 1em;
	}

	.hz-plate__head {
		padding-top: calc(clamp(1rem, 3vh, 1.6rem) + 6rem);
	}
}

/* 3a. The folded menu — the header's and the homepage's (the block's "Fold
   into a ☰ button on a phone"). On a wide screen nothing changes: the button
   is hidden, and the panel holding the list is no box at all, so the list is
   the same row of sections. On a phone the row goes behind the button, which
   opens it as a sheet of paper over the top of the page: the name and a ×
   along its top edge where the header was, then one section to a line. The
   browser opens and closes it (a popover); enhance.css §4b unrolls it. */
.hz-menu__toggle,
.hz-menu__close {
	display: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 2.75rem;
	height: 2.75rem;
	/* The button is a thumb's width, the mark in it much less: the margins
	   let the mark, not the button, sit on the column's right edge. */
	margin: -0.5rem -0.6rem -0.5rem 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.hz-menu__panel {
	display: contents;
	color: inherit;
}

.hz-menu__head {
	display: none;
}

@supports selector(:popover-open) {
	@media (max-width: 40rem) {
		.hz-menu--fold .hz-menu__toggle {
			display: inline-flex;
		}

		.hz-menu--fold .hz-menu__panel {
			display: none;
		}

		.hz-menu--fold .hz-menu__panel:popover-open {
			display: block;
			position: fixed;
			inset: 0 0 auto 0;
			box-sizing: border-box;
			width: auto;
			height: auto;
			max-height: 100vh;
			max-height: 100dvh;
			margin: 0;
			padding: var(--wp--preset--spacing--30) var(--wp--style--root--padding-right) 1.5rem var(--wp--style--root--padding-left);
			overflow-y: auto;
			overscroll-behavior: contain;
			border: 0;
			border-bottom: 1px solid var(--hz-rule);
			background: var(--wp--preset--color--base);
			color: var(--wp--preset--color--contrast);
			/* The header over a picture shades its letters; the paper does not. */
			text-shadow: none;
		}

		.hz-menu--fold .hz-menu__panel::backdrop {
			background: rgba(9, 12, 14, 0.42);
		}

		/* The page stays where it was under the open menu. */
		html:has(.hz-menu--fold .hz-menu__panel:popover-open) {
			overflow: hidden;
		}

		.hz-menu--fold .hz-menu__head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 1rem;
		}

		.hz-menu--fold .hz-menu__close {
			display: inline-flex;
		}

		/* The name as the header sets it: the site title's font (it carries
		   that block's class for the purpose), at the header's size. */
		.hz-menu__home {
			margin: 0;
			font-size: var(--wp--preset--font-size--lg);
			font-weight: 500;
			line-height: 1.3;
		}

		.hz-menu__home a {
			color: inherit;
			text-decoration: none;
		}

		.hz-menu--fold .hz-menu__panel .hz-menu__list {
			display: block;
			margin-top: 0.75rem;
			border-top: 1px solid var(--hz-rule);
			font-size: var(--wp--preset--font-size--lg);
			line-height: 1.3;
		}

		.hz-menu--fold .hz-menu__panel .hz-menu__item {
			display: block;
			border-bottom: 1px solid var(--hz-rule);
		}

		.hz-menu--fold .hz-menu__panel .hz-menu__item::after {
			content: none;
		}

		.hz-menu--fold .hz-menu__panel .hz-menu__item a {
			display: block;
			padding-block: 0.7rem;
		}

		/* The homepage has no header, only the menu over the painting: the
		   button goes to the right, and the name on the painting moves up
		   into the room the row of sections took. */
		.hz-topnav.hz-menu--fold {
			display: flex;
			justify-content: flex-end;
		}

		.hz-topnav.hz-menu--fold .hz-menu__panel:popover-open {
			padding-top: clamp(1rem, 3vh, 1.6rem);
		}

		/* A page with no picture keeps the site's top padding (Styles →
		   Layout → Padding) above its header. The sheet takes it too, so
		   its × lands where the ☰ was. */
		body:not(.hz-has-top-band) .hz-header .hz-menu__panel:popover-open {
			padding-top: calc(var(--wp--style--root--padding-top, 0px) + var(--wp--preset--spacing--30));
		}

		.hz-topnav.hz-menu--fold + .hz-plate .hz-plate__head {
			padding-top: calc(clamp(1rem, 3vh, 1.6rem) + 3.25rem + 4vh);
		}
	}
}

/* -------------------------------------------------------------------------
   4. Index rows — the workhorse. Every section page is one of these.
   ---------------------------------------------------------------------- */

.hz-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Rows come from two places: the Index block writes `.hz-list__item`, and a
   core Query Loop given the `hz-list` class writes plain `li`s. Both are
   rows and both have to answer to the same rules. */
.hz-list__item,
ul.hz-list > li {
	padding-block: 1.05rem;
	border-bottom: 1px solid var(--hz-rule);
	display: grid;
	gap: 0.3rem;
	margin: 0;
	list-style: none;
}

.hz-list__item:first-child,
ul.hz-list > li:first-child {
	border-top: 1px solid var(--hz-rule);
}

ul.hz-list > li > .wp-block-post-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.24;
	font-weight: 500;
}

ul.hz-list > li > .wp-block-post-title a,
.hz-list__title a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

/* WordPress sets a Post Title's link inline-block, and an inline-block's
   baseline is its last line: a title wrapped onto two lines pulled the year
   beside it (4a) down to its second line. */
ul.hz-list > li > .wp-block-post-title a {
	display: inline;
}

ul.hz-list > li > .wp-block-post-title a:hover,
.hz-list__title a:hover {
	text-decoration: underline;
	text-underline-offset: 0.16em;
	text-decoration-thickness: 1px;
}

ul.hz-list > li > .wp-block-post-excerpt {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--contrast-2);
}

ul.hz-list > li > .wp-block-post-excerpt p {
	margin: 0;
}

.hz-list .wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}

.hz-list__title {
	margin: 0;
	font-size: var(--hz-ix-title-size, var(--wp--preset--font-size--lg));
	line-height: 1.24;
	font-weight: 500;
	letter-spacing: -0.014em;
	text-wrap: pretty;
}

/* The small line under a title. No middle dots: a gap separates two things
   perfectly well, and the dots were doing decoration, not work. */
.hz-list__meta {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--contrast-2);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 1.15em;
	row-gap: 0.2em;
	margin: 0;
}

.hz-pin {
	font-style: italic;
	color: var(--wp--preset--color--contrast);
}

.hz-list__excerpt {
	margin: 0.1rem 0 0;
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--hz-ix-text-size, var(--wp--preset--font-size--sm));
	line-height: 1.5;
	max-width: 42rem;
	text-wrap: pretty;
}

/* 4a. Sections that show years — Research. The year hangs in a column of its
   own to the left of the title, the one place on the site a date is worth
   the space. It is only ever a year, so the column is narrow. */
.hz-index--dated .hz-list__item,
.hz-dated-archive ul.hz-list > li {
	grid-template-columns: 4rem 1fr;
	column-gap: 0;
	align-items: baseline;
}

.hz-index--dated .hz-list__item > .hz-list__meta,
.hz-dated-archive ul.hz-list > li > .hz-list__meta {
	grid-column: 1;
	grid-row: 1;
	display: block;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.45;
}

/* The margin holds the year and nothing else — including on rows marked
   "Start here", where the year is not the first span. */
.hz-index--dated .hz-list__item > .hz-list__meta > *:not(.hz-year),
.hz-dated-archive ul.hz-list > li > .hz-list__meta > *:not(.wp-block-post-date) {
	display: none;
}

.hz-index--dated :is(.hz-list__title, .hz-list__excerpt),
.hz-dated-archive ul.hz-list > li > :is(.wp-block-post-title, .wp-block-post-excerpt) {
	grid-column: 2;
}

/* On a phone every rem of the line counts: the margin takes the year and a
   little air, not a fifth of the screen. */
@media (max-width: 40rem) {
	.hz-index--dated .hz-list__item,
	.hz-dated-archive ul.hz-list > li {
		grid-template-columns: 3.25rem 1fr;
	}
}

/* 4b. Sections in columns — Notes. Read down, then across, the way a paper
   is. `columns` rather than a grid: a grid has to be told how many rows
   there are, and the whole point is that the text finds its own length. */
.hz-index--columns .hz-list,
.hz-columns-archive .wp-block-query .hz-list {
	column-width: var(--wp--custom--column-width, 17rem);
	column-gap: var(--wp--preset--spacing--40);
	column-rule: 1px solid var(--hz-rule);
	border-top: 1px solid var(--hz-rule);
}

/* A row may not be broken across a column, and the rule that opens the list
   is the list's own, drawn once above all the columns. (Specific enough to
   beat `ul.hz-list > li:first-child`, or the first row drew a second rule
   under the list's.) */
.hz-index--columns ul.hz-list > .hz-list__item,
.hz-columns-archive .wp-block-query ul.hz-list > li {
	break-inside: avoid;
	border-top: 0;
}

.hz-index--columns .hz-list__title,
.hz-columns-archive ul.hz-list > li > .wp-block-post-title {
	font-size: var(--hz-ix-title-size, var(--wp--preset--font-size--base));
	line-height: 1.26;
}

/* The section page takes the wide measure, or the columns would never be
   more than two. */
.hz-columns-archive .wp-block-query {
	max-width: var(--wp--style--global--wide-size);
}

.hz-columns-archive .wp-block-query > * {
	max-width: none;
}

/* 4c. An Index with its section's name over it — how the homepage is built.
   Each section is its name over a ruled list; the hairlines are the only
   thing separating them. */
.hz-part {
	margin-top: clamp(2.5rem, 6vh, 3.75rem);
}

.hz-part__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	column-gap: 1rem;
	margin-bottom: 0.7rem;
}

.hz-part__title {
	margin: 0;
	font-size: var(--hz-ix-heading-size, var(--wp--preset--font-size--lg));
	font-weight: 500;
}

.hz-part__title a {
	color: inherit;
	text-decoration: none;
}

.hz-part__more {
	font-size: var(--wp--preset--font-size--sm);
	font-style: italic;
	color: var(--wp--preset--color--contrast-2);
	text-decoration: none;
}

.hz-part__title a:hover,
.hz-part__more:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

/* 4d. The fonts set on an Index block (its "Sizes and fonts" panel). Only
   when one is set: unset, titles keep the headings' font and the rest the
   text font. (The sizes are read straight from --hz-ix-*-size above.) */
[style*="--hz-ix-title-font"] :is(.hz-list__title, .hz-card__title, .hz-link__name, .hz-feature__title) {
	font-family: var(--hz-ix-title-font);
}

[style*="--hz-ix-heading-font"] .hz-part__title {
	font-family: var(--hz-ix-heading-font);
}

[style*="--hz-ix-text-font"] :is(.hz-list__excerpt, .hz-card__text, .hz-link__note, .hz-feature__text) {
	font-family: var(--hz-ix-text-font);
}

/* -------------------------------------------------------------------------
   5. Link rows
   ---------------------------------------------------------------------- */

.hz-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}

.hz-link {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.15rem;
	padding-block: 0.85rem;
	border-bottom: 1px solid var(--hz-rule);
}

.hz-link:first-child {
	border-top: 1px solid var(--hz-rule);
}

.hz-link__name {
	font-size: var(--hz-ix-title-size, var(--wp--preset--font-size--base));
	line-height: 1.32;
}

.hz-link__name a {
	text-decoration: none;
}

.hz-link__name a:hover {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* The host is the one piece of information a link row can add: it says where
   you are about to be sent. It reads as a subtitle, not as code. */
.hz-link__host {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--contrast-2);
}

.hz-link__note {
	margin: 0.15rem 0 0;
	font-size: var(--hz-ix-text-size, var(--wp--preset--font-size--sm));
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-2);
}

.hz-link__out {
	margin-left: 0.28em;
	opacity: 0.55;
}

/* -------------------------------------------------------------------------
   6. Cards

   The About page's "what is where" grid, and a shape the Index block offers.
   Drawn plainly: one hairline frame, no icons in tinted squares, no shadow,
   no lift on hover.
   ---------------------------------------------------------------------- */

.hz-cards {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(15rem, 100% / 3.2)), 1fr));
	/* Top and left only: every card draws its own right and bottom, so a
	   frame on all four sides would double the outer two. */
	border-top: 1px solid var(--hz-rule);
	border-left: 1px solid var(--hz-rule);
}

.hz-card {
	border-right: 1px solid var(--hz-rule);
	border-bottom: 1px solid var(--hz-rule);
	padding: 1.4rem 1.4rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	text-decoration: none;
	color: inherit;
	transition: background-color 0.18s var(--hz-ease);
}

.hz-card:hover {
	background: var(--wp--preset--color--base-2);
}

.hz-card__label {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--contrast-2);
}

.hz-card__title {
	margin: 0;
	font-size: var(--hz-ix-title-size, var(--wp--preset--font-size--lg));
	font-weight: 500;
	line-height: 1.22;
}

.hz-card__text {
	margin: 0;
	font-size: var(--hz-ix-text-size, var(--wp--preset--font-size--sm));
	color: var(--wp--preset--color--contrast-2);
	line-height: 1.5;
}

.hz-card__more {
	margin-top: auto;
	padding-top: 0.6rem;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--contrast-2);
}

.hz-card:hover .hz-card__more {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* -------------------------------------------------------------------------
   7. Reading view (a single note, essay or paper)
   ---------------------------------------------------------------------- */

.hz-article__header {
	margin-bottom: clamp(2rem, 5vw, 3.25rem);
}

/* A Post Date removed from an entry that shows no year leaves its row empty. */
.hz-article__header .hz-list__meta:empty {
	display: none;
}

.hz-eyebrow {
	font-size: var(--wp--preset--font-size--sm);
	font-style: italic;
	color: var(--wp--preset--color--contrast-2);
	margin-bottom: 0.7rem;
}

.entry-content {
	hyphens: auto;
}

/* The homepage is a page too, but its opening paragraph is set large and
   reads better unbroken. */
.entry-content.hz-home {
	hyphens: manual;
}

.entry-content > * {
	max-width: var(--hz-measure);
	margin-inline: auto;
}

.entry-content > .alignwide {
	max-width: var(--wp--style--global--wide-size);
}

.entry-content > .alignfull,
.entry-content > figure,
.entry-content > .wp-block-image,
.entry-content > .wp-block-table {
	max-width: none;
}

/* Prose spacing — for writing, not for the homepage, whose headings and
   paragraphs belong to its lists and keep the lists' own spacing. */
.entry-content:not(.hz-home) p + p {
	margin-top: 1.05em;
}

/* Headings in the writing, not the theme's own pieces set inside it (a
   card's title, an Index's heading), which carry their own spacing. */
.entry-content:not(.hz-home) :is(h2, h3, h4):not([class*="hz-"]) {
	margin-top: 2.1em;
	margin-bottom: 0.55em;
}

.entry-content p > em:only-child,
.hz-standfirst {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--sm);
}

.hz-standfirst {
	font-style: italic;
	max-width: var(--hz-measure);
	margin-inline: auto;
}

/* Greek and Latin both sit in these faces; keep the Greek from looking small. */
:lang(el) {
	font-size: 1.02em;
	line-height: 1.7;
}

.hz-postnav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	margin-top: clamp(3rem, 7vw, 5rem);
	padding-top: 1.25rem;
	border-top: 1px solid var(--hz-rule);
	font-size: var(--wp--preset--font-size--sm);
}

/* -------------------------------------------------------------------------
   8. Footer and the small pieces in it
   ---------------------------------------------------------------------- */

.hz-footer {
	border-top: 1px solid var(--hz-rule);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--contrast-2);
}

.hz-footer a {
	color: inherit;
}

.hz-info__legal {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--contrast-2);
	margin: 0;
}

.hz-info__heading {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
}

.hz-info__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.25rem;
}

.hz-info--links.is-inline .hz-info__links {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1.2em;
	row-gap: 0.25em;
}

.hz-info--links.is-inline .hz-info__heading {
	display: none;
}

.hz-info--links.has-text-align-center .hz-info__links {
	justify-content: center;
}

.hz-info__email {
	margin: 0;
}

/* `get_search_form()` returns the classic form, not the Search block, so the
   selectors have to cover both shapes. */
.hz-info--search .wp-block-search,
.hz-info--search .search-form {
	margin: 0;
	display: flex;
	gap: 0;
	max-width: 20rem;
	border: 1px solid var(--hz-rule);
}

.hz-info--search .search-form label {
	flex: 1 1 auto;
	margin: 0;
	display: block;
}

.hz-info--search .search-form .screen-reader-text {
	position: absolute !important;
	clip-path: inset(50%);
}

.hz-info--search input[type="search"],
.hz-info--search .wp-block-search__input {
	width: 100%;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 0;
	border-radius: 0;
	padding: 0.5em 0.7em;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4;
}

.hz-info--search input[type="search"]::placeholder {
	color: var(--wp--preset--color--contrast-2);
	opacity: 0.85;
}

.hz-info--search input[type="submit"],
.hz-info--search .wp-block-search__button {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 0;
	border-left: 1px solid var(--hz-rule);
	border-radius: 0;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	padding: 0.5em 1em;
	cursor: pointer;
	white-space: nowrap;
}

.hz-info--search input[type="submit"]:hover,
.hz-info--search .wp-block-search__button:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.hz-info--search.has-text-align-center .search-form {
	margin-inline: auto;
}

/* -------------------------------------------------------------------------
   9. Odds and ends
   ---------------------------------------------------------------------- */

.wp-block-image img {
	height: auto;
}

/* On a touchscreen, a link set in small type is a small target: a row's
   topics, a post's eyebrow, a picture's credit. Padding on an inline link
   widens where a finger can land without moving a line. */
@media (pointer: coarse) {
	:is(.wp-block-post-terms, .hz-art__credit) a {
		padding-block: 0.4em;
	}
}

/* Comments are off by default on this site; if switched on, keep them plain. */
.wp-block-post-comments-form,
.wp-block-comments {
	max-width: var(--hz-measure);
	margin-inline: auto;
	font-size: var(--wp--preset--font-size--sm);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* -------------------------------------------------------------------------
   10. Print — philosophers print things
   ---------------------------------------------------------------------- */

@media print {
	.hz-plate,
	.hz-plate__media,
	.hz-topnav,
	.hz-footer,
	.hz-postnav,
	.wp-block-navigation,
	.skip-link {
		display: none !important;
	}

	body {
		background: #fff !important;
		color: #000 !important;
		font-size: 11.5pt;
	}

	.entry-content > * {
		max-width: none;
	}

	a {
		color: #000 !important;
		text-decoration: underline;
	}

	.entry-content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		word-break: break-all;
	}
}