/*
Theme Name: ZEPLIN
Theme URI: https://zeplin.dk/
Author: Philip Ask Zeplin-Frederiksen
Author URI: https://zeplin.dk/
Description: Bespoke block theme for zeplin.dk. Hard poster-editorial built on full-bleed colour grounds: white for reading, signal yellow and near-black as structural fields, vermilion as the second colour. Typography carries the identity — a condensed poster sans for the wordmark and section titles, a grotesk for all structure and headings, a serif reserved for running prose inside articles, and a mono for data.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Version: 2.6.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zeplin
Tags: blog, one-column, block-patterns, full-site-editing, custom-colors, custom-menu, editor-style, featured-images, threaded-comments
*/

/* ==========================================================================
   1. Tokens
   Colour, spacing and type presets come from theme.json. Only the values
   theme.json cannot express live here.
   ========================================================================== */

:root {
	--z-white: var(--wp--preset--color--white, #ffffff);
	--z-black: var(--wp--preset--color--black, #0d0d0d);
	--z-grey: var(--wp--preset--color--grey, #565656);
	--z-panel: var(--wp--preset--color--panel, #f2f2f2);
	--z-line-soft: var(--wp--preset--color--line-soft, #c4c4c4);
	--z-yellow: var(--wp--preset--color--yellow, #ffd100);
	--z-red: var(--wp--preset--color--vermilion, #d42b0f);
	--z-muted: var(--wp--preset--color--muted, #a6a6a6);

	--z-poster: var(--wp--preset--font-family--poster);
	--z-sans: var(--wp--preset--font-family--sans);
	--z-serif: var(--wp--preset--font-family--serif);
	--z-mono: var(--wp--preset--font-family--mono);

	--z-gutter: clamp(20px, 2.75vw, 48px);
	--z-wide: 1280px;
	--z-read: 720px;
	--z-transition: 120ms cubic-bezier(0.2, 0, 0, 1);

	/* Text on yellow that must read as secondary. Grey passes on yellow but
	   reads muddy; this is a darkened yellow-black at 7.4:1. */
	--z-on-yellow-soft: #6b5a00;
	--z-on-yellow-body: #4a3e00;

	/* Anton sets "ZEPLIN" at 2.871em advance; the full-stop square adds
	   0.14em plus a 0.06em gap. This constant lets the wordmark span its
	   container exactly, with no JavaScript and no SVG. */
	--z-wordmark-em: 3.071;
}

/* ==========================================================================
   2. Foundation
   ========================================================================== */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

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

figure {
	margin: 0;
}

::selection {
	background: var(--z-yellow);
	color: var(--z-black);
}

/* Utility: the standard measure and gutters for anything that is not a field. */
.zeplin-shell {
	max-width: var(--z-wide);
	margin-inline: auto;
	padding-inline: var(--z-gutter);
}

.zeplin-reading-width {
	max-width: var(--z-read);
	margin-inline: auto;
	padding-inline: var(--z-gutter);
	box-sizing: content-box;
}

/* The data voice. */
.zeplin-mono,
.zeplin-kicker,
.zeplin-meta {
	font-family: var(--z-mono);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ==========================================================================
   3. The wordmark
   ========================================================================== */

.zeplin-wm-line {
	padding-inline: var(--z-gutter);
}

@supports (font-size: 1cqw) {
	.zeplin-wm-line {
		container-type: inline-size;
	}
}

.zeplin-wordmark {
	font-family: var(--z-poster);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0;
	line-height: 0.74;
	white-space: nowrap;
	margin: 0;
	/* Anton's ink sits high in the em box, so pad the short line-box back out
	   rather than let the caps collide with whatever sits above. */
	padding-top: 0.09em;
	font-size: calc((100vw - 2 * var(--z-gutter)) / var(--z-wordmark-em));
}

@supports (font-size: 1cqw) {
	/* Container units exclude the scrollbar, so the fit is exact. */
	.zeplin-wordmark {
		font-size: calc(100cqw / var(--z-wordmark-em));
	}
}

/* The full stop is a filled square, drawn rather than set. */
.zeplin-wordmark::after {
	content: "";
	display: inline-block;
	width: 0.14em;
	height: 0.14em;
	margin-left: 0.06em;
	background: var(--z-red);
	vertical-align: baseline;
}

/* ==========================================================================
   4. Skip link
   ========================================================================== */

.zeplin-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--z-yellow);
	color: var(--z-black);
	font-family: var(--z-sans);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 12px 16px;
}

.zeplin-skip-link:focus {
	left: 0;
}

/* ==========================================================================
   5. Header — a black band
   ========================================================================== */

.zeplin-site-header {
	background: var(--z-black);
	color: var(--z-white);
}

.zeplin-header-inner {
	padding-block: 16px;
	gap: 32px;
}

.zeplin-site-header .zeplin-header-mark,
.zeplin-site-header .wp-block-site-title {
	font-family: var(--z-poster);
	font-size: 26px;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0;
	margin: 0;
}

.zeplin-site-header .wp-block-site-title a {
	color: var(--z-white);
	text-decoration: none;
}

/* The wordmark's yellow full stop, at header scale. */
.zeplin-site-header .wp-block-site-title a::after {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-left: 4px;
	background: var(--z-yellow);
}

.zeplin-primary-navigation {
	font-family: var(--z-sans);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.zeplin-primary-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.zeplin-primary-navigation .wp-block-navigation__container {
	gap: 28px;
}

.zeplin-primary-navigation .wp-block-navigation-item__content {
	color: var(--z-white);
	text-decoration: none;
	padding-block: 4px;
	border-bottom: 3px solid transparent;
	transition: border-color var(--z-transition), color var(--z-transition);
}

.zeplin-primary-navigation .wp-block-navigation-item__content:hover,
.zeplin-primary-navigation .current-menu-item .wp-block-navigation-item__content {
	border-bottom-color: var(--z-yellow);
}

.zeplin-primary-navigation .wp-block-navigation__responsive-container-open,
.zeplin-primary-navigation .wp-block-navigation__responsive-container-close {
	color: var(--z-white);
	min-width: 44px;
	min-height: 44px;
}

/* The mobile menu is a yellow field — the menu's chromatic signature. */
.zeplin-primary-navigation .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--z-yellow);
	color: var(--z-black);
	padding: 20px var(--z-gutter);
}

.zeplin-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--z-poster);
	font-size: 36px;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--z-black);
	border-bottom: 0;
	padding-block: 12px;
}

.zeplin-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	border-bottom: 1px solid var(--z-black);
	width: 100%;
}

.zeplin-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--z-black);
}

/* ==========================================================================
   6. Front page — hero on a yellow field
   ========================================================================== */

.zeplin-hero {
	background: var(--z-yellow);
	color: var(--z-black);
	padding-left: var(--z-gutter);
	/* no right padding: the portrait runs to the viewport edge */
}

.zeplin-hero .zeplin-wm-line {
	padding-left: 0;
}

