/*
 * Slop block styles.
 *
 * Only what theme.json cannot say lives here: the Styles-panel variations
 * registered in functions.php, and a few layout rules for the patterns. Tokens
 * (colours, fonts, sizes, spacing, shadows) always come from theme.json
 * presets, so a change in Global Styles reaches everything below.
 */

body { -webkit-font-smoothing: antialiased; }


/* Header, main, brief band and footer sit flush: sections carry their own spacing. */
.wp-site-blocks > * { margin-block-start: 0; }

/* Where two coloured full-width sections meet, high-density screens can show a
   hairline of the page ground between them. Each coloured section reaches 1px
   up in its own colour to cover that seam, whatever colours editors choose. */
.wp-site-blocks > header > .has-background,
.wp-block-group.alignfull.has-background { position: relative; }
.wp-site-blocks > header > .has-background::after,
.wp-block-group.alignfull.has-background::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: inherit;
	pointer-events: none;
}
.wp-site-blocks > header > .has-background::after { bottom: -1px; }
.wp-block-group.alignfull.has-background::before { top: -1px; }
p, li, figcaption { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }

/* Inline text colour is a <mark>; never let the browser's highlighter yellow through. */
mark.has-inline-color { background: none; }

/* ----- Label: the mono eyebrow above a section ----- */
.is-style-label {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.5;
	text-transform: uppercase;
}

/* ----- Giant wordmark in the footer ----- */
.is-style-wordmark {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: clamp(9rem, 38vw, 35rem);
	font-weight: 900;
	letter-spacing: -0.07em;
	line-height: 0.72;
	margin-left: -0.04em;
	margin-bottom: 0;
	white-space: nowrap;
}
/* The wordmark is cropped by the bottom of the footer, as in the design. */
.wp-site-blocks > footer { overflow: hidden; }

/* ----- Headings ----- */
.is-style-display,
h3.is-style-display,
h4.is-style-display {
	font-family: var(--wp--preset--font-family--archivo-condensed);
	font-weight: 900;
	letter-spacing: -0.005em;
	line-height: 0.86;
	text-transform: uppercase;
}
.is-style-plain,
h1.is-style-plain,
h2.is-style-plain {
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.05;
	text-transform: none;
}

/* ----- Drip edge: an ink (or any colour) group that drips into the next one ----- */
.wp-block-group.is-style-drip,
.wp-block-group.is-style-drip-flip,
.wp-block-group.is-style-starry {
	position: relative;
	margin-bottom: 0;
}
.wp-block-group.is-style-drip::after,
.wp-block-group.is-style-drip-flip::after,
.wp-block-group.is-style-starry::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% - 1px);
	height: clamp(48px, 8.4vw, 120px);
	background: inherit;
	-webkit-mask: url("../images/drip.svg") top left / 100% 100% no-repeat;
	mask: url("../images/drip.svg") top left / 100% 100% no-repeat;
	pointer-events: none;
	z-index: 1;
}
.wp-block-group.is-style-drip-flip::after { transform: scaleX(-1); }
.wp-block-group.is-style-drip + *,
.wp-block-group.is-style-drip-flip + *,
.wp-block-group.is-style-starry + * { margin-top: 0; }

/* ----- Starry swirl: a drip-edge section under a Van Gogh sky ----- */
.wp-block-group.is-style-starry {
	/* An ink wash keeps the sky behind the text, not in front of it. */
	background-image: linear-gradient(rgba(22, 20, 15, 0.5), rgba(22, 20, 15, 0.5)), url("../images/starry.svg?v=2");
	background-position: center;
	background-size: cover;
}
.wp-block-group.is-style-starry::after { background-image: none; }

/* ----- Offset card ----- */
.wp-block-group.is-style-card {
	background-color: var(--wp--preset--color--card);
	border: var(--wp--custom--border--rule);
	border-radius: var(--wp--custom--radius--large);
	box-shadow: var(--wp--preset--shadow--hard);
	overflow: hidden;
}
.wp-block-group.is-style-card > .wp-block-image:first-child { border-bottom: var(--wp--custom--border--rule); }
/* Six flavours: the card titles shrink with the card, so the longest word
   ("Campaigns") never runs past its edge in a narrow grid column. */
.slop-flavours > .is-style-card { container-type: inline-size; }
.slop-flavours > .is-style-card h3 { font-size: min(var(--wp--preset--font-size--xx-large), calc((100cqi - 3rem) / 4.6)); }

/* ----- Tilts ----- */
.is-style-tilt-left { transform: rotate(-2deg); }
.is-style-tilt-right { transform: rotate(2deg); }
/* Rotated rounded corners and borders alias badly unless the layer is
   composited first; this keeps the edges clean. */
.is-style-tilt-left,
.is-style-tilt-right {
	backface-visibility: hidden;
	will-change: transform;
	outline: 1px solid transparent;
}

