/*
Theme Name: Stringer
Theme URI: https://peterstringer.com
Author: Peter Stringer
Description: Custom classic theme for peterstringer.com. Writing archive, consulting credibility, newsletter.
Version: 0.1.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stringer
*/

/* ---------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------- */

:root {
	--paper: #fafaf8;
	--paper-sunk: #f1f0eb;
	--ink: #17181a;
	--ink-deep: #1b1a17;
	--ink-soft: #5f636a;
	--paper-dim: #b5b1a6;
	--rule: #dfded8;
	--rule-dim: #3a3833;
	--signal: #c08a1e;
	--signal-lift: #e0a72c;
	--signal-wash: #f6ecd6;
	--positive: #1b6b4a;
	--negative: #a8402c;

	--display: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--body: "Newsreader", Georgia, "Times New Roman", serif;

	--step-s: 0.875rem;
	--step-m: 1rem;
	--step-body: 1.1875rem;
	--step-l: 1.375rem;
	--step-xl: 1.75rem;

	--measure: 34rem;
	--rail: 6.5rem;
	--gap: 1.75rem;
	--bay: 4.5rem;
}

/* ---------------------------------------------------------------
   2. Reset and base
   --------------------------------------------------------------- */

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

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--body);
	font-size: var(--step-body);
	font-optical-sizing: auto;
	line-height: 1.62;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

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

figure {
	margin: 2.25rem 0;
}

figcaption {
	font-family: var(--display);
	font-size: var(--step-s);
	color: var(--ink-soft);
	line-height: 1.4;
	margin-top: 0.6rem;
}

a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--signal);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover,
a:focus-visible {
	text-decoration-thickness: 2px;
}

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

h1,
h2,
h3,
h4 {
	font-family: var(--display);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0 0 0.75rem;
}

p {
	margin: 0 0 1.35rem;
}

blockquote {
	margin: 2rem 0;
	padding-left: 1.25rem;
	border-left: 3px solid var(--signal);
	font-size: var(--step-l);
	line-height: 1.45;
}

code,
pre {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 0.9em;
}

pre {
	background: var(--paper-sunk);
	padding: 1.1rem;
	overflow-x: auto;
}

hr {
	border: 0;
	border-top: 1px solid var(--rule);
	margin: var(--bay) 0;
}

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

.skip-link:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 99;
	width: auto;
	height: auto;
	clip: auto;
	background: var(--ink);
	color: var(--paper);
	padding: 0.6rem 1rem;
}

/* ---------------------------------------------------------------
   3. Shell
   --------------------------------------------------------------- */

.wrap {
	width: 100%;
	max-width: 60rem;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.measure {
	max-width: var(--measure);
}

.site-header {
	/* Sticky rather than fixed: stays in the document flow, so nothing below
	   needs a compensating offset and there is no jump when it engages. */
	position: sticky;
	top: 0;
	z-index: 20;
	background: color-mix(in srgb, var(--paper) 92%, transparent);
	backdrop-filter: saturate(140%) blur(8px);
	border-bottom: 1px solid var(--rule);
}

/* Anchor links would otherwise land underneath the sticky header. */
html {
	scroll-padding-top: 6rem;
}

.site-header__inner {
	display: flex;
	/* No wrap at desktop: a wrapping flex container pushes the overflow to a
	   new line instead of shrinking it, which drops the CTA below the nav.
	   The nav's own ul wraps internally instead. */
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.75rem var(--gap);
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

@media (max-width: 52rem) {
	.site-header__inner {
		flex-wrap: wrap;
	}
}

.site-brand {
	font-family: var(--display);
	font-weight: 700;
	font-size: var(--step-l);
	letter-spacing: -0.03em;
	text-decoration: none;
	flex: 0 0 auto;
}

/* Nav takes the middle and wraps inside itself; the CTA is pushed to the
   far right and never wraps below the brand. */
.site-nav {
	flex: 1 1 auto;
	min-width: 0;
}

.site-cta {
	flex: 0 0 auto;
	margin-left: auto;
}

.site-brand:hover {
	text-decoration: underline;
	text-decoration-color: var(--signal);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.site-nav ul {
	display: flex;
	flex-wrap: wrap;
	/* Tighter than the global gap: the header is the one place where the
	   item count fights the container width. */
	gap: 0.5rem 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav a {
	font-family: var(--display);
	font-size: var(--step-m);
	text-decoration: none;
	color: var(--ink-soft);
}

.site-nav a:hover,
.site-nav .current-menu-item > a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--signal);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

/* Menu toggle. Hidden above the breakpoint and only functional once the
   script adds .has-nav-toggle to the body, so a JS failure leaves the nav
   visible rather than unreachable. */

.nav-toggle {
	display: none;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-left: auto;
	padding: 0;
	background: transparent;
	border: 1px solid var(--rule);
	color: var(--ink);
	cursor: pointer;
}

.nav-toggle:hover {
	border-color: var(--ink);
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	display: block;
	width: 1.15rem;
	height: 2px;
	background: currentColor;
}

.nav-toggle__bars {
	position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.nav-toggle__bars::before {
	top: -6px;
}

.nav-toggle__bars::after {
	top: 6px;
}

@media (max-width: 52rem) {
	.has-nav-toggle .nav-toggle {
		display: flex;
	}

	/* Full-width row below the brand, so opening the menu pushes the page
	   down rather than overlaying it. No focus trap needed. */
	.has-nav-toggle .site-nav {
		display: none;
		flex-basis: 100%;
		order: 3;
	}

	.has-nav-toggle .site-nav.is-open {
		display: block;
		/* Guard: a sticky header taller than the viewport would trap you at
		   the top of the page with no way to scroll past it. */
		max-height: calc(100vh - 8rem);
		overflow-y: auto;
	}

	.site-nav ul {
		flex-direction: column;
		gap: 0;
	}

	.site-nav li {
		border-top: 1px solid var(--rule);
	}

	.site-nav a {
		display: block;
		padding: 0.85rem 0;
		font-size: var(--step-l);
		color: var(--ink);
	}

	/* The CTA sits beside the toggle, not inside the menu. */
	.site-cta {
		margin-left: 0;
		order: 2;
	}

	.has-nav-toggle .nav-toggle {
		order: 1;
		margin-left: auto;
	}
}

.site-main {
	padding: var(--bay) 0;
}

/* ---------------------------------------------------------------
   4. Home page: intro, lede, curated set
   --------------------------------------------------------------- */

.intro {
	max-width: var(--measure);
	margin-bottom: var(--bay);
	font-size: var(--step-l);
	line-height: 1.5;
}

.intro p:last-child {
	margin-bottom: 0;
}

.lede {
	/* No rule and no padding below: the "Recent" heading already draws its own
	   line, and two rules that close together read as a mistake. */
	margin-bottom: var(--bay);
}

.lede__image {
	display: block;
	margin-bottom: 1.75rem;
	text-decoration: none;
}

.lede__image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--paper-sunk);
}

.lede__date {
	font-family: var(--display);
	font-variant-numeric: tabular-nums;
	font-size: var(--step-s);
	color: var(--signal);
	display: block;
	margin-bottom: 1rem;
}

.lede__title {
	font-size: clamp(2.4rem, 6.5vw, 4rem);
	line-height: 1.02;
	margin-bottom: 1.25rem;
	max-width: 18ch;
}

.lede__title a {
	text-decoration: none;
}

.lede__title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--signal);
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
}