.zeplin-hero-kicker {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	padding: 16px var(--z-gutter) 6px 0;
	color: var(--z-on-yellow-soft);
	margin: 0;
}

.zeplin-hero-grid {
	display: grid;
	grid-template-columns: 7fr 5fr;
	align-items: stretch;
	margin-top: 20px;
	gap: 0;
}

.zeplin-hero-intro {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
	padding: 24px 40px 28px 0;
}

.zeplin-hero-intro .zeplin-lede {
	font-family: var(--z-sans);
	font-size: clamp(24px, 2.5vw, 34px);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -0.025em;
	max-width: 19ch;
	margin: 0;
}

.zeplin-hero-intro .zeplin-lede-sub {
	font-family: var(--z-sans);
	font-size: var(--wp--preset--font-size--m);
	line-height: 1.5;
	max-width: 36ch;
	color: var(--z-on-yellow-body);
	margin: 18px 0 0;
}

.zeplin-hero-intro .zeplin-lede-sub a {
	color: var(--z-black);
	text-decoration: none;
	border-bottom: 3px solid var(--z-black);
}

.zeplin-hero-intro .zeplin-lede-sub a:hover {
	background: var(--z-black);
	color: var(--z-yellow);
}

/* The pointer into the only other place worth going. */
.zeplin-hero-jump {
	background: var(--z-black);
	color: var(--z-white);
	text-decoration: none;
	padding: 16px 22px 14px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 20px;
	transition: background var(--z-transition);
}

.zeplin-hero-jump strong {
	font-family: var(--z-poster);
	font-weight: 400;
	font-size: clamp(24px, 2.4vw, 34px);
	line-height: 1;
	text-transform: uppercase;
	transition: color var(--z-transition);
}

.zeplin-hero-jump span {
	font-family: var(--z-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--z-muted);
}

.zeplin-hero-jump:hover strong {
	color: var(--z-yellow);
}

/* The portrait runs off the right edge, with a solid vermilion panel over its
   corner. The photograph itself is only cropped, never altered. */
/* An explicit height, so the frame is cropped by the layout rather than the
   layout being stretched by the frame's proportions. */
.zeplin-hero-portrait {
	position: relative;
	height: clamp(420px, 38vw, 560px);
	overflow: hidden;
	/* core's .wp-block-image margin outranks the element reset */
	margin: 0;
}

.zeplin-hero-portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 40%;
	display: block;
}

.zeplin-hero-portrait figcaption {
	position: absolute;
	left: 0;
	bottom: 0;
	min-width: 62%;
	background: var(--z-red);
	color: var(--z-white);
	padding: 16px 22px 14px;
	font-family: var(--z-mono);
	font-size: 11px;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	margin: 0;
}

.zeplin-hero-portrait figcaption strong {
	display: block;
	font-family: var(--z-poster);
	font-size: clamp(22px, 2.2vw, 32px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	margin-top: 4px;
}

/* ==========================================================================
   7. Front page — the fact band, on black
   ========================================================================== */

.zeplin-factband {
	background: var(--z-black);
	color: var(--z-white);
	padding-block: 30px;
}

.zeplin-factband .zeplin-fact-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}

.zeplin-fact {
	padding: 4px 24px;
	border-left: 1px solid rgba(255, 255, 255, 0.25);
	margin: 0;
}

.zeplin-fact:first-child {
	border-left: 0;
	padding-left: 0;
}

.zeplin-fact .zeplin-fact-key {
	display: block;
	font-family: var(--z-mono);
	font-size: 11px;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--z-yellow);
	margin-bottom: 7px;
}

.zeplin-fact .zeplin-fact-value {
	font-family: var(--z-sans);
	font-size: var(--wp--preset--font-size--m);
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.zeplin-fact a {
	color: var(--z-white);
	text-decoration: none;
	border-bottom: 2px solid var(--z-yellow);
}

.zeplin-fact a:hover {
	color: var(--z-yellow);
}

/* ==========================================================================
   8. Front page — post panels
   Each post gets its own full-bleed ground, cycling white → black → yellow,
   with the photograph bleeding off alternating edges. A post with no featured
   image becomes a text-only panel: the irregularity is driven by content.
   ========================================================================== */

.zeplin-front-writing .zeplin-section-head {
	max-width: var(--z-wide);
	margin-inline: auto;
	padding: 64px var(--z-gutter) 10px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 24px;
}

.zeplin-chip {
	display: inline-block;
	background: var(--z-black);
	color: var(--z-yellow);
	padding: 5px 9px;
	font-family: var(--z-mono);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0 12px;
}

.zeplin-section-title {
	font-family: var(--z-poster);
	font-weight: 400;
	font-size: clamp(44px, 7vw, 92px);
	line-height: 0.84;
	letter-spacing: 0;
	text-transform: uppercase;
	margin: 0;
}

.zeplin-section-note {
	font-family: var(--z-mono);
	font-size: 12px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--z-grey);
	padding-bottom: 8px;
	margin: 0;
}

.zeplin-panels .wp-block-post-template {
	counter-reset: zeplin-panel;
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
}

/* Grounds cycle in threes, and sit on the list item so they always run the
   full width of the viewport whatever the panel inside them does. */
.zeplin-panels > .wp-block-post-template > li:nth-child(3n + 1) {
	background: var(--z-white);
	color: var(--z-black);
}

.zeplin-panels > .wp-block-post-template > li:nth-child(3n + 2) {
	background: var(--z-black);
	color: var(--z-white);
}

.zeplin-panels > .wp-block-post-template > li:nth-child(3n) {
	background: var(--z-yellow);
	color: var(--z-black);
}

.zeplin-panel {
	display: grid;
	grid-template-columns: 1fr minmax(0, 640px);
	align-items: center;
	gap: 0;
	padding-left: var(--z-gutter);
	padding-right: 0;
}

/* The featured image comes first in the markup, so odd panels reorder it to
   the right. Sides then alternate, and consecutive photographs never bleed
   the same way. */
.zeplin-panel-text {
	order: 1;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 28px;
	padding: 56px 56px 56px 0;
}

.zeplin-panel-fig {
	order: 2;
}

.zeplin-panels > .wp-block-post-template > li:nth-child(even) .zeplin-panel {
	grid-template-columns: minmax(0, 640px) 1fr;
	padding-left: 0;
	padding-right: var(--z-gutter);
}

.zeplin-panels > .wp-block-post-template > li:nth-child(even) .zeplin-panel-fig {
	order: 1;
}

.zeplin-panels > .wp-block-post-template > li:nth-child(even) .zeplin-panel-text {
	order: 2;
	padding: 56px 0 56px 56px;
}

/* The panel number is generated, not authored, so it always matches position. */
.zeplin-panel-text::before {
	counter-increment: zeplin-panel;
	content: counter(zeplin-panel, decimal-leading-zero) / "";
	font-family: var(--z-poster);
	font-size: clamp(72px, 8vw, 122px);
	line-height: 0.72;
	letter-spacing: 0;
}

