/* Ahead Creative theme styles
   Ported from prototype/styles.css, which stays the design source of truth. The light tokens
   below come from theme.json presets; everything else matches the prototype unless a comment
   marked "WordPress:" says why it differs. */

/* Prototype notes
   Layout: sky-blue masthead over a stacked blue and orange chevron, then quiet reading sections.
   Shared by every page. Homepage variants A, B and C only differ in which sections they use. */

:root {
	--sky: var(--wp--preset--color--sky);
	--sky-deep: var(--wp--preset--color--sky-deep);
	--on-sky: var(--wp--preset--color--on-sky);
	--chip: rgba(13, 43, 62, 0.13);
	--highlight: var(--wp--preset--color--highlight);

	--paper: var(--wp--preset--color--paper);
	--wash: var(--wp--preset--color--wash);
	--line: var(--wp--preset--color--line);
	--ink: var(--wp--preset--color--ink);
	--text: var(--wp--preset--color--body);
	--muted: var(--wp--preset--color--muted);

	--orange: var(--wp--preset--color--orange);
	--on-orange: var(--wp--preset--color--on-orange);
	--link: var(--wp--preset--color--links);
	--link-hover: var(--wp--preset--color--links-hover);
	--code-bg: var(--wp--preset--color--code-bg);
	--error: #b42318;
	--night: var(--wp--preset--color--night);
	--on-night: var(--wp--preset--color--on-night);

	--serif: var(--wp--preset--font-family--serif);
	--sans: var(--wp--preset--font-family--sans);
	--mono: var(--wp--preset--font-family--mono);

	--measure: 38rem;
	--wide: 68rem;
	--gutter: clamp(1rem, 4vw, 2rem);
	--chevron: clamp(1.75rem, 5vw, 3.5rem);

	color-scheme: light;
}

/* Dark mode redefines the palette presets themselves, so blocks given a palette colour in the
   editor follow the colour scheme too */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--wp--preset--color--sky: #1b5675;
		--wp--preset--color--sky-deep: #154862;
		--wp--preset--color--on-sky: #e4f3fb;
		--chip: rgba(228, 243, 251, 0.14);
		--wp--preset--color--highlight: rgba(255, 154, 60, 0.42);
		--wp--preset--color--paper: #0e171d;
		--wp--preset--color--wash: #142129;
		--wp--preset--color--line: #253640;
		--wp--preset--color--ink: #eaf2f6;
		--wp--preset--color--body: #cfdbe2;
		--wp--preset--color--muted: #93a6b2;
		--wp--preset--color--orange: #ff9a3c;
		--wp--preset--color--links: #ffad5e;
		--wp--preset--color--links-hover: #ffd0a1;
		--wp--preset--color--code-bg: #1b2a33;
		--error: #ff8f80;
		--wp--preset--color--night: #0a2333;
		--wp--preset--color--on-night: #e4f3fb;
		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--wp--preset--color--sky: #1b5675;
	--wp--preset--color--sky-deep: #154862;
	--wp--preset--color--on-sky: #e4f3fb;
	--chip: rgba(228, 243, 251, 0.14);
	--wp--preset--color--highlight: rgba(255, 154, 60, 0.42);
	--wp--preset--color--paper: #0e171d;
	--wp--preset--color--wash: #142129;
	--wp--preset--color--line: #253640;
	--wp--preset--color--ink: #eaf2f6;
	--wp--preset--color--body: #cfdbe2;
	--wp--preset--color--muted: #93a6b2;
	--wp--preset--color--orange: #ff9a3c;
	--wp--preset--color--links: #ffad5e;
	--wp--preset--color--links-hover: #ffd0a1;
	--wp--preset--color--code-bg: #1b2a33;
	--error: #ff8f80;
	--wp--preset--color--night: #0a2333;
	--wp--preset--color--on-night: #e4f3fb;
	color-scheme: dark;
}

/* Base */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: 1.5rem;
}

/* WordPress: the body's colours, font, size and line height come from theme.json, so they
   can be changed in Styles */