/* ----- Images ----- */
.wp-block-image.is-style-offset img,
.wp-block-image.is-style-offset-orange img,
.wp-block-image.is-style-hang img,
.wp-block-post-featured-image.is-style-offset img {
	border: var(--wp--custom--border--rule);
	border-radius: var(--wp--custom--radius--large);
}
.wp-block-image.is-style-offset img,
.wp-block-post-featured-image.is-style-offset img { box-shadow: var(--wp--preset--shadow--hard); }
.wp-block-image.is-style-offset-orange img,
.wp-block-image.is-style-hang img { box-shadow: var(--wp--preset--shadow--hard-orange); }
.wp-block-image figcaption,
.wp-block-image .wp-element-caption {
	margin-top: 0.875rem;
	text-align: left;
}

/* Hang: the image drops out of its section, over the drip edge below. */
.wp-block-image.is-style-hang { position: relative; z-index: 2; }
@media (min-width: 782px) {
	.wp-block-image.is-style-hang { margin-bottom: calc(-1 * clamp(80px, 11vw, 160px)) !important; }
}

/* Bleed: a cut-out image anchored to the bottom-right corner of a Brief band. */
.wp-block-image.is-style-bleed img { border-radius: 0; }
@media (min-width: 782px) {
	.wp-block-group.is-style-brief .wp-block-image.is-style-bleed {
		position: absolute;
		right: 0;
		bottom: 0;
		height: min(92%, 800px);
		margin: 0;
	}
	.wp-block-group.is-style-brief .wp-block-image.is-style-bleed img { height: 100%; width: auto; }
}
@media (max-width: 781px) {
	/* The image runs off the right edge, so the robot hand comes in from outside
	   the screen. The band's constrained layout pins every child left with
	   !important margins, so these margins need !important to win. */
	.wp-block-group.is-style-brief .wp-block-image.is-style-bleed {
		width: 92%;
		margin-left: auto !important;
		margin-right: calc(-1 * var(--wp--style--root--padding-right, 1rem)) !important;
		margin-bottom: calc(-1 * var(--wp--preset--spacing--70));
	}
	.wp-block-group.is-style-brief .wp-block-image.is-style-bleed img { display: block; width: 100%; height: auto; }
}

/* ----- Brief band: the "Feed us a brief" section ----- */
.wp-block-group.is-style-brief {
	position: relative;
	overflow: hidden;
}
@media (min-width: 782px) {
	.wp-block-group.is-style-brief { min-height: clamp(640px, 60vw, 880px); }
	.wp-block-group.is-style-brief > :not(.is-style-bleed) { position: relative; z-index: 1; max-width: min(760px, 58%); }
}

/* ----- Hatched placeholder for featured images that do not exist yet ----- */
.wp-block-post-featured-image.is-style-placeholder {
	border: var(--wp--custom--border--rule);
	border-radius: var(--wp--custom--radius--large);
	overflow: hidden;
	background: repeating-linear-gradient(135deg, var(--wp--preset--color--oat) 0 14px, var(--wp--preset--color--paper) 14px 28px);
	min-height: 18rem;
}

/* ----- Pills: terms and category lists ----- */
.wp-block-post-terms.is-style-pills,
.wp-block-categories.is-style-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	padding-left: 0;
}
.wp-block-post-terms.is-style-pills .wp-block-post-terms__separator { display: none; }
.wp-block-post-terms.is-style-pills a,
.wp-block-categories.is-style-pills a {
	display: inline-block;
	border: var(--wp--custom--border--rule);
	border-radius: var(--wp--custom--radius--pill);
	padding: 0.4em 0.9em;
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.4;
}
.wp-block-categories.is-style-pills a {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	padding: 0.7em 1.35em;
}
.wp-block-post-terms.is-style-pills a:hover,
.wp-block-categories.is-style-pills a:hover,
.wp-block-categories.is-style-pills .current-cat a {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/* ----- Drip bullets ----- */
.wp-block-list.is-style-drips { list-style: none; padding-left: 0; }
.wp-block-list.is-style-drips > li {
	position: relative;
	padding: 1rem 0 0 3rem;
	border-top: var(--wp--custom--border--rule);
	margin-top: 1rem;
}
.wp-block-list.is-style-drips > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.2rem;
	width: 1.9rem;
	height: 2.05rem;
	background: var(--wp--preset--color--orange);
	-webkit-mask: url("../images/mark.svg") center / contain no-repeat;
	mask: url("../images/mark.svg") center / contain no-repeat;
}