.zeplin-panels > .wp-block-post-template > li:nth-child(3n + 1) .zeplin-panel-text::before {
	color: var(--z-red);
}

.zeplin-panels > .wp-block-post-template > li:nth-child(3n + 2) .zeplin-panel-text::before {
	color: var(--z-yellow);
}

/* Vermilion measures 3.46:1 on yellow, below the text threshold, so the
   yellow panel takes black instead. */
.zeplin-panels > .wp-block-post-template > li:nth-child(3n) .zeplin-panel-text::before {
	color: var(--z-black);
}

.zeplin-panel-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin-bottom: 14px;
	font-family: var(--z-mono);
	font-size: 12px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.zeplin-panel-meta .wp-block-post-date,
.zeplin-panel-meta .wp-block-post-terms {
	font-family: var(--z-mono);
	font-size: 12px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.zeplin-panels > .wp-block-post-template > li:nth-child(3n + 1) .zeplin-panel-meta {
	color: var(--z-grey);
}

.zeplin-panels > .wp-block-post-template > li:nth-child(3n + 2) .zeplin-panel-meta {
	color: var(--z-muted);
}

.zeplin-panels > .wp-block-post-template > li:nth-child(3n) .zeplin-panel-meta {
	color: var(--z-on-yellow-soft);
}

.zeplin-panel-meta a {
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.zeplin-panels > .wp-block-post-template > li:nth-child(3n + 1) .zeplin-panel-meta a {
	color: var(--z-red);
}

.zeplin-panels > .wp-block-post-template > li:nth-child(3n + 2) .zeplin-panel-meta a {
	color: var(--z-yellow);
}

/* Category links on the yellow ground stay black for the same contrast
   reason; the underline still marks them as links. */
.zeplin-panels > .wp-block-post-template > li:nth-child(3n) .zeplin-panel-meta a {
	color: var(--z-black);
}

.zeplin-panel-title {
	margin: 0;
}

/* Underlines are real text decorations kept transparent at rest, so the colour
   can transition without the decoration snapping in and out. */
.zeplin-panel-title a {
	font-family: var(--z-sans);
	font-size: clamp(30px, 3.6vw, 50px);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.03em;
	color: inherit;
	display: inline;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 5px;
	text-underline-offset: 8px;
	transition: text-decoration-color var(--z-transition), color var(--z-transition);
}

.zeplin-panels > .wp-block-post-template > li:nth-child(3n + 1) .zeplin-panel-title a:hover {
	text-decoration-color: var(--z-yellow);
}

.zeplin-panels > .wp-block-post-template > li:nth-child(3n + 2) .zeplin-panel-title a:hover {
	color: var(--z-yellow);
}

.zeplin-panels > .wp-block-post-template > li:nth-child(3n) .zeplin-panel-title a:hover {
	text-decoration-color: var(--z-black);
}

.zeplin-panel-excerpt {
	margin-top: 18px;
	font-family: var(--z-sans);
	font-size: 18px;
	line-height: 1.45;
	max-width: 42ch;
}

.zeplin-panels > .wp-block-post-template > li:nth-child(3n + 1) .zeplin-panel-excerpt {
	color: var(--z-grey);
}

.zeplin-panels > .wp-block-post-template > li:nth-child(3n + 2) .zeplin-panel-excerpt {
	color: var(--z-muted);
}

.zeplin-panels > .wp-block-post-template > li:nth-child(3n) .zeplin-panel-excerpt {
	color: var(--z-on-yellow-body);
}

.zeplin-panel-excerpt .wp-block-post-excerpt__more-text {
	display: none;
}

.zeplin-panel-fig {
	height: 460px;
	overflow: hidden;
	margin: 0;
}

.zeplin-panel-fig img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* A post with no featured image gives the type the whole field. The ground
   still bleeds; only the type is brought back to the measure. These rules
   follow the alternating ones deliberately, so they win the tie. */
.zeplin-panels > .wp-block-post-template > li .zeplin-panel:not(:has(.zeplin-panel-fig)) {
	grid-template-columns: 1fr;
	padding-inline: 0;
}

.zeplin-panels > .wp-block-post-template > li .zeplin-panel:not(:has(.zeplin-panel-fig)) .zeplin-panel-text {
	max-width: var(--z-wide);
	margin-inline: auto;
	width: 100%;
	padding: 56px var(--z-gutter);
	gap: 36px;
}

.zeplin-panel:not(:has(.zeplin-panel-fig)) .zeplin-panel-title a {
	font-size: clamp(36px, 5.2vw, 76px);
	line-height: 0.98;
}

.zeplin-panel:not(:has(.zeplin-panel-fig)) .zeplin-panel-excerpt {
	font-size: 20px;
	max-width: 40ch;
}

/* The closer: the one place vermilion becomes a ground. */
.zeplin-closer {
	display: block;
	background: var(--z-red);
	color: var(--z-white);
	text-decoration: none;
	padding-block: 30px;
}

.zeplin-closer-inner {
	max-width: var(--z-wide);
	margin-inline: auto;
	padding-inline: var(--z-gutter);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 24px;
}

.zeplin-closer strong {
	font-family: var(--z-poster);
	font-weight: 400;
	font-size: clamp(34px, 4.6vw, 68px);
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	transition: color var(--z-transition);
}

.zeplin-closer span {
	font-family: var(--z-mono);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.zeplin-closer:hover strong {
	color: var(--z-yellow);
}

/* ==========================================================================
   9. Writing index, archives and search results
   A deliberate density shift: the front page runs poster panels, the index
   runs a tight ruled list.
   ========================================================================== */

.zeplin-index-shell {
	padding-block: 56px 88px;
}

.zeplin-index-head {
	border-bottom: 6px solid var(--z-black);
	padding-bottom: 10px;
	margin-bottom: 0;
}

.zeplin-index-head .zeplin-chip {
	background: var(--z-yellow);
	color: var(--z-black);
}

.zeplin-index-head h1 {
	font-family: var(--z-poster);
	font-weight: 400;
	font-size: clamp(44px, 7vw, 92px);
	line-height: 0.84;
	letter-spacing: 0;
	text-transform: uppercase;
	margin: 0;
}

.zeplin-index-intro {
	font-family: var(--z-sans);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.4;
	letter-spacing: -0.015em;
	color: var(--z-grey);
	max-width: 46ch;
	margin: 24px 0 0;
}

.zeplin-post-list .wp-block-post-template {
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
	display: block;
}

.zeplin-post-entry {
	display: grid;
	grid-template-columns: 2fr 6fr 3fr;
	gap: 0;
	border-top: 1px solid var(--z-black);
}

.zeplin-entry-meta {
	font-family: var(--z-mono);
	font-size: 12px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--z-grey);
	padding: 30px 24px 30px 0;
}

.zeplin-entry-meta .wp-block-post-date,
.zeplin-entry-meta .wp-block-post-terms {
	font-family: var(--z-mono);
	font-size: 12px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	display: block;
}

.zeplin-entry-meta .wp-block-post-terms {
	margin-top: 8px;
}

.zeplin-entry-meta a {
	color: var(--z-red);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.zeplin-entry-meta a:hover {
	border-bottom-color: var(--z-red);
}

.zeplin-entry-content {
	padding: 30px 40px 30px 24px;
	border-left: 1px solid var(--z-line-soft);
}

.zeplin-entry-title {
	margin: 0;
}

.zeplin-entry-title a {
	font-family: var(--z-sans);
	font-size: clamp(24px, 2.6vw, 36px);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.028em;
	color: var(--z-black);
	display: inline;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 4px;
	text-underline-offset: 6px;
	transition: text-decoration-color var(--z-transition);
}

.zeplin-entry-title a:hover {
	text-decoration-color: var(--z-yellow);
}

.zeplin-entry-excerpt {
	margin-top: 14px;
	color: var(--z-grey);
	max-width: 48ch;
}

.zeplin-entry-excerpt .wp-block-post-excerpt__more-text {
	display: none;
}

.zeplin-entry-figure {
	padding: 30px 0;
	align-self: start;
	margin: 0;
}

.zeplin-entry-figure img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

.zeplin-post-list .wp-block-post-template > li:last-child .zeplin-post-entry {
	border-bottom: 1px solid var(--z-black);
}

/* Pagination */
.zeplin-pagination {
	margin-top: 48px;
	padding-top: 20px;
	border-top: 1px solid var(--z-black);
	font-family: var(--z-mono);
	font-size: var(--wp--preset--font-size--s);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	gap: 8px;
}

.zeplin-pagination a,
.zeplin-pagination .page-numbers {
	text-decoration: none;
	padding: 12px 14px;
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--z-black);
}

.zeplin-pagination a:hover {
	background: var(--z-black);
	color: var(--z-white);
}

.zeplin-pagination .page-numbers.current {
	background: var(--z-yellow);
	color: var(--z-black);
}

/* ==========================================================================
   10. Single post and pages
   Running prose is the one place the serif appears.
   ========================================================================== */

.zeplin-single-shell,
.zeplin-page-shell {
	padding-block: 56px 88px;
}

.zeplin-single-meta {
	font-family: var(--z-mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--z-grey);
	gap: 16px;
	margin-bottom: 20px;
}

.zeplin-single-meta a {
	color: var(--z-red);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.zeplin-single-meta a:hover {
	border-bottom-color: var(--z-red);
}

.zeplin-single-title,
.zeplin-page-title {
	font-family: var(--z-sans);
	font-size: var(--wp--preset--font-size--title);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.032em;
	margin: 0;
}

.zeplin-single-standfirst {
	font-family: var(--z-serif);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.45;
	color: var(--z-grey);
	max-width: 38ch;
	margin: 20px 0 0;
}

.zeplin-single-featured {
	margin: 40px auto;
}

.zeplin-single-featured img {
	width: 100%;
	display: block;
}

.zeplin-article-content,
.zeplin-page-content {
	padding-inline: var(--z-gutter);
}

.zeplin-article-content {
	border-top: 1px solid var(--z-black);
	padding-top: 40px;
	margin-top: 40px;
}

.zeplin-page-content {
	margin-top: 32px;
}

/* The serif, and only here. */
.zeplin-article-content p,
.zeplin-article-content li,
.zeplin-article-content blockquote,
.zeplin-page-content p,
.zeplin-page-content li,
.zeplin-page-content blockquote {
	font-family: var(--z-serif);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.65;
}

.zeplin-article-content h2,
.zeplin-page-content h2 {
	margin-top: 48px;
	margin-bottom: 12px;
}

.zeplin-article-content h3,
.zeplin-page-content h3 {
	margin-top: 36px;
	margin-bottom: 10px;
}

.zeplin-article-content a,
.zeplin-page-content a {
	color: var(--z-black);
	text-decoration: underline;
	text-decoration-color: var(--z-yellow);
	text-decoration-thickness: 3px;
	text-underline-offset: 3px;
	transition: background var(--z-transition);
}

.zeplin-article-content a:hover,
.zeplin-page-content a:hover {
	background: var(--z-yellow);
}

.zeplin-article-content ul,
.zeplin-page-content ul {
	list-style: square;
	padding-left: 22px;
}

.zeplin-article-content ol,
.zeplin-page-content ol {
	padding-left: 22px;
}

.zeplin-article-content blockquote,
.zeplin-page-content blockquote {
	border-left: 4px solid var(--z-black);
	padding-left: 20px;
	margin-left: 0;
}

.zeplin-article-content figcaption,
.zeplin-page-content figcaption,
.wp-element-caption {
	font-family: var(--z-mono);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.4;
	color: var(--z-grey);
	margin-top: 12px;
	text-align: left;
}

.zeplin-article-content :where(code, kbd, samp),
.zeplin-page-content :where(code, kbd, samp) {
	font-family: var(--z-mono);
	font-size: 0.9em;
	background: var(--z-panel);
	padding: 2px 5px;
}

.zeplin-article-content pre code {
	background: none;
	padding: 0;
}

.zeplin-article-content table,
.zeplin-page-content table {
	width: 100%;
	border-collapse: collapse;
}

/* Core draws cell borders on the table block, so cells need padding on both
   sides or the text sits flush against the rule. */
.zeplin-article-content th,
.zeplin-page-content th {
	font-family: var(--z-mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;
	vertical-align: bottom;
	border-bottom: 1px solid var(--z-black);
	padding: 12px 16px;
}

.zeplin-article-content td,
.zeplin-page-content td {
	border-bottom: 1px solid var(--z-line-soft);
	padding: 12px 16px;
}

/* the block's own borders would clot against the theme's rules */
.zeplin-article-content .wp-block-table td,
.zeplin-article-content .wp-block-table th,
.zeplin-page-content .wp-block-table td,
.zeplin-page-content .wp-block-table th {
	border-inline: 0;
}

.zeplin-article-content .wp-block-table,
.zeplin-page-content .wp-block-table {
	overflow-x: auto;
}

.zeplin-article-content hr,
.zeplin-page-content hr {
	border: 0;
	border-top: 1px solid var(--z-black);
	margin-block: 40px;
}

/* Post footer, previous/next */
.zeplin-post-footer {
	border-top: 1px solid var(--z-black);
	margin-top: 56px;
	padding-top: 16px;
	font-family: var(--z-mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--z-grey);
	gap: 10px;
}

.zeplin-post-footer a {
	color: var(--z-red);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.zeplin-post-footer a:hover {
	border-bottom-color: var(--z-red);
}

.zeplin-post-navigation {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	margin-top: 48px;
}

.zeplin-post-nav-item {
	border-top: 1px solid var(--z-black);
	padding-top: 14px;
}

.zeplin-post-nav-label {
	font-family: var(--z-mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--z-grey);
	margin: 0 0 8px;
}

.zeplin-post-nav-item a {
	font-family: var(--z-sans);
	font-size: var(--wp--preset--font-size--h3);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.022em;
	color: var(--z-black);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 4px;
	text-underline-offset: 5px;
	transition: text-decoration-color var(--z-transition);
}

.zeplin-post-nav-item a:hover {
	text-decoration-color: var(--z-yellow);
}

/* ==========================================================================
   11. Comments
   ========================================================================== */

.zeplin-comments {
	margin-top: 64px;
	border-top: 1px solid var(--z-black);
	padding-top: 24px;
}

.zeplin-comments .wp-block-comments-title {
	font-family: var(--z-poster);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--h2);
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	margin-bottom: 24px;
}

.zeplin-comments .wp-block-comment-template li {
	border-bottom: 1px solid var(--z-line-soft);
	padding-block: 24px;
}

.zeplin-comments .wp-block-comment-template ol {
	margin-left: 24px;
	border-left: 1px solid var(--z-line-soft);
	padding-left: 24px;
	list-style: none;
}

.zeplin-comment-meta {
	font-family: var(--z-mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--z-grey);
	gap: 14px;
	margin-bottom: 10px;
}

.zeplin-comments .wp-block-comment-content p {
	font-family: var(--z-serif);
	font-size: var(--wp--preset--font-size--m);
	line-height: 1.6;
}

.zeplin-comments .wp-block-comment-reply-link a {
	font-family: var(--z-mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--z-black);
	text-decoration: none;
	border-bottom: 2px solid var(--z-yellow);
}

.zeplin-comments .comment-form label {
	font-family: var(--z-mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	display: block;
	margin-bottom: 6px;
}

.zeplin-comments .required {
	color: var(--z-red);
}

/* ==========================================================================
   12. Forms, buttons and search
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="password"],
textarea,
.wp-block-search__input {
	font-family: var(--z-sans);
	font-size: var(--wp--preset--font-size--m);
	background: var(--z-white);
	color: var(--z-black);
	border: 2px solid var(--z-black);
	border-radius: 0;
	padding: 12px 14px;
	min-height: 48px;
	width: 100%;
	box-sizing: border-box;
}

input::placeholder,
textarea::placeholder {
	color: var(--z-grey);
}

.wp-block-search__button,
.wp-block-button__link,
input[type="submit"],
button[type="submit"] {
	font-family: var(--z-sans);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--z-black);
	color: var(--z-white);
	border: 0;
	border-radius: 0;
	padding: 14px 22px;
	cursor: pointer;
	transition: background var(--z-transition), color var(--z-transition);
}

.wp-block-search__button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
	background: var(--z-yellow);
	color: var(--z-black);
}

.wp-block-search .wp-block-search__inside-wrapper {
	gap: 0;
}

/* ==========================================================================
   12b. Document pages — About and Résumé
   Both run on the full-bleed "Feature page" template, so they use the same
   ground system as the front page: a yellow masthead, a black vitals band,
   and sections that change ground rather than being separated by whitespace.
   ========================================================================== */

.zeplin-feature-content > * {
	margin-block: 0;
}

/* --- masthead ------------------------------------------------------------ */

.zeplin-doc-head {
	background: var(--z-yellow);
	color: var(--z-black);
	padding-left: var(--z-gutter);
}

.zeplin-doc-head-grid {
	display: grid;
	grid-template-columns: 7fr 5fr;
	align-items: stretch;
	gap: 0;
}

.zeplin-doc-head-text {
	padding: 40px 40px 44px 0;
	align-self: center;
}

.zeplin-doc-head .zeplin-chip {
	background: var(--z-black);
	color: var(--z-yellow);
}

.zeplin-doc-title {
	font-family: var(--z-sans);
	font-size: clamp(38px, 5vw, 68px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.035em;
	margin: 0;
}

.zeplin-doc-role {
	font-family: var(--z-mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--z-on-yellow-soft);
	margin: 16px 0 0;
}

.zeplin-doc-standfirst {
	font-family: var(--z-serif);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.45;
	color: var(--z-on-yellow-body);
	max-width: 42ch;
	margin: 20px 0 0;
}

.zeplin-doc-portrait {
	position: relative;
	height: clamp(380px, 34vw, 500px);
	overflow: hidden;
	margin: 0;
}

.zeplin-doc-portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 38%;
	display: block;
}

.zeplin-doc-portrait figcaption {
	position: absolute;
	left: 0;
	bottom: 0;
	min-width: 62%;
	background: var(--z-red);
	color: var(--z-white);
	padding: 14px 20px 12px;
	font-family: var(--z-mono);
	font-size: 11px;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	margin: 0;
}

.zeplin-doc-portrait figcaption strong {
	display: block;
	font-family: var(--z-poster);
	font-size: clamp(20px, 2vw, 28px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	margin-top: 4px;
}

/* --- vitals band --------------------------------------------------------- */

.zeplin-vitals .zeplin-fact-row {
	grid-template-columns: repeat(4, 1fr);
	row-gap: 22px;
}

.zeplin-vitals .zeplin-fact:nth-child(4n + 1) {
	border-left: 0;
	padding-left: 0;
}

.zeplin-vitals .zeplin-fact-value {
	text-transform: none;
	font-size: var(--wp--preset--font-size--s);
	letter-spacing: 0;
}

/* --- sections ------------------------------------------------------------ */

.zeplin-doc-section {
	padding-block: clamp(48px, 6vw, 88px);
	background: var(--z-white);
	color: var(--z-black);
}

.zeplin-doc-section--panel {
	background: var(--z-panel);
}

.zeplin-doc-section--black {
	background: var(--z-black);
	color: var(--z-white);
}

.zeplin-doc-section--yellow {
	background: var(--z-yellow);
	color: var(--z-black);
}

.zeplin-doc-section-title {
	font-family: var(--z-poster);
	font-weight: 400;
	font-size: clamp(30px, 3.6vw, 54px);
	line-height: 0.9;
	letter-spacing: 0;
	text-transform: uppercase;
	margin: 0 0 28px;
	padding-bottom: 12px;
	border-bottom: 6px solid currentColor;
}

.zeplin-doc-section--black .zeplin-doc-section-title {
	border-bottom-color: var(--z-yellow);
}

/* A section that is only running prose would otherwise leave half the width
   empty. Drop its title into a left rail so the page reads as a document
   rather than as a column of text with dead space beside it. Sections built
   from rows or explicit splits already fill the width and are excluded. */
@media (min-width: 1024px) {
	.zeplin-doc-section > .zeplin-shell:has(> .zeplin-doc-prose):not(.zeplin-doc-split):not(:has(> .zeplin-rows)) {
		display: grid;
		grid-template-columns: 4fr 8fr;
		column-gap: clamp(32px, 4vw, 64px);
		align-items: start;
	}

	.zeplin-doc-section > .zeplin-shell:has(> .zeplin-doc-prose):not(.zeplin-doc-split):not(:has(> .zeplin-rows)) > * {
		grid-column: 2;
	}

	.zeplin-doc-section > .zeplin-shell:has(> .zeplin-doc-prose):not(.zeplin-doc-split):not(:has(> .zeplin-rows)) > .zeplin-doc-section-title {
		grid-column: 1;
		grid-row: 1;
		margin-bottom: 0;
	}
}

/* An explicit rail: title and a supporting photograph on the left, prose on
   the right. Used where the section would otherwise be a lone text column. */
.zeplin-doc-split {
	display: grid;
	grid-template-columns: 4fr 8fr;
	column-gap: clamp(32px, 4vw, 64px);
	align-items: start;
}

.zeplin-doc-rail .zeplin-doc-section-title {
	margin-bottom: 28px;
}

.zeplin-rail-figure {
	margin: 0;
}

.zeplin-rail-figure img {
	width: 100%;
	display: block;
}

/* A lead-in paragraph above a full-width list of rows. Set in two columns so
   it spans the same width as the rows beneath it instead of trailing off. */
.zeplin-doc-prose--intro {
	margin-bottom: 36px;
}

@media (min-width: 1024px) {
	.zeplin-doc-prose--intro {
		columns: 2;
		column-gap: clamp(32px, 4vw, 64px);
	}

	.zeplin-doc-prose--intro p {
		max-width: none;
		break-inside: avoid;
	}
}

@media (max-width: 1023px) {
	.zeplin-doc-split {
		grid-template-columns: 1fr;
		row-gap: 28px;
	}

	.zeplin-rail-figure {
		max-width: 380px;
	}
}

/* --- prose --------------------------------------------------------------- */

.zeplin-doc-prose p {
	font-family: var(--z-serif);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.65;
	max-width: 68ch;
	margin: 0 0 20px;
}

.zeplin-doc-prose p:last-child {
	margin-bottom: 0;
}

.zeplin-doc-section--black .zeplin-doc-prose p {
	color: var(--z-white);
}

.zeplin-doc-section--yellow .zeplin-doc-prose p {
	color: var(--z-on-yellow-body);
}

.zeplin-doc-prose a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 3px;
	text-decoration-color: var(--z-yellow);
	transition: background var(--z-transition), color var(--z-transition);
}

.zeplin-doc-prose a:hover {
	background: var(--z-yellow);
	color: var(--z-black);
}

.zeplin-doc-section--yellow .zeplin-doc-prose a {
	text-decoration-color: var(--z-black);
}

.zeplin-doc-section--yellow .zeplin-doc-prose a:hover {
	background: var(--z-black);
	color: var(--z-yellow);
}

.zeplin-doc-body {
	font-family: var(--z-sans);
	font-size: var(--wp--preset--font-size--m);
	line-height: 1.55;
	max-width: 52ch;
	margin: 0 0 24px;
}

.zeplin-doc-note {
	font-family: var(--z-mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--z-muted);
	margin: 32px 0 0;
}

/* --- two-column blocks --------------------------------------------------- */

.zeplin-clients-grid {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}

.zeplin-clients-grid--flip {
	grid-template-columns: 7fr 5fr;
}

.zeplin-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

.zeplin-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(16px, 2vw, 28px);
	margin-top: 36px;
	align-items: start;
}

/* Paired frames share a crop so the pair reads as a pair, not as two images
   that happen to sit next to each other. */
.zeplin-pair .zeplin-doc-figure img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.zeplin-doc-figure {
	margin: 0;
}

.zeplin-doc-figure img {
	width: 100%;
	display: block;
}

.zeplin-doc-figure figcaption {
	font-family: var(--z-mono);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.4;
	color: var(--z-grey);
	margin-top: 12px;
	text-align: left;
}

.zeplin-doc-section--black .zeplin-doc-figure figcaption {
	color: var(--z-muted);
}

.zeplin-doc-section--yellow .zeplin-doc-figure figcaption {
	color: var(--z-on-yellow-soft);
}

/* The logo strip is supplied without transparency, so it gets a real white
   plate rather than being dropped onto a coloured ground. */
.zeplin-logo-plate {
	margin: 0;
	background: var(--z-white);
	border: 1px solid var(--z-black);
}

.zeplin-logo-plate img {
	width: 100%;
	display: block;
}

.zeplin-doc-plate {
	margin: 0;
}

.zeplin-doc-plate img {
	width: 100%;
	display: block;
}

/* --- ruled rows ---------------------------------------------------------- */

.zeplin-rows {
	border-top: 1px solid currentColor;
}

.zeplin-row {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 0 32px;
	padding-block: 22px;
	border-bottom: 1px solid var(--z-line-soft);
}

.zeplin-doc-section--black .zeplin-row {
	border-bottom-color: rgba(255, 255, 255, 0.25);
}

.zeplin-doc-section--yellow .zeplin-row {
	border-bottom-color: rgba(13, 13, 13, 0.3);
}

.zeplin-row-key {
	font-family: var(--z-mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--z-grey);
	margin: 4px 0 0;
}

.zeplin-doc-section--black .zeplin-row-key {
	color: var(--z-yellow);
}

/* Not vermilion: it measures 3.46:1 on yellow, below the text threshold. */
.zeplin-doc-section--yellow .zeplin-row-key {
	color: var(--z-on-yellow-soft);
}

.zeplin-row-body h3 {
	font-family: var(--z-sans);
	font-size: clamp(18px, 1.7vw, 22px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
	margin: 0;
}

.zeplin-row-body h3 span {
	display: block;
	font-family: var(--z-mono);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--z-grey);
	margin-top: 6px;
}

.zeplin-doc-section--black .zeplin-row-body h3 span {
	color: var(--z-muted);
}

.zeplin-doc-section--yellow .zeplin-row-body h3 span {
	color: var(--z-on-yellow-soft);
}

.zeplin-row-body p {
	font-family: var(--z-serif);
	font-size: var(--wp--preset--font-size--m);
	line-height: 1.55;
	max-width: 62ch;
	margin: 10px 0 0;
}

/* Same treatment and same hover as links in running prose. Without the hover
   this was the only link on the site that did not respond to the cursor. */
.zeplin-row-body a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--z-yellow);
	text-decoration-thickness: 3px;
	text-underline-offset: 3px;
	text-decoration-skip-ink: none;
	transition: background var(--z-transition), color var(--z-transition);
}

.zeplin-row-body a:hover {
	background: var(--z-yellow);
	color: var(--z-black);
}

.zeplin-doc-section--black .zeplin-row-body a:hover,
.zeplin-doc-section--yellow .zeplin-row-body a:hover {
	background: var(--z-black);
	color: var(--z-yellow);
}

.zeplin-row-body ul {
	font-family: var(--z-serif);
	font-size: var(--wp--preset--font-size--m);
	line-height: 1.55;
	max-width: 62ch;
	margin: 8px 0 0;
	padding-left: 20px;
	list-style: square;
}

.zeplin-row-body li {
	margin-bottom: 4px;
}

/* Where a company holds more than one role. */
.zeplin-subrole {
	margin-top: 20px;
	padding-left: 20px;
	border-left: 3px solid var(--z-line-soft);
}

.zeplin-subrole h4 {
	font-family: var(--z-sans);
	font-size: var(--wp--preset--font-size--m);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.3;
	margin: 0;
}

/* Its own element rather than a span, so the dates sit on their own line
   even before this stylesheet loads. */
.zeplin-subrole-dates {
	font-family: var(--z-mono);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--z-grey);
	margin: 5px 0 0;
}

/* The location sits under the date, in the same rail. */
.zeplin-row-place {
	margin: 6px 0 0;
	font-family: var(--z-mono);
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: 0.08em;
	color: var(--z-grey);
	text-transform: uppercase;
}

.zeplin-doc-section--black .zeplin-row-place {
	color: var(--z-muted);
}

.zeplin-doc-section--yellow .zeplin-row-place {
	color: var(--z-on-yellow-soft);
}

.zeplin-doc-section--yellow .zeplin-row-body p {
	color: var(--z-on-yellow-body);
}

/* --- references ---------------------------------------------------------- */

/* Three separate people. Each reference is a bounded card with the person at
   the top, so the section cannot be misread as one long quotation. */
.zeplin-quotes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(20px, 2.4vw, 32px);
	align-items: start;
}