body {
	margin: 0;
	font-optical-sizing: auto;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

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

/* WordPress: link colours come from theme.json; the underline's colour, weight and offset
   stay here, because theme.json can't set them */
a {
	text-decoration-color: color-mix(in srgb, var(--orange) 55%, transparent);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.2em;
	transition: text-decoration-color 0.15s, color 0.15s;
}

a:hover {
	text-decoration-color: currentColor;
}

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

/* WordPress: heading colour, font, weight and line height come from theme.json */
h1,
h2,
h3,
h4 {
	text-wrap: balance;
	margin: 0;
}

/* WordPress: the editor draws a block's hover outline with an absolutely placed ::after at the
   end of its text. Chrome's balancing counts it and adds an empty line, so a heading grows and
   the page jumps under the pointer. Headings get the same outline drawn on themselves instead */
.editor-styles-wrapper .is-outline-mode :is(h1, h2, h3, h4).block-editor-block-list__block:not(.remove-outline).is-hovered:not(.is-selected) {
	--outline-width: calc(var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
	outline: var(--outline-width) solid var(--wp-admin-theme-color);
	outline-offset: calc(var(--outline-width) * -1);
	box-shadow: inset 0 0 0 calc(var(--outline-width) + 0.5px) hsl(0 0% 100% / 0.7);
}

.editor-styles-wrapper .is-outline-mode :is(h1, h2, h3, h4).block-editor-block-list__block:not(.remove-outline).is-hovered:not(.is-selected)::after {
	content: none;
}

/* WordPress: the editor's post title sits above the content, outside its layout, so the reset
   above leaves no space under it, in proportion to the title's size. Only the editor has
   .editor-post-title; on the site the title is in the masthead */
.editor-styles-wrapper .editor-post-title {
	margin-block-end: 0.7em;
}

p {
	margin: 0;
	text-wrap: pretty;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.nowrap {
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: 1rem;
	top: -4rem;
	z-index: 10;
	padding: 0.5rem 1rem;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-weight: 600;
}

.skip-link:focus {
	top: 1rem;
}

.wrap {
	width: min(100% - 2 * var(--gutter), var(--wide));
	margin-inline: auto;
}

.wrap--reading {
	width: min(100% - 2 * var(--gutter), var(--measure));
}

/* Masthead colours. Every page is sky blue except About, which is orange */

:root {
	--stripe: var(--orange);
}

.mast-orange {
	--sky: #f6a24e;
	--sky-deep: #ee8a2a;
	--on-sky: #0d2b3e;
	--stripe: #4bb4e1;
	--highlight: #ffe0a8;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .mast-orange {
		--sky: #9c4c12;
		--highlight: rgba(255, 224, 168, 0.28);
		--sky-deep: #b25a18;
		--on-sky: #fff1e3;
		--stripe: #1b5675;
	}
}

:root[data-theme="dark"] .mast-orange {
	--sky: #9c4c12;
	--highlight: rgba(255, 224, 168, 0.28);
	--sky-deep: #b25a18;
	--on-sky: #fff1e3;
	--stripe: #1b5675;
}

/* The logo is the core Site Logo block. When it's an SVG, it's inlined (see the plugin's
   inc/site-logo.php), so it takes the colour of the text around it: the masthead colour's
   text in the header, the heading colour in the footer */
.site-logo a {
	display: inline-flex;
	color: inherit;
}

.site-header .site-logo svg {
	width: clamp(150px, 30vw, 190px);
	height: auto;
}

footer .site-logo {
	color: var(--ink);
}

.site-nav ul {
	display: flex;
	gap: clamp(0.75rem, 3vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav a {
	display: block;
	padding-block: 0.375rem;
	color: var(--on-sky);
	font-family: var(--sans);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.site-nav a:hover {
	border-bottom-color: color-mix(in srgb, var(--on-sky) 40%, transparent);
}

.site-nav a[aria-current] {
	border-bottom-color: var(--on-sky);
}

/* The light and dark mode switch after the navigation (inc/theme-toggle.php) */
.theme-toggle {
	display: grid;
	flex: none;
	place-items: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--on-sky) 10%, transparent);
	color: var(--on-sky);
	cursor: pointer;
	transition: background-color 0.2s;
}

.theme-toggle:hover {
	background: color-mix(in srgb, var(--on-sky) 18%, transparent);
}

.theme-toggle svg {
	width: 1rem;
	height: 1rem;
}

/* Below this width the header wraps, so the navigation gets its own row and the switch sits
   at the top right, centred on the logo (24px tall below 1.25rem of padding).
   WordPress: the navigation block is position: relative, so it's reset here for the switch
   to sit against the header instead */
@media (max-width: 31.99rem) {
	.site-header {
		position: relative;
	}

	.site-header > .site-nav {
		position: static;
		flex-basis: 100%;
	}

	.site-nav .theme-toggle {
		position: absolute;
		top: 1rem;
		right: 0;
	}
}

/* WordPress: the flex layout zeroes its children's margins, hence the extra class */
@media (min-width: 32rem) {
	.site-nav .theme-toggle {
		margin-inline-start: clamp(0.25rem, 2vw, 1.25rem);
	}
}

.theme-toggle__sun {
	display: none;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .theme-toggle__moon {
		display: none;
	}

	:root:not([data-theme="light"]) .theme-toggle__sun {
		display: block;
	}
}

:root[data-theme="dark"] .theme-toggle__moon {
	display: none;
}

:root[data-theme="dark"] .theme-toggle__sun {
	display: block;
}

/* The colours fade across when the switch is used */
@media (prefers-reduced-motion: no-preference) {
	.is-switching-theme,
	.is-switching-theme * {
		transition: background-color 0.3s, color 0.3s, border-color 0.3s !important;
	}
}

/* Homepage intro */

.intro {
	padding-top: clamp(2rem, 7vw, 5rem);
}

.intro h1 {
	color: var(--on-sky);
	font-size: clamp(2.75rem, 9vw, 5.75rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1;
}

.intro p {
	max-width: 30em;
}

/* WordPress: a block style's settings have no specificity, so this would override the Kicker's */
.intro p:not(.is-style-kicker) {
	margin-top: clamp(1.25rem, 3vw, 2rem);
	font-size: clamp(1.1875rem, 2.6vw, 1.5rem);
	line-height: 1.75;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Highlighter-pen marks over the key words. The mark covers each word from the tops of its
   letters to the bottoms of its descenders, so nothing is cut through. The slight slant and
   uneven corners keep it looking hand-drawn. */
.chip {
	padding-inline: 0.2em;
	margin-inline: -0.1em;
	background: linear-gradient(178deg, transparent 4%, var(--chip-colour, var(--highlight)) 9%, var(--chip-colour, var(--highlight)) 91%, transparent 96%);
	border-radius: 0.15em 0.4em 0.2em 0.35em / 0.35em 0.2em 0.4em 0.25em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

a.chip {
	color: inherit;
	text-decoration: none;
}

a.chip:hover {
	--chip-colour: color-mix(in srgb, var(--highlight), var(--orange) 35%);
}

@media (prefers-reduced-motion: no-preference) {
	.chip {
		background-size: 0% 100%;
		background-repeat: no-repeat;
		animation: highlight 0.5s cubic-bezier(0.3, 0.7, 0.2, 1) forwards;
	}

	.chip:nth-of-type(2) { animation-delay: 0.25s; }
	.chip:nth-of-type(3) { animation-delay: 0.4s; }
	.chip:nth-of-type(4) { animation-delay: 0.55s; }

	@keyframes highlight {
		to { background-size: 100% 100%; }
	}
}

.meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	color: var(--muted);
	font-family: var(--sans);
	font-size: 0.875rem;
}

.meta a {
	color: inherit;
}

.post-link {
	color: var(--ink);
	text-decoration: none;
}

.post-link:hover {
	color: var(--link);
	text-decoration: underline;
	text-decoration-color: var(--orange);
}

/* Article */

.article-head {
	padding-top: clamp(2rem, 6vw, 4rem);
}

.article-head .crumb {
	color: var(--on-sky);
	font-family: var(--sans);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration-color: color-mix(in srgb, var(--on-sky) 40%, transparent);
}

.article-head h1 {
	margin-top: 1rem;
	color: var(--on-sky);
	font-size: clamp(2rem, 4.5vw, 3rem);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.1;
}

.article-head .meta {
	margin-top: 1.25rem;
	color: var(--on-sky);
	opacity: 0.85;
	font-size: 0.9375rem;
}

.prose {
	padding-block: clamp(2.5rem, 6vw, 4rem) 1rem;
	font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.1875rem);
	line-height: 1.75;
}

.prose > * + * {
	margin-top: 1.25em;
}

.prose > .lede {
	color: var(--ink);
	font-size: 1.2em;
	line-height: 1.6;
}

.prose h2 {
	margin-top: 2.25em;
	font-size: 1.6em;
	letter-spacing: -0.01em;
}

.prose h3 {
	margin-top: 2em;
	font-size: 1.2em;
}

.prose h2 + *,
.prose h3 + * {
	margin-top: 0.75em;
}

.prose ul,
.prose ol {
	padding-left: 1.25em;
}

.prose li + li {
	margin-top: 0.5em;
}

.prose li::marker {
	color: var(--orange);
}

.prose code {
	padding: 0.1em 0.35em;
	background: var(--code-bg);
	border-radius: 0.25em;
	font-family: var(--mono);
	font-size: 0.85em;
}

.prose figure {
	margin-inline: 0;
}

.prose figcaption {
	margin-top: 0.75rem;
	color: var(--muted);
	font-family: var(--sans);
	font-size: 0.875rem;
}

/* Video thumbnails link out to YouTube */

.video {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	max-width: 100%;
	overflow: hidden;
	background: var(--ink);
	border-radius: 0.5rem;
	color: #fff;
}

.video img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s;
}

.video:hover img {
	transform: scale(1.03);
}

.play {
	position: relative;
	display: grid;
	place-items: center;
	width: 4rem;
	height: 4rem;
	background: var(--orange);
	border-radius: 50%;
	box-shadow: 0 0 0 0.375rem color-mix(in srgb, var(--orange) 30%, transparent);
}

.play svg {
	width: 1.375rem;
	margin-left: 0.2rem;
}

.video--small .play {
	width: 2.25rem;
	height: 2.25rem;
	box-shadow: none;
}

.video--small .play svg {
	width: 0.875rem;
}

/* Article footer */

.article-end {
	display: grid;
	gap: 3rem;
	padding-block: 2rem clamp(3rem, 7vw, 5rem);
}

.author {
	display: flex;
	gap: 1.25rem;
	padding-top: 2rem;
	border-top: 1px solid var(--line);
	font-size: 1rem;
	line-height: 1.6;
}

/* WordPress: the Image block wraps the photo in a figure, which is the flex item, so the
   figure is what mustn't shrink */
.author .wp-block-image {
	flex-shrink: 0;
}

.author img {
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	filter: grayscale(1);
}

.author h2 {
	font-size: 1.125rem;
	margin-bottom: 0.25rem;
}

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

/* WordPress: stays here, not in the quotes block's style.css. Block styles load before the
   global styles, whose link hover colour has the same specificity and would win on hover */
.quote-source {
	color: var(--muted);
}

/* About page */

.page-intro {
	padding-top: clamp(2rem, 6vw, 4rem);
}

.page-intro h1 {
	color: var(--on-sky);
	font-size: clamp(2.5rem, 7vw, 4.5rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

.page-intro p {
	max-width: 32em;
	margin-top: 1.25rem;
	font-size: clamp(1.1875rem, 2.4vw, 1.4375rem);
	line-height: 1.6;
}

/* Photos of Dave, cut out and standing in the masthead */

.site-header,
.intro,
.page-intro,
.article-head {
	position: relative;
	z-index: 1;
}

@media (min-width: 60rem) {
	.has-photo .intro,
	.has-photo .page-intro {
		padding-right: clamp(16rem, 34vw, 30rem);
	}

	/* Only the fingertips of the left hand reach in behind the text, which sits above it */
	.has-photo--wide .intro {
		padding-right: calc(var(--photo-w) * 0.97 - var(--photo-shift) + var(--photo-right) - var(--wrap-edge));
	}

	/* A soft halo in the masthead colour keeps the words clear where they cross the hand */
	.has-photo--wide .intro p {
		text-shadow: 0 0 0.35em var(--sky), 0 0 0.35em var(--sky);
	}

	/* Scales down on smaller desktops, where the photo squeezes the column, so the name keeps to two lines */
	.has-photo--wide .intro h1 {
		font-size: clamp(2.75rem, 6.4vw, 5.75rem);
	}
}

@media (max-width: 59.99rem) {
	.has-photo .intro,
	.has-photo .page-intro {
		padding-bottom: 11rem;
	}

	.has-photo--wide .intro {
		padding-bottom: 12.5rem;
	}
}

.author img {
	background: var(--wash);
	filter: none;
	object-fit: cover;
}

/* Fixed brand colours for small marks that sit outside the page's masthead theme */

:root {
	--brand-sky: #4bb4e1;
	--brand-orange: #f27a00;
}

.meta-link {
	color: inherit;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}

.avatar {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	background: var(--wash);
	border-radius: 50%;
	color: var(--on-orange);
	font-family: var(--sans);
	font-size: 0.875rem;
	font-weight: 600;
	object-fit: cover;
}

.avatar--sky {
	background: var(--brand-sky);
}

.avatar--orange {
	background: #f6a24e;
}

.avatar--pale {
	background: #b7e2f3;
}

.link-button {
	justify-self: start;
	padding: 0;
	background: none;
	border: 0;
	color: var(--link);
	font-family: var(--sans);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--orange) 55%, transparent);
	text-underline-offset: 0.2em;
	cursor: pointer;
}

[hidden] {
	display: none !important;
}

circle,
rect,
ellipse) {
	fill: none;
	stroke: var(--ink);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ------------------------------------------------------------------
   WordPress core content blocks inside a post.
   Class names match the markup WordPress outputs, so these carry over to a theme.
   ------------------------------------------------------------------ */

body {
	overflow-x: clip;
}

/* Inline formats */

.prose mark {
	padding: 0 0.15em;
	background: color-mix(in srgb, var(--brand-orange) 28%, transparent);
	border-radius: 0.15em;
	color: inherit;
}

.prose kbd {
	padding: 0.05em 0.4em;
	border: 1px solid var(--line);
	border-bottom-width: 2px;
	border-radius: 0.25rem;
	font-family: var(--mono);
	font-size: 0.8em;
}

.prose s {
	text-decoration-color: var(--muted);
}

.prose sub,
.prose sup {
	line-height: 0;
}

.has-drop-cap::first-letter {
	float: left;
	margin: 0.08em 0.12em 0 0;
	color: var(--ink);
	font-size: 4.1em;
	font-weight: 600;
	line-height: 0.82;
}

/* Headings 4 to 6 */

.prose h4 {
	margin-top: 1.75em;
	font-size: 1.05em;
}

.prose h5,
.prose h6 {
	margin-top: 1.5em;
	font-family: var(--sans);
	font-size: 0.95em;
	letter-spacing: 0;
}

.prose h6 {
	color: var(--muted);
}

/* Lists */

.prose ol li::marker {
	font-family: var(--sans);
	font-weight: 600;
}

.prose li > ul,
.prose li > ol {
	margin-top: 0.5em;
}

/* Quote and Pullquote */

.wp-block-quote {
	margin-inline: 0;
	padding-left: 1.25em;
	border-left: 4px solid var(--brand-orange);
	color: var(--ink);
	font-size: 1.1em;
	font-style: italic;
}

.wp-block-quote cite,
.wp-block-pullquote cite {
	display: block;
	margin-top: 0.75em;
	color: var(--muted);
	font-family: var(--sans);
	font-size: 0.8rem;
	font-style: normal;
}

.wp-block-pullquote {
	padding-block: 1.75em;
	border-block: 2px solid var(--line);
	text-align: center;
}

.wp-block-pullquote::before {
	content: "";
	display: block;
	width: 2rem;
	height: 1rem;
	margin: 0 auto 1rem;
	background: var(--brand-orange);
	clip-path: polygon(0 0, 50% 60%, 100% 0, 100% 40%, 50% 100%, 0 40%);
}

.wp-block-pullquote blockquote {
	margin: 0;
}

.wp-block-pullquote p {
	color: var(--ink);
	font-size: clamp(1.4rem, 3vw, 1.75rem);
	font-weight: 500;
	line-height: 1.3;
	text-wrap: balance;
}

/* Code, Preformatted and Verse */

.wp-block-code {
	overflow-x: auto;
	padding: 1.25em 1.5em;
	background: #0d2b3e;
	border-radius: 0.5rem;
	color: #eaf6fc;
	font-size: 0.8em;
	line-height: 1.65;
	tab-size: 4;
}

.prose .wp-block-code code {
	padding: 0;
	background: none;
	color: inherit;
	font-size: 1em;
}

.wp-block-preformatted {
	overflow-x: auto;
	padding: 1em 1.25em;
	background: var(--wash);
	border-radius: 0.5rem;
	font-family: var(--mono);
	font-size: 0.8em;
	line-height: 1.6;
}

.wp-block-verse {
	padding-left: 1.25em;
	border-left: 2px solid var(--brand-sky);
	font-family: var(--serif);
	font-style: italic;
	line-height: 1.7;
	white-space: pre-wrap;
}

/* Table */

.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875em;
	font-variant-numeric: tabular-nums;
}

.wp-block-table th,
.wp-block-table td {
	padding: 0.65em 0.85em;
	border-bottom: 1px solid var(--line);
	text-align: left;
}

.wp-block-table th {
	color: var(--ink);
	font-family: var(--sans);
	font-weight: 600;
}

.wp-block-table thead th {
	border-bottom: 2px solid var(--ink);
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background: var(--wash);
}

.wp-block-table.is-style-stripes td {
	border-bottom: 0;
}

/* Details */

.wp-block-details {
	padding: 0.85em 1.1em;
	border: 1px solid var(--line);
	border-radius: 0.5rem;
}

.wp-block-details summary {
	display: flex;
	align-items: center;
	gap: 0.6em;
	color: var(--ink);
	font-family: var(--sans);
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::before {
	content: "";
	width: 0.75em;
	height: 0.4em;
	background: var(--brand-orange);
	clip-path: polygon(0 0, 50% 60%, 100% 0, 100% 40%, 50% 100%, 0 40%);
	transform: rotate(-90deg);
	transition: transform 0.2s;
}

.wp-block-details[open] summary::before {
	transform: none;
}

.wp-block-details[open] summary {
	margin-bottom: 0.6em;
}

/* Images and alignments */

.prose .alignwide {
	width: min(60rem, 100vw - 2 * var(--gutter));
	max-width: none;
	margin-inline: calc((100% - min(60rem, 100vw - 2 * var(--gutter))) / 2);
}

.prose .alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc((100% - 100vw) / 2);
}

.prose .alignfull img {
	border-radius: 0;
}

.prose .alignright,
.prose .alignleft {
	max-width: 40%;
	margin-bottom: 1em;
}

.prose .alignright {
	float: right;
	margin-left: 1.5em;
}

.prose .alignleft {
	float: left;
	margin-right: 1.5em;
}

.prose .alignright + *,
.prose .alignleft + * {
	margin-top: 0;
}

.prose h2 {
	clear: both;
}

@media (max-width: 36rem) {
	.prose .alignright,
	.prose .alignleft {
		float: none;
		max-width: 60%;
		margin-inline: 0;
	}

	.prose .alignright + *,
	.prose .alignleft + * {
		margin-top: 1.2em;
	}
}

/* Gallery */

.wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

@media (min-width: 40rem) {
	.wp-block-gallery.columns-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.prose .wp-block-gallery > * + * {
	margin-top: 0;
}

.wp-block-gallery .wp-block-image {
	margin: 0;
}

.wp-block-gallery img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 0.375rem;
}

.wp-block-gallery > figcaption {
	grid-column: 1 / -1;
}

/* Audio, Video and Embed */

.wp-block-audio audio {
	display: block;
	width: 100%;
}

.wp-block-video video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #0d2b3e;
	border-radius: 0.5rem;
	object-fit: cover;
}

.wp-block-embed__wrapper .video {
	color: #fff;
}

/* File */

.wp-block-file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75em 1.25em;
	padding: 0.85em 1.1em;
	border: 1px solid var(--line);
	border-radius: 0.5rem;
	font-family: var(--sans);
	font-size: 0.95em;
}