.lede__dek {
	font-size: var(--step-l);
	line-height: 1.5;
	color: var(--ink-soft);
	max-width: var(--measure);
	margin-bottom: 1.5rem;
}

.lede__more {
	margin: 0;
}

.start-here,
.recent {
	margin-bottom: var(--bay);
}

.start-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem var(--gap);
}

.start-item__year {
	font-family: var(--display);
	font-variant-numeric: tabular-nums;
	font-size: var(--step-s);
	font-weight: 600;
	color: var(--signal);
	display: block;
	margin-bottom: 0.4rem;
}

.start-item__title {
	font-size: var(--step-l);
	line-height: 1.2;
	margin-bottom: 0.4rem;
}

.start-item__title a {
	text-decoration: none;
}

.start-item__title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--signal);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.start-item__dek {
	font-size: var(--step-m);
	line-height: 1.5;
	color: var(--ink-soft);
	margin: 0;
}

.archive-note {
	max-width: var(--measure);
	margin-bottom: var(--bay);
	padding-top: 1.5rem;
	border-top: 1px solid var(--rule);
	color: var(--ink-soft);
	font-size: var(--step-m);
}

.archive-note p {
	margin-bottom: 0;
}

.more-link {
	font-family: var(--display);
	font-size: var(--step-m);
	margin: 1.75rem 0 0;
}

@media (max-width: 40rem) {
	.start-list {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------
   5. Post list with date rail
   --------------------------------------------------------------- */

.list-heading {
	font-family: var(--display);
	font-size: var(--step-m);
	font-weight: 500;
	color: var(--ink-soft);
	letter-spacing: 0;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--rule);
	margin-bottom: 2rem;
}

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

.post-item {
	display: grid;
	grid-template-columns: var(--rail) minmax(0, 1fr);
	gap: 0 var(--gap);
	padding: 1.6rem 0;
	border-bottom: 1px solid var(--rule);
}

.post-item__date {
	font-family: var(--display);
	font-variant-numeric: tabular-nums;
	font-size: var(--step-s);
	line-height: 1.6;
	color: var(--ink-soft);
	padding-top: 0.35rem;
	white-space: nowrap;
}

.post-item__year {
	color: var(--signal);
	font-weight: 600;
}

.post-item__body {
	/* Text and thumbnail sit side by side. Rows without an image simply have
	   one child, so the text fills the row rather than leaving a gap. */
	display: flex;
	gap: var(--gap);
	align-items: flex-start;
}

.post-item__text {
	flex: 1 1 auto;
	min-width: 0;
}

.post-item__thumb {
	flex: 0 0 13rem;
	display: block;
	text-decoration: none;
	order: 2;
}

.post-item__thumb img {
	display: block;
	width: 100%;
	/* 16:9, matching the lede and the source images. These are graphics with
	   type baked in, so any other ratio crops the words off. */
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--paper-sunk);
}

.post-item__title {
	font-size: var(--step-xl);
	line-height: 1.15;
	margin-bottom: 0.4rem;
}

.post-item__title a {
	text-decoration: none;
}

.post-item__title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--signal);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.post-item__dek {
	color: var(--ink-soft);
	font-size: var(--step-m);
	line-height: 1.55;
	margin: 0;
	max-width: var(--measure);
}

/* ---------------------------------------------------------------
   6. Single entry
   --------------------------------------------------------------- */

.entry-head {
	margin-bottom: 2.5rem;
}

.entry-title {
	font-size: clamp(2rem, 5vw, 3.1rem);
	line-height: 1.06;
	max-width: 20ch;
	margin-bottom: 1rem;
}

.entry-meta {
	font-family: var(--display);
	font-variant-numeric: tabular-nums;
	font-size: var(--step-s);
	color: var(--ink-soft);
}

.entry-meta b {
	color: var(--signal);
	font-weight: 600;
}

.entry-content {
	max-width: var(--measure);
}

.entry-content h2 {
	font-size: var(--step-xl);
	margin-top: 2.75rem;
}

.entry-content h3 {
	font-size: var(--step-l);
	margin-top: 2.25rem;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.3rem;
	margin-bottom: 1.35rem;
}

.entry-content li {
	margin-bottom: 0.5rem;
}

.entry-content img {
	display: block;
}

.entry-filed {
	max-width: var(--measure);
	margin-top: 3rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--rule);
	font-family: var(--display);
	font-size: var(--step-s);
	color: var(--ink-soft);
}