.zeplin-quote {
	margin: 0;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-top: 6px solid var(--z-yellow);
	padding: 24px 26px 26px;
	display: flex;
	flex-direction: column;
}

.zeplin-quote-head {
	display: grid;
	grid-template-columns: 64px 1fr;
	column-gap: 16px;
	align-items: center;
	padding-bottom: 18px;
	margin-bottom: 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.zeplin-quote-head:not(:has(img)) {
	grid-template-columns: 1fr;
	min-height: 64px;
}

.zeplin-quote-head img {
	grid-row: span 2;
	width: 64px;
	height: 64px;
	object-fit: cover;
	display: block;
}

.zeplin-quote-name {
	font-family: var(--z-sans);
	font-size: var(--wp--preset--font-size--m);
	font-weight: 700;
	letter-spacing: -0.015em;
	align-self: end;
}

.zeplin-quote-role {
	font-family: var(--z-mono);
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--z-yellow);
	align-self: start;
	margin-top: 4px;
}

.zeplin-quote blockquote {
	margin: 0;
	flex: 1 1 auto;
	border: 0;
	padding: 0;
}

.zeplin-quote blockquote p {
	font-family: var(--z-serif);
	font-size: var(--wp--preset--font-size--m);
	font-style: italic;
	line-height: 1.6;
	color: var(--z-white);
	margin: 0 0 14px;
}

