/*
Theme Name: Skip the Escalator
Theme URI: https://skiptheescalator.com/
Author: Edward Romero
Author URI: https://skiptheescalator.com/about/
Description: A calm, text-first block theme for the Skip the Escalator blog and newsletter. Stories and practical steps for engineers, quiet leaders and anyone building something. Forked from Twenty Twenty-Five by the WordPress team.
Requires at least: 6.9
Tested up to: 7.1
Requires PHP: 7.4
Version: 0.2.9
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: skiptheescalator
Tags: blog, one-column, custom-colors, custom-menu, editor-style, featured-images, full-site-editing, block-patterns, block-styles, style-variations, wide-blocks, translation-ready, accessibility-ready
*/

/*
 * Most styling lives in theme.json. This file only holds what theme.json
 * cannot express yet. Every value references a theme.json token.
 */

/* ---------- Links (from Twenty Twenty-Five, adapted) ---------- */
a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

/* Underlines in body copy take the brand colour; the text keeps full contrast. */
:where(.wp-block-post-content, .entry-content, .ste-prose) a:where(:not(.wp-element-button)) {
	text-decoration-color: var(--wp--preset--color--brand-deep);
	text-decoration-thickness: 2px;
}

:where(.wp-block-post-content, .entry-content, .ste-prose) a:where(:not(.wp-element-button)):hover {
	text-decoration-color: currentColor;
}

/* ---------- Focus (visible, never removed) ---------- */
:where(.wp-site-blocks *:focus-visible) {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
	border-radius: 2px;
}

.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/* Skip link that WordPress injects: make sure it sits above the sticky header. */
.skip-link.screen-reader-text:focus {
	z-index: 100001;
}

/* ---------- Typography helpers (from Twenty Twenty-Five) ---------- */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

h1 {
	text-wrap: balance;
}

.more-link {
	display: block;
}

:where(pre) {
	overflow-x: auto;
}

/* ---------- Sticky header ---------- */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	background-color: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

@media (max-width: 600px) {
	/* The admin bar is not fixed on small screens, so stick to the very top. */
	.wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

/* Keep in-page anchors from hiding under the sticky header. */
html {
	scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 5rem);
}


/* ---------- Wordmark ---------- */
.ste-wordmark {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	text-decoration: none;
}

.ste-wordmark img {
	display: block;
	height: var(--ste-wordmark-height, 3rem);
	width: auto;
	max-width: none;
}

/* Editor preview only: show the file that matches the active style. */
.ste-wordmark .ste-wordmark__light {
	display: var(--wp--custom--logo--light, block);
}

.ste-wordmark .ste-wordmark__dark {
	display: var(--wp--custom--logo--dark, none);
}

.ste-wordmark--footer {
	--ste-wordmark-height: 2.75rem;
}

/* Header: wordmark on wider screens, stair icon on phones. Never both. */
.ste-wordmark--header img.ste-wordmark__icon {
	display: none;
}

@media (max-width: 600px) {
	.ste-wordmark {
		--ste-wordmark-height: 2.5rem;
	}

	.ste-wordmark--header img.ste-wordmark__text,
	.ste-wordmark--header img:not(.ste-wordmark__icon) {
		display: none;
	}

	.ste-wordmark--header img.ste-wordmark__icon.ste-wordmark__light,
	.ste-wordmark--header img.ste-wordmark__icon:not(.ste-wordmark__light):not(.ste-wordmark__dark) {
		display: block;
		height: 2.5rem;
	}
}

/* ---------- Navigation overlay (mobile) ---------- */
.wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	--navigation-layout-align: flex-start;
	padding: var(--wp--preset--spacing--40);
}

/* Core aligns the open menu to match the desktop alignment (right). Left reads better on a phone. */
.wp-block-navigation.items-justified-right .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation.items-justified-right .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--50);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
}

/* Current page in the main nav: a quiet sage underline. */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--brand);
	text-decoration-thickness: 3px;
	text-underline-offset: 0.4em;
}

/* ---------- Hero band ---------- */
.ste-hero .wp-block-buttons {
	row-gap: var(--wp--preset--spacing--20);
}