.page-header {
	margin-bottom: 2.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--rule);
}

.page-header h1 {
	font-size: clamp(1.9rem, 4.5vw, 2.6rem);
}

.page-header p {
	color: var(--ink-soft);
	font-size: var(--step-m);
	margin: 0.5rem 0 0;
	max-width: var(--measure);
}

/* ---------------------------------------------------------------
   7. Blocks at the foot of a post
   --------------------------------------------------------------- */

.pitch {
	max-width: var(--measure);
	margin-top: 3.5rem;
	padding: 1.75rem;
	background: var(--paper-sunk);
}

.pitch h2 {
	font-size: var(--step-l);
	margin-bottom: 0.6rem;
}

.pitch p {
	font-size: var(--step-m);
	color: var(--ink-soft);
	margin-bottom: 1rem;
}

.pitch p:last-child {
	margin-bottom: 0;
}

.button {
	font-family: var(--display);
	font-size: var(--step-m);
	font-weight: 600;
	/* inline-block, or the vertical padding does not push the surrounding
	   line boxes and the button overlaps the text above it. */
	display: inline-block;
	vertical-align: middle;
	line-height: 1.2;
	padding: 0.7rem 1.1rem;
	border: 1px solid var(--ink);
	background: var(--ink);
	color: var(--paper);
	text-decoration: none;
	cursor: pointer;
}

.button:hover {
	background: var(--signal);
	border-color: var(--signal);
	color: var(--ink);
}

/* ---------------------------------------------------------------
   8. Comments
   --------------------------------------------------------------- */

.comments {
	max-width: var(--measure);
	margin-top: 3.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--rule);
}

.comments h2 {
	font-size: var(--step-l);
	margin-bottom: 1.5rem;
}

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

.comment-list li {
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--rule);
}

.comment-list .children {
	list-style: none;
	margin: 1rem 0 0 1.5rem;
	padding: 0;
	border-left: 2px solid var(--rule);
	padding-left: 1.25rem;
}

.comment-meta {
	font-family: var(--display);
	font-size: var(--step-s);
	color: var(--ink-soft);
	margin-bottom: 0.5rem;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	font-family: var(--body);
	font-size: var(--step-m);
	padding: 0.6rem;
	border: 1px solid var(--rule);
	background: var(--paper);
}

.comment-form label {
	font-family: var(--display);
	font-size: var(--step-s);
	display: block;
	margin-bottom: 0.3rem;
}

/* ---------------------------------------------------------------
   9. Pagination and search
   --------------------------------------------------------------- */

.pagination {
	margin-top: 2.5rem;
	font-family: var(--display);
	font-size: var(--step-m);
}

.pagination .page-numbers {
	padding: 0.35rem 0.6rem;
	text-decoration: none;
	color: var(--ink-soft);
}

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

.pagination .current {
	color: var(--ink);
	background: var(--signal-wash);
}

.search-form {
	display: flex;
	gap: 0.5rem;
	max-width: var(--measure);
}

.search-form input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--display);
	font-size: var(--step-m);
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--rule);
	background: var(--paper);
}

/* ---------------------------------------------------------------
   10. Footer
   --------------------------------------------------------------- */

.site-footer {
	background: var(--ink-deep);
	color: var(--paper-dim);
	padding: var(--bay) 0 2rem;
	/* No top margin: .site-main already ends with a --bay of padding, and
	   two bays of white before a dark band reads as a broken page. */
	font-family: var(--display);
	font-size: var(--step-m);
}

.site-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
	gap: 2.5rem var(--gap);
	align-items: start;
}

.site-footer__mark {
	font-weight: 700;
	font-size: var(--step-l);
	letter-spacing: -0.03em;
	color: var(--paper);
	text-decoration: none;
	display: inline-block;
	margin-bottom: 0.75rem;
}

.site-footer__brand p {
	max-width: 28ch;
	font-size: var(--step-s);
	line-height: 1.55;
	margin-bottom: 1.25rem;
}

.site-footer__brand .button {
	background: var(--signal);
	border-color: var(--signal);
	color: var(--ink-deep);
}

.site-footer__brand .button:hover {
	background: var(--signal-lift);
	border-color: var(--signal-lift);
}

.site-footer__col h2 {
	font-size: var(--step-s);
	font-weight: 600;
	color: var(--paper);
	margin-bottom: 0.9rem;
}

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

.site-footer li {
	margin-bottom: 0.55rem;
}

.site-footer a {
	text-decoration: none;
	color: var(--paper-dim);
}

.site-footer a:hover {
	color: var(--paper);
	text-decoration: underline;
	text-decoration-color: var(--signal-lift);
	text-underline-offset: 4px;
}

.site-footer__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	margin-top: var(--bay);
	padding-top: 1.25rem;
	border-top: 1px solid var(--rule-dim);
	font-size: var(--step-s);
}

.site-footer__base p {
	margin: 0;
}

@media (max-width: 44rem) {
	.site-footer__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

/* ---------------------------------------------------------------
   11. Bands and landing pages
   --------------------------------------------------------------- */

/* Breaks a section out of its centered container to full viewport width.
   body uses overflow-x: clip so the 100vw does not create a scrollbar. */
.band {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: var(--bay) 0;
}

.band__inner {
	width: 100%;
	max-width: 60rem;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.band--dark {
	background: var(--ink-deep);
	color: var(--paper);
}

.band--dark h1,
.band--dark h2,
.band--dark h3 {
	color: var(--paper);
}

.band--dark p {
	color: var(--paper-dim);
}

.band--dark a {
	color: var(--paper);
	text-decoration-color: var(--signal-lift);
}

.band--dark .button {
	background: var(--signal);
	border-color: var(--signal);
	color: var(--ink-deep);
}

.band--dark .button:hover {
	background: var(--signal-lift);
	border-color: var(--signal-lift);
}

.band--dark .rule-top {
	border-top-color: var(--rule-dim);
}

.band--sunk {
	background: var(--paper-sunk);
}

/* Landing pages: hero, proof, steps, objections, close. */

.lander-hero h1 {
	font-size: clamp(2.5rem, 6vw, 4.25rem);
	line-height: 1.02;
	max-width: 16ch;
	margin-bottom: 1.5rem;
}

.lander-hero__dek {
	font-size: var(--step-l);
	line-height: 1.5;
	max-width: 40ch;
	margin-bottom: 2rem;
}

.lander-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem var(--gap);
}

.lander-hero__aside {
	font-family: var(--display);
	font-size: var(--step-s);
	color: var(--paper-dim);
	margin: 0;
}

.section-title {
	font-size: clamp(1.6rem, 3.5vw, 2.25rem);
	max-width: 22ch;
	margin-bottom: 1.5rem;
}

.fit-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: var(--measure);
}