.zeplin-quote blockquote p:last-child {
	margin-bottom: 0;
}

/* ---- embedded talks ----------------------------------------------------- */

/* Plain iframes, not core embed blocks. The block version stacks its own
   aspect-ratio spacer on top of whatever the theme sets, which is how these
   ended up as tall squares. Owning the markup means owning the geometry. */
/* The same geometry is also written inline on the markup, because page content
   and this stylesheet reach the site through different routes and can be out
   of step. Keep the two identical: a 450px floor yields exactly two columns at
   desktop widths and one on a phone, with no media query to disagree about. */
.zeplin-video-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 450px), 1fr));
	gap: 24px;
	margin-top: 20px;
}

/* A single video still spans the content width, like every other block. */
.zeplin-video-grid--single {
	grid-template-columns: minmax(0, 1fr);
	margin-top: 16px;
}

.zeplin-video {
	margin: 0;
	aspect-ratio: 16 / 9;
	background: var(--z-black);
}

.zeplin-video iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---- the AI section ------------------------------------------------------ */

/* Uses the same rail structure as Profile and Work Experience: title and
   supporting image on the left, prose on the right. Extra height because the
   copy here is going to grow. */
.zeplin-doc-ai {
	min-height: 340px;
}

/* ---- closing contact band ------------------------------------------------ */

