/*
Theme Name: Stormoen
Theme URI: https://www.mattstormoen.com
Author: Matthew Stormoen
Description: Personal brand theme for a go-to-market and demand generation leader. One-page homepage (hero, achievements, bio, expertise, services, projects, testimonials, recruiter band, writing, contact) fully editable in Appearance → Customize → Homepage, with Projects and Testimonials post types.
Version: 1.1.2
Requires at least: 6.2
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stormoen
Tags: one-column, custom-menu, custom-logo, featured-images, theme-options, translation-ready, blog, portfolio
*/

/* ------------------------------------------------------------
   Tokens
   ------------------------------------------------------------ */
:root {
	--ink: #1B2430;
	--paper: #F3F4EF;
	--tint: #E7E9E1;
	--white: #FFFFFF;
	--accent: #2340D6;
	--marker: #FFD23F;
	--graphite: #59626E;
	--rule: rgba(27, 36, 48, 0.16);
	--rule-light: rgba(255, 255, 255, 0.18);
	--muted-light: rgba(255, 255, 255, 0.68);

	--display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
	--serif: "Source Serif 4", Georgia, "Times New Roman", serif;

	--wrap: 1200px;
	--narrow: 760px;
	--gutter: clamp(20px, 4vw, 48px);
	--section: clamp(72px, 10vw, 136px);
	--radius: 6px;

	/* Type scale: 1.25 ratio from an 18px body */
	--t-xs: 0.8125rem;
	--t-sm: 0.9375rem;
	--t-md: 1.125rem;
	--t-lg: 1.375rem;
	--t-xl: clamp(1.625rem, 2.6vw, 2rem);
	--t-2xl: clamp(2rem, 4.2vw, 3.25rem);
	--t-hero: clamp(2.75rem, 7vw + 1rem, 6.25rem);
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 88px;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--serif);
	font-size: var(--t-md);
	line-height: 1.65;
	font-optical-sizing: auto;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, h5, h6 {
	font-family: var(--display);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 0 0 0.5em;
	text-wrap: balance;
}
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); letter-spacing: -0.01em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.section--ink :focus-visible, .hire :focus-visible { outline-color: var(--marker); }

mark {
	color: inherit;
	background: linear-gradient(transparent 58%, var(--marker) 58%, var(--marker) 92%, transparent 92%);
	padding: 0 0.08em;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link:focus {
	clip: auto; width: auto; height: auto;
	top: 12px; left: 12px; z-index: 1000;
	background: var(--white); color: var(--ink);
	padding: 12px 18px; font-family: var(--display);
}

/* ------------------------------------------------------------
   Layout
   ------------------------------------------------------------ */
.wrap {
	width: 100%;
	max-width: calc(var(--wrap) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.wrap--narrow { max-width: calc(var(--narrow) + var(--gutter) * 2); }

.section { padding-block: var(--section); }
.section.section--flush { padding-top: 0; }
.section--tint { background: var(--tint); }
.section--ink { background: var(--ink); color: var(--white); }
.section--ink a { color: var(--white); }
.section--ink mark { background: none; color: var(--marker); padding: 0; }

/* Heading in a margin column beside the content */
.split { display: grid; gap: 40px; }
.split__head > p { color: var(--graphite); max-width: 36ch; }
.section--ink .split__head > p { color: var(--muted-light); }
.split__head .btn { margin-top: 12px; }

@media (min-width: 960px) {
	.split {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		gap: 64px;
		align-items: start;
	}
	.split__head { position: sticky; top: 112px; }
}

.section-head { max-width: 46rem; margin-bottom: 48px; }
.section-head p { color: var(--graphite); }
.section-head--row {
	max-width: none;
	display: flex; flex-wrap: wrap;
	justify-content: space-between; align-items: end;
	gap: 16px 32px;
}
.section-more { margin-top: 32px; }

/* ------------------------------------------------------------
   Buttons and links
   ------------------------------------------------------------ */
.btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 0.5em;
	min-height: 48px;
	padding: 0.75em 1.4em;
	border: 2px solid var(--accent);
	border-radius: var(--radius);
	background: var(--accent);
	color: var(--white);
	font-family: var(--display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.btn--small { min-height: 40px; padding: 0.5em 1.1em; font-size: var(--t-sm); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--white); }
.btn--light, .section--ink .btn--light { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn--light:hover, .section--ink .btn--light:hover { background: var(--marker); border-color: var(--marker); color: var(--ink); }
.btn--ghost-light, .section--ink .btn--ghost-light { background: transparent; border-color: rgba(255,255,255,.7); color: var(--white); }
.btn--ghost-light:hover { background: var(--white); color: var(--ink); }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.link {
	font-family: var(--display);
	font-weight: 600;
	color: var(--accent);
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* ------------------------------------------------------------
   Header
   ------------------------------------------------------------ */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(243, 244, 239, 0.92);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s;
}
.site-header.is-scrolled { border-bottom-color: var(--rule); }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 0; } }

.site-header__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px;
	min-height: 72px;
}

.wordmark {
	font-family: var(--display);
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--ink);
	text-decoration: none;
}
.custom-logo-link img { max-height: 44px; width: auto; }