.fit-list li {
	padding: 0.9rem 0 0.9rem 1.6rem;
	border-bottom: 1px solid var(--rule);
	position: relative;
	font-size: var(--step-m);
	line-height: 1.55;
}

.fit-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.55rem;
	width: 0.6rem;
	height: 2px;
	background: var(--signal);
}

.steps {
	list-style: none;
	counter-reset: step;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gap);
}

.steps li {
	counter-increment: step;
	padding-top: 1rem;
	border-top: 2px solid var(--signal);
}

.steps li::before {
	content: counter(step);
	display: block;
	font-family: var(--display);
	font-variant-numeric: tabular-nums;
	font-size: var(--step-s);
	font-weight: 600;
	color: var(--signal);
	margin-bottom: 0.5rem;
}

.steps h3 {
	font-size: var(--step-l);
	margin-bottom: 0.5rem;
}

.steps p {
	font-size: var(--step-m);
	line-height: 1.55;
	color: var(--ink-soft);
	margin: 0;
}

.proof {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gap);
	margin-bottom: 2rem;
}

.proof__figure {
	font-family: var(--display);
	font-variant-numeric: tabular-nums;
	font-size: clamp(2rem, 4.5vw, 2.75rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--signal);
	display: block;
	line-height: 1;
	margin-bottom: 0.5rem;
}

.proof__label {
	font-family: var(--display);
	font-size: var(--step-s);
	line-height: 1.4;
	color: var(--paper-dim);
	margin: 0;
}

.qa {
	max-width: var(--measure);
}

.qa dt {
	font-family: var(--display);
	font-weight: 600;
	font-size: var(--step-m);
	margin-top: 1.75rem;
}

.qa dd {
	margin: 0.5rem 0 0;
	font-size: var(--step-m);
	line-height: 1.6;
	color: var(--ink-soft);
}

.lander-close h2 {
	font-size: clamp(1.8rem, 4vw, 2.5rem);
	max-width: 20ch;
	margin-bottom: 1rem;
}

/* Landing pages drop the site nav, so the footer stays minimal too. */

.lander-foot {
	border-top: 1px solid var(--rule);
	padding: 2rem 0;
	font-family: var(--display);
	font-size: var(--step-s);
	color: var(--ink-soft);
}

@media (max-width: 48rem) {
	.steps,
	.proof {
		grid-template-columns: 1fr;
	}

	.steps li + li,
	.proof > div + div {
		margin-top: 0.5rem;
	}
}

/* ---------------------------------------------------------------
   12. Long-form campaign pages (lp-)
   --------------------------------------------------------------- */

.is-lp {
	background: var(--paper-sunk);
}

.lp-nav {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(241, 240, 235, 0.94);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--rule);
}

.lp-nav__in {
	max-width: 64rem;
	margin: 0 auto;
	padding: 0.9rem 1.6rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.lp-mark {
	font-family: var(--display);
	font-weight: 700;
	font-size: var(--step-m);
	letter-spacing: -0.02em;
	text-decoration: none;
}

.lp-mark span {
	color: var(--signal);
}

.lp-section {
	padding: 4.75rem 0;
	border-top: 1px solid var(--rule);
}

.lp-section__in {
	max-width: 64rem;
	margin: 0 auto;
	padding: 0 1.6rem;
}

.lp-section h2 {
	font-size: clamp(1.9rem, 4vw, 3rem);
	font-weight: 700;
	line-height: 1.08;
	margin: 0;
}

.lp-lede {
	font-size: var(--step-l);
	color: var(--ink-soft);
	max-width: 34em;
	margin: 1.25rem 0 1.5rem;
}

.lp-dark {
	background: var(--ink-deep);
	color: var(--paper);
	border-top: none;
}

.lp-dark h2,
.lp-dark h3 {
	color: var(--paper);
}

.lp-dark .lp-lede,
.lp-dark .lp-small {
	color: var(--paper-dim);
}

/* Buttons */

.button--ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--ink);
}

.button--ghost:hover {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
}

.button--light {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--paper);
}

.button--light:hover {
	background: #fff;
	border-color: #fff;
	color: var(--ink);
}

/* Hero */

.lp-hero {
	border-top: none;
	padding: 5.5rem 0 4rem;
	background: var(--paper);
}

.lp-hero h1 {
	font-size: clamp(2.5rem, 6.4vw, 4.6rem);
	font-weight: 700;
	line-height: 1.06;
	max-width: 15ch;
	margin: 0;
}

.lp-hero .lp-lede {
	margin-top: 1.75rem;
	font-size: 1.3rem;
	color: var(--ink);
}

.lp-cta-row {
	margin-top: 2.1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

.lp-assure {
	margin-top: 1rem;
	max-width: 40em;
	font-size: var(--step-m);
	color: var(--ink-soft);
}

.lp-receipts {
	margin-top: 3.5rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--rule);
	display: flex;
	flex-wrap: wrap;
	gap: 2.1rem;
}

.lp-receipt {
	min-width: 9.5rem;
}