/* Deliberately not a mailto. The address is published as plain text so it is
   not a one-click harvest target; LinkedIn carries the actual link. */
.zeplin-closer-inner a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.zeplin-closer-inner a:hover {
	color: var(--z-yellow);
}

@media (min-width: 1024px) {
	.zeplin-doc-prose--columns {
		columns: 2;
		column-gap: clamp(32px, 4vw, 64px);
	}

	.zeplin-doc-prose--columns p {
		max-width: none;
		break-inside: avoid;
	}
}

/* --- link lists ---------------------------------------------------------- */

.zeplin-doc-links-label {
	font-family: var(--z-mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--z-grey);
	margin: 32px 0 10px;
}

.zeplin-doc-section--yellow .zeplin-doc-links-label {
	color: var(--z-on-yellow-soft);
}

.zeplin-doc-links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.zeplin-doc-links li {
	border-top: 1px solid var(--z-line-soft);
}

.zeplin-doc-section--yellow .zeplin-doc-links li {
	border-top-color: rgba(13, 13, 13, 0.3);
}

.zeplin-doc-links li:last-child {
	border-bottom: 1px solid var(--z-line-soft);
}

.zeplin-doc-section--yellow .zeplin-doc-links li:last-child {
	border-bottom-color: rgba(13, 13, 13, 0.3);
}