.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.site-nav ul a {
	font-family: var(--display);
	font-size: var(--t-sm);
	font-weight: 500;
	color: var(--ink);
	text-decoration: none;
	padding-block: 6px;
	background: linear-gradient(var(--accent), var(--accent)) left bottom / 0 2px no-repeat;
	transition: background-size 0.2s;
}
.site-nav ul a:hover, .site-nav .current-menu-item > a { background-size: 100% 2px; }

.nav-toggle {
	display: none;
	width: 44px; height: 44px;
	border: 0; background: none; padding: 0;
	cursor: pointer; color: var(--ink);
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
	display: block; width: 22px; height: 2px;
	background: currentColor; margin-inline: auto;
	transition: transform 0.2s, opacity 0.2s;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 879px) {
	.nav-toggle { display: block; }
	.site-nav {
		position: absolute; top: 100%; left: 0; right: 0;
		flex-direction: column; align-items: stretch; gap: 20px;
		padding: 16px var(--gutter) 28px;
		background: var(--paper);
		border-bottom: 1px solid var(--rule);
		display: none;
	}
	.site-nav.is-open { display: flex; }
	.site-nav ul { flex-direction: column; gap: 0; }
	.site-nav ul a { display: block; padding-block: 12px; font-size: var(--t-md); border-bottom: 1px solid var(--rule); background: none; }
	.site-nav .btn { align-self: flex-start; }
}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.hero { padding-top: clamp(40px, 7vw, 96px); padding-bottom: clamp(48px, 6vw, 80px); }
.hero__grid { display: grid; gap: 48px; align-items: end; }
@media (min-width: 960px) {
	.hero__grid { grid-template-columns: minmax(0, 7.5fr) minmax(0, 4.5fr); gap: 72px; }
}

.hero__who {
	display: flex; flex-direction: column;
	font-family: var(--display);
	font-size: var(--t-sm);
	line-height: 1.4;
	margin-bottom: 28px;
}
.hero__who strong { font-size: 1rem; font-weight: 700; }
.hero__who span { color: var(--graphite); }

.hero__title {
	font-size: var(--t-hero);
	font-weight: 800;
	line-height: 0.97;
	letter-spacing: -0.045em;
	font-variation-settings: "opsz" 96;
	margin-bottom: 32px;
	text-wrap: initial;
}
.hero__lead { display: inline; }
.hero__follow { display: block; margin-top: 0.06em; }

/* The struck word: drawn once on page load */
.strike { position: relative; display: inline-block; white-space: nowrap; }
.strike__word { color: var(--graphite); opacity: 0.85; }
.strike__line {
	position: absolute;
	left: -4%; width: 108%;
	top: 30%; height: 42%;
	overflow: visible;
	pointer-events: none;
}
.strike__line path {
	fill: none;
	stroke: var(--accent);
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
	stroke-width: clamp(5px, 0.9vw, 11px);
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}
.js .strike__line path { stroke-dashoffset: 1; }
.js .is-loaded .strike__line path { animation: strike-draw 0.7s cubic-bezier(.65,0,.35,1) 0.45s forwards; }
@keyframes strike-draw { to { stroke-dashoffset: 0; } }