.wp-block-file a:first-child {
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* Media & Text */

.prose .wp-block-media-text {
	display: grid;
	overflow: hidden;
	background: var(--wash);
	border-radius: 0.75rem;
}

@media (min-width: 40rem) {
	.prose .wp-block-media-text {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
	}
}

.prose .wp-block-media-text__media {
	height: 100%;
	margin: 0;
}

.prose .wp-block-media-text__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.prose .wp-block-media-text__content {
	padding: 1.5em;
	font-size: 0.95em;
}

/* Cover */

.prose .wp-block-cover {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 18rem;
	overflow: hidden;
	border-radius: 0.75rem;
	color: #fff;
	text-align: center;
}

.prose .wp-block-cover__image-background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.prose .wp-block-cover__background {
	position: absolute;
	inset: 0;
	background: rgba(13, 43, 62, 0.62);
}

.prose .wp-block-cover__inner-container {
	position: relative;
	padding: 2em;
	font-size: 1.4em;
	font-weight: 600;
	line-height: 1.3;
	text-wrap: balance;
}

/* Columns and Group. Core lays out columns; inside an article their text is a touch smaller */

.prose .wp-block-column {
	font-size: 0.95em;
}

.prose .wp-block-column > h3 {
	margin-top: 0;
}

.prose .wp-block-column > * + * {
	margin-top: 0.6em;
}

.prose .wp-block-group.has-background {
	padding: 1.25em 1.5em;
	background: color-mix(in srgb, var(--brand-sky) 16%, var(--paper));
	border-left: 4px solid var(--brand-sky);
	border-radius: 0.5rem;
}

/* Separator */

.wp-block-separator {
	width: 6rem;
	height: 2px;
	margin-inline: auto;
	background: var(--line);
	border: 0;
}

.prose .wp-block-separator {
	margin-block: 2em;
}

.wp-block-separator.is-style-wide {
	width: 100%;
}

.wp-block-separator.is-style-dots {
	width: auto;
	height: auto;
	background: none;
	color: var(--brand-orange);
	text-align: center;
}

.wp-block-separator.is-style-dots::before {
	content: "\2022 \2022 \2022";
	font-size: 1.25em;
	letter-spacing: 1em;
}

/* Footnotes */

.prose sup.fn a {
	padding-inline: 0.1em;
	font-family: var(--sans);
	font-size: 0.75em;
	font-weight: 600;
	text-decoration: none;
}

.wp-block-footnotes {
	padding-top: 1em;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 0.875em;
}

.wp-block-footnotes a {
	text-decoration: none;
}

/* Case study layout: a sticky contents list beside the article on wide screens,
   a slim sticky bar with the current section and a progress line on narrow ones */

.case-body {
	width: min(100%, var(--measure));
	margin-inline: auto;
}

.case-head {
	width: min(100% - 2 * var(--gutter), var(--measure));
}

.case-body .prose h2[id] {
	scroll-margin-top: 4.5rem;
}

@media (min-width: 60rem) {
	.case-layout,
	.case-head {
		display: grid;
		grid-template-columns: 12rem minmax(0, var(--measure));
		justify-content: center;
		column-gap: clamp(2.5rem, 5vw, 4.5rem);
	}

	.case-head {
		width: min(100% - 2 * var(--gutter), var(--wide));
	}

	.case-head > * {
		grid-column: 2;
	}

	.case-body {
		width: auto;
		margin: 0;
	}

	.case-body .prose h2[id] {
		scroll-margin-top: 2rem;
	}
}

/* ------------------------------------------------------------------
   WordPress: where core block markup differs from the prototype's
   ------------------------------------------------------------------ */

/* WordPress: the crumb is a paragraph holding the link, so the link takes the crumb's colour */
.article-head .crumb a {
	color: inherit;
	text-decoration-color: inherit;
}

/* ------------------------------------------------------------------
   Block styles: the parts of each style in theme/styles/ that theme.json can't express,
   such as list markers drawn with pseudo-elements and layout inside an image.
   ------------------------------------------------------------------ */

/* WordPress: the header, the page content and the footer sit flush, so the coloured header,
   masthead, sections and footer meet without a gap. :root matches the specificity of the
   global styles' gap rule, which loads after this file in the editor */
:root .wp-site-blocks > * {
	margin-block: 0;
}

/* Tags: a pill that's only as wide as its words */
.is-style-tag-sky,
.is-style-tag-orange {
	width: fit-content;
}

/* Links: a row of links that wraps, without bullets */
.wp-block-list.is-style-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin-block-end: 0;
	list-style: none;
}