.lp-receipt b {
	display: block;
	font-family: var(--display);
	font-weight: 700;
	font-size: 1.75rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em;
}

.lp-receipt span {
	font-size: var(--step-s);
	color: var(--ink-soft);
}

/* Symptom list */

.lp-broken {
	list-style: none;
	margin: 2.1rem 0 0;
	padding: 0;
	max-width: 44em;
}

.lp-broken li {
	position: relative;
	padding: 0.95rem 0 0.95rem 2.1rem;
	border-bottom: 1px solid var(--rule);
}

.lp-broken li:first-child {
	border-top: 1px solid var(--rule);
}

.lp-broken li::before {
	content: "\00d7";
	position: absolute;
	left: 0.1rem;
	top: 0.85rem;
	color: var(--negative);
	font-family: var(--display);
	font-weight: 700;
	font-size: 1.2rem;
}

/* Two-column comparison */

.lp-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-top: 2.75rem;
	border-top: 1px solid var(--rule-dim);
}

.lp-split > div {
	padding: 1.6rem 1.9rem 1.6rem 0;
}

.lp-split > div + div {
	padding-left: 1.9rem;
	border-left: 1px solid var(--rule-dim);
}

.lp-split h3 {
	font-size: 1.14rem;
	margin-bottom: 0.6rem;
}

.lp-split p {
	margin: 0;
	color: var(--paper-dim);
	font-size: var(--step-m);
}

/* Services */

.lp-svc-row {
	display: grid;
	grid-template-columns: 12rem 1fr;
	gap: 1.9rem;
	padding: 1.6rem 0;
	border-top: 1px solid var(--rule);
}

.lp-svc:first-child .lp-svc-row {
	margin-top: 2.5rem;
}

.lp-svc-row:last-child {
	border-bottom: 1px solid var(--rule);
}

.lp-svc-row h3 {
	font-size: 1.14rem;
	padding-top: 0.1rem;
	margin: 0;
}

.lp-svc-row p {
	margin: 0;
	max-width: 46em;
	font-size: var(--step-m);
}

/* Rows with more than one paragraph wrap their body in .lp-svc-body so the
   two-column grid still gets exactly two children. */
.lp-svc-body p + p,
.lp-svc-body p + .lp-small {
	margin-top: 1.1rem;
}

.lp-tag {
	font-family: var(--display);
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--signal);
	display: block;
	margin-top: 0.45rem;
}

/* Case studies */

.lp-cases {
	margin-top: 2.5rem;
	display: grid;
	gap: 1.1rem;
}

.lp-case {
	border: 1px solid var(--rule);
	padding: 1.6rem;
	background: var(--paper-sunk);
}

.lp-metric {
	font-family: var(--display);
	font-weight: 700;
	font-size: 2.3rem;
	letter-spacing: -0.035em;
	color: var(--positive);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.lp-case h3 {
	margin: 0.75rem 0 0.5rem;
	font-size: 1.14rem;
}

.lp-case p {
	margin: 0;
	font-size: var(--step-m);
	color: var(--ink-soft);
}

.lp-case--stub {
	border-style: dashed;
	background: transparent;
}

/* Numbered process */

.lp-steps {
	margin-top: 2.5rem;
	counter-reset: lpstep;
}

.lp-step {
	display: grid;
	grid-template-columns: 3.5rem 1fr;
	gap: 1.4rem;
	padding: 1.5rem 0;
	border-top: 1px solid var(--rule);
}

.lp-step:last-child {
	border-bottom: 1px solid var(--rule);
}

.lp-step::before {
	counter-increment: lpstep;
	content: counter(lpstep);
	font-family: var(--display);
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--signal);
	font-variant-numeric: tabular-nums;
}

.lp-step h3 {
	font-size: 1.14rem;
	margin: 0;
}

.lp-step p {
	margin: 0.5rem 0 0;
	max-width: 44em;
	font-size: var(--step-m);
}

/* Good fit / bad fit */

.lp-fit {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.75rem;
	margin-top: 2.4rem;
}

.lp-fit h3 {
	font-size: 1.14rem;
	margin: 0;
}

.lp-fit ul {
	list-style: none;
	margin: 0.9rem 0 0;
	padding: 0;
}

.lp-fit li {
	padding: 0.7rem 0 0.7rem 1.6rem;
	position: relative;
	border-bottom: 1px solid var(--rule);
	font-size: var(--step-m);
}

.lp-fit li::before {
	position: absolute;
	left: 0;
	top: 0.65rem;
	font-family: var(--display);
	font-weight: 700;
}

.lp-yes li::before {
	content: "\2713";
	color: var(--positive);
}

.lp-no li::before {
	content: "\00d7";
	color: var(--negative);
}

/* FAQ */

.lp-faq {
	margin-top: 2.25rem;
}

.lp-faq details {
	border-bottom: 1px solid var(--rule);
}

.lp-faq details:first-of-type {
	border-top: 1px solid var(--rule);
}

.lp-faq summary {
	cursor: pointer;
	list-style: none;
	padding: 1.25rem 2.1rem 1.25rem 0;
	position: relative;
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.06rem;
	letter-spacing: -0.01em;
}

.lp-faq summary::-webkit-details-marker {
	display: none;
}

.lp-faq summary::after {
	content: "+";
	position: absolute;
	right: 0.25rem;
	top: 1.1rem;
	font-size: 1.4rem;
	color: var(--signal);
	font-weight: 500;
}

.lp-faq details[open] summary::after {
	content: "\2013";
}

.lp-faq p {
	margin: 0 0 1.25rem;
	max-width: 46em;
	font-size: var(--step-m);
	color: var(--ink-soft);
}

.lp-small {
	font-size: var(--step-s);
	color: var(--ink-soft);
}

/* Footer and mobile sticky CTA */

.lp-foot {
	background: var(--ink-deep);
	color: var(--paper-dim);
	padding: 2.75rem 0;
	font-size: var(--step-s);
	font-family: var(--display);
}