.hero__intro {
	font-size: clamp(1.1875rem, 1.6vw, 1.375rem);
	line-height: 1.55;
	max-width: 44ch;
	margin-bottom: 32px;
}

/* Portrait with an offset highlighter swatch */
.hero__portrait { margin: 0; width: min(340px, 84%); justify-self: start; }
@media (min-width: 960px) { .hero__portrait { width: 100%; max-width: 420px; } }
@media (min-width: 960px) { .hero__portrait { justify-self: end; } }
.portrait { position: relative; aspect-ratio: 4 / 5; }
.portrait::before {
	content: "";
	position: absolute; inset: 0;
	transform: translate(18px, 18px);
	background: var(--marker);
	border-radius: var(--radius);
}
.portrait img, .portrait__monogram {
	position: relative;
	width: 100%; height: 100%;
	object-fit: cover;
	border-radius: var(--radius);
	filter: grayscale(0.15) contrast(1.04);
}
.portrait__monogram {
	display: grid; place-items: center;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--display);
	font-size: clamp(5rem, 12vw, 9rem);
	font-weight: 800;
	letter-spacing: -0.06em;
}
.portrait__note {
	margin-top: 36px;
	font-family: var(--display);
	font-size: var(--t-sm);
	line-height: 1.45;
	color: var(--graphite);
	max-width: 34ch;
}
.portrait__note a { color: var(--ink); font-weight: 600; }

/* Brand row */
.logos {
	margin-top: clamp(56px, 7vw, 96px);
	padding-top: 24px;
	border-top: 1px solid var(--rule);
	display: grid; gap: 12px;
}
@media (min-width: 960px) { .logos { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: baseline; } }
.logos__label { font-family: var(--display); font-size: var(--t-sm); color: var(--graphite); margin: 0; }
.logos__list {
	display: flex; flex-wrap: wrap; gap: 8px 36px;
	list-style: none; margin: 0; padding: 0;
	font-family: var(--display);
	font-size: clamp(1.125rem, 1.8vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ink);
	opacity: 0.78;
}

/* ------------------------------------------------------------
   Achievements ledger
   ------------------------------------------------------------ */
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger__row {
	display: grid; gap: 6px 32px;
	padding-block: 28px;
	border-top: 1px solid var(--rule-light);
}
.ledger__row:last-child { border-bottom: 1px solid var(--rule-light); }
.ledger__fig {
	font-family: var(--display);
	font-size: var(--t-xl);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.025em;
	margin: 0;
}
.ledger__text { margin: 0; max-width: 52ch; }
.ledger__org { font-family: var(--display); font-size: var(--t-sm); color: var(--muted-light); margin: 0; }
@media (min-width: 720px) {
	.ledger__row { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
	.ledger__fig { grid-row: span 2; }
}

/* ------------------------------------------------------------
   Bio + timeline
   ------------------------------------------------------------ */
.prose { max-width: 66ch; }
.about__bio { font-size: clamp(1.125rem, 1.4vw, 1.25rem); line-height: 1.7; margin-bottom: 56px; }

.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--ink); }
.timeline li {
	position: relative;
	display: grid; gap: 2px 24px;
	padding: 0 0 22px 28px;
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
	content: "";
	position: absolute; left: -7px; top: 0.55em;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: var(--paper);
	border: 2px solid var(--ink);
}
.timeline li:last-child::before { background: var(--accent); border-color: var(--accent); }
.timeline__when { font-family: var(--display); font-weight: 700; font-size: var(--t-sm); color: var(--accent); }
.timeline__what { font-size: 1.0625rem; }
@media (min-width: 600px) { .timeline li { grid-template-columns: 7.5rem 1fr; } }

/* ------------------------------------------------------------
   Expertise
   ------------------------------------------------------------ */