/* ----- Buttons ----- */
.wp-block-button__link::after { content: " \2192"; }
.wp-block-button.is-style-outline .wp-block-button__link::after { content: none; }
.wp-block-button.is-style-ink .wp-block-button__link {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/* ----- Hover and focus: every link and button answers the pointer ----- */
.wp-element-button,
.wp-block-button__link {
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.wp-element-button:hover,
.wp-element-button:focus-visible,
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	transform: translate(-3px, -3px);
	box-shadow: 3px 3px 0 var(--wp--preset--color--ink);
}
.wp-element-button:active,
.wp-block-button__link:active { transform: none; box-shadow: none; }
/* On ink the lift shadow is paper, so it reads. */
.has-ink-background-color .wp-element-button:hover,
.has-ink-background-color .wp-element-button:focus-visible,
.has-ink-background-color .wp-block-button__link:hover,
.has-ink-background-color .wp-block-button__link:focus-visible {
	box-shadow: 3px 3px 0 var(--wp--preset--color--paper);
}
/* Ink buttons keep their ground and light the label up. */
.wp-block-button.is-style-ink .wp-block-button__link:hover,
.wp-block-button.is-style-ink .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--orange);
	box-shadow: 3px 3px 0 var(--wp--preset--color--paper);
}
/* Outline buttons fill in. */
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}
.has-ink-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.has-ink-background-color .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}

/* ----- Brand strip: the brands' logos in dripping pills ----- */
.slop-brand-strip { --strip-gap: 1.25rem; gap: var(--strip-gap); }
/* When the pills don't fit on one line, brand-strip.js loops them past instead. */
.slop-brand-marquee { position: relative; }
.slop-brand-marquee:is(.is-measuring, .is-scrolling, .is-scrollable) .slop-brand-strip { flex-wrap: nowrap; width: max-content; }
.slop-brand-marquee:is(.is-measuring, .is-scrolling, .is-scrollable) .wp-block-button { flex-shrink: 0; }
/* A scrolling strip runs edge to edge of the page, like a full-width block. */
.slop-brand-marquee.is-scrolling {
	overflow-x: clip;
	max-width: none !important;
	margin-inline: calc(-1 * var(--wp--style--root--padding-left, 0px)) calc(-1 * var(--wp--style--root--padding-right, 0px)) !important;
}
.slop-brand-marquee.is-scrolling .slop-brand-strip { animation: slop-marquee var(--marquee-duration, 40s) linear infinite; }
.slop-brand-marquee.is-scrolling:hover .slop-brand-strip,
.slop-brand-marquee.is-scrolling:focus-within .slop-brand-strip { animation-play-state: paused; }
.slop-brand-marquee.is-scrolling::before,
.slop-brand-marquee.is-scrolling::after {
	content: "";
	position: absolute;
	z-index: 1;
	top: -0.5rem;
	bottom: -0.5rem;
	width: clamp(2rem, 8vw, 8rem);
	pointer-events: none;
}
.slop-brand-marquee.is-scrolling::before { left: 0; background: linear-gradient(90deg, var(--wp--preset--color--paper), transparent); }
.slop-brand-marquee.is-scrolling::after { right: 0; background: linear-gradient(-90deg, var(--wp--preset--color--paper), transparent); }
.slop-brand-marquee.is-scrollable { overflow-x: auto; padding-block: 0.25rem 2.5rem; margin-bottom: -2.5rem; }
@keyframes slop-marquee { to { transform: translateX(calc(-50% - var(--strip-gap) / 2)); } }
.slop-brand-strip .wp-block-button__link {
	position: relative;
	display: flex;
	align-items: center;
	height: 4.25rem;
	padding: 0 1.75rem;
	background-color: var(--wp--preset--color--paper);
	--pill-border: 2px;
}
.slop-brand-logo { display: block; width: auto; height: 2rem; max-width: none; }
.slop-brand-logo.is-tall { height: 2.9rem; }
/* Each pill drips from its outline, at a different spot and length. */
.slop-brand-strip .wp-block-button.is-style-outline > .wp-block-button__link::after {
	content: "";
	position: absolute;
	/* Just below the outline, so the drip hangs from it in either colour. */
	top: calc(100% + var(--pill-border, 2px));
	left: var(--drip-x, 30%);
	width: 0.5rem;
	height: var(--drip-y, 0.8rem);
	border-radius: 0 0 999px 999px;
	background-color: var(--wp--preset--color--ink);
	transition: height 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2), background-color 0.18s ease;
}
.slop-brand-strip .wp-block-button:nth-child(6n+2) { --drip-x: 68%; --drip-y: 1.2rem; }
.slop-brand-strip .wp-block-button:nth-child(6n+3) { --drip-x: 22%; --drip-y: 0.55rem; }
.slop-brand-strip .wp-block-button:nth-child(6n+4) { --drip-x: 55%; --drip-y: 1rem; }
.slop-brand-strip .wp-block-button:nth-child(6n+5) { --drip-x: 78%; --drip-y: 0.7rem; }
.slop-brand-strip .wp-block-button:nth-child(6n) { --drip-x: 40%; --drip-y: 1.35rem; }
/* The logos are ink, so the pill never fills in: it lifts, and the drip runs. */
.slop-brand-strip .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.slop-brand-strip .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--paper);
	box-shadow: 4px 4px 0 var(--wp--preset--color--orange);
}
.slop-brand-strip .wp-block-button.is-style-outline > .wp-block-button__link:hover::after,
.slop-brand-strip .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible::after {
	height: calc(var(--drip-y, 0.8rem) + 0.9rem);
	background-color: var(--wp--preset--color--orange);
}
@media (prefers-reduced-motion: reduce) {
	.slop-brand-strip .wp-block-button.is-style-outline > .wp-block-button__link::after { transition: none; }
	.slop-brand-marquee.is-scrolling .slop-brand-strip { animation: none; }
}
@media (max-width: 600px) {
	.slop-brand-strip { --strip-gap: 0.75rem; row-gap: 1rem; }
	.slop-brand-strip .wp-block-button__link { height: 3.25rem; padding: 0 1.1rem; }
	.slop-brand-logo { height: 1.5rem; }
	.slop-brand-logo.is-tall { height: 2.2rem; }
}