.lp-foot a {
	color: var(--paper-dim);
}

.lp-foot__in {
	max-width: 64rem;
	margin: 0 auto;
	padding: 0 1.6rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
}

.lp-sticky {
	display: none;
}

@media (max-width: 50rem) {
	.lp-section {
		padding: 3.5rem 0;
	}

	.lp-hero {
		padding: 3.5rem 0 2.75rem;
	}

	.lp-hero .lp-lede {
		font-size: 1.14rem;
	}

	.lp-split {
		grid-template-columns: 1fr;
	}

	.lp-split > div {
		padding: 1.5rem 0;
	}

	.lp-split > div + div {
		padding-left: 0;
		border-left: none;
		border-top: 1px solid var(--rule-dim);
	}

	.lp-svc-row {
		grid-template-columns: 1fr;
		gap: 0.6rem;
	}

	.lp-fit {
		grid-template-columns: 1fr;
		gap: 1.6rem;
	}

	.lp-receipts {
		gap: 1.5rem;
	}

	.lp-receipt {
		min-width: 8rem;
	}

	body.is-lp {
		padding-bottom: 4.6rem;
	}

	.lp-nav .button {
		display: none;
	}

	.lp-sticky {
		display: block;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 50;
		background: var(--ink-deep);
		padding: 0.7rem 1rem;
		border-top: 1px solid var(--rule-dim);
	}

	.lp-sticky .button {
		display: block;
		text-align: center;
		width: 100%;
	}
}

/* Booking form */

.booking__status,
.booking__hint {
	font-family: var(--display);
	font-size: var(--step-m);
	color: var(--ink-soft);
}

.booking__grid {
	display: grid;
	grid-template-columns: 21rem 1fr;
	gap: 2.5rem;
	border-top: 1px solid var(--rule);
	padding-top: 1.75rem;
}

.booking h3 {
	font-family: var(--display);
	font-size: 1.06rem;
	margin: 0 0 0.9rem;
}

/* Month calendar */

.cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.cal__month {
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.06rem;
	font-variant-numeric: tabular-nums;
}

.cal__nav {
	font-family: var(--display);
	font-size: 1.3rem;
	line-height: 1;
	width: 2.1rem;
	height: 2.1rem;
	background: transparent;
	border: 1px solid var(--rule);
	color: var(--ink);
	cursor: pointer;
}

.cal__nav:hover:not(:disabled) {
	border-color: var(--ink);
}

.cal__nav:disabled {
	opacity: 0.3;
	cursor: default;
}

.cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0.25rem;
}

.cal__dow {
	font-family: var(--display);
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--ink-soft);
	text-align: center;
	padding-bottom: 0.4rem;
}

.cal__blank {
	display: block;
}

.cal__day {
	font-family: var(--display);
	font-size: var(--step-m);
	font-variant-numeric: tabular-nums;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid transparent;
	color: var(--ink-soft);
	padding: 0;
	cursor: default;
}

.cal__day.is-open {
	color: var(--ink);
	font-weight: 600;
	border-color: var(--rule);
	background: var(--paper);
	cursor: pointer;
}

.cal__day.is-open:hover {
	border-color: var(--ink);
}

.cal__day.is-on {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}

.cal__day.is-off {
	opacity: 0.45;
}

.cal__day.is-today:not(.is-on) {
	box-shadow: inset 0 -2px 0 var(--signal);
}

.cal__loading {
	font-family: var(--display);
	font-size: var(--step-s);
	color: var(--ink-soft);
	margin: 0.9rem 0 0;
}

/* Times */

.booking__tz {
	font-family: var(--display);
	font-size: var(--step-s);
	color: var(--ink-soft);
	margin: -0.5rem 0 1rem;
}

.booking__timelist {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
	gap: 0.4rem;
}

.booking__time {
	font-family: var(--display);
	font-size: var(--step-m);
	font-variant-numeric: tabular-nums;
	background: transparent;
	border: 1px solid var(--rule);
	color: var(--ink);
	padding: 0.7rem 0.5rem;
	cursor: pointer;
}

.booking__time:hover {
	border-color: var(--ink);
}

.booking__time.is-on {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}

/* Details */

.booking__form {
	margin-top: 2.5rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--rule);
	max-width: 30rem;
}

.booking__chosen {
	font-family: var(--display);
	font-size: var(--step-m);
	color: var(--signal);
	margin-bottom: 1.5rem;
}

.booking__req {
	color: var(--negative);
	font-weight: 700;
}

.booking__legend {
	font-family: var(--display);
	font-size: var(--step-s);
	color: var(--ink-soft);
	margin: -0.75rem 0 1.5rem;
}

.booking__field {
	margin-bottom: 1.1rem;
}

.booking__field label {
	display: block;
	font-family: var(--display);
	font-size: var(--step-s);
	margin-bottom: 0.35rem;
}

.booking__field input,
.booking__field select {
	width: 100%;
	font-family: var(--display);
	font-size: var(--step-m);
	padding: 0.65rem 0.7rem;
	border: 1px solid var(--rule);
	background: var(--paper);
	color: var(--ink);
}

.booking__field input:focus,
.booking__field select:focus {
	border-color: var(--ink);
}

.booking__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.booking__error:empty {
	display: none;
}

.booking__error {
	font-family: var(--display);
	font-size: var(--step-s);
	color: var(--negative);
	margin: 0 0 1rem;
}

.booking__done {
	border-top: 2px solid var(--positive);
	padding-top: 1.5rem;
	max-width: var(--measure);
}

.booking__done h3 {
	font-size: 1.5rem;
}

