/*
Theme Name: ItsMeDuncan
Theme URI: https://itsmeduncan.com
Author: Duncan Grazier
Author URI: https://itsmeduncan.com
Description: An editorial block theme for itsmeduncan.com. Full-site editing, local Newsreader / Libre Franklin, and a light+dark paper-and-ink system built on CSS light-dark() with a single brick accent.
Version: 6.0.0
Requires at least: 6.4
Tested up to: 6.7
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: itsmeduncan
Tags: blog, one-column, custom-menu, featured-images, custom-logo, editor-style, full-site-editing, block-patterns
*/

/* ============================================
   TOKENS
   Runtime source of truth. theme.json carries
   light values only, for the editor UI.
   ============================================ */
:root {
	color-scheme: light dark;

	/* Editorial palette: paper and ink with one brick accent. The accent is
	   for signals (current nav, numerals, the CTA), not decoration. Running
	   links are ink with a rule under them. */
	--imd-bg: light-dark(#fdfdfb, #0e0e0d);
	--imd-surface: light-dark(#f4f3ef, #181816);
	--imd-ink: light-dark(#121212, #f3f2ee);
	--imd-body: light-dark(#404040, #bdbbb5);
	--imd-prose: light-dark(#1d1d1d, #dfddd7);
	--imd-muted: light-dark(#6b6b6b, #8f8d88);
	--imd-nav: light-dark(#3f3f3f, #c9c7c1);
	--imd-line: light-dark(#e2e0da, #2b2a27);
	--imd-rule: light-dark(#121212, #f3f2ee);
	--imd-accent: light-dark(#a3301c, #ee8068);
	--imd-accent-hover: light-dark(#7c2010, #f6a592);
	--imd-on-accent: light-dark(#ffffff, #1a0905);
	--imd-placeholder: light-dark(#9a9a9a, #5f5e5a);

	/* Layout, defined once here so every screen inherits the same values.
	   --imd-shell is the column every page, header and footer share; every
	   left and right edge on the site lands on it. --imd-measure caps
	   running text only (about 70 characters at the prose size); essays put
	   their share links and contents in a rail beside it, so the page still
	   spans the full shell. */
	--imd-shell: 880px;
	--imd-measure: 640px;

	--imd-serif: Newsreader, Georgia, "Times New Roman", serif;
	--imd-sans:
		"Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--imd-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Fallback for engines without light-dark(). The manual toggle is inert
   here and the page follows the OS. Accepted degradation. */
@supports not (color: light-dark(#000, #fff)) {
	:root {
		--imd-bg: #fdfdfb;
		--imd-surface: #f4f3ef;
		--imd-ink: #121212;
		--imd-body: #404040;
		--imd-prose: #1d1d1d;
		--imd-muted: #6b6b6b;
		--imd-nav: #3f3f3f;
		--imd-line: #e2e0da;
		--imd-rule: #121212;
		--imd-accent: #a3301c;
		--imd-accent-hover: #7c2010;
		--imd-on-accent: #ffffff;
		--imd-placeholder: #9a9a9a;
	}
	@media (prefers-color-scheme: dark) {
		:root {
			--imd-bg: #0e0e0d;
			--imd-surface: #181816;
			--imd-ink: #f3f2ee;
			--imd-body: #bdbbb5;
			--imd-prose: #dfddd7;
			--imd-muted: #8f8d88;
			--imd-nav: #c9c7c1;
			--imd-line: #2b2a27;
			--imd-rule: #f3f2ee;
			--imd-accent: #ee8068;
			--imd-accent-hover: #f6a592;
			--imd-on-accent: #1a0905;
			--imd-placeholder: #5f5e5a;
		}
	}
}

/* `html body` beats the `body{}` rule theme.json emits, without !important,
   regardless of stylesheet enqueue order. */
html body {
	background: var(--imd-bg);
	color: var(--imd-ink);
	font-family: var(--imd-serif);
	font-optical-sizing: auto;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.55;
	margin: 0;
}

a {
	color: var(--imd-accent);
	text-decoration: none;
}
a:hover {
	color: var(--imd-accent-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}
input::placeholder {
	color: var(--imd-placeholder);
}

.mono {
	font-family: var(--imd-sans);
}

.label {
	font-family: var(--imd-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--imd-ink);
	margin: 0;
}

/* ============================================
   BASE
   ============================================ */
html {
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	scroll-padding-top: 90px;
}

::selection {
	background: color-mix(in srgb, var(--imd-accent) 30%, transparent);
	color: var(--imd-ink);
}

/* Skip link */
.skip-link {
	position: absolute;
	left: -9999px;
	font-family: var(--imd-sans);
	font-size: 0.8125rem;
}
.skip-link:focus {
	left: 12px;
	top: 12px;
	z-index: 100;
	padding: 8px 14px;
	background: var(--imd-accent);
	color: var(--imd-on-accent);
	border-radius: 7px;
}

/* Mobile nav overlay */
.site-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--imd-bg);
	padding-top: 4rem;
}

/* ============================================
   BUTTONS (ghost variant; primary via theme.json)
   ============================================ */
.wp-block-button__link {
	transition:
		transform 0.06s ease,
		background 0.15s ease,
		border-color 0.15s ease;
}
.wp-block-button__link:active {
	transform: translateY(1px);
}

/* ============================================
   SEARCH BLOCK
   ============================================ */
.wp-block-search__input {
	background: var(--imd-surface);
	border: 1px solid var(--imd-line);
	color: var(--imd-ink);
	font-family: var(--imd-serif);
}
.wp-block-search__button {
	font-family: var(--imd-sans);
	background: var(--imd-accent);
	color: var(--imd-on-accent);
	border: none;
}

/* ============================================
   HEADER
   ============================================ */
.site-header {
	border-bottom: 1px solid var(--imd-line);
}

.site-header__inner {
	box-sizing: border-box;
	max-width: var(--imd-shell, 880px);
	margin: 0 auto;
	padding: 22px 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.site-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}
.site-brand:hover {
	text-decoration: none;
}
.site-brand__avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}
.site-brand__name {
	font-family: var(--imd-serif);
	font-weight: 500;
	font-size: 21px;
	letter-spacing: -0.01em;
	color: var(--imd-ink);
}

.site-nav-wrap {
	display: flex;
	align-items: center;
	gap: 20px;
}

.site-nav {
	font-family: var(--imd-sans);
	font-size: 14px;
	font-weight: 500;
}
.site-nav .wp-block-navigation__container {
	gap: 20px;
}
.site-header .site-nav a.wp-block-navigation-item__content {
	color: var(--imd-nav);
	text-decoration: none;
}
.site-header .site-nav a.wp-block-navigation-item__content:hover {
	color: var(--imd-accent-hover);
	text-decoration: none;
}
.site-header .site-nav .current-menu-item > a.wp-block-navigation-item__content,
.site-header
	.site-nav
	.current_page_item
	> a.wp-block-navigation-item__content {
	color: var(--imd-ink);
	text-decoration: underline;
	text-decoration-color: var(--imd-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 8px;
}
/* The arrow marks exactly what opens in a new tab. A PHP filter adds
   target="_blank" to every off-site link in rendered output, so this keys
   off that one decision rather than re-deriving "external" from the href. */
a[target="_blank"]::after {
	content: "↗";
	font-size: 0.7em;
	margin-left: 2px;
	display: inline-block;
	text-decoration: none;
}

.imd-theme-toggle {
	border: none;
	background: none;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	padding: 0;
	color: var(--imd-nav);
	font-family: inherit;
}
.imd-theme-toggle:hover {
	color: var(--imd-accent-hover);
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
	border-top: 1px solid var(--imd-line);
	margin-top: auto;
}

.site-footer__inner {
	box-sizing: border-box;
	max-width: var(--imd-shell, 880px);
	margin: 0 auto;
	padding: 20px 28px 44px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	font-family: var(--imd-sans);
	font-size: 13px;
	color: var(--imd-muted);
}
.site-footer__inner a {
	color: var(--imd-muted);
}
.site-footer__inner a:hover {
	color: var(--imd-accent-hover);
}

/* ============================================
   NEWSLETTER SIGNUP
   Shared part (parts/newsletter.html) placed at
   the end of each template's <main>, so it sits
   right after the content on every page. Home skips
   it (the hero carries its own signup), and so does
   Mentorship, which ends on one action: the intro call.
   Uses theme tokens, so it tracks light + dark.
   ============================================ */
.itsmeduncan-newsletter {
	box-sizing: border-box;
	margin: 72px 0 0;
	padding: 18px 0 56px;
	border-top: 2px solid var(--imd-rule);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 48px;
	align-items: start;
}
.itsmeduncan-newsletter__title {
	font-family: var(--imd-serif);
	font-weight: 500;
	font-size: 26px;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--imd-ink);
	margin: 0;
}
.itsmeduncan-newsletter__lede {
	grid-column: 1;
	font-family: var(--imd-serif);
	font-size: 17px;
	line-height: 1.5;
	color: var(--imd-body);
	margin: 8px 0 0;
}
.itsmeduncan-newsletter .email-underline {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
}

/* Primary booking CTA on the mentorship page: an accent fill and a mono
   label, left-aligned inside about-section. */
.mentorship-cta {
	display: inline-block;
	margin: 4px 0 0;
	font-family: var(--imd-sans);
	font-size: 15px;
	font-weight: 600;
	background: var(--imd-ink);
	color: var(--imd-bg);
	padding: 14px 22px;
	border-radius: 2px;
	text-decoration: none;
	transition: background 0.15s ease;
}
.mentorship-cta:hover {
	background: var(--imd-accent);
	color: var(--imd-on-accent);
	text-decoration: none;
}

/* Client quote on the mentorship page. Quotes stack in one section with a
   rule between them, so a second quote needs no new CSS. The section label
   already draws the rule above the first. */
.testimonial {
	margin: 0;
	padding: 4px 0;
}
.testimonial + .testimonial {
	border-top: 1px solid var(--imd-line);
	margin-top: 16px;
	padding-top: 20px;
}
.testimonial__quote {
	margin: 0;
	padding: 0 0 0 22px;
	border-left: 3px solid var(--imd-accent);
}
.testimonial__quote p {
	font-size: 22px;
	line-height: 1.45;
	font-style: italic;
	color: var(--imd-prose);
	margin: 0;
}
.testimonial__source {
	font-family: var(--imd-sans);
	font-size: 13px;
	color: var(--imd-muted);
	margin: 12px 0 0 25px;
}

/* ============================================
   PAGE SHELLS
   --imd-shell drives header, main and footer
   together so each screen has one width.
   ============================================ */
.content {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--imd-shell, 880px);
	margin: 0 auto;
	padding: 0 28px;
	/* .wp-site-blocks is a flex column (see 404 section below) so the
	   footer can pin to the viewport bottom on short pages. .content is
	   the direct flex child that must grow to consume the leftover
	   space; margin-top:auto on .site-footer itself does nothing because
	   .site-footer is nested one level inside the <footer> flex item,
	   not the flex item itself.

	   width:100% is required alongside flex-grow: a flex item whose
	   cross-size (width, since the container is a column) computes to
	   auto and whose cross-axis margins are auto (margin:0 auto, for
	   centering) does NOT stretch to fill the container -- the auto
	   margins take priority over align-items:stretch per the flexbox
	   spec. That was invisible on every page with enough text to hit
	   max-width anyway (shrink-to-fit lands on the same box), but it
	   shrank .content to its own short content's width -- and threw its
	   centering off -- on the near-empty Whelk page once its project
	   layout was removed. width:100% gives it a definite cross size so
	   it stretches like a normal block, then max-width/margin:auto
	   center it exactly as before. */
	flex: 1 0 auto;
}

/* ============================================
   HOME HERO
   ============================================ */
.home-hero {
	padding: 80px 0 64px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 248px;
	gap: 64px;
	align-items: start;
}

.home-hero__title {
	font-weight: 400;
	font-size: 58px;
	line-height: 1.02;
	letter-spacing: -0.025em;
	margin: 0;
	max-width: 15ch;
}

.home-hero__lede {
	font-size: 21px;
	line-height: 1.5;
	color: var(--imd-body);
	margin: 28px 0 0;
	max-width: 34em;
}

.home-hero__lede a,
.about-head__intro a,
.about-section__body a {
	color: var(--imd-ink);
	text-decoration: underline;
	text-decoration-color: var(--imd-muted);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}
.home-hero__lede a:hover,
.about-head__intro a:hover,
.about-section__body a:hover {
	color: var(--imd-accent);
	text-decoration-color: var(--imd-accent);
}

/* One line of career proof under the lede. The full account is on About. */
.home-hero__proof {
	font-family: var(--imd-sans);
	font-size: 14px;
	line-height: 1.6;
	color: var(--imd-muted);
	margin: 20px 0 0;
	max-width: 52em;
}

.home-hero__aside {
	border-top: 2px solid var(--imd-rule);
	padding-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.home-hero__aside .label {
	margin-bottom: 10px;
}

.now-entry__name {
	font-weight: 500;
	font-size: 20px;
	line-height: 1.2;
	margin: 0;
}
.now-entry__name a {
	color: var(--imd-ink);
}
.now-entry__name a:hover {
	color: var(--imd-accent-hover);
	text-decoration: none;
}
.now-entry__desc {
	font-size: 16px;
	line-height: 1.45;
	color: var(--imd-body);
	margin: 4px 0 0;
}

.home-hero__featured .label {
	border-top: 1px solid var(--imd-line);
	padding-top: 16px;
}
.featured__title {
	font-size: 19px;
	line-height: 1.3;
	margin: 0;
}
.featured__title a {
	color: var(--imd-ink);
}
.featured__title a:hover {
	color: var(--imd-accent-hover);
	text-decoration: none;
}
.featured__meta {
	font-family: var(--imd-sans);
	font-size: 12.5px;
	color: var(--imd-muted);
	margin: 6px 0 0;
}

/* Whelk screenshot under the hero: evidence for the headline. */
.home-shot {
	margin: 0 0 72px;
}
.home-shot img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--imd-line);
	border-radius: 4px;
}
.home-shot figcaption {
	font-family: var(--imd-sans);
	font-size: 13px;
	color: var(--imd-muted);
	margin-top: 12px;
}

/* ============================================
   UNDERLINE EMAIL CAPTURE
   The Jetpack subscription form, in the hero and
   in the site-wide newsletter card.
   ============================================ */
.email-underline {
	margin-top: 36px;
	max-width: 440px;
}
.itsmeduncan-newsletter .email-underline {
	margin: 0 auto;
}
.email-underline__label {
	font-family: var(--imd-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--imd-ink);
	margin: 0 0 6px;
}

.email-underline form {
	display: flex;
	align-items: center;
	border-bottom: 2px solid var(--imd-rule);
}

/* Jetpack wraps the input and submit button each in a <p> with its own
   vertical margin, which drops the underline well below the field. Flatten
   them so the rule hugs the input. The field's <p> takes the free width. */
.email-underline form p {
	margin: 0;
	padding: 0;
}
.email-underline form #subscribe-email {
	flex: 1;
	min-width: 0;
}

.email-underline input[type="email"] {
	width: 100%;
	border: none;
	background: transparent;
	padding: 7px 0;
	font-family: var(--imd-serif);
	font-size: 19px;
	color: var(--imd-ink);
	outline: none;
}
.email-underline form:focus-within {
	border-bottom-color: var(--imd-accent);
}

.email-underline button {
	border: none;
	border-radius: 0;
	background: transparent;
	font-family: var(--imd-sans);
	font-size: 15px;
	font-weight: 600;
	color: var(--imd-ink);
	cursor: pointer;
	padding: 7px 0 7px 14px;
	white-space: nowrap;
}
.email-underline button:hover {
	background: transparent;
	color: var(--imd-accent-hover);
}

/* ============================================
   SECTION HEADS AND POST ROWS
   Shared by home, archives, related, 404.
   ============================================ */
.sec-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	border-top: 2px solid var(--imd-rule);
	padding-top: 12px;
	margin-bottom: 4px;
}
.sec-head__note {
	font-family: var(--imd-sans);
	font-size: 13px;
	color: var(--imd-muted);
	margin: 0;
}
.sec-more {
	margin: 20px 0 0;
}
.sec-more a {
	font-family: var(--imd-sans);
	font-size: 14px;
	font-weight: 600;
}

.post-rows {
	display: flex;
	flex-direction: column;
}
.post-rows .wp-block-post-template {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.post-row {
	position: relative;
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 16px;
	align-items: baseline;
	padding: 16px 0;
	border-bottom: 1px solid var(--imd-line);
	margin: 0;
}
/* Homepage rows add a third column for the category. */
.post-row--dated {
	grid-template-columns: 96px 1fr auto;
}

/* Zero out the block-gap margins the flow layout injects into grid
   cells, which would otherwise push the title/category out of baseline. */
.post-row > * {
	margin-block: 0;
}
.post-row.is-layout-flow > * + * {
	margin-block-start: 0;
}

/* Zero out the block-gap margin WordPress injects between rows.
   Query Loop wraps each row in an <li>; hand-rendered rows (Tasks 8, 10)
   sit directly in .post-rows with no <li>. Both shapes need it zeroed
   so the hairlines form one continuous ruled list. */
.post-rows .wp-block-post-template > li,
.post-rows > .post-row {
	margin-block: 0;
}

.post-row__date {
	font-family: var(--imd-sans);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: var(--imd-muted);
	margin: 0;
}
.post-row__cat {
	font-family: var(--imd-sans);
	font-size: 13px;
	color: var(--imd-muted);
	margin: 0;
}
.post-row__cat a {
	color: var(--imd-muted);
}

.post-row__title {
	font-family: var(--imd-serif);
	font-weight: 400;
	font-size: 23px;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 0;
}
.post-row__title a {
	color: var(--imd-ink);
	text-decoration: none;
}

/* Stretched link: the whole row is clickable, the accessible name stays
   on the title. Query Loop cannot wrap a row in a single anchor. */
.post-row__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.post-row:hover .post-row__title a {
	color: var(--imd-accent-hover);
	text-decoration: none;
}

/* Category link sits above the stretched link so it stays clickable. */
.post-row__cat a {
	position: relative;
	z-index: 1;
}

/* ============================================
   WRITING INDEX
   ============================================ */

.page-head {
	padding: 80px 0 12px;
}
.page-head__title {
	font-family: var(--imd-serif);
	font-weight: 400;
	font-size: 52px;
	line-height: 1.04;
	letter-spacing: -0.025em;
	margin: 0;
}
/* WordPress's constrained layout centres any child narrower than its
   container, and it does so with !important:
     .is-layout-constrained > :where(:not(.alignleft)...) {
       margin-left: auto !important; margin-right: auto !important; }
   The description carries a 56ch measure, so it was being centred and sat
   indented from its own heading. Specificity cannot win against
   !important, so this matches it rather than dropping the measure. */
.page-head__desc {
	margin-left: 0 !important;
	margin-right: auto !important;
}

.page-head__desc {
	font-size: 21px;
	line-height: 1.5;
	color: var(--imd-body);
	margin: 20px 0 0;
	max-width: 34em;
}

.cat-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 36px 0 0;
	padding: 12px 0 14px;
	border-top: 2px solid var(--imd-rule);
	border-bottom: 1px solid var(--imd-line);
	font-family: var(--imd-sans);
	font-size: 14px;
	font-weight: 500;
}
.cat-filter a {
	color: var(--imd-nav);
}
.cat-filter a:hover {
	color: var(--imd-accent-hover);
}
.cat-filter a.is-current {
	color: var(--imd-ink);
	text-decoration: underline;
	text-decoration-color: var(--imd-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.post-rows--entries {
	padding: 0 0 44px;
}

.post-row--entry {
	align-items: start;
	padding: 22px 0;
}
.post-row--entry .post-row__date {
	padding-top: 7px;
}
.post-row--entry .post-row__title {
	font-size: 26px;
}
.post-row--entry .post-row__excerpt {
	font-size: 17px;
	line-height: 1.5;
	color: var(--imd-body);
	margin: 6px 0 0;
}
.post-row--entry .post-row__cat {
	margin-top: 8px;
}
.post-row--entry .post-row__body > * {
	margin-block-start: 0;
}

.entry-pagination {
	margin-top: 24px;
	font-family: var(--imd-sans);
	font-size: 14px;
	font-weight: 600;
}
.entry-pagination .wp-block-query-pagination-previous:only-child {
	margin-left: auto;
}

/* ============================================
   ESSAY
   ============================================ */

.article {
	padding: 80px 0 0;
}

.article-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 8px;
	align-items: baseline;
	font-family: var(--imd-sans);
	font-size: 13px;
	color: var(--imd-muted);
}
.article-meta p,
.article-meta div {
	margin: 0;
}
.article-meta a {
	color: var(--imd-muted);
}
.article-meta a:hover {
	color: var(--imd-accent-hover);
}

.article-title {
	font-family: var(--imd-serif);
	font-weight: 400;
	font-size: 58px;
	line-height: 1.02;
	letter-spacing: -0.025em;
	margin: 18px 0 0;
	max-width: 20ch;
}

.article-dek {
	font-size: 23px;
	line-height: 1.42;
	color: var(--imd-body);
	margin: 24px 0 0;
	max-width: 30em;
}

/* ============================================
   PROSE
   ============================================ */
.prose {
	font-size: 20px;
	line-height: 1.6;
	color: var(--imd-prose);
	padding-bottom: 8px;
}
.prose > p {
	margin: 22px 0 0;
}
.prose > p:first-child {
	margin-top: 0;
}
/* The share row (and, when a post has enough headings, the TOC after it)
   are prepended into .prose ahead of the real content, which knocks the
   first paragraph off :first-child. Restore its 28px gap by targeting
   the paragraph immediately after whichever chrome element is last. */
.prose > .essay-rail + p {
	margin-top: 0;
}

.prose h2:not(.post-row__title) {
	font-family: var(--imd-serif);
	font-weight: 500;
	font-size: 30px;
	line-height: 1.15;
	color: var(--imd-ink);
	margin: 56px 0 0;
	letter-spacing: -0.015em;
}
.prose > h2:first-child {
	margin-top: 0;
}
/* Same fix as above, for essays that open directly with an H2. */
.prose > .essay-rail + h2 {
	margin-top: 0;
}
.prose h2 + p {
	margin-top: 14px;
}

.prose h3 {
	font-family: var(--imd-serif);
	font-weight: 500;
	font-size: 23px;
	line-height: 1.25;
	color: var(--imd-ink);
	margin-top: 40px;
}

.prose h4 {
	font-family: var(--imd-serif);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.35;
	color: var(--imd-ink);
	margin-top: 32px;
}

.prose strong {
	font-weight: 600;
	color: var(--imd-ink);
}

.prose ul,
.prose ol {
	padding-left: 1.4rem;
	margin: 22px 0 0;
}
.prose li {
	margin-top: 8px;
}

.prose img {
	max-width: 100%;
	height: auto;
	display: block;
	margin-top: 22px;
}

.prose hr {
	border: none;
	border-top: 1px solid var(--imd-line);
	margin: 48px 0 0;
}

.prose a {
	color: var(--imd-ink);
	text-decoration: underline;
	text-decoration-color: var(--imd-muted);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}
.prose a:hover {
	color: var(--imd-accent);
	text-decoration-color: var(--imd-accent);
}
/* The rail, footer and related rows sit inside .prose but are chrome, not
   running text, so they keep the plain link style. */
.prose .essay-rail a,
.prose .article-footer a,
.prose .related a {
	text-decoration: none;
}

.prose blockquote {
	border-left: 3px solid var(--imd-accent);
	margin: 32px 0 0;
	padding: 2px 0 2px 24px;
	font-size: 23px;
	line-height: 1.45;
	font-style: italic;
	color: var(--imd-ink);
}
.prose blockquote p {
	margin: 0;
}

.prose pre,
.prose .wp-block-code,
.prose .wp-block-preformatted {
	border: none;
	border-radius: 0;
	background: var(--imd-surface);
	padding: 16px 20px;
	margin: 28px 0 0;
	font-family: var(--imd-mono);
	font-size: 14px;
	line-height: 1.7;
	color: var(--imd-body);
	overflow-x: auto;
}

.prose table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--imd-sans);
	font-size: 15px;
	line-height: 1.6;
	font-variant-numeric: tabular-nums;
	margin: 28px 0 0;
}
.prose table td,
.prose table th {
	border-bottom: 1px solid var(--imd-line);
	padding: 8px 10px 8px 0;
	text-align: left;
}

/* ============================================
   ESSAY CHROME
   ============================================ */
.share-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	align-items: baseline;
	margin: 0;
	font-family: var(--imd-sans);
	font-size: 14px;
	font-weight: 500;
	color: var(--imd-muted);
}
.share-row a {
	color: var(--imd-ink);
}
.share-row a:hover {
	color: var(--imd-accent);
}

.post-toc {
	margin: 28px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--imd-line);
}
.post-toc .label {
	margin: 0 0 12px;
}
.post-toc__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-family: var(--imd-sans);
	font-size: 14px;
	line-height: 1.35;
}
.post-toc__list a {
	color: var(--imd-body);
}
.post-toc__list a:hover {
	color: var(--imd-accent);
	text-decoration: none;
}

.article-footer {
	border-top: 1px solid var(--imd-line);
	margin-top: 36px;
	padding: 16px 0 0;
	display: flex;
	/* Stacked, not side by side: three tags and the share links overflow the
	   624px column, and the share links wrapped under the tags at an offset. */
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	font-family: var(--imd-sans);
	font-size: 14px;
	color: var(--imd-muted);
}
.article-footer > span > a {
	color: var(--imd-muted);
}
.article-footer > span > a:hover {
	color: var(--imd-accent-hover);
}
.article-footer .share-row--footer {
	margin: 0;
	gap: 8px;
}
.article-footer .share-row--footer a {
	color: var(--imd-ink);
}

.related {
	margin-top: 72px;
	padding: 12px 0 0;
	border-top: 2px solid var(--imd-rule);
}
.related .label {
	margin: 0 0 4px;
}
.post-row--related {
	grid-template-columns: 96px 1fr;
}

/* ============================================
   ABOUT
   ============================================ */

.about-head {
	padding: 80px 0 0;
}
.about-head__avatar {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 20px;
	display: block;
}
.about-head__title {
	font-family: var(--imd-serif);
	font-weight: 400;
	font-size: 52px;
	line-height: 1.04;
	letter-spacing: -0.025em;
	margin: 0;
	max-width: 22ch;
}
.about-head__intro {
	font-size: 21px;
	line-height: 1.5;
	color: var(--imd-prose);
	margin: 28px 0 0;
	max-width: 32em;
}
.about-head__intro + .about-head__intro {
	margin-top: 16px;
}

.about-section {
	padding: 28px 0;
}
.about-section--last {
	padding-bottom: 72px;
}
.about-section > .label {
	border-top: 2px solid var(--imd-rule);
	padding-top: 12px;
	margin: 0 0 16px;
}
.about-section__body {
	font-size: 19px;
	line-height: 1.6;
	color: var(--imd-prose);
	margin: 0;
	max-width: var(--imd-measure);
}
.about-section__note {
	font-size: 17px;
	color: var(--imd-body);
	margin: 12px 0 0;
}

.def-rows {
	display: flex;
	flex-direction: column;
}
.def-row {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 24px;
	align-items: baseline;
	padding: 16px 0;
	border-bottom: 1px solid var(--imd-line);
}
.def-row__term {
	font-weight: 500;
	font-size: 20px;
	margin: 0;
}
.def-row__term a {
	color: var(--imd-ink);
}
.def-row__term a:hover {
	color: var(--imd-accent-hover);
	text-decoration: none;
}
.def-row__desc {
	font-size: 17px;
	line-height: 1.5;
	color: var(--imd-body);
	margin: 0;
}

/* Speaking rows use a mono term instead of a link. */
#speaking .def-row__term {
	font-family: var(--imd-sans);
	font-weight: 500;
	font-size: 13px;
	color: var(--imd-muted);
}
#speaking .def-row__desc {
	font-size: 18px;
	color: var(--imd-ink);
}

.elsewhere {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 18px;
}
.elsewhere p {
	margin: 0;
}
.elsewhere span {
	color: var(--imd-muted);
}

/* ============================================
   404
   ============================================ */
.nf-head {
	padding: 96px 0 48px;
}
.nf-eyebrow {
	font-family: var(--imd-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--imd-accent);
	margin: 0;
}
.nf-title {
	font-family: var(--imd-serif);
	font-weight: 400;
	font-size: 52px;
	line-height: 1.04;
	letter-spacing: -0.025em;
	margin: 16px 0 0;
}
.nf-body {
	font-size: 21px;
	line-height: 1.5;
	color: var(--imd-body);
	margin: 14px 0 0;
}
.nf-recent {
	padding: 0 0 64px;
}

/* Footer pinned to the bottom on short pages. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* ============================================
   RESPONSIVE
   One breakpoint. Grids collapse to one column,
   asides move their hairline from left to top.
   ============================================ */
@media (max-width: 780px) {
	.home-hero {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.post-row,
	.post-row--entry,
	.post-row--related {
		grid-template-columns: 1fr;
		gap: 4px;
	}
	.post-row--entry .post-row__date {
		padding-top: 0;
	}

	.def-row {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.site-footer__inner {
		flex-direction: column;
		gap: 6px;
	}

	.home-hero {
		padding-top: 48px;
	}
	.home-hero__title,
	.article-title,
	.page-head__title,
	.about-head__title,
	.nf-title {
		font-size: 40px;
	}
	.home-hero__lede,
	.page-head__desc,
	.about-head__intro,
	.article-dek {
		font-size: 19px;
	}
	.article,
	.page-head,
	.about-head {
		padding-top: 48px;
	}
	.prose {
		font-size: 19px;
	}

	.itsmeduncan-newsletter {
		grid-template-columns: 1fr;
	}
	.itsmeduncan-newsletter .email-underline {
		grid-column: 1;
		grid-row: auto;
		margin-top: 20px;
	}
}

/* ============================================
   GENERIC PAGE HEAD
   A page puts its title directly above the body
   with no dek between, so three spacings stack:
   .page-head's 8px, WordPress's 24px block-gap
   on .prose, and the 28px opening-paragraph rule
   that exists to clear an essay's dek. Collapse
   them to a single deliberate gap.
   ============================================ */
.content > .page-head:has(+ .prose) {
	padding-bottom: 0;
}
.content > .page-head + .prose {
	margin-top: 0;
}
.content > .page-head + .prose > :first-child {
	margin-top: 20px;
}

/* ============================================
   READING MEASURE AND ESSAY GRID
   Every page spans the 880px shell, and running
   text is capped at --imd-measure. The cap goes on
   the column, not on each child: capping children
   inside a constrained layout makes WordPress
   centre each one (margin-inline: auto with
   !important), which indented every paragraph away
   from its own headings.

   An essay's head (meta, title, dek) spans the
   shell. Its body is a two-column grid: the prose
   at the measure on the left, and the share links
   and contents in a sticky rail on the right, so
   nothing leaves an empty gutter. Related essays
   span both columns after the rail ends.
   ============================================ */
.content .page-head + .prose {
	max-width: var(--imd-measure);
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* The chrome lives inside .prose, so it shares the same left edge. */
.prose > *,
.article > * {
	margin-left: 0 !important;
	margin-right: auto !important;
}

.content--essay .prose {
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid var(--imd-line);
}
.essay-rail {
	margin-bottom: 36px;
}

@media (min-width: 960px) {
	.content--essay .prose {
		display: grid;
		grid-template-columns: minmax(0, var(--imd-measure)) minmax(0, 1fr);
		column-gap: 56px;
		align-items: start;
	}
	/* Auto inline margins shrink a grid item to its content, which
	   collapsed the footer and related rows; in the grid, stretch them. */
	.content--essay .prose > * {
		grid-column: 1;
		margin-right: 0 !important;
	}
	/* Spans every row the prose fills, so position: sticky has the whole
	   article to travel through. Unused implicit rows are zero height. */
	.content--essay .prose > .essay-rail {
		grid-column: 2;
		grid-row: 1 / span 999;
		position: sticky;
		top: 32px;
		margin: 0;
	}
	.content--essay .prose > .related {
		grid-column: 1 / -1;
	}
	/* A narrow rail stacks the share links like the contents list. */
	.essay-rail .share-row {
		flex-direction: column;
		gap: 8px;
	}
}
.essay-rail .share-row > span {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--imd-ink);
}