/* Text links: an underline, orange on light and ink grounds and ink on orange ones.
   Set on the hover state itself: WordPress's own link styles use the
   text-decoration shorthand, which would reset the colour. */
body a:where(:not(.wp-element-button, .wp-block-button__link)) { text-underline-offset: 0.2em; }
body a:where(:not(.wp-element-button, .wp-block-button__link)):hover,
body a:where(:not(.wp-element-button, .wp-block-button__link)):focus-visible {
	text-decoration-line: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--wp--preset--color--orange);
}
body .has-orange-background-color a:where(:not(.wp-element-button, .wp-block-button__link)):hover,
body .has-orange-background-color a:where(:not(.wp-element-button, .wp-block-button__link)):focus-visible {
	text-decoration-color: var(--wp--preset--color--ink);
}

/* Navigation: the orange rule the current page carries. */
.wp-block-navigation .wp-block-navigation-item__content { transition: box-shadow 0.18s ease; }
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation .current-menu-ancestor > a,
.wp-block-navigation .current_page_parent > a {
	text-decoration: none;
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--orange);
}

/* Card and list titles turn orange rather than underlining. */
.wp-block-post-title a:hover,
.wp-block-post-title a:focus-visible,
.wp-block-post-navigation-link a:hover {
	color: var(--wp--preset--color--orange);
	text-decoration: none;
}

/* Linked card images lift towards the pointer. */
.wp-block-post-featured-image a { display: block; }
.wp-block-post-featured-image a img { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.wp-block-post-featured-image a:hover img,
.wp-block-post-featured-image a:focus-visible img {
	transform: translate(-4px, -4px);
	box-shadow: 12px 12px 0 var(--wp--preset--color--ink);
}

/* Excerpt "Read the note" link reads as a label with an arrow. */
.wp-block-post-excerpt__more-link {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.wp-block-post-excerpt__more-link::after { content: " \2192"; }

/* The logo's drip wiggles. */
.wp-block-slop-logo .slop-logo__mark { transition: transform 0.25s cubic-bezier(.3, 1.6, .5, 1); }
.wp-block-slop-logo a:hover .slop-logo__mark,
.wp-block-slop-logo a:focus-visible .slop-logo__mark { transform: rotate(-10deg) translateY(-2px); }
.wp-block-slop-logo a:hover { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
	.wp-element-button,
	.wp-block-button__link,
	.wp-block-post-featured-image a img,
	.wp-block-slop-logo .slop-logo__mark { transition: none; }
	.wp-element-button:hover,
	.wp-block-button__link:hover,
	.wp-block-post-featured-image a:hover img,
	.wp-block-slop-logo a:hover .slop-logo__mark { transform: none; }
}

/* ----- Case studies: screenshots are cropped from the top, where the interface starts ----- */
.single-project .wp-block-post-content .wp-block-image img { object-position: top center; }

/* ----- Colour swatches in brand kits ----- */
.slop-swatch { border: var(--wp--custom--border--rule); }

/* ----- Rules that separate rows (steps, principles, list rows) ----- */
.slop-rule { border-top: var(--wp--custom--border--rule); padding-top: 1.25rem; }
.has-ink-background-color .slop-rule,
.slop-rule.is-on-ink { border-top-color: rgb(244 240 230 / 0.3); }

/* ----- Upcoming-note rows in the Notes list ----- */
.slop-upcoming { border-top: 1.5px dashed currentColor; opacity: 0.55; }

/* ----- Query loops ----- */
.wp-block-post-template.is-layout-grid { row-gap: var(--wp--preset--spacing--50); }
.slop-card-meta { justify-content: space-between; align-items: flex-start; }

/* ----- Small screens ----- */
@media (max-width: 781px) {
	.is-style-tilt-left, .is-style-tilt-right { transform: none; }
	.wp-block-columns.slop-stagger > .wp-block-column { padding-top: 0 !important; }
	/* Team portraits pair up rather than stacking eight tall cards. */
	.wp-block-columns.slop-team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40) 1.25rem; }
}