/* Chevrons: the chevron hangs in the indent, so an item can mix plain text and links */
.wp-block-list.is-style-chevrons {
	display: grid;
	gap: 0.875rem;
	margin-block-end: 0;
	list-style: none;
}

.is-style-chevrons li {
	position: relative;
	padding-left: 2rem;
}

.is-style-chevrons li::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 1.125rem;
	height: 0.5625rem;
	margin-top: 0.55em;
	background: var(--brand-orange);
	clip-path: polygon(0 0, 50% 60%, 100% 0, 100% 40%, 50% 100%, 0 40%);
}

/* Prompts: a prompt chevron for each item, like lines typed at a command line */
.wp-block-list.is-style-prompts {
	display: grid;
	gap: 0.5rem;
	margin-block-end: 0;
	list-style: none;
}

.is-style-prompts li {
	position: relative;
	padding-left: 1.5rem;
}

.is-style-prompts li::before {
	content: ">";
	position: absolute;
	left: 0;
	color: var(--orange);
	font-family: var(--mono);
	font-weight: 700;
}

/* Pills: topics as rounded tags */
.wp-block-categories.is-style-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-end: 0;
	list-style: none;
}

.is-style-pills a {
	display: block;
	padding: 0.25rem 0.75rem;
	color: var(--text);
	text-decoration: none;
	border: 1px solid var(--line);
	border-radius: 999px;
}