.expertise { display: grid; gap: 0 48px; margin: 0; }
@media (min-width: 720px) { .expertise { grid-template-columns: 1fr 1fr; } }
.expertise__item { padding-block: 24px 28px; border-top: 1px solid var(--rule); }
.expertise dt { font-family: var(--display); font-size: var(--t-lg); font-weight: 650; letter-spacing: -0.015em; margin-bottom: 8px; }
.expertise dd { margin: 0; color: var(--graphite); }

/* ------------------------------------------------------------
   Services
   ------------------------------------------------------------ */
.services { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.service {
	display: grid; gap: 8px 40px;
	padding-block: 32px;
	border-top: 2px solid var(--ink);
}
.service:last-child { border-bottom: 1px solid var(--rule); }
.service__title { font-size: var(--t-xl); margin: 0; text-wrap: pretty; }
.service__text { margin: 0; max-width: 46ch; }
.service__meta {
	margin: 0;
	font-family: var(--display);
	font-size: var(--t-sm);
	font-weight: 600;
	color: var(--accent);
}
@media (min-width: 720px) {
	.service { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
	.service__title { grid-row: span 2; }
}

/* ------------------------------------------------------------
   Projects
   ------------------------------------------------------------ */
.cases { list-style: none; margin: 0; padding: 0; }
.case {
	display: grid; gap: 20px 48px;
	padding-block: 40px;
	border-top: 2px solid var(--ink);
}
.case:last-child { border-bottom: 1px solid var(--rule); }
.case__client { font-family: var(--display); font-size: var(--t-sm); font-weight: 600; margin-bottom: 10px; }
.case__client span { color: var(--graphite); font-weight: 400; margin-left: 10px; }
.case__title { font-size: var(--t-2xl); margin-bottom: 14px; max-width: 18ch; }
.case__title a { color: inherit; text-decoration: none; }
.case__title a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.case__summary { color: var(--graphite); max-width: 52ch; }
.case__result { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.case__result strong {
	font-family: var(--display);
	font-size: clamp(2.25rem, 4vw, 3.25rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1;
}
.case__result span { font-family: var(--display); font-size: var(--t-sm); color: var(--graphite); max-width: 22ch; }
.case__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
@media (min-width: 900px) {
	.case { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: end; }
	.case--has-img { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); }
}

/* ------------------------------------------------------------
   Testimonials
   ------------------------------------------------------------ */
.quotes { display: grid; gap: 48px 64px; }
@media (min-width: 860px) { .quotes { grid-template-columns: 1fr 1fr; } }
.quote { margin: 0; padding-top: 28px; border-top: 2px solid var(--ink); }
.quote__text { margin: 0 0 24px; font-size: var(--t-lg); line-height: 1.5; font-style: italic; }
.quote__text p::before { content: "\201C"; }
.quote__text p:last-child::after { content: "\201D"; }
.quote__text p + p::before { content: none; }
.quote__by { display: flex; align-items: center; gap: 14px; font-family: var(--display); font-size: var(--t-sm); line-height: 1.35; }
.quote__by strong { display: block; font-size: 1rem; }
.quote__by span span { color: var(--graphite); }
.quote__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }

.editor-hint {
	font-family: var(--display); font-size: var(--t-sm);
	padding: 16px 20px; border: 2px dashed var(--rule); border-radius: var(--radius);
	color: var(--graphite);
}

/* ------------------------------------------------------------
   Recruiter band
   ------------------------------------------------------------ */
.hire { background: var(--accent); color: var(--white); padding-block: clamp(48px, 6vw, 72px); }
.hire__inner { display: grid; gap: 28px; align-items: center; }
.hire h2 { font-size: var(--t-xl); margin-bottom: 8px; }
.hire p { max-width: 56ch; opacity: 0.92; }
@media (min-width: 900px) { .hire__inner { grid-template-columns: 1fr auto; gap: 64px; } }

/* ------------------------------------------------------------
   Posts
   ------------------------------------------------------------ */
.posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 48px 40px; }
@media (min-width: 720px) { .posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .posts { grid-template-columns: repeat(3, 1fr); } }
.post-card { padding-top: 20px; border-top: 1px solid var(--rule); }
.post-card__media { display: block; margin-bottom: 18px; }
.post-card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.post-card__meta { font-family: var(--display); font-size: var(--t-xs); color: var(--graphite); margin-bottom: 8px; }
.post-card__title { font-size: var(--t-lg); margin-bottom: 10px; }
.post-card__title a { color: var(--ink); text-decoration: none; }
.post-card__title a:hover { color: var(--accent); text-decoration: underline; }
.post-card__excerpt { color: var(--graphite); font-size: 1rem; }

.pagination { margin-top: 56px; font-family: var(--display); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers {
	display: inline-grid; place-items: center;
	min-width: 44px; min-height: 44px; padding: 0 12px;
	border: 1px solid var(--rule); border-radius: var(--radius);
	color: var(--ink); text-decoration: none;
}
.pagination .page-numbers.current { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* ------------------------------------------------------------
   Contact
   ------------------------------------------------------------ */
.contact__title { font-size: var(--t-2xl); }
.contact__details { list-style: none; margin: 24px 0; padding: 0; font-family: var(--display); }
.contact__details li { margin-bottom: 6px; color: var(--muted-light); }

.form { display: grid; gap: 22px; max-width: 46rem; }
.form__row { display: grid; gap: 22px; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { margin: 0; display: grid; gap: 8px; }
.field label { font-family: var(--display); font-size: var(--t-sm); font-weight: 500; }
.field__opt { color: var(--muted-light); font-weight: 400; }
.field input, .field select, .field textarea {
	width: 100%;
	font: inherit;
	font-size: 1.0625rem;
	color: var(--white);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--radius);
	padding: 13px 14px;
	min-height: 50px;
}
.field select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
	background-size: 6px 6px;
	background-repeat: no-repeat;
	padding-right: 40px;
}
.field select option { color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus {
	outline: 3px solid var(--marker); outline-offset: 1px;
	border-color: transparent;
	background-color: rgba(255, 255, 255, 0.1);
}
.form .btn { justify-self: start; }
.form__hp { position: absolute; left: -9999px; }
.form-notice { padding: 14px 16px; border-radius: var(--radius); font-family: var(--display); font-size: var(--t-sm); margin: 0; }
.form-notice--ok { background: var(--marker); color: var(--ink); }
.form-notice--err { background: #FCE4E1; color: #8A1C10; }

/* Socials */
.socials { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.socials a {
	display: grid; place-items: center;
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 1px solid var(--rule);
	color: var(--ink);
	transition: background-color 0.15s, color 0.15s;
}
.socials a:hover { background: var(--ink); color: var(--white); }
.socials--light a { border-color: var(--rule-light); color: var(--white); }
.socials--light a:hover { background: var(--white); color: var(--ink); }

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.site-footer { padding-block: 48px; border-top: 1px solid var(--rule); font-family: var(--display); font-size: var(--t-sm); }
.site-footer__inner { display: grid; gap: 24px; align-items: center; }
.site-footer__id p { color: var(--graphite); margin: 4px 0 0; }
.site-footer__legal { color: var(--graphite); margin: 0; }
.footer-nav ul { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 0; padding: 0; }
.footer-nav a { color: var(--ink); text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
@media (min-width: 900px) {
	.site-footer__inner { grid-template-columns: 1fr auto auto; gap: 48px; }
	.site-footer__legal { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------
   Inner pages and posts
   ------------------------------------------------------------ */
.section.page-head { padding-bottom: clamp(32px, 4vw, 56px); }
.page-title { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1; margin: 0; }
.page-intro { margin-top: 20px; color: var(--graphite); max-width: 60ch; }
.article__meta { font-family: var(--display); font-size: var(--t-sm); color: var(--graphite); margin-bottom: 16px; }
.article__meta a { color: var(--graphite); }
.article__result { margin-top: 24px; font-family: var(--display); font-size: var(--t-lg); }
.article__result mark { font-weight: 800; font-size: 1.4em; margin-right: 8px; }
.article__cover { margin: 0 auto clamp(40px, 5vw, 72px); }
.article__cover img { width: 100%; border-radius: var(--radius); }
.article__foot { padding-bottom: var(--section); }

.post-navigation .nav-links { display: grid; gap: 16px; border-top: 1px solid var(--rule); padding-top: 32px; margin-top: 16px; }
@media (min-width: 640px) { .post-navigation .nav-links { grid-template-columns: 1fr 1fr; } .post-navigation .nav-next { text-align: right; } }
.post-navigation a { display: block; font-family: var(--display); font-weight: 600; color: var(--ink); text-decoration: none; line-height: 1.3; }
.post-navigation a span { display: block; font-weight: 400; font-size: var(--t-sm); color: var(--graphite); margin-bottom: 4px; }

/* Block content */
.entry-content { font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.72; }
.entry-content > * + * { margin-top: 1.1em; }
.entry-content h2 { font-size: var(--t-xl); margin-top: 2em; }
.entry-content h3 { margin-top: 1.6em; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.entry-content li + li { margin-top: 0.35em; }
.entry-content blockquote {
	margin: 1.8em 0; padding-left: 24px;
	border-left: 4px solid var(--marker);
	font-size: 1.15em; font-style: italic;
}
.entry-content img { border-radius: var(--radius); }
.entry-content figcaption, .wp-caption-text { font-family: var(--display); font-size: var(--t-sm); color: var(--graphite); margin-top: 8px; }
.entry-content pre, .entry-content code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; }
.entry-content pre { background: var(--ink); color: var(--paper); padding: 20px; border-radius: var(--radius); overflow-x: auto; }
.entry-content hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5em 0; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: 0.95em; }
.entry-content th, .entry-content td { border-bottom: 1px solid var(--rule); padding: 10px 8px; text-align: left; }
.prose--wide { max-width: none; }
.alignwide { max-width: min(1100px, 100%); margin-inline: auto; }
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
.alignleft { float: left; margin: 0.4em 1.5em 1em 0; }
.alignright { float: right; margin: 0.4em 0 1em 1.5em; }
.aligncenter { margin-inline: auto; }
.wp-block-button__link { background: var(--accent); color: var(--white); border-radius: var(--radius); font-family: var(--display); font-weight: 600; }

/* Search form and comments */
.search-form { display: flex; gap: 8px; margin: 24px 0; }
.search-form label { flex: 1; }
.search-field { width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white); }
.search-submit { min-height: 48px; padding: 0 18px; border: 0; border-radius: var(--radius); background: var(--ink); color: var(--white); font-family: var(--display); font-weight: 600; cursor: pointer; }
.comments-area { margin-top: 56px; }
.comment-list { list-style: none; padding: 0; }
.comment-body { padding: 20px 0; border-top: 1px solid var(--rule); }
.comment-form input:not([type="submit"]):not([type="checkbox"]), .comment-form textarea { width: 100%; padding: 12px; font: inherit; border: 1px solid var(--rule); border-radius: var(--radius); }
.comment-form .submit { min-height: 48px; padding: 0 20px; border: 0; border-radius: var(--radius); background: var(--accent); color: var(--white); font-family: var(--display); font-weight: 600; cursor: pointer; }

/* Widgets */
.widget { margin-bottom: 40px; font-size: 1rem; }
.widget-title { font-size: var(--t-md); }

/* ------------------------------------------------------------
   Motion preferences
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
	.js .strike__line path { stroke-dashoffset: 0; }
}

@media print {
	.site-header, .site-footer, .hire, .contact form, .nav-toggle { display: none !important; }
	body { background: #fff; }
	.section--ink { background: #fff; color: #000; }
}

/* ------------------------------------------------------------
   Toolkit (technologies under the expertise heading)
   ------------------------------------------------------------ */
.toolkit { margin: 32px 0 0; display: grid; gap: 20px; }
.toolkit__group dt {
	font-family: var(--display);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--graphite);
	margin-bottom: 8px;
}
.toolkit__group dd { margin: 0; }
.toolkit__list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.toolkit__list li {
	font-family: var(--display);
	font-size: var(--t-xs);
	line-height: 1.3;
	padding: 5px 10px;
	border: 1px solid var(--rule);
	border-radius: 999px;
	background: var(--paper);
	color: var(--ink);
}
.portrait picture { display: block; position: relative; width: 100%; height: 100%; }