/* ----- Header call to action: one line at every width ----- */
.wp-site-blocks > header .wp-block-button__link { white-space: nowrap; }
@media (max-width: 480px) {
	.wp-site-blocks > header .wp-block-button__link { padding: 0.65rem 1rem; }
	.wp-site-blocks > header .wp-block-group.alignwide > .wp-block-group { gap: 1rem; }
}
@media (max-width: 389px) {
	.wp-site-blocks > header .slop-logo__descriptor { display: none; }
}

/* ----- Home notes teaser: each note as a row with its cover; a card on phones ----- */
.slop-note-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem 1.75rem;
	align-items: center;
	padding-block: 1.5rem;
	border-top: var(--wp--custom--border--rule);
}
.slop-note-row:has(> .wp-block-post-featured-image) { grid-template-columns: minmax(9rem, 32%) minmax(0, 1fr); }
.slop-note-row > * { margin-block: 0; }
.slop-note-row__image a,
.slop-note-row__image img {
	display: block;
	border: var(--wp--custom--border--rule);
	border-radius: var(--wp--custom--radius--medium);
}
.slop-note-row__image a { box-shadow: var(--wp--preset--shadow--hard-small); transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2), box-shadow 0.25s; }
.slop-note-row__image a img { border: 0; }
.slop-note-row:hover .slop-note-row__image a { transform: translate(-3px, -3px) rotate(-1deg); box-shadow: 8px 8px 0 var(--wp--preset--color--orange); }
.slop-note-row .wp-block-post-title { margin: 0; letter-spacing: -0.03em; line-height: 1.08; }
.slop-note-row .wp-block-post-excerpt { margin: 0; }
.slop-note-row .wp-block-post-excerpt__excerpt { margin: 0 0 0.5rem; }
.slop-note-row .wp-block-post-excerpt__more-text { margin: 0; font-weight: 700; }
.slop-note-row .wp-block-post-excerpt__more-link::after { content: " \2192"; }
@media (max-width: 600px) {
	.slop-note-row:has(> .wp-block-post-featured-image) { grid-template-columns: minmax(0, 1fr); }
	.slop-note-row { padding-block: 1.25rem 1.75rem; }
}

/* ----- Mobile menu: the navigation overlay as a full-screen Slop menu ----- */
/* "Start a brief" is a menu item only inside the overlay; the header has its own button. */
.wp-block-navigation .slop-nav-cta { display: none; }

.wp-block-navigation__responsive-container.is-menu-open {
	padding: calc(env(safe-area-inset-top, 0px) + 1.25rem) var(--wp--style--root--padding-right, 1.25rem) calc(env(safe-area-inset-bottom, 0px) + 1.5rem) var(--wp--style--root--padding-left, 1.25rem);
}
.is-menu-open .wp-block-navigation__responsive-close,
.is-menu-open .wp-block-navigation__responsive-dialog { min-height: 100%; }
.is-menu-open .wp-block-navigation__responsive-dialog { position: relative; display: flex; flex-direction: column; }

/* The drip mark where the header logo was. */
.is-menu-open .wp-block-navigation__responsive-dialog::before {
	content: "";
	position: absolute;
	top: 0.35rem;
	left: 0;
	width: 34px;
	height: 37px;
	background: var(--wp--preset--color--orange);
	-webkit-mask: url("../images/mark.svg") center / contain no-repeat;
	mask: url("../images/mark.svg") center / contain no-repeat;
}
.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 0;
	right: 0;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 1.5px solid color-mix(in oklab, var(--wp--preset--color--paper) 35%, transparent);
	border-radius: 999px;
	transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2), border-color 0.2s;
}
.is-menu-open .wp-block-navigation__responsive-container-close:hover,
.is-menu-open .wp-block-navigation__responsive-container-close:focus-visible { transform: rotate(90deg); border-color: var(--wp--preset--color--orange); }

.is-menu-open .wp-block-navigation__responsive-container-content {
	flex: 1;
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	padding-top: 5.5rem !important;
}
.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	align-items: stretch !important;
	gap: 0 !important;
	width: 100%;
	counter-reset: slop-nav;
}
.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid color-mix(in oklab, var(--wp--preset--color--paper) 16%, transparent);
	counter-increment: slop-nav;
	animation: slop-nav-in 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
}
.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 0.05s; }
.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 0.1s; }
.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 0.15s; }
.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	display: flex !important;
	align-items: flex-start;
	gap: 0.9rem;
	width: 100%;
	padding: 0.85rem 0 0.7rem !important;
	font-family: var(--wp--preset--font-family--archivo-condensed);
	font-size: clamp(3.25rem, 17vw, 6rem);
	font-weight: 900;
	line-height: 0.88;
	text-transform: uppercase;
	box-shadow: none !important;
	transition: color 0.15s, transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content::before {
	content: counter(slop-nav, decimal-leading-zero);
	padding-top: 0.35rem;
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1;
	color: color-mix(in oklab, var(--wp--preset--color--paper) 55%, transparent);
}
.is-menu-open .wp-block-navigation-item__content:hover,
.is-menu-open .wp-block-navigation-item__content:focus-visible { color: var(--wp--preset--color--orange); transform: translateX(0.35rem); }
.is-menu-open .current-menu-item > .wp-block-navigation-item__content,
.is-menu-open .current-menu-ancestor > .wp-block-navigation-item__content { color: var(--wp--preset--color--orange); }