.is-style-pills a:hover {
	color: var(--link);
	border-color: var(--orange);
}

/* Card: anything inside is clipped to the rounded corners, and a linked image zooms a
   little on hover */
.is-style-card {
	overflow: hidden;
}

.is-style-card .wp-block-image {
	margin: 0;
	overflow: hidden;
}

/* A backdrop while a card-wide image loads. Not behind a logo given its own size, whose
   transparent edges would show it as a grey box. */
.is-style-card .wp-block-image:not(.is-resized) {
	background: var(--wash);
}

.is-style-card .wp-block-image > a {
	display: block;
	height: 100%;
}

.is-style-card .wp-block-image img {
	width: 100%;
	border-radius: 0;
	transition: transform 0.3s;
}

.is-style-card .wp-block-image > a:hover img {
	transform: scale(1.03);
}

/* Screen: a screenshot in a sky-blue frame, like a window on the desk */
.wp-block-image.is-style-screen {
	aspect-ratio: 16 / 10;
	padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem) 0;
}

.is-style-card .wp-block-image.is-style-screen {
	background: var(--brand-sky);
}

.wp-block-image.is-style-screen img {
	height: auto;
	border-radius: 0.5rem 0.5rem 0 0;
	box-shadow: 0 0.75rem 2rem rgba(13, 43, 62, 0.25);
}

/* Logo panel: a logo, unaltered, centred on a dark panel */
.wp-block-image.is-style-logo-panel {
	position: relative;
	aspect-ratio: 1544 / 500;
}

.is-style-card .wp-block-image.is-style-logo-panel {
	background: #123a52;
}

.wp-block-image.is-style-logo-panel img {
	position: absolute;
	inset: 0;
	width: auto;
	height: 62%;
	margin: auto;
	object-fit: contain;
}

.is-style-card .wp-block-image.is-style-logo-panel > a:hover img {
	transform: scale(1.03);
}