@media (max-width: 46rem) {
	.booking__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

.page-lead {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2.5rem;
	align-items: start;
	margin-bottom: var(--bay);
}

.page-lead__text .page-header {
	margin-bottom: 1.5rem;
}

.page-lead__text .entry-content p:last-child {
	margin-bottom: 0;
}

.page-lead--stacked {
	/* Flex rather than block, so the figure can be pulled above the text
	   without reordering the markup (text stays first for screen readers). */
	display: flex;
	flex-direction: column;
}

/* Wide sources get a full-bleed band. Cropping a room shot is fine: the
   width is where the information is. Cropping a portrait is not, which is
   why this only applies to landscape images. */
.page-lead--stacked .page-hero {
	order: -1;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: 3rem;
	overflow: hidden;
	background: var(--ink-deep);
}

.page-lead--stacked .page-hero img {
	width: 100%;
	height: clamp(14rem, 32vw, 26rem);
	max-height: none;
	object-fit: cover;
	object-position: center 45%;
}

.page-hero {
	margin: 0;
	justify-self: end;
}

.page-hero img {
	display: block;
	width: auto;
	max-width: 100%;
	/* No crop, no forced ratio. The photo keeps its own shape and sits
	   beside the text at whatever size that produces. */
	max-height: 18rem;
	height: auto;
}

@media (max-width: 52rem) {
	.page-lead {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}

	.page-hero {
		justify-self: start;
		order: -1;
	}

	.page-hero img {
		max-height: 14rem;
	}
}

/* Symmetric --bay, same rhythm as every other section. Adjacent margins
   collapse, so stacked sections still sit one bay apart rather than two. */
.services {
	margin: var(--bay) 0;
}

/* list-heading is a quiet label on archives. Here it is a section title above
   major content, so it takes real size and drops its rule: the first service
   row already draws one. */
.services > .list-heading {
	font-size: clamp(1.6rem, 3.5vw, 2.25rem);
	font-weight: 600;
	color: var(--ink);
	letter-spacing: -0.02em;
	line-height: 1.1;
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 0.75rem;
}

.services .lp-svc:first-child .lp-svc-row {
	margin-top: 0;
}

.services .lp-svc-row {
	grid-template-columns: 14rem 1fr;
}

.services .lp-fit {
	margin-top: 1.5rem;
}

@media (max-width: 52rem) {
	.services .lp-svc-row {
		grid-template-columns: 1fr;
	}
}

/* Clients and experience */

.clients {
	margin: var(--bay) 0;
	padding: 1.5rem 0;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}

.clients__heading {
	font-family: var(--display);
	font-size: var(--step-s);
	font-weight: 500;
	color: var(--ink-soft);
	margin-bottom: 1.1rem;
}

.clients__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.clients__name {
	font-family: var(--display);
	font-weight: 600;
	font-size: var(--step-l);
	letter-spacing: -0.02em;
	color: var(--ink);
	opacity: 0.75;
}

.clients__logo {
	display: block;
	width: auto;
	height: 1.9rem;
	/* Desaturated so a wall of brand colours does not outshout the page.
	   Drop this rule if the logos look washed out. */
	filter: grayscale(1);
	opacity: 0.75;
}

@media (max-width: 40rem) {
	.clients__list {
		gap: 0.75rem 1.5rem;
	}

	.clients__name {
		font-size: var(--step-m);
	}
}

/* Gravity Forms.
   Three overlapping blocks used to live here from debugging why the submit
   button stayed blue. The cause was load order, not selectors, so only the
   custom properties and the forced block below do any work. The rules that
   targeted GF's older .gravity-theme class have been removed: that class is
   not on the markup GF 3.x outputs, so none of them ever applied. */

.gform_wrapper .gform_fields {
	grid-row-gap: 1.4rem;
}

.gform_wrapper .gfield_required {
	color: var(--negative);
}

.gform_wrapper textarea {
	font-family: var(--body);
	font-size: var(--step-body);
	line-height: 1.5;
	min-height: 11rem;
}

.gform_wrapper .gfield_description {
	font-family: var(--display);
	font-size: var(--step-s);
	color: var(--ink-soft);
	padding-top: 0.4rem;
}

.gform_wrapper .gform_footer {
	margin-top: 1.75rem;
	padding: 0;
}

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message,
.gform_wrapper .gform_validation_errors {
	font-family: var(--display);
	font-size: var(--step-s);
	background: transparent;
	border: 0;
	border-left: 3px solid var(--negative);
	border-radius: 0;
	box-shadow: none;
	color: var(--negative);
	padding: 0.2rem 0 0.2rem 0.75rem;
}

.gform_confirmation_message {
	border-top: 2px solid var(--positive);
	padding-top: 1.5rem;
	max-width: var(--measure);
}

/* Gravity's newer theme framework ("orbital") uses its own class and CSS
   custom properties, so the .gravity-theme selectors above miss it. These
   cover both, and set the framework's own variables where it exposes them. */

.gform_wrapper {
	--gf-ctrl-border-color: var(--rule);
	--gf-ctrl-radius: 0;
	--gf-ctrl-btn-bg-color-primary: var(--ink);
	--gf-ctrl-btn-bg-color-hover-primary: var(--signal);
	--gf-ctrl-btn-border-color-primary: var(--ink);
	--gf-ctrl-btn-border-color-hover-primary: var(--signal);
	--gf-ctrl-btn-color-primary: var(--paper);
	--gf-ctrl-btn-color-hover-primary: var(--ink);
	--gf-ctrl-btn-radius: 0;
	--gf-ctrl-btn-font-family: var(--display);
	--gf-color-primary: var(--ink);
	--gf-color-primary-darker: var(--signal);
	--gf-local-radius: 0;
}

.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer button,
.gform_wrapper .gform_button {
	font-family: var(--display);
	font-size: var(--step-m);
	font-weight: 600;
	line-height: 1.2;
	padding: 0.7rem 1.1rem;
	border: 1px solid var(--ink);
	border-radius: 0;
	background: var(--ink);
	color: var(--paper);
	cursor: pointer;
}

.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_footer button:hover,
.gform_wrapper .gform_button:hover {
	background: var(--signal);
	border-color: var(--signal);
	color: var(--ink);
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="tel"],
.gform_wrapper select,
.gform_wrapper textarea {
	width: 100%;
	max-width: none;
	font-family: var(--display);
	border-radius: 0;
	border-color: var(--rule);
	background: var(--paper);
	color: var(--ink);
}

.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
	border-color: var(--ink);
	outline: 2px solid var(--signal);
	outline-offset: 1px;
	box-shadow: none;
}