/* The brief, as the menu's call to action. */
.is-menu-open .wp-block-navigation .slop-nav-cta,
.is-menu-open .wp-block-navigation__container .slop-nav-cta {
	display: flex !important;
	align-items: flex-start !important;
	margin-top: 2rem;
	border-bottom: 0;
}
.is-menu-open .wp-block-navigation__container .slop-nav-cta > .wp-block-navigation-item__content {
	display: inline-flex !important;
	width: auto;
	gap: 0.45rem;
	padding: 1rem 1.6rem !important;
	border-radius: 999px;
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	line-height: 1.1;
	text-transform: none;
	box-shadow: 5px 5px 0 var(--wp--preset--color--paper) !important;
}
.is-menu-open .wp-block-navigation__container .slop-nav-cta > .wp-block-navigation-item__content::before { content: none; }
.is-menu-open .wp-block-navigation__container .slop-nav-cta > .wp-block-navigation-item__content::after { content: "\2192"; }
.is-menu-open .wp-block-navigation__container .slop-nav-cta > .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--ink); transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--wp--preset--color--paper) !important; }

/* The studio line at the foot of the menu. */
.is-menu-open .wp-block-navigation__responsive-container-content::after {
	content: "Kempu\2019s in-house AI studio" / "";
	margin-top: auto;
	padding-top: 2rem;
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: color-mix(in oklab, var(--wp--preset--color--paper) 50%, transparent);
}

@keyframes slop-nav-in {
	from { opacity: 0; transform: translateY(1.25rem); }
}
@media (prefers-reduced-motion: reduce) {
	.is-menu-open .wp-block-navigation-item { animation: none; }
}

/* Between the phone menu and full desktop the header is tight: closer links,
   no line breaks inside them, and the logo without its descriptor. */
@media (min-width: 600px) and (max-width: 960px) {
	.wp-site-blocks > header .wp-block-navigation { gap: 1.25rem !important; }
	.wp-site-blocks > header .wp-block-navigation-item__content { white-space: nowrap; }
	.wp-site-blocks > header .slop-logo__descriptor { display: none; }
	.wp-site-blocks > header .wp-block-group.alignwide > .wp-block-group { gap: 1.25rem; }
}

/* ----- Vincent ----- */
/*
 * The full stop in the footer wordmark rises into the sky as one of The Starry
 * Night's stars when you reach for it: a yellow diamond ringed by swirling
 * brushstroke halos. Clicking it turns the whole site starry (vincent.js).
 * Lengths are in em of the wordmark; the dot's centre sits 0.164em from the
 * mark's left edge and 0.125em above its bottom.
 */