.zeplin-doc-links a {
	display: block;
	padding: 12px 0;
	font-family: var(--z-sans);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 600;
	color: inherit;
	text-decoration: none;
	transition: background var(--z-transition), padding var(--z-transition);
}

.zeplin-doc-links--large a {
	font-size: var(--wp--preset--font-size--m);
}

.zeplin-doc-links a:hover {
	background: var(--z-yellow);
	padding-inline: 12px;
}

.zeplin-doc-section--yellow .zeplin-doc-links a:hover {
	background: var(--z-black);
	color: var(--z-yellow);
}

.zeplin-doc-list {
	list-style: square;
	padding-left: 20px;
	margin: 0 0 24px;
	font-family: var(--z-sans);
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.9;
}

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 1023px) {
	.zeplin-vitals .zeplin-fact-row {
		grid-template-columns: repeat(2, 1fr);
	}

	.zeplin-vitals .zeplin-fact:nth-child(4n + 1) {
		border-left: 1px solid rgba(255, 255, 255, 0.25);
		padding-left: 24px;
	}

	.zeplin-vitals .zeplin-fact:nth-child(odd) {
		border-left: 0;
		padding-left: 0;
	}

	.zeplin-row {
		grid-template-columns: 150px 1fr;
	}
}

@media (max-width: 781px) {
	.zeplin-doc-head {
		padding-left: var(--z-gutter);
	}

	.zeplin-doc-head-grid {
		grid-template-columns: 1fr;
	}

	.zeplin-doc-head-text {
		padding: 32px var(--z-gutter) 28px 0;
	}

	.zeplin-doc-portrait {
		height: 360px;
		margin-left: calc(var(--z-gutter) * -1);
	}

	.zeplin-vitals .zeplin-fact-row {
		grid-template-columns: 1fr;
	}

	.zeplin-vitals .zeplin-fact,
	.zeplin-vitals .zeplin-fact:nth-child(4n + 1),
	.zeplin-vitals .zeplin-fact:nth-child(odd) {
		border-left: 0;
		padding-left: 0;
	}

	.zeplin-clients-grid,
	.zeplin-clients-grid--flip,
	.zeplin-split,
	.zeplin-pair {
		grid-template-columns: 1fr;
	}

	/* keep the image after its text on narrow screens */
	.zeplin-clients-grid--flip .zeplin-doc-figure {
		order: 2;
	}

	.zeplin-row {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.zeplin-row-key {
		margin-top: 0;
	}
}

/* ==========================================================================
   13. 404
   ========================================================================== */

.zeplin-404 {
	padding-block: 64px 96px;
}

.zeplin-404 .zeplin-wordmark {
	color: var(--z-black);
}

.zeplin-404-lede {
	font-family: var(--z-serif);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.45;
	color: var(--z-grey);
	max-width: 42ch;
	margin: 32px 0 24px;
}

.zeplin-404-links {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-bottom: 40px;
}

.zeplin-404-links a {
	font-family: var(--z-sans);
	font-size: var(--wp--preset--font-size--m);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--z-black);
	text-decoration: none;
	border-bottom: 3px solid var(--z-yellow);
	padding-bottom: 4px;
}