.gform_wrapper .gfield_label {
	font-family: var(--display);
	font-weight: 600;
	color: var(--ink);
}

/* Gravity's stylesheet is enqueued after the theme's, so equal-specificity
   rules lose on order alone. These few properties are forced. Keep the list
   short: everything else above wins normally. */

.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer button,
.gform_wrapper .gform_button,
.gform_wrapper button.gform-button,
.gform-theme .gform_footer button {
	background: var(--ink) !important;
	background-image: none !important;
	border: 1px solid var(--ink) !important;
	border-radius: 0 !important;
	color: var(--paper) !important;
	font-family: var(--display) !important;
	font-size: var(--step-m) !important;
	font-weight: 600 !important;
	padding: 0.7rem 1.1rem !important;
	box-shadow: none !important;
}

.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_footer button:hover,
.gform_wrapper .gform_button:hover,
.gform_wrapper button.gform-button:hover,
.gform-theme .gform_footer button:hover {
	background: var(--signal) !important;
	border-color: var(--signal) !important;
	color: var(--ink) !important;
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="tel"],
.gform_wrapper select,
.gform_wrapper textarea {
	border-radius: 0 !important;
	border-color: var(--rule) !important;
	background-color: var(--paper) !important;
	font-family: var(--display) !important;
}

/* Contact form */

.contact-lead {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 17rem;
	gap: 3rem;
	align-items: start;
	margin-bottom: var(--bay);
}

.contact-aside {
	border-top: 2px solid var(--signal);
	padding-top: 1.25rem;
}

.contact-aside h2 {
	font-size: var(--step-m);
	margin-bottom: 0.5rem;
}

.contact-aside h2 + p {
	margin-bottom: 1rem;
}

.contact-aside p {
	font-family: var(--display);
	font-size: var(--step-s);
	line-height: 1.55;
	color: var(--ink-soft);
}

.contact-aside p:last-child {
	margin-bottom: 0;
}

/* Admin-only notice on the contact page when no form shortcode is present. */
.form-error {
	font-family: var(--display);
	font-size: var(--step-m);
	color: var(--negative);
	border-left: 3px solid var(--negative);
	padding-left: 1rem;
	max-width: 34rem;
}

@media (max-width: 52rem) {
	.contact-lead {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
}

/* Speaking */

.talks {
	margin-bottom: var(--bay);
}

.talk {
	display: grid;
	grid-template-columns: var(--rail) minmax(0, 1fr);
	gap: 0 var(--gap);
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--rule);
}

.talk__date {
	font-family: var(--display);
	font-variant-numeric: tabular-nums;
	font-size: var(--step-s);
	line-height: 1.6;
	color: var(--ink-soft);
	padding-top: 0.2rem;
	white-space: nowrap;
}

.talk__year {
	color: var(--signal);
	font-weight: 600;
}

.talk__title {
	font-size: var(--step-l);
	line-height: 1.2;
	margin-bottom: 0.35rem;
}

.talk__title a {
	text-decoration: none;
}

.talk__title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--signal);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.talk__meta {
	font-family: var(--display);
	font-size: var(--step-s);
	color: var(--ink-soft);
	margin: 0;
}

.talk__dek {
	font-size: var(--step-m);
	line-height: 1.55;
	color: var(--ink-soft);
	margin: 0.5rem 0 0;
	max-width: var(--measure);
}

.talk__image {
	margin: 0 0 1rem;
}

.talk__image img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: var(--paper-sunk);
}

.talk-briefs {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 44rem;
}

.talk-brief {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	gap: 1.1rem;
	align-items: center;
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--rule);
}

.talk-brief__thumb img {
	display: block;
	width: 4.5rem;
	height: 4.5rem;
	object-fit: cover;
	background: var(--paper-sunk);
}

/* Keeps the text column aligned when a talk has no image yet. */
.talk-brief__thumb:empty {
	height: 4.5rem;
	background: var(--paper-sunk);
}

.talk-brief__date {
	font-family: var(--display);
	font-variant-numeric: tabular-nums;
	font-size: var(--step-s);
	font-weight: 600;
	color: var(--signal);
	display: block;
}

.talk-brief__title {
	font-family: var(--display);
	font-size: var(--step-m);
	font-weight: 600;
	line-height: 1.3;
	display: block;
	margin: 0.15rem 0;
}

.talk-brief__event {
	font-family: var(--display);
	font-size: var(--step-s);
	color: var(--ink-soft);
	display: block;
}

.talk__credit,
.talk-brief__credit {
	font-family: var(--display);
	font-size: 0.75rem;
	color: var(--ink-soft);
	display: block;
	margin-top: 0.3rem;
}

@media (max-width: 40rem) {
	.talk {
		grid-template-columns: 1fr;
		gap: 0.35rem;
	}

	.talk__date {
		padding-top: 0;
	}
}

/* ---------------------------------------------------------------
   13. Narrow screens
   --------------------------------------------------------------- */

@media (max-width: 40rem) {
	:root {
		--bay: 3rem;
		--gap: 1.25rem;
	}

	.post-item {
		grid-template-columns: 1fr;
		gap: 0.35rem;
	}

	.post-item__date {
		padding-top: 0;
	}

	.post-item__body {
		flex-direction: column;
		gap: 0.75rem;
	}

	.post-item__thumb {
		flex: 0 0 auto;
		order: 0;
		width: 100%;
	}

	.lede__title {
		max-width: none;
	}
}

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