/* ---------- Post list (text-first) ---------- */
.ste-post-list .wp-block-post-template > li {
	border-top: 1px solid var(--wp--preset--color--line);
}

.ste-post-list .wp-block-post-template > li:last-child {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.ste-post-meta {
	color: var(--wp--preset--color--muted);
}

.ste-post-meta > * + *::before {
	content: "\00B7";
	margin-inline-end: 0.5em;
	color: var(--wp--preset--color--muted);
}

/* ---------- Pillars ---------- */
.ste-pillars .ste-pillar {
	border-top: 2px solid var(--wp--preset--color--brand);
	height: 100%;
}

.ste-pillars .ste-pillar h3 a {
	text-decoration: none;
}

.ste-pillars .ste-pillar h3 a:hover,
.ste-pillars .ste-pillar h3 a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--brand);
	text-decoration-thickness: 3px;
}

.ste-pillar__number {
	font-variant-numeric: tabular-nums;
}

/* ---------- Newsletter signup ---------- */
.ste-signup form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	align-items: stretch;
	margin: 0;
}

.ste-signup label {
	display: block;
	width: 100%;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

/* Inputs: style the theme's fallback form and most plugin forms the same way. */
.ste-signup input[type="email"],
.ste-signup input[type="text"],
.ste-signup input[type="name"] {
	flex: 1 1 16rem;
	min-width: 0;
	min-height: 3rem;
	padding: 0.75rem 1rem;
	border: 1.5px solid var(--wp--preset--color--contrast);
	border-radius: var(--wp--custom--radius--button);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
}

.ste-signup button,
.ste-signup input[type="submit"] {
	min-height: 3rem;
	padding: 0.75rem 1.5rem;
	border: 0;
	border-radius: var(--wp--custom--radius--button);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	cursor: pointer;
}

.ste-signup button:hover,
.ste-signup input[type="submit"]:hover {
	background: var(--wp--preset--color--accent-hover);
}

.ste-signup__note {
	color: var(--wp--preset--color--muted);
}

/* ---------- Social icons: use the text colour, not each network's brand colour ---------- */
.wp-block-social-links.is-style-logos-only.ste-social .wp-social-link {
	color: currentColor;
}

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

/* ---------- Pillar badge (post categories) ---------- */
.ste-pillar-badge {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.ste-pillar-badge .wp-block-post-terms__separator {
	display: none;
}

.ste-pillar-badge a {
	display: inline-block;
	padding: 0.2em 0.7em;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--on-brand);
	line-height: 1.5;
	text-decoration: none;
}

.ste-pillar-badge a:hover {
	text-decoration: underline;
}

.ste-signup input::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

/* ---------- Journal-style home (Harman direction) ---------- */
.ste-label {
	color: var(--wp--preset--color--brand-ink);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ste-featured .wp-block-post-template > li + li .ste-featured__item,
.ste-featured__item {
	border-top: 1px solid var(--wp--preset--color--line);
}

.ste-meta-row {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
}

.ste-meta-row > * {
	margin: 0;
}

.ste-featured .wp-block-post-title {
	text-wrap: balance;
}

.ste-read-more {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--brand);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

.ste-read-more:hover {
	text-decoration-color: currentColor;
}

.ste-title-list .wp-block-post-template > li {
	border-top: 1px solid var(--wp--preset--color--line);
}

.ste-title-list .wp-block-post-template > li:last-child {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.ste-title-list .wp-block-post-title {
	flex: 1 1 18rem;
	margin: 0;
}

.ste-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.ste-pills li {
	margin: 0;
}

.ste-pills a {
	display: inline-block;
	padding: 0.45em 0.95em;
	border: 1.5px solid var(--wp--preset--color--brand);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.ste-pills a:hover,
.ste-pills a:focus-visible {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--on-brand);
}

/* Centred post header (single posts) */
.ste-pillar-badge.has-text-align-center {
	justify-content: center;
}

/* The first featured story sits right under the sage band: no divider, less space,
   so its title starts to show before people scroll. */
.ste-intro + .ste-featured .wp-block-post-template > li:first-child .ste-featured__item {
	border-top: 0;
	padding-top: var(--wp--preset--spacing--40) !important;
}

/* Standalone small links get a tap area of at least 24px (WCAG 2.2 target size). */
.ste-tap a {
	display: inline-block;
	min-height: 24px;
	padding-block: 0.25rem;
}

/* ---------- Hero variants ---------- */
.ste-name-note {
	max-width: 26rem;
}

.ste-byline {
	opacity: 0.9;
}

.ste-hero-card {
	box-shadow: 0 1px 0 rgb(0 0 0 / 0.04), 0 12px 32px -18px rgb(0 0 0 / 0.35);
}

.ste-hero-card > :first-child {
	margin-top: 0;
}

/* Stairs: a two-layer landscape behind the hero text.
   Generated by dev/build-stairs.py; edit the step lists there, not here.
   Far layer: pale, many small uneven steps across the whole band, up to the top right.
   Near layer: fewer, bigger uneven steps over the lower part, with two steps back down
   and a landing: you take the stairs, change floors, and sometimes go back down.
   The coral dot climbs the near steps, then (on wider screens) jumps back onto the
   farther steps, then forward again and up to the top. It plays once, under 5 seconds, so no pause
   control is needed under WCAG 2.2.2. Transform-only motion. */
.ste-hero-stairs {
	--ste-far-h: 100%;
	--ste-near-h: 74%;
	--ste-dot: clamp(18px, 2vw, 30px);
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.ste-stairs-art,
.ste-stairs-art > span {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
}

.ste-stairs-art {
	top: 0;
	z-index: -1;
	margin: 0 !important;
	max-width: none !important;
}

.ste-stairs-art__far {
	bottom: -1px;
	height: calc(var(--ste-far-h) + 1px);
	/* Always a lighter tint of the band, so the dark hero text stays readable on it (light and dark styles). */
	background: color-mix(in srgb, var(--wp--custom--stairs-tint, #FAF6EF) 22%, var(--wp--preset--color--brand));
	clip-path: polygon(0% 100%, 0% 78%, 4% 78%, 4% 74%, 10% 74%, 10% 76%, 13% 76%, 13% 69%, 20% 69%, 20% 64%, 25% 64%, 25% 66%, 29% 66%, 29% 58%, 37% 58%, 37% 52%, 42% 52%, 42% 47%, 48% 47%, 48% 49%, 51% 49%, 51% 41%, 58% 41%, 58% 35%, 63% 35%, 63% 30%, 69% 30%, 69% 32%, 73% 32%, 73% 23%, 81% 23%, 81% 16%, 86% 16%, 86% 9%, 94% 9%, 94% 4%, 100% 4%, 100% 100%);
}

.ste-stairs-art__near {
	bottom: -1px;
	height: calc(var(--ste-near-h) + 1px);
	background: color-mix(in srgb, var(--wp--custom--stairs-tint, #FAF6EF) 48%, var(--wp--preset--color--brand));
	clip-path: polygon(0% 100%, 0% 90%, 9% 90%, 9% 83%, 16% 83%, 16% 87%, 27% 87%, 27% 77%, 33% 77%, 33% 69%, 43% 69%, 43% 74%, 48% 74%, 48% 62%, 60% 62%, 60% 51%, 68% 51%, 68% 44%, 74% 44%, 74% 30%, 84% 30%, 84% 17%, 91% 17%, 91% 6%, 100% 6%, 100% 100%);
}

/* The dot is drawn at the bottom-left of a strip the size of the near layer,
   so translate percentages are percentages of that layer's width and height. */
.ste-stairs-art__dot {
	height: var(--ste-near-h);
	background: radial-gradient(circle closest-side, var(--wp--preset--color--accent) calc(100% - 1px), transparent 100%) no-repeat 0 100% / var(--ste-dot) var(--ste-dot);
	translate: calc(95.5% - var(--ste-dot) / 2) 0;
	transform: translateY(calc(-0.94 * 100%));
}

@media (prefers-reduced-motion: no-preference) {
	.ste-stairs-art__dot {
		will-change: translate, transform;
		animation:
			ste-climb-x 4.9s cubic-bezier(0.45, 0, 0.55, 1) 0.3s both,
			ste-climb-y 4.9s linear 0.3s both;
	}
}

@keyframes ste-climb-x {
	0%, 3% { translate: calc(4.5% - var(--ste-dot) / 2) 0; }
	9.57%, 10.46% { translate: calc(12.5% - var(--ste-dot) / 2) 0; }
	17.03%, 17.92% { translate: calc(21.5% - var(--ste-dot) / 2) 0; }
	24.49%, 25.38% { translate: calc(30.0% - var(--ste-dot) / 2) 0; }
	31.95%, 32.85% { translate: calc(38.0% - var(--ste-dot) / 2) 0; }
	39.41%, 40.31% { translate: calc(45.5% - var(--ste-dot) / 2) 0; }
	46.87%, 47.77% { translate: calc(54.0% - var(--ste-dot) / 2) 0; }
	54.34%, 55.23% { translate: calc(60.5% - var(--ste-dot) / 2) 0; }
	61.80%, 62.69% { translate: calc(66.0% - var(--ste-dot) / 2) 0; }
	69.26%, 70.15% { translate: calc(64.0% - var(--ste-dot) / 2) 0; }
	76.72%, 77.62% { translate: calc(71.0% - var(--ste-dot) / 2) 0; }
	84.18%, 85.08% { translate: calc(79.0% - var(--ste-dot) / 2) 0; }
	91.64%, 92.54% { translate: calc(87.5% - var(--ste-dot) / 2) 0; }
	99.10%, 100% { translate: calc(95.5% - var(--ste-dot) / 2) 0; }
}

@keyframes ste-climb-y {
	0% { transform: translateY(calc(-0.1 * 100%)); }
	3% { transform: translateY(calc(-0.1 * 100%)); animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); }
	6.13% { transform: translateY(calc(-0.17 * 100% - var(--ste-dot) * 1.6)); animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45); }
	9.57% { transform: translateY(calc(-0.17 * 100%)); animation-timing-function: linear; }
	10.46% { transform: translateY(calc(-0.17 * 100%)); animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); }
	13.60% { transform: translateY(calc(-0.17 * 100% - var(--ste-dot) * 1.1)); animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45); }
	17.03% { transform: translateY(calc(-0.13 * 100%)); animation-timing-function: linear; }
	17.92% { transform: translateY(calc(-0.13 * 100%)); animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); }
	21.06% { transform: translateY(calc(-0.23 * 100% - var(--ste-dot) * 1.6)); animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45); }
	24.49% { transform: translateY(calc(-0.23 * 100%)); animation-timing-function: linear; }
	25.38% { transform: translateY(calc(-0.23 * 100%)); animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); }
	28.52% { transform: translateY(calc(-0.31 * 100% - var(--ste-dot) * 1.6)); animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45); }
	31.95% { transform: translateY(calc(-0.31 * 100%)); animation-timing-function: linear; }
	32.85% { transform: translateY(calc(-0.31 * 100%)); animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); }
	35.98% { transform: translateY(calc(-0.31 * 100% - var(--ste-dot) * 1.1)); animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45); }
	39.41% { transform: translateY(calc(-0.26 * 100%)); animation-timing-function: linear; }
	40.31% { transform: translateY(calc(-0.26 * 100%)); animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); }
	43.44% { transform: translateY(calc(-0.38 * 100% - var(--ste-dot) * 1.6)); animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45); }
	46.87% { transform: translateY(calc(-0.38 * 100%)); animation-timing-function: linear; }
	47.77% { transform: translateY(calc(-0.38 * 100%)); animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); }
	50.90% { transform: translateY(calc(-0.8784 * 100% - var(--ste-dot) * 1.6)); animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45); }
	54.34% { transform: translateY(calc(-0.8784 * 100%)); animation-timing-function: linear; }
	55.23% { transform: translateY(calc(-0.8784 * 100%)); animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); }
	58.36% { transform: translateY(calc(-0.9459 * 100% - var(--ste-dot) * 1.6)); animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45); }
	61.80% { transform: translateY(calc(-0.9459 * 100%)); animation-timing-function: linear; }
	62.69% { transform: translateY(calc(-0.9459 * 100%)); animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); }
	65.83% { transform: translateY(calc(-0.9459 * 100% - var(--ste-dot) * 1.1)); animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45); }
	69.26% { transform: translateY(calc(-0.49 * 100%)); animation-timing-function: linear; }
	70.15% { transform: translateY(calc(-0.49 * 100%)); animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); }
	73.29% { transform: translateY(calc(-0.56 * 100% - var(--ste-dot) * 1.6)); animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45); }
	76.72% { transform: translateY(calc(-0.56 * 100%)); animation-timing-function: linear; }
	77.62% { transform: translateY(calc(-0.56 * 100%)); animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); }
	80.75% { transform: translateY(calc(-0.7 * 100% - var(--ste-dot) * 1.6)); animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45); }
	84.18% { transform: translateY(calc(-0.7 * 100%)); animation-timing-function: linear; }
	85.08% { transform: translateY(calc(-0.7 * 100%)); animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); }
	88.21% { transform: translateY(calc(-0.83 * 100% - var(--ste-dot) * 1.6)); animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45); }
	91.64% { transform: translateY(calc(-0.83 * 100%)); animation-timing-function: linear; }
	92.54% { transform: translateY(calc(-0.83 * 100%)); animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); }
	95.67% { transform: translateY(calc(-0.94 * 100% - var(--ste-dot) * 1.6)); animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45); }
	99.10%, 100% { transform: translateY(calc(-0.94 * 100%)); }
}