.is-style-wordmark { position: relative; }
.is-style-wordmark mark {
	position: relative;
	display: inline-block;
	transform-origin: 0.164em calc(100% - 0.125em);
	transition: translate 0.6s cubic-bezier(.3, 1.4, .5, 1), rotate 0.6s ease, scale 0.6s ease, color 0.4s ease, text-shadow 0.4s ease;
}
.is-style-wordmark mark[role="button"] { cursor: pointer; outline: none; }
.is-style-wordmark mark::before,
.is-style-wordmark mark::after {
	content: "";
	position: absolute;
	left: calc(0.164em - var(--ring) / 2);
	bottom: calc(0.125em - var(--ring) / 2);
	width: var(--ring);
	height: var(--ring);
	background: center / contain no-repeat;
	scale: 0;
	transition: scale 0.5s cubic-bezier(.3, 1.5, .5, 1) 0.1s;
	pointer-events: none;
}
/* Inner halo: pale, uneven dabs round a warm glow. */
.is-style-wordmark mark::before {
	--ring: 0.5em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke-linecap='round'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23F2B233' stop-opacity='.6'/%3E%3Cstop offset='.6' stop-color='%23F2B233' stop-opacity='.15'/%3E%3Cstop offset='1' stop-color='%23F2B233' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='50' fill='url%28%23g%29' stroke='none'/%3E%3Ccircle cx='50' cy='50' r='31' stroke='%23FBE3A1' stroke-width='6' stroke-dasharray='13 5 4 6 18 7 6 5' opacity='.95'/%3E%3Ccircle cx='50' cy='50' r='39' stroke='%23F2B233' stroke-width='4.5' stroke-dasharray='20 6 5 9 11 5' opacity='.85' transform='rotate%2840 50 50%29'/%3E%3C/svg%3E");
}
/* Outer halo: yellow, paper and grape brushstrokes on spirals, swirling the other way. */
.is-style-wordmark mark::after {
	--ring: 0.72em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke-linecap='round'%3E%3Cpath d='M83.0 50.0 L83.0 52.7 L82.8 55.3 L82.3 57.9 L81.7 60.5 L80.8 63.1 L79.7 65.5 L78.5 67.9 L77.0 70.2 L75.4 72.4 L73.5 74.4 L71.6 76.3 L69.4 78.0 L67.2 79.5 L64.8 80.9 L62.3 82.1 L59.7 83.0 L57.1 83.8 L54.3 84.3 L51.6 84.7 L48.8 84.8 L46.0 84.6 L43.2 84.3 L40.5 83.7 L37.8 82.9 L35.1 81.9 L32.6 80.7 L30.1 79.3 L27.8 77.7 L25.6 75.8 L23.5 73.9 L21.6 71.7 L19.9 69.4 L18.3 67.0 L17.0 64.4 L15.9 61.8 L14.9 59.0 L14.2 56.2 L13.8 53.3 L13.5 50.4 L13.5 47.5 L13.8 44.5 L14.2 41.6 L14.9 38.7 L15.9 35.9 L17.0 33.2 L18.4 30.6 L20.0 28.0 L21.8 25.6 L23.8 23.4 L25.9 21.3 L28.3 19.4 L30.7 17.7 L33.4 16.2 L36.1 14.9 L38.9 13.8 L41.8 12.9 L44.8 12.3 L47.9 11.9 L50.9 11.8 L54.0 11.9 L57.1 12.2 L60.1 12.8 L63.1 13.7 L66.0 14.8 L68.8 16.1 L71.5 17.6 L74.1 19.4 L76.5 21.4 L78.8 23.5 L80.9 25.9 L82.8 28.4 L84.5 31.0 L86.0 33.8 L87.3 36.7 L88.3 39.7 L89.1 42.8 L89.6 46.0 L89.9 49.2 L90.0 52.4 L89.7 55.6 L89.2 58.8 L88.5 61.9 L87.5 65.0 L86.2 68.0 L84.8 70.9 L83.0 73.7 L81.1 76.3 L79.0 78.8 L76.6 81.1 L74.1 83.2' stroke='%23F2B233' stroke-width='3' stroke-dasharray='16 5 5 7 22 6 8 9' opacity='.85'/%3E%3Cpath d='M22.0 75.7 L20.0 73.5 L18.2 71.2 L16.6 68.7 L15.2 66.2 L13.9 63.5 L12.9 60.7 L12.1 57.8 L11.5 54.9 L11.1 52.0 L11.0 49.0 L11.1 46.0 L11.4 43.0 L12.0 40.0 L12.8 37.1 L13.8 34.2 L15.0 31.5 L16.4 28.8 L18.1 26.2 L19.9 23.8 L22.0 21.5 L24.2 19.3 L26.5 17.4 L29.1 15.6 L31.7 14.0 L34.5 12.6 L37.4 11.4 L40.4 10.5 L43.4 9.7 L46.5 9.2 L49.6 9.0 L52.8 9.0 L56.0 9.2 L59.1 9.7 L62.2 10.4 L65.2 11.4 L68.2 12.6 L71.0 14.0 L73.8 15.6 L76.4 17.5 L78.9 19.5 L81.2 21.8 L83.4 24.2 L85.4 26.8 L87.1 29.5 L88.7 32.4 L90.0 35.4 L91.1 38.5 L92.0 41.6 L92.6 44.9 L93.0 48.1 L93.1 51.4 L92.9 54.7 L92.5 58.0 L91.9 61.3 L91.0 64.5 L89.9 67.7 L88.5 70.7 L86.9 73.7 L85.0 76.5 L82.9 79.2 L80.7 81.7 L78.2 84.0 L75.6 86.2 L72.8 88.1 L69.8 89.8 L66.8 91.3 L63.6 92.6 L60.3 93.6 L56.9 94.4 L53.5 94.9 L50.1 95.1 L46.6 95.1 L43.1 94.8 L39.7 94.2 L36.3 93.4 L33.0 92.3 L29.7 91.0 L26.6 89.4 L23.6 87.5 L20.7 85.5 L18.0 83.2 L15.5 80.7 L13.2 78.1 L11.0 75.2 L9.1 72.2 L7.5 69.0 L6.0 65.7 L4.9 62.3 L3.9 58.9 L3.3 55.3' stroke='%23F4F0E6' stroke-width='2' stroke-dasharray='7 8 3 10' opacity='.5'/%3E%3Cpath d='M25.9 15.6 L28.8 13.7 L31.9 12.0 L35.1 10.5 L38.4 9.3 L41.9 8.5 L45.4 7.9 L48.9 7.5 L52.5 7.5 L56.0 7.8 L59.5 8.4 L63.0 9.3 L66.4 10.5 L69.7 11.9 L72.8 13.6 L75.8 15.6 L78.7 17.9 L81.3 20.3 L83.7 23.0 L85.9 25.9 L87.9 28.9 L89.6 32.1 L91.0 35.5 L92.1 39.0 L93.0 42.5 L93.5 46.1 L93.7 49.8 L93.7 53.4 L93.3 57.1 L92.6 60.7 L91.6 64.3 L90.3 67.7 L88.8 71.1 L86.9 74.3 L84.8 77.3 L82.5 80.2 L79.9 82.8 L77.1 85.3 L74.1 87.5 L70.9 89.4 L67.5 91.1 L64.0 92.5 L60.4 93.6 L56.8 94.4 L53.0 94.8 L49.3 95.0 L45.5 94.8 L41.8 94.4 L38.1 93.6 L34.4 92.5 L30.9 91.1 L27.5 89.4 L24.2 87.5 L21.2 85.2 L18.3 82.7 L15.6 80.0 L13.1 77.1 L10.9 73.9 L9.0 70.6 L7.4 67.1 L6.0 63.5 L5.0 59.8 L4.3 56.0 L3.9 52.2 L3.8 48.3 L4.0 44.4 L4.6 40.6 L5.4 36.8 L6.6 33.1 L8.2 29.5 L10.0 26.0 L12.1 22.7 L14.4 19.6 L17.0 16.7 L19.9 14.0 L23.0 11.5 L26.3 9.4 L29.7 7.5 L33.3 5.8 L37.1 4.5 L40.9 3.6 L44.8 2.9 L48.8 2.5 L52.7 2.5 L56.7 2.9 L60.7 3.5 L64.5 4.5 L68.3 5.8 L72.0 7.5 L75.5 9.4 L78.8 11.6' stroke='%238B72F2' stroke-width='3' stroke-dasharray='24 9 7 12 14 10' opacity='.8'/%3E%3C/svg%3E");
}
.is-style-wordmark:hover mark,
.is-style-wordmark mark:focus-visible {
	translate: 0 -0.42em;
	rotate: 45deg;
	scale: 0.8;
	color: #F2B233 !important;
	text-shadow: 0 0 0.06em rgba(251, 227, 161, 0.9), 0 0 0.2em rgba(242, 178, 51, 0.6);
}
.is-style-wordmark:hover mark::before,
.is-style-wordmark mark:focus-visible::before { scale: 1; animation: slop-swirl 9s linear infinite reverse; }
.is-style-wordmark:hover mark::after,
.is-style-wordmark mark:focus-visible::after { scale: 1; animation: slop-swirl 16s linear infinite; }