.zeplin-404-links a:hover {
	border-bottom-color: var(--z-red);
}

/* ==========================================================================
   14. Footer — a black band with a cropped sign-off
   ========================================================================== */

.zeplin-site-footer {
	background: var(--z-black);
	color: var(--z-white);
	padding-top: 96px;
	overflow: hidden;
}

.zeplin-footer-grid {
	display: grid;
	grid-template-columns: 5fr 3fr 4fr;
	gap: 32px;
	padding-bottom: 56px;
}

.zeplin-footer-name {
	font-family: var(--z-sans);
	font-size: var(--wp--preset--font-size--m);
	font-weight: 600;
	margin: 0 0 6px;
}

.zeplin-footer-role {
	font-family: var(--z-sans);
	color: var(--z-muted);
	max-width: 30ch;
	margin: 0 0 14px;
}

.zeplin-footer-place,
.zeplin-footer-heading {
	color: var(--z-muted);
	margin: 0 0 14px;
}

.zeplin-site-footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.zeplin-site-footer li {
	margin-bottom: 9px;
}

.zeplin-site-footer a {
	color: var(--z-white);
	font-family: var(--z-sans);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 500;
	text-decoration: none;
	padding-block: 2px;
	border-bottom: 3px solid transparent;
	transition: border-color var(--z-transition);
}

.zeplin-site-footer a:hover {
	border-bottom-color: var(--z-yellow);
}

.zeplin-footer-colophon {
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	padding-top: 16px;
	color: var(--z-muted);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 24px;
	margin: 0;
}

/* The sign-off is cropped by the band's bottom edge — a deliberate crop, not
   an overflow. It is decorative and hidden from assistive technology. */
.zeplin-footer-signoff {
	margin-top: 40px;
	height: calc(((100vw - 2 * var(--z-gutter)) / var(--z-wordmark-em)) * 0.58);
	overflow: hidden;
	padding-inline: var(--z-gutter);
}

@supports (font-size: 1cqw) {
	.zeplin-footer-signoff {
		container-type: inline-size;
		height: auto;
		max-height: calc(((100vw - 2 * var(--z-gutter)) / var(--z-wordmark-em)) * 0.58);
	}
}

.zeplin-footer-signoff .zeplin-wordmark {
	color: var(--z-white);
	padding-top: 0;
}

/* ==========================================================================
   15. Interaction states
   ========================================================================== */

:where(a, button, input, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--z-black);
	outline-offset: 2px;
}

.zeplin-site-header :focus-visible,
.zeplin-site-footer :focus-visible,
.zeplin-factband :focus-visible,
.zeplin-closer:focus-visible,
.zeplin-hero-jump:focus-visible,
.zeplin-panels > .wp-block-post-template > li:nth-child(3n + 2) :focus-visible {
	outline-color: var(--z-yellow);
}

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

/* ==========================================================================
   16. Responsive
   ========================================================================== */

@media (max-width: 1023px) {
	.zeplin-factband .zeplin-fact-row {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 20px;
	}

	.zeplin-fact:nth-child(3) {
		border-left: 0;
		padding-left: 0;
	}

	.zeplin-post-entry {
		grid-template-columns: 1.6fr 5fr 2.6fr;
	}
}

@media (max-width: 781px) {
	.zeplin-hero {
		padding-left: var(--z-gutter);
	}

	.zeplin-hero-grid {
		grid-template-columns: 1fr;
	}

	.zeplin-hero-intro {
		padding-right: var(--z-gutter);
		padding-bottom: 32px;
	}

	.zeplin-hero-portrait {
		height: 420px;
		margin-left: calc(var(--z-gutter) * -1);
	}

	.zeplin-factband .zeplin-fact-row {
		grid-template-columns: 1fr;
		row-gap: 0;
	}

	.zeplin-fact {
		border-left: 0;
		padding: 10px 0;
		border-top: 1px solid rgba(255, 255, 255, 0.25);
	}

	.zeplin-fact:first-child {
		border-top: 0;
	}

	.zeplin-panel,
	.zeplin-panels > .wp-block-post-template > li:nth-child(even) .zeplin-panel {
		grid-template-columns: 1fr;
		padding-inline: 0;
	}

	.zeplin-panel-text,
	.zeplin-panels > .wp-block-post-template > li:nth-child(even) .zeplin-panel-text {
		order: 2;
		grid-template-columns: 1fr;
		gap: 10px;
		padding: 34px var(--z-gutter);
	}

	.zeplin-panel-fig,
	.zeplin-panels > .wp-block-post-template > li:nth-child(even) .zeplin-panel-fig {
		order: 1;
		height: 280px;
	}

	.zeplin-panel:not(:has(.zeplin-panel-fig)) .zeplin-panel-text {
		padding: 34px var(--z-gutter);
		gap: 10px;
	}

	.zeplin-post-entry {
		grid-template-columns: 1fr;
		padding-block: 26px;
		gap: 16px;
	}

	.zeplin-entry-meta,
	.zeplin-entry-content {
		padding: 0;
		border-left: 0;
	}

	.zeplin-entry-meta {
		display: flex;
		gap: 14px;
	}

	.zeplin-entry-meta .wp-block-post-terms {
		margin-top: 0;
	}

	.zeplin-entry-figure {
		padding: 0;
		order: -1;
	}

	.zeplin-post-navigation {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.zeplin-about-opening {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.zeplin-about-portrait {
		min-height: 320px;
	}

	.zeplin-now-row {
		flex-direction: column;
	}

	.zeplin-now-value {
		text-align: left;
	}

	.zeplin-footer-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}