@keyframes ste-climb-near-x {
	0%, 3% { translate: calc(4.5% - var(--ste-dot) / 2) 0; }
	10.76%, 11.82% { translate: calc(12.5% - var(--ste-dot) / 2) 0; }
	19.58%, 20.64% { translate: calc(21.5% - var(--ste-dot) / 2) 0; }
	28.40%, 29.45% { translate: calc(30.0% - var(--ste-dot) / 2) 0; }
	37.21%, 38.27% { translate: calc(38.0% - var(--ste-dot) / 2) 0; }
	46.03%, 47.09% { translate: calc(45.5% - var(--ste-dot) / 2) 0; }
	54.85%, 55.91% { translate: calc(54.0% - var(--ste-dot) / 2) 0; }
	63.67%, 64.73% { translate: calc(64.0% - var(--ste-dot) / 2) 0; }
	72.49%, 73.55% { translate: calc(71.0% - var(--ste-dot) / 2) 0; }
	81.31%, 82.36% { translate: calc(79.0% - var(--ste-dot) / 2) 0; }
	90.12%, 91.18% { translate: calc(87.5% - var(--ste-dot) / 2) 0; }
	98.94%, 100% { translate: calc(95.5% - var(--ste-dot) / 2) 0; }
}

@keyframes ste-climb-near-y {
	0% { transform: translateY(calc(-0.1 * 100%)); }
	3% { transform: translateY(calc(-0.1 * 100%)); animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); }
	6.70% { transform: translateY(calc(-0.17 * 100% - var(--ste-dot) * 1.6)); animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45); }
	10.76% { transform: translateY(calc(-0.17 * 100%)); animation-timing-function: linear; }
	11.82% { transform: translateY(calc(-0.17 * 100%)); animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); }
	15.52% { transform: translateY(calc(-0.17 * 100% - var(--ste-dot) * 1.1)); animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45); }
	19.58% { transform: translateY(calc(-0.13 * 100%)); animation-timing-function: linear; }
	20.64% { transform: translateY(calc(-0.13 * 100%)); animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); }
	24.34% { transform: translateY(calc(-0.23 * 100% - var(--ste-dot) * 1.6)); animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45); }
	28.40% { transform: translateY(calc(-0.23 * 100%)); animation-timing-function: linear; }
	29.45% { transform: translateY(calc(-0.23 * 100%)); animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); }
	33.16% { transform: translateY(calc(-0.31 * 100% - var(--ste-dot) * 1.6)); animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45); }
	37.21% { transform: translateY(calc(-0.31 * 100%)); animation-timing-function: linear; }
	38.27% { transform: translateY(calc(-0.31 * 100%)); animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); }
	41.98% { transform: translateY(calc(-0.31 * 100% - var(--ste-dot) * 1.1)); animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45); }
	46.03% { transform: translateY(calc(-0.26 * 100%)); animation-timing-function: linear; }
	47.09% { transform: translateY(calc(-0.26 * 100%)); animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); }
	50.79% { transform: translateY(calc(-0.38 * 100% - var(--ste-dot) * 1.6)); animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45); }
	54.85% { transform: translateY(calc(-0.38 * 100%)); animation-timing-function: linear; }
	55.91% { transform: translateY(calc(-0.38 * 100%)); animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); }
	59.61% { transform: translateY(calc(-0.49 * 100% - var(--ste-dot) * 1.6)); animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45); }
	63.67% { transform: translateY(calc(-0.49 * 100%)); animation-timing-function: linear; }
	64.73% { transform: translateY(calc(-0.49 * 100%)); animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); }
	68.43% { transform: translateY(calc(-0.56 * 100% - var(--ste-dot) * 1.6)); animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45); }
	72.49% { transform: translateY(calc(-0.56 * 100%)); animation-timing-function: linear; }
	73.55% { transform: translateY(calc(-0.56 * 100%)); animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); }
	77.25% { transform: translateY(calc(-0.7 * 100% - var(--ste-dot) * 1.6)); animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45); }
	81.31% { transform: translateY(calc(-0.7 * 100%)); animation-timing-function: linear; }
	82.36% { transform: translateY(calc(-0.7 * 100%)); animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); }
	86.07% { transform: translateY(calc(-0.83 * 100% - var(--ste-dot) * 1.6)); animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45); }
	90.12% { transform: translateY(calc(-0.83 * 100%)); animation-timing-function: linear; }
	91.18% { transform: translateY(calc(-0.83 * 100%)); animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); }
	94.89% { transform: translateY(calc(-0.94 * 100% - var(--ste-dot) * 1.6)); animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45); }
	98.94%, 100% { transform: translateY(calc(-0.94 * 100%)); }
}