/* The caption that names the painting, beside the risen star. */
.slop-star-caption {
	position: absolute;
	right: 0.5em;
	bottom: 0.6em;
	opacity: 0;
	translate: 0 0.5rem;
	transition: opacity 0.3s ease 0.2s, translate 0.3s ease 0.2s;
	pointer-events: none;
}
.slop-star-caption span {
	display: block;
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.5;
	text-align: right;
	text-transform: uppercase;
	color: rgba(244, 240, 230, 0.75);
}
.slop-star-caption span + span { color: #F2B233; }
.is-style-wordmark:hover .slop-star-caption,
.is-style-wordmark:has(mark:focus-visible) .slop-star-caption { opacity: 1; translate: 0 0; }
/* Touch screens have no hover to reveal it: a tap on the full stop goes straight to the sky. */
@media (hover: none) { .slop-star-caption { display: none; } }

/* Type "vincent": the whole site goes starry. */
.slop-starry-night {
	position: fixed;
	inset: 0;
	z-index: 9998;
	pointer-events: none;
	background: url("../images/starry.svg?v=2") center / cover;
	mix-blend-mode: multiply;
	opacity: 0;
	transition: opacity 0.8s ease;
	animation: slop-drift 40s ease-in-out infinite alternate;
}
.slop-starry-night.is-on { opacity: 1; }
.slop-starry-toast {
	position: fixed;
	left: 1rem;
	bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
	z-index: 9999;
	max-width: min(26rem, calc(100vw - 2rem));
	padding: 1rem 1.25rem;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	border: 2px solid var(--wp--preset--color--orange);
	border-radius: var(--wp--custom--radius--large, 16px);
	box-shadow: 6px 6px 0 var(--wp--preset--color--grape);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}
.slop-starry-toast cite {
	display: block;
	margin-top: 0.5rem;
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-style: normal;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--orange);
}
@keyframes slop-swirl { to { rotate: 360deg; } }
@keyframes slop-drift { from { background-position: 45% 50%; } to { background-position: 55% 45%; } }
@media (prefers-reduced-motion: reduce) {
	.is-style-wordmark mark,
	.is-style-wordmark mark::before,
	.is-style-wordmark mark::after,
	.slop-star-caption { transition: none; animation: none !important; }
	.slop-starry-night { animation: none; transition: none; }
}