/**
 * Peak Seven 2026 — global styles (hand-authored, no build step).
 *
 * Tokens, base type, layout container, shared primitives (eyebrow, buttons,
 * placeholders, tones) and reveal motion. Each block's own look lives in
 * blocks/<name>/style.css and loads only where the block is used.
 */

/* ---------------------------------------------------------------- Tokens */
:root {
	--pk-ink: var(--wp--preset--color--ink, #0a0a0b);
	--pk-night: var(--wp--preset--color--night, #111113);
	--pk-paper: var(--wp--preset--color--paper, #f5f5f3);
	--pk-white: #fff;
	--pk-blue: var(--wp--preset--color--blue, #3fa0db);
	--pk-navy: var(--wp--preset--color--navy, #194d6e);
	--pk-fog: var(--wp--preset--color--fog, #d5d5d7);
	--pk-slate: var(--wp--preset--color--slate, #5c5c62);
	--pk-line: rgba(10, 10, 11, 0.12);
	--pk-line-dark: rgba(255, 255, 255, 0.14);
	/* One corner style for the whole site: buttons, fields, images, cards and the hero's
	   floating cards. Square; set 4px here to round everything at once. */
	--pk-radius: 0px;

	/* Self-hosted faces get their own family names ("Peak Inter", theme.json) so a copy of
	   Inter installed on the visitor's machine (common on designers' Macs, and a different
	   version) can never be matched in place of the shipped files. */
	--pk-font: var(--wp--preset--font-family--sans, "Peak Inter", Inter, system-ui, sans-serif);
	--pk-mono: var(--wp--preset--font-family--mono, "Peak Mono", ui-monospace, monospace);

	--pk-gutter: var(--wp--custom--gutter, clamp(20px, 3vw, 48px));
	--pk-max: 1600px;
	--pk-section: clamp(4.5rem, 9vw, 8.5rem);
	--pk-header-h: 72px;

	--pk-ease: cubic-bezier(0.2, 0.7, 0.1, 1);
	--pk-fast: 160ms;
	--pk-med: 420ms;

	/* Type scale (fluid). Tuned to the 1440px design frame. */
	--pk-fs-display: clamp(3.4rem, 10.8vw, 10rem);
	--pk-fs-hero: clamp(2.9rem, 6.8vw, 6.75rem);
	--pk-fs-cta: clamp(3rem, 7.6vw, 7rem);
	--pk-fs-h2: clamp(2rem, 4.2vw, 3.75rem);
	--pk-fs-h3: clamp(1.35rem, 1.8vw, 1.75rem);
	--pk-fs-h4: 1.125rem;
	--pk-fs-lead: clamp(1rem, 1.2vw, 1.125rem);
	--pk-fs-body: 1rem;
	--pk-fs-small: 0.875rem;
	--pk-fs-label: 0.6875rem;
}

/* ---------------------------------------------------------------- Base */
html {
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
	scroll-padding-top: calc(var(--pk-header-h) + 16px);
}

body {
	margin: 0;
	background: var(--pk-white);
	color: var(--pk-ink);
	font-family: var(--pk-font);
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* The variable files cover every weight and both styles; never let Safari fake bold/italic. */
	font-synthesis: none;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* Text colors from a rich field arrive as <mark class="has-inline-color ..."> with their
   own color; drop the browser's yellow highlight under them. */
:where(.pk) mark {
	background: none;
	color: inherit;
}

/* *accent* in any copy field renders <em>: the blue accent, never italic. */
.pk em,
.pk-accent {
	font-style: normal;
	color: var(--pk-blue);
}

:where(a, button, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--pk-blue);
	outline-offset: 3px;
}

::selection {
	background: var(--pk-blue);
	color: #fff;
}

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

.pk-skip {
	position: absolute;
	left: 12px;
	top: -60px;
	z-index: 1000;
	padding: 10px 14px;
	background: var(--pk-ink);
	color: #fff;
	font-family: var(--pk-mono);
	font-size: var(--pk-fs-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
}

.pk-skip:focus {
	top: 12px;
}

/* The page templates hand the whole width to the sections; each section sets its own container. */
.wp-site-blocks {
	padding: 0;
}

.wp-site-blocks > main,
.pk-main {
	margin-block: 0;
}

.pk-main > .entry-content,
.pk-main > .wp-block-post-content {
	margin-block: 0;
}

.pk-main .wp-block-post-content > * + * {
	margin-block-start: 0;
}

:where(.wp-site-blocks) > * {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------- Section primitives */
/* Zero-specificity defaults so any block's own .pk-<name> rules win regardless of load order. */
:where(.pk) {
	position: relative;
	font-size: var(--pk-fs-body);
	line-height: 1.55;
}

.pk {
	box-sizing: border-box;
	margin-block: 0 !important;
}

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

:where(.pk) :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd, address) {
	margin: 0;
}

:where(.pk) :where(ul, ol) {
	padding: 0;
	list-style: none;
}

/* Form controls don't inherit type by default. */
.pk :where(button, input, textarea, select) {
	font-family: inherit;
}

.pk-container {
	width: 100%;
	max-width: var(--pk-max);
	margin-inline: auto;
	padding-inline: var(--pk-gutter);
}

.pk-section {
	padding-block: var(--pk-section);
}

/* Tones: every section is one of these. Dark sections flip text + rules. */
.pk-tone-white {
	background: var(--pk-white);
	color: var(--pk-ink);
}

.pk-tone-paper {
	background: var(--pk-paper);
	color: var(--pk-ink);
}

.pk-tone-dark {
	--pk-line: var(--pk-line-dark);
	background: var(--pk-ink);
	color: #fff;
}

.pk-tone-blue {
	--pk-line: rgba(255, 255, 255, 0.35);
	background: var(--pk-blue);
	color: #fff;
}

.pk-tone-blue em {
	color: var(--pk-ink);
}

/* ---------------------------------------------------------------- Type */
.pk-eyebrow {
	font-family: var(--pk-mono);
	font-size: var(--pk-fs-label);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pk-blue);
}

.pk-tone-blue .pk-eyebrow {
	color: rgba(255, 255, 255, 0.85);
}

.pk-mono {
	font-family: var(--pk-mono);
	font-size: var(--pk-fs-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.6;
}

.pk-h-display,
.pk-h-hero,
.pk-h-cta,
.pk-h2,
.pk-h3 {
	font-family: var(--pk-font);
	font-weight: 700;
	letter-spacing: -0.045em;
	line-height: 0.98;
}

.pk-h-display {
	font-size: var(--pk-fs-display);
	font-weight: 800;
	letter-spacing: -0.055em;
	line-height: 0.88;
}

.pk-h-hero {
	font-size: var(--pk-fs-hero);
	letter-spacing: -0.05em;
	line-height: 0.95;
}

.pk-h-cta {
	font-size: var(--pk-fs-cta);
	font-weight: 800;
	letter-spacing: -0.05em;
	line-height: 0.9;
}

.pk-h2 {
	font-size: var(--pk-fs-h2);
	line-height: 1.02;
}

.pk-h3 {
	font-size: var(--pk-fs-h3);
	letter-spacing: -0.025em;
	line-height: 1.15;
}

.pk-lead {
	font-size: var(--pk-fs-lead);
	line-height: 1.5;
	max-width: 46ch;
}

.pk-body {
	font-size: var(--pk-fs-small);
	line-height: 1.6;
	color: var(--pk-slate);
}

.pk-tone-dark .pk-body,
.pk-tone-dark .pk-lead {
	color: rgba(255, 255, 255, 0.7);
}

.pk-body p + p,
.pk-lead p + p {
	margin-top: 0.9em;
}

/* ---------------------------------------------------------------- Buttons */
.pk-btn {
	--pk-btn-bg: transparent;
	--pk-btn-fg: var(--pk-blue);
	--pk-btn-bd: var(--pk-blue);
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	min-height: 42px;
	padding: 0.75rem 1.1rem;
	border: 1px solid var(--pk-btn-bd);
	background: var(--pk-btn-bg);
	color: var(--pk-btn-fg);
	font-family: var(--pk-mono);
	font-size: var(--pk-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color var(--pk-fast) ease,
		color var(--pk-fast) ease,
		border-color var(--pk-fast) ease;
	border-radius: var(--pk-radius);
}

.pk-btn .pk-icon {
	width: 12px;
	height: 12px;
	flex: none;
	transition: transform var(--pk-med) var(--pk-ease);
}

.pk-btn:hover {
	--pk-btn-bg: var(--pk-blue);
	--pk-btn-fg: #fff;
	color: var(--pk-btn-fg);
}

.pk-btn:hover .pk-icon {
	transform: translate(2px, -2px);
}

.pk-btn:active {
	transform: translateY(1px);
}

.pk-btn--solid {
	--pk-btn-bg: var(--pk-ink);
	--pk-btn-fg: #fff;
	--pk-btn-bd: var(--pk-ink);
	padding-inline: 1.6rem;
}

.pk-btn--solid:hover {
	--pk-btn-bg: var(--pk-blue);
	--pk-btn-bd: var(--pk-blue);
}

.pk-btn--light {
	--pk-btn-bg: #fff;
	--pk-btn-fg: var(--pk-blue);
	--pk-btn-bd: #fff;
}

.pk-btn--light:hover {
	--pk-btn-bg: var(--pk-ink);
	--pk-btn-bd: var(--pk-ink);
	--pk-btn-fg: #fff;
}

.pk-tone-blue .pk-btn--outline {
	--pk-btn-fg: #fff;
	--pk-btn-bd: #fff;
}

.pk-tone-blue .pk-btn--outline:hover {
	--pk-btn-bg: #fff;
	--pk-btn-fg: var(--pk-blue);
}

/* ---------------------------------------------------------------- Media */
.pk-ph {
	width: 100%;
	height: 100%;
	min-height: 120px;
	background-color: #cfcfd1;
	background-image:
		linear-gradient(45deg, #c4c4c7 25%, transparent 25%, transparent 75%, #c4c4c7 75%),
		linear-gradient(45deg, #c4c4c7 25%, transparent 25%, transparent 75%, #c4c4c7 75%);
	background-position: 0 0, 12px 12px;
	background-size: 24px 24px;
}

.pk-tone-dark .pk-ph {
	background-color: #2a2a2e;
	background-image:
		linear-gradient(45deg, #333338 25%, transparent 25%, transparent 75%, #333338 75%),
		linear-gradient(45deg, #333338 25%, transparent 25%, transparent 75%, #333338 75%);
}

.pk-media {
	position: relative;
	overflow: hidden;
	border-radius: var(--pk-radius);
	background: #e3e3e5;
}

.pk-media > img,
.pk-media > .pk-ph {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------------------------------------------------------------- Numbered sections
   peak/index-section, and peak/platform with a numbered title (peak_numbered_head()).
   Consecutive ones share one band, split by a rule. The title toggles the panel
   (assets/js/accordion.js); it renders open. */
.pk-numbered {
	--pk-num-w: clamp(28px, 4.6vw, 88px);
	--pk-toggle-w: clamp(28px, 4vw, 72px);
	padding-block: clamp(2.75rem, 4.4vw, 4rem);
}

.pk-numbered + .pk-numbered {
	padding-top: 0;
}

.pk-numbered + .pk-numbered .pk-numbered__item {
	padding-top: clamp(2.75rem, 4.4vw, 4rem);
	border-top: 1px solid var(--pk-line);
}

.pk-numbered__eyebrow {
	margin-bottom: clamp(2rem, 4.4vw, 4rem);
}

.pk-numbered__heading {
	font: inherit;
	letter-spacing: normal;
}

.pk-numbered__trigger {
	display: grid;
	grid-template-columns: var(--pk-num-w) minmax(0, 1fr) minmax(0, 21rem) var(--pk-toggle-w);
	align-items: last baseline;
	column-gap: 16px;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.pk-numbered__num {
	font-family: var(--pk-mono);
	font-size: clamp(0.8125rem, 1.3vw, 1.25rem);
	color: var(--pk-blue);
}

.pk-numbered__title {
	font-size: clamp(1.5rem, 4.9vw, 4.75rem);
	font-weight: 700;
	letter-spacing: -0.05em;
	line-height: 0.95;
	text-transform: uppercase;
	transition: transform var(--pk-med) var(--pk-ease);
}

.pk-numbered__summary {
	justify-self: end;
	font-family: var(--pk-mono);
	font-size: var(--pk-fs-label);
	letter-spacing: 0.1em;
	line-height: 1.6;
	text-align: right;
	text-transform: uppercase;
	opacity: 0.85;
}

.pk-numbered__toggle {
	justify-self: end;
	color: var(--pk-blue);
}

.pk-numbered__toggle .pk-icon {
	width: 16px;
	height: 16px;
	transition: transform var(--pk-med) var(--pk-ease);
}

.pk-numbered__item.is-open .pk-numbered__toggle .pk-icon {
	transform: rotate(45deg);
}

@media (hover: hover) {
	.pk-numbered__trigger:hover .pk-numbered__title {
		transform: translateX(10px);
	}
}

/* Panel: 0fr -> 1fr height animation. The side padding keeps focus rings unclipped. */
.pk-numbered__panel {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows var(--pk-med) var(--pk-ease);
}

.is-ready .pk-numbered__panel:not(.is-open) {
	grid-template-rows: 0fr;
}

.pk-numbered__panel-inner {
	min-height: 0;
	margin-inline: -6px;
	padding-inline: 6px;
	overflow: hidden;
}

.pk-numbered__intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 24px clamp(2rem, 5vw, 5rem);
	padding: clamp(2rem, 4.2vw, 4rem) var(--pk-toggle-w) 0 calc(var(--pk-num-w) + 16px);
}

.pk-numbered__lead {
	max-width: 34em;
	font-size: clamp(1.05rem, 1.55vw, 1.5rem);
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.pk-numbered__links {
	display: grid;
	grid-template-rows: repeat(var(--pk-rows, 2), auto);
	grid-auto-columns: max-content;
	grid-auto-flow: column;
	gap: 1rem 3rem;
	justify-content: end;
}

.pk-numbered__links :where(a, span) {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--pk-mono);
	font-size: var(--pk-fs-label);
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--pk-blue);
}

.pk-numbered__links .pk-icon {
	width: 12px;
	height: 12px;
	flex: none;
	transition: transform var(--pk-med) var(--pk-ease);
}

.pk-numbered__links a:hover {
	color: currentColor;
}

.pk-tone-dark .pk-numbered__links a:hover {
	color: #fff;
}

.pk-numbered__links a:hover .pk-icon {
	transform: translateX(3px);
}

.pk-numbered__body {
	padding-top: clamp(2rem, 3.6vw, 3.25rem);
}

@media (max-width: 1023px) {
	.pk-numbered__intro {
		grid-template-columns: 1fr;
		padding-right: 0;
	}

	.pk-numbered__links {
		justify-content: start;
	}
}

@media (max-width: 781px) {
	.pk-numbered {
		--pk-num-w: 22px;
	}

	.pk-numbered__trigger {
		grid-template-columns: var(--pk-num-w) minmax(0, 1fr) 20px;
		align-items: center;
		column-gap: 10px;
		row-gap: 10px;
	}

	.pk-numbered__summary {
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
		text-align: left;
	}

	.pk-numbered__toggle {
		grid-column: 3;
		grid-row: 1;
	}

	.pk-numbered__intro {
		gap: 20px;
		padding: 18px 0 0 calc(var(--pk-num-w) + 10px);
	}

	.pk-numbered__links {
		grid-template-rows: none;
		grid-auto-flow: row;
		gap: 8px;
		order: -1;
	}

	.pk-numbered__lead {
		font-size: 0.9375rem;
		font-weight: 500;
		line-height: 1.45;
	}

	.pk-numbered__body {
		padding: 24px 0 0 calc(var(--pk-num-w) + 10px);
	}
}

/* ---------------------------------------------------------------- Video player (assets/js/video.js) */
.pk-video__poster,
.pk-video__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

/* A soft scrim so the white play button reads on any poster. */
[data-pk-video]:not(.is-playing)::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, rgba(10, 10, 11, 0.42), rgba(10, 10, 11, 0.12) 70%);
	pointer-events: none;
	transition: background-color var(--pk-med) ease;
}

.pk-video__play {
	z-index: 1;
	position: absolute;
	left: 50%;
	top: 50%;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	font-family: var(--pk-mono);
	font-size: var(--pk-fs-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transform: translate(-50%, -50%);
	cursor: pointer;
}

.pk-video__play-icon {
	display: grid;
	place-items: center;
	width: clamp(64px, 7vw, 96px);
	aspect-ratio: 1;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 50%;
	transition:
		background-color var(--pk-med) var(--pk-ease),
		border-color var(--pk-med) var(--pk-ease),
		transform var(--pk-med) var(--pk-ease);
}

.pk-video__play-icon .pk-icon {
	width: 30%;
	height: 30%;
	margin-left: 6%;
}

.pk-video__play:hover .pk-video__play-icon {
	background: var(--pk-blue);
	border-color: var(--pk-blue);
	transform: scale(1.06);
}

/* ---------------------------------------------------------------- Icons */
.pk-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: middle;
}

.pk-socials {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pk-socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--pk-slate);
	color: #fff;
	transition: background-color var(--pk-fast) ease;
}

.pk-socials a:hover {
	background: var(--pk-blue);
}

.pk-socials .pk-icon {
	width: 15px;
	height: 15px;
}

.pk-tone-dark .pk-socials a {
	background: #fff;
	color: var(--pk-ink);
}

.pk-tone-dark .pk-socials a:hover {
	background: var(--pk-blue);
	color: #fff;
}

/* ---------------------------------------------------------------- Reveal motion */
/* Elements with [data-reveal] fade up once when scrolled into view (assets/js/global.js).
   Hidden only when JS is running, so no-JS and the editor always show content. */
.pk-js [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity 700ms var(--pk-ease),
		transform 700ms var(--pk-ease);
	transition-delay: calc(var(--pk-i, 0) * 70ms);
}

.pk-js [data-reveal].is-in {
	opacity: 1;
	transform: none;
}

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

	.pk-js [data-reveal] {
		opacity: 1;
		transform: none;
	}
}

/* ---------------------------------------------------------------- Plain content (Text Page template, posts) */
/* The page is full width. Its title and the writing inside the post content sit in a
   760px reading column; Peak section blocks in the content run full bleed, as in case
   studies. Text styles skip anything inside a section (:not(.pk *)), which has its own;
   :where() keeps their old specificity so the post-content spacing rules still win. */
.pk-prose {
	padding: calc(var(--pk-header-h) + var(--pk-section)) 0 var(--pk-section);
	font-size: 1.0625rem;
	line-height: 1.7;
}

.pk-prose > :not(.wp-block-post-content),
.pk-prose > .wp-block-post-content > * {
	margin-inline: max(var(--pk-gutter), calc((100% - 760px) / 2 + var(--pk-gutter)));
}

/* Floated images keep only their outer column margin, so text wraps close beside them. */
.pk-prose > .wp-block-post-content > .alignleft {
	margin-inline-end: 2em;
}

.pk-prose > .wp-block-post-content > .alignright {
	margin-inline-start: 2em;
}

.pk-prose > .wp-block-post-content > :is(.pk:not(.pk-video), .pk-video--w-full) {
	margin-inline: 0;
}

.pk-prose > .wp-block-post-content > .pk-video--w-inset {
	margin-inline: auto;
}

/* .pk zeroes section margins with !important; give sections room from the writing. */
.pk-prose > .wp-block-post-content > * + .pk {
	margin-top: clamp(2.5rem, 5vw, 4rem) !important;
}

.pk-prose > .wp-block-post-content > .pk + :not(.pk) {
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.pk-prose > .wp-block-post-content > :is(.pk:not(.pk-video), .pk-video--w-full) + :is(.pk:not(.pk-video), .pk-video--w-full) {
	margin-top: 0 !important;
}

.pk-prose > .wp-block-post-content > :is(.pk:not(.pk-video), .pk-video--w-full):last-child {
	margin-bottom: calc(var(--pk-section) * -1) !important;
}

:where(.pk-prose) h1:not(.pk *) {
	margin-block: 0 2rem;
	font-size: var(--pk-fs-hero);
	letter-spacing: -0.05em;
	line-height: 0.95;
}

:where(.pk-prose) h2:not(.pk *) {
	margin-top: 2.5em;
	font-size: clamp(1.6rem, 2.4vw, 2.2rem);
}

:where(.pk-prose) h3:not(.pk *) {
	margin-top: 2em;
	font-size: 1.35rem;
}

:where(.pk-prose) a:not(.pk *) {
	color: var(--pk-blue);
	text-underline-offset: 3px;
}

.pk-prose .wp-block-post-date,
:where(.pk-prose) .pk-eyebrow:not(.pk *) {
	margin-bottom: 1rem;
}

:where(.pk-prose) .pk-eyebrow:not(.pk *) a {
	color: inherit;
	text-decoration: none;
}

/* ---------------------------------------------------------------- Blog posts (single.html)
   peak/post-head, then this article, peak/post-more and the CTA band, all on one
   12-column grid. One left edge carries the reading: column 1 (crumbs, title, lead,
   image, the writing, in columns 1-8). The facts and the rail sit on the right in
   columns 10-12. The writing keeps a 62ch measure; pictures and embeds take the
   column to its edge. A post built from
   Peak sections drops the grid and runs them full bleed, as on a Text Page. */
.pk-prose.pk-single__body {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: clamp(16px, 2vw, 32px);
	align-items: start;
	width: 100%;
	max-width: var(--pk-max);
	margin-inline: auto;
	padding: clamp(3rem, 6vw, 5.5rem) var(--pk-gutter) clamp(4rem, 8vw, 7rem);
	font-size: clamp(1.0625rem, 0.35vw + 0.98rem, 1.1875rem);
	line-height: 1.75;
	color: #2a2a2e;
}

.pk-single__body > .pk-post-rail {
	grid-column: 10 / -1;
	grid-row: 1;
	align-self: stretch;
	margin: 0;
}

.pk-single__body > .wp-block-post-content {
	grid-column: 1 / span 8;
	grid-row: 1;
	min-width: 0;
}

.pk-single__body > .wp-block-post-content > * {
	max-width: 62ch;
	margin-inline: 0;
}

.pk-single__body > .wp-block-post-content > :is(figure, .wp-block-image, .wp-block-embed, .wp-block-video, .wp-block-gallery, .alignwide, .alignfull, blockquote, .wp-block-quote, .wp-block-pullquote) {
	max-width: none;
}

/* The opening paragraph is the lead. */
.pk-single__body > .wp-block-post-content > p:first-child {
	margin-bottom: 1.4em;
	font-size: clamp(1.3rem, 1.1vw + 0.95rem, 1.6rem);
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -0.015em;
	color: var(--pk-ink);
	text-wrap: pretty;
}

:where(.pk-single__body) :where(p, li):not(.pk *) {
	text-wrap: pretty;
}

:where(.pk-single__body) :where(h2, h3, h4):not(.pk *) {
	color: var(--pk-ink);
	letter-spacing: -0.03em;
	line-height: 1.1;
	text-wrap: balance;
}

:where(.pk-single__body) h2:not(.pk *) {
	margin-block: 2.2em 0.6em;
	font-size: clamp(1.75rem, 2.6vw, 2.5rem);
}

:where(.pk-single__body) h3:not(.pk *) {
	font-size: clamp(1.3rem, 1.6vw, 1.6rem);
}

:where(.pk-single__body) h2 a:not(.pk *) {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--pk-blue);
	text-decoration-thickness: 3px;
	text-underline-offset: 8px;
	transition: color var(--pk-fast) var(--pk-ease);
}

:where(.pk-single__body) h2 a:not(.pk *):hover {
	color: var(--pk-blue);
}

:where(.pk-single__body) :where(strong, b):not(.pk *) {
	color: var(--pk-ink);
}

:where(.pk-single__body) a:not(.pk *):hover {
	text-decoration-thickness: 2px;
}

:where(.pk-single__body) :where(img, video, iframe):not(.pk *) {
	max-width: 100%;
	height: auto;
}

:where(.pk-single__body) :where(figure, .wp-block-image, .wp-block-embed, .wp-block-video):not(.pk *) {
	margin-block: clamp(2.5rem, 4vw, 3.5rem);
}

:where(.pk-single__body) .wp-block-embed__wrapper iframe:not(.pk *) {
	width: 100%;
	aspect-ratio: 16 / 9;
}

:where(.pk-single__body) :where(figcaption, .wp-caption-text):not(.pk *) {
	margin-top: 0.85rem;
	font-family: var(--pk-mono);
	font-size: var(--pk-fs-label);
	letter-spacing: 0.08em;
	line-height: 1.6;
	text-transform: uppercase;
	color: var(--pk-slate);
}

/* Quotes break out to the column's full width at display size, under a blue mark. */
:where(.pk-single__body) blockquote:not(.pk *) {
	margin: clamp(2.5rem, 5vw, 4rem) 0;
	padding: 0;
	border: 0;
	font-size: clamp(1.5rem, 2.4vw, 2.25rem);
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.2;
	color: var(--pk-ink);
	text-wrap: balance;
}

:where(.pk-single__body) blockquote:not(.pk *)::before {
	content: "\201C";
	display: block;
	height: 0.55em;
	font-size: 2.4em;
	line-height: 1;
	color: var(--pk-blue);
}

:where(.pk-single__body) blockquote p:last-child:not(.pk *) {
	margin-bottom: 0;
}

:where(.pk-single__body) blockquote cite:not(.pk *) {
	display: block;
	margin-top: 1rem;
	font-family: var(--pk-mono);
	font-size: var(--pk-fs-label);
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pk-slate);
}

/* Floats stay inside the column; the end of the writing clears them. */
.pk-single__body > .wp-block-post-content > .alignleft {
	float: left;
	max-width: min(45%, 340px);
	margin: 0.4em 2em 1em 0;
}

.pk-single__body > .wp-block-post-content > .alignright {
	float: right;
	max-width: min(45%, 340px);
	margin: 0.4em 0 1em 2em;
}

.pk-single__body > .wp-block-post-content::after {
	content: "";
	display: block;
	clear: both;
}

/* Built from Peak sections: no grid, no rail, sections full bleed (Plain content). */
.pk-prose.pk-single__body:has(> .wp-block-post-content > .pk:not(.pk-video)) {
	display: block;
	max-width: none;
	padding-inline: 0;
}

.pk-single__body:has(> .wp-block-post-content > .pk:not(.pk-video)) > .pk-post-rail {
	display: none;
}

.pk-single__body:has(> .wp-block-post-content > .pk:not(.pk-video)) > .wp-block-post-content > :not(.pk) {
	max-width: none;
	margin-inline: max(var(--pk-gutter), calc((100% - 760px) / 2 + var(--pk-gutter)));
}

@media (max-width: 1023px) {
	.pk-single__body > .pk-post-rail,
	.pk-single__body > .wp-block-post-content {
		grid-column: 1 / -1;
	}

	.pk-single__body > .wp-block-post-content {
		grid-row: 2;
	}

	.pk-single__body > .pk-post-rail {
		margin-bottom: clamp(2rem, 5vw, 3rem);
	}
}

@media (max-width: 600px) {
	.pk-single__body > .wp-block-post-content > :is(.alignleft, .alignright) {
		float: none;
		max-width: none;
		margin: 2rem 0;
	}
}

/* ---------------------------------------------------------------- Insights archive (index.html) */
.pk-archive {
	max-width: var(--pk-max);
	margin-inline: auto;
	padding: calc(var(--pk-header-h) + var(--pk-section)) var(--pk-gutter) var(--pk-section);
}

.pk-archive__head {
	display: grid;
	gap: 16px;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.pk-archive__title {
	margin: 0;
	font-size: var(--pk-fs-hero);
	letter-spacing: -0.05em;
	line-height: 0.95;
}

.pk-archive__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--pk-line);
}

.pk-archive__list > li {
	margin: 0;
	border-bottom: 1px solid var(--pk-line);
}

.pk-archive__row {
	display: grid;
	grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) minmax(0, 1fr);
	gap: 8px 32px;
	align-items: baseline;
	padding-block: 24px;
}

.pk-archive__row > * {
	margin: 0 !important;
}

.pk-archive__date {
	font-family: var(--pk-mono);
	font-size: var(--pk-fs-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pk-slate);
}

.pk-archive__post-title {
	font-size: clamp(1.15rem, 1.6vw, 1.5rem);
	letter-spacing: -0.025em;
	line-height: 1.2;
}

.pk-archive__post-title a {
	text-decoration: none;
}

.pk-archive__excerpt {
	font-size: var(--pk-fs-small);
	color: var(--pk-slate);
}

.pk-archive__excerpt .wp-block-post-excerpt__more-text {
	display: none;
}

.pk-archive__pager {
	margin-top: 2.5rem;
	font-family: var(--pk-mono);
	font-size: var(--pk-fs-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

@media (max-width: 781px) {
	.pk-archive__row {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------- Editor canvas */
/* Sections are full-bleed on the front end (alignfull). In the editor they sit inside the
   root gutter with a gap between them, so each one reads as its own framed component
   instead of one continuous page. The padding keeps the preview clear of the outline. */
.editor-styles-wrapper .wp-block.peak-editor-block {
	box-sizing: border-box;
	max-width: none;
	margin-inline: 0 !important;
	margin-block: 24px !important;
	padding: 8px;
	border-radius: 4px;
}

.editor-styles-wrapper .components-disabled .pk {
	pointer-events: none;
}

/* Each peak/* section reads as one clickable component: a faint dashed edge at rest,
   solid on hover, heavier when selected, plus a name chip from the block.json title.
   Negative offsets keep the line inside the block so nothing shifts. !important beats
   core's own block outline. The chip uses ::before because core draws its selection
   box on ::after; a background there would flood the whole selected block. */
.editor-styles-wrapper .wp-block.peak-editor-block {
	position: relative;
	outline: 1px dashed color-mix(in srgb, var(--pk-blue) 45%, transparent) !important;
	outline-offset: -1px !important;
	transition: outline-color 0.12s ease, outline-width 0.12s ease;
}

.editor-styles-wrapper .wp-block.peak-editor-block:hover,
.editor-styles-wrapper .wp-block.peak-editor-block.is-hovered {
	outline: 2px solid var(--pk-blue) !important;
	outline-offset: -2px !important;
}

.editor-styles-wrapper .wp-block.peak-editor-block.is-selected {
	outline: 3px solid var(--pk-blue) !important;
	outline-offset: -3px !important;
}

.editor-styles-wrapper .wp-block.peak-editor-block[data-peak-label]::before {
	content: attr(data-peak-label);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
	padding: 4px 9px;
	background: var(--pk-blue);
	color: #fff;
	font-family: var(--pk-mono);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	border-radius: 4px 0 3px 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.12s ease, visibility 0.12s ease;
}

.editor-styles-wrapper .wp-block.peak-editor-block:hover::before,
.editor-styles-wrapper .wp-block.peak-editor-block.is-hovered::before,
.editor-styles-wrapper .wp-block.peak-editor-block.is-selected::before {
	opacity: 1;
	visibility: visible;
}

/* Grid Section cells: a quiet dashed frame in the text color so every slot, even an
   empty one, is visible and clickable; blue once it is hovered or being edited. */
.editor-styles-wrapper .pk-grid__cell.peak-editor-cell {
	min-height: 96px;
	outline: 1px dashed color-mix(in srgb, currentColor 25%, transparent) !important;
	outline-offset: 6px !important;
	transition: outline-color 0.12s ease;
}

.editor-styles-wrapper .pk-grid__cell.peak-editor-cell:hover,
.editor-styles-wrapper .pk-grid__cell.peak-editor-cell.is-selected,
.editor-styles-wrapper .pk-grid__cell.peak-editor-cell.has-child-selected {
	outline: 1px solid var(--pk-blue) !important;
}

/* The "+ add cell" button sits in the next free slot instead of stretching to fill it. */
.editor-styles-wrapper .pk-grid__cells > .block-list-appender {
	align-self: center;
	justify-self: start;
}

/* ---------------------------------------------------------------- Case study body (single-peak_work.html) */
/* Core blocks written in a case study: text sits in a readable column, media runs wide. */
.pk-study__body {
	padding-block: clamp(3.5rem, 7vw, 6rem);
}

.pk-study__body > * {
	box-sizing: border-box;
	max-width: 760px;
	margin: 0 auto;
	padding-inline: var(--pk-gutter);
}

.pk-study__body > * + * {
	margin-top: 1.25rem;
}

.pk-study__body > p {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: #2a2a2e;
}

.pk-study__body > h2,
.pk-study__body > h3 {
	margin-top: clamp(3rem, 6vw, 5rem);
	font-size: clamp(1.8rem, 3.4vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.045em;
	line-height: 1.02;
}

.pk-study__body > h2 + p,
.pk-study__body > h3 + p {
	margin-top: 1.5rem;
}

/* Media: full container width. */
.pk-study__body > .wp-block-image,
.pk-study__body > .wp-block-gallery,
.pk-study__body > .wp-block-video,
.pk-study__body > .wp-block-embed,
.pk-study__body > .pk-video:not(.pk-video--w-full) {
	max-width: var(--pk-max);
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.pk-study__body > .pk-video:not(.pk-video--w-full) {
	padding-inline: 0;
	/* .pk zeroes section margins with !important; case bodies need the rhythm back. */
	margin-top: clamp(2.5rem, 5vw, 4rem) !important;
}

.pk-study__body > .pk-video:not(.pk-video--w-full) + * {
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* Peak section blocks carry their own background and container: full bleed. Video has its own
   rule above unless it is set to Full width. */
.pk-study__body > :is(.pk:not(.pk-video), .pk-video--w-full) {
	max-width: none;
	padding-inline: 0;
}

.pk-study__body > * + :is(.pk:not(.pk-video), .pk-video--w-full) {
	margin-top: clamp(2.5rem, 5vw, 4rem) !important;
}

.pk-study__body > :is(.pk:not(.pk-video), .pk-video--w-full) + :is(.pk:not(.pk-video), .pk-video--w-full) {
	margin-top: 0 !important;
}

.pk-study__body > :is(.pk:not(.pk-video), .pk-video--w-full) + :not(.pk) {
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.pk-study__body > :is(.pk:not(.pk-video), .pk-video--w-full):last-child {
	margin-bottom: calc(clamp(3.5rem, 7vw, 6rem) * -1) !important;
}

.pk-study__body > .wp-block-image + .wp-block-image {
	margin-top: clamp(16px, 2vw, 28px);
}

.pk-study__body .wp-block-image img,
.pk-study__body .wp-block-video video {
	display: block;
	width: 100%;
	height: auto;
}

.pk-study__body > .wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(12px, 1.6vw, 24px);
}

.pk-study__body > .wp-block-gallery.columns-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pk-study__body > .wp-block-gallery > .wp-block-image {
	width: auto !important;
	margin: 0 !important;
}

.pk-study__body > .wp-block-gallery > .wp-block-image img {
	height: 100%;
	object-fit: cover;
}

.pk-study__body > .wp-block-quote {
	margin-top: clamp(3rem, 6vw, 5rem);
	padding-left: 24px;
	border-left: 2px solid var(--pk-blue);
	font-size: clamp(1.3rem, 2vw, 1.75rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.3;
}

.pk-study__body > .wp-block-quote cite {
	display: block;
	margin-top: 14px;
	font-family: var(--pk-mono);
	font-size: var(--pk-fs-label);
	font-style: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pk-slate);
}

@media (max-width: 600px) {
	.pk-study__body > .wp-block-gallery,
	.pk-study__body > .wp-block-gallery.columns-3 {
		grid-template-columns: 1fr;
	}
}

/* Text pages (page-text.html): vertical rhythm for classic/imported copy. Block margins
   only, so the reading-column margins (Plain content, above) stay; sections keep their own. */
:where(.pk-prose) :where(p, ul, ol):not(.pk *) {
	margin-block: 0 1.1em;
}

:where(.pk-prose) :where(ul, ol):not(.pk *) {
	padding-left: 1.3em;
}

:where(.pk-prose) li + li:not(.pk *) {
	margin-top: 0.35em;
}

:where(.pk-prose) h2:not(.pk *) {
	margin-block: 2.4em 0.7em;
}

:where(.pk-prose) h3:not(.pk *) {
	margin-block: 1.8em 0.5em;
}

.pk-prose hr {
	margin: 2.5em 0;
	border: 0;
	border-top: 1px solid var(--pk-line);
}

.pk-prose .pk-toc {
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: 2rem;
	font-size: 0.9375rem;
}

@media (max-width: 600px) {
	.pk-prose .pk-toc {
		columns: 1;
	}
}