/* Phones and small tablets: keep the steps as big as on desktop by drawing the staircase
   wider than the screen and showing its upper, right-hand part. The dot climbs the
   near steps only. */
@media (max-width: 781px) {
	.ste-hero-stairs {
		--ste-far-h: 55%;
		--ste-near-h: 9rem;
		--ste-dot: 18px;
		padding-bottom: 9.5rem !important;
	}

	.ste-stairs-art {
		left: auto;
		width: 240%;
	}

	.ste-stairs-art__dot {
		translate: calc(95.5% - var(--ste-dot) / 2) 0;
	transform: translateY(calc(-0.94 * 100%));
	}
}

@media (max-width: 781px) and (prefers-reduced-motion: no-preference) {
	.ste-stairs-art__dot {
		animation:
			ste-climb-near-x 4.6s cubic-bezier(0.45, 0, 0.55, 1) 0.3s both,
			ste-climb-near-y 4.6s linear 0.3s both;
	}
}

/* The text may overlap the stairs now; give the headline room for one sentence per line. */
.ste-hero-stairs__copy > * {
	max-width: 48rem !important;
}


/* ---------- Hero: email form, promise, byline with photo ---------- */
.ste-hero-title {
	text-wrap: balance;
	/* Sized so each of the three sentences fits on one line next to the stairs. */
	font-size: clamp(2.25rem, 1.2rem + 2.6vw, 3rem) !important;
}

.ste-signup--hero form {
	flex-wrap: wrap;
	max-width: 38rem;
	gap: 0.5rem;
}

.ste-signup--hero input[type="email"] {
	flex: 1 1 0;
	min-width: 12rem;
	border-color: var(--wp--preset--color--on-brand);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.ste-signup--hero button {
	flex: 0 0 auto;
	white-space: nowrap;
}

@media (max-width: 520px) {
	.ste-signup--hero form {
		flex-wrap: wrap;
	}

	.ste-signup--hero input[type="email"],
	.ste-signup--hero button {
		flex: 1 1 100%;
	}
}

.ste-hero-promise {
	opacity: 0.92;
}

.ste-hero-byline .ste-byline {
	margin: 0;
	max-width: 32rem;
	line-height: 1.4;
}

.ste-hero-byline .ste-byline a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.ste-author-photo {
	flex: none;
	line-height: 0;
}

.ste-author-photo__img {
	display: block;
	width: var(--ste-author-size, 56px);
	height: var(--ste-author-size, 56px);
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 3px var(--wp--preset--color--base);
}


/* Signup form message (errors from the newsletter tool). */
.ste-signup__message {
	flex-basis: 100%;
	margin: 0.25rem 0 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.ste-signup button:disabled {
	cursor: progress;
	opacity: 0.8;
}

/* ==========================================================================
   Phase 2: blog, pillar pages, posts, Start here, About
   ========================================================================== */

/* Pillar filter (Blog and pillar pages) */
.ste-filter ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.ste-filter li {
	margin: 0;
}

.ste-filter a {
	display: inline-block;
	padding: 0.45em 0.95em;
	border: 1.5px solid var(--wp--preset--color--brand);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.ste-filter a:hover,
.ste-filter a:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--brand) 35%, transparent);
}

.ste-filter a.is-current {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--on-brand);
	font-weight: 600;
}

.ste-archive-header .wp-block-term-description p {
	margin: 0;
}

/* Post header: story hook under the title */
.ste-dek {
	max-width: 36rem;
	margin-inline: auto;
	color: var(--wp--preset--color--muted);
	font-style: italic;
	line-height: 1.5;
}

.ste-dek p {
	margin: 0;
}

/* End of post: author box */
.ste-author-box p {
	margin: 0;
	line-height: 1.5;
}

/* Cards (related posts, card grid) */
.ste-card {
	height: 100%;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface);
}

.ste-card .wp-block-post-title {
	margin: 0;
	line-height: 1.2;
}

.ste-card .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.ste-related .ste-label {
	margin-bottom: var(--wp--preset--spacing--30);
}

/* Reflection question box */
.ste-reflection > * {
	margin: 0;
}

.ste-reflection > * + * {
	margin-top: var(--wp--preset--spacing--20);
}

/* Start here: numbered reading list */
.ste-start-list {
	counter-reset: ste-start;
}

.ste-start-list > li {
	position: relative;
	padding-left: 3.25rem;
	border-top: 1px solid var(--wp--preset--color--line);
	counter-increment: ste-start;
}

.ste-start-list > li:last-child {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.ste-start-list > li::before {
	content: counter(ste-start, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: calc(var(--wp--preset--spacing--40) + 0.15rem);
	color: var(--wp--preset--color--brand-ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: 1;
}

/* About: photo column */
.ste-about__photo .ste-author-photo.is-portrait {
	position: sticky;
	top: 7rem;
}

.ste-author-photo.is-portrait .ste-author-photo__img {
	width: 100%;
	max-width: 22rem;
	height: auto;
	aspect-ratio: 1;
	border-radius: var(--wp--custom--radius--card);
	box-shadow: none;
}

@media (max-width: 781px) {
	.ste-about__photo {
		order: -1;
	}

	.ste-about__photo .ste-author-photo.is-portrait {
		position: static;
	}

	.ste-author-photo.is-portrait .ste-author-photo__img {
		max-width: 14rem;
	}
}

/* ==========================================================================
   Listen and share (post date row) and the player bar
   ========================================================================== */
.ste-actions {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.ste-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.ste-action .ste-icon {
	width: 1.125rem;
	height: 1.125rem;
}

.ste-action:hover {
	background: var(--wp--preset--color--surface);
}

.ste-action--listen,
.ste-player__toggle {
	border-color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--on-brand);
}

.ste-action--listen:hover,
.ste-player__toggle:hover {
	border-color: var(--wp--preset--color--brand-deep);
	background: var(--wp--preset--color--brand);
}

.ste-action:focus-visible,
.ste-share-menu a:focus-visible,
.ste-share-menu button:focus-visible,
.ste-player button:focus-visible,
.ste-player__range:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

.ste-share-menu {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	z-index: 20;
	min-width: 11rem;
	padding: 0.35rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base);
	box-shadow: 0 8px 24px rgb(0 0 0 / 0.08);
	text-align: left;
}

.ste-share-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ste-share-menu li {
	margin: 0;
	padding: 0;
}

.ste-share-menu a,
.ste-share-menu button {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	min-height: 2.5rem;
	padding: 0.4rem 0.7rem;
	border: 0;
	border-radius: 0.5rem;
	background: none;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	cursor: pointer;
}

.ste-share-menu a:hover,
.ste-share-menu button:hover {
	background: var(--wp--preset--color--surface);
}

.ste-share-menu .ste-icon {
	width: 1.125rem;
	height: 1.125rem;
	flex: none;
}

/* Player bar: slides up from the bottom while a post is playing. */
.ste-player {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100;
	padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base);
	box-shadow: 0 -6px 20px rgb(0 0 0 / 0.06);
	transform: translateY(110%);
	visibility: hidden;
}

.ste-player.is-open {
	transform: none;
	visibility: visible;
}

@media (prefers-reduced-motion: no-preference) {
	.ste-player {
		transition: transform 0.25s ease, visibility 0.25s;
	}
}

.ste-player__inner {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	max-width: 46rem;
	margin: 0 auto;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
}

.ste-player__range {
	flex: 1;
	min-width: 4rem;
	height: 1.5rem;
	margin: 0;
	accent-color: var(--wp--preset--color--brand-deep);
	cursor: pointer;
}

.ste-player__time {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ste-player__speed {
	min-width: 3rem;
	min-height: 2rem;
	padding: 0.25rem 0.6rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

.ste-player__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: none;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
}

.ste-player__close:hover {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
}

.ste-player__close .ste-icon {
	width: 1.125rem;
	height: 1.125rem;
}

body.ste-has-player {
	padding-bottom: 4.5rem;
}

@media (max-width: 400px) {
	.ste-player__inner {
		gap: 0.5rem;
	}

	.ste-player__time {
		display: none;
	}
}

/* Post date row on two lines, at every width: the text first (date ·
   reading time), then the shapes (pillar badge, play, share). */
.ste-post-header .ste-meta-row {
	row-gap: 0.375rem; /* Counted twice: the line break below is its own empty row. */
}

.ste-post-header .ste-meta-row > .wp-block-post-date {
	order: 1;
}

.ste-post-header .ste-meta-row > .wp-block-post-time-to-read {
	order: 2;
}

.ste-post-header .ste-meta-row > .wp-block-post-time-to-read::before {
	content: "·";
	margin-inline-end: 0.75rem;
}

.ste-post-header .ste-meta-row::after {
	content: "";
	flex-basis: 100%;
	order: 3;
	height: 0;
}

.ste-post-header .ste-meta-row > .ste-pillar-badge {
	order: 4;
}

.ste-post-header .ste-meta-row > .ste-actions {
	order: 5;
}

/* Wide and full-width blocks inside a post (for example a big diagram set to
   "Wide width" in the editor) extend past the reading column. Posts sit in a
   narrow constrained group, so the block breaks out from the centre. */
.wp-block-post-content > .alignwide {
	width: min(var(--wp--style--global--wide-size), calc(100vw - var(--wp--style--root--padding-left, 1rem) - var(--wp--style--root--padding-right, 1rem)));
	max-width: none !important;
	margin-left: 50% !important;
	transform: translateX(-50%);
}

.wp-block-post-content > .alignfull {
	width: 100vw;
	max-width: none !important;
	margin-left: 50% !important;
	transform: translateX(-50%);
}