/**
 * Jukzta — the styles theme.json can't express.
 * Colours, type and spacing come from theme.json presets; change them there.
 *
 * Breakpoints: phone < 600px, tablet 600–1023px, desktop ≥ 1024px.
 */

/* ---------------------------------------------------------------- Base */

html {
	scroll-padding-top: 6rem;
}

::selection {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* Highlight-coloured words (Format → Highlight) recolour text only. */
mark.has-inline-color {
	background-color: transparent;
}

:where(a) {
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* Small monospace label: dates, categories, captions. */
.jukzta-meta,
.jukzta-meta > * {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.14em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

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

.jukzta-meta a:hover {
	color: var(--wp--preset--color--accent);
}

/* Eyebrow with a short lime rule in front of it. */
.jukzta-kicker::before {
	content: "";
	display: inline-block;
	width: 2.5rem;
	height: 1px;
	margin-right: 1em;
	vertical-align: middle;
	background: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------- Header */

/* Sticky header; the backdrop sits on a pseudo-element so the mobile menu overlay isn't clipped. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* On phones the admin bar scrolls away, so the header sticks to the very top. */
@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

.wp-site-blocks > header.wp-block-template-part::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: rgb(13 13 13 / 0.6);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	transition: background-color 0.3s ease;
}

.is-scrolled .wp-site-blocks > header.wp-block-template-part::before {
	background: rgb(13 13 13 / 0.94);
}

.wp-site-blocks > header.wp-block-template-part > .wp-block-group {
	transition: padding 0.3s ease;
}

.is-scrolled .wp-site-blocks > header.wp-block-template-part > .wp-block-group {
	padding-top: 0.75rem !important;
	padding-bottom: 0.75rem !important;
}

/* The hero starts right under the header. */
.wp-site-blocks > header.wp-block-template-part + main {
	margin-top: 0;
}

/* Current section in the menu (set by assets/js/theme.js). */
.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.7em;
}

/* Tablets get the menu button too: six links don't fit beside the logo below 1024px. */
@media (min-width: 600px) and (max-width: 1023px) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Menu overlay (phones and tablets). */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--40);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--50);
	align-items: flex-start !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start !important;
	gap: var(--wp--preset--spacing--20) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.15;
	text-transform: none;
}

/* Header search: icon only, no box. */
.wp-block-search.wp-block-search__button-only .wp-block-search__inside-wrapper {
	border: 0;
	background: transparent;
}

.wp-block-search.wp-block-search__button-only .wp-block-search__button {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--contrast);
}

.wp-block-search.wp-block-search__button-only .wp-block-search__button:hover {
	color: var(--wp--preset--color--accent);
}

/* Search field on the dark background. */
.wp-block-search__input {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--contrast);
}

.wp-block-search__input::placeholder {
	color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------- Buttons */

.wp-element-button {
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Primary button style (Button block → Styles → Primary). */
.wp-block-button.is-style-primary .wp-block-button__link {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-primary .wp-block-button__link:hover,
.wp-block-button.is-style-primary .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* ---------------------------------------------------------------- Texture */

/* Faint film grain (Cover block → Styles → Textured). */
.wp-block-cover.is-style-textured::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.08;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wp-block-cover.is-style-textured .wp-block-cover__inner-container {
	z-index: 2;
}

/* Content-fit cover (Text over image pattern): height comes from the text, not a preset
   minimum. Setting a Minimum height in the sidebar still works. */
.wp-block-cover.jukzta-fit-cover:not([style*="min-height"]) {
	min-height: 0;
}

/* Cover style "Show whole image": the full image is visible, letterboxed on the overlay colour. */
.wp-block-cover.is-style-whole-image .wp-block-cover__image-background {
	object-fit: contain !important;
}

.wp-block-cover.is-style-whole-image {
	background-color: var(--wp--preset--color--base);
}

/* Cover style "Stretch image to fit": the whole image is squeezed into the block (may distort). */
.wp-block-cover.is-style-stretch-image .wp-block-cover__image-background {
	object-fit: fill !important;
}

/* ---------------------------------------------------------------- Columns */

/* Columns with this class stay side by side on tablets (WordPress stacks all columns below 782px). */
@media (min-width: 600px) and (max-width: 781px) {
	.wp-block-columns.jukzta-keep-columns {
		flex-wrap: nowrap !important;
	}

	.wp-block-columns.jukzta-keep-columns > .wp-block-column {
		flex-basis: 0 !important;
		flex-grow: 1;
	}
}

/* ---------------------------------------------------------------- Hero */

/* The photo fades to black behind the text, so the intro stays readable on any photo. */
.jukzta-hero .wp-block-cover__background {
	opacity: 1 !important;
	background:
		linear-gradient(90deg, var(--wp--preset--color--base) 0%, rgb(13 13 13 / 0.94) 28%, rgb(13 13 13 / 0.45) 55%, rgb(13 13 13 / 0.05) 80%),
		linear-gradient(0deg, var(--wp--preset--color--base) 0%, rgb(13 13 13 / 0) 22%) !important;
}

/* Full-width bands keep their text on the same left edge as the rest of the page. */
.jukzta-hero .wp-block-cover__inner-container,
.jukzta-closing .wp-block-cover__inner-container {
	width: 100% !important;
}

.jukzta-hero__content {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1320px) !important;
	margin-inline: auto !important;
}

.jukzta-hero__content > * {
	max-width: 40rem;
	margin: 0;
}

.jukzta-hero h1 {
	line-height: 1;
	letter-spacing: -0.02em;
}

.jukzta-hero__lead {
	font-family: var(--wp--preset--font-family--heading);
	line-height: 1.3;
}

.jukzta-hero__motto {
	margin-top: var(--wp--preset--spacing--30) !important;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.2em;
	word-spacing: 0.35em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

@media (min-width: 600px) and (max-width: 1023px) {
	.jukzta-hero {
		min-height: min(82vh, 640px) !important;
	}

	.jukzta-hero .wp-block-cover__background {
		background:
			linear-gradient(90deg, var(--wp--preset--color--base) 0%, rgb(13 13 13 / 0.9) 45%, rgb(13 13 13 / 0.3) 85%),
			linear-gradient(0deg, var(--wp--preset--color--base) 0%, rgb(13 13 13 / 0) 22%) !important;
	}
}

/* Phones: photo on top, intro underneath. */
@media (max-width: 599px) {
	.jukzta-hero {
		min-height: 0 !important;
		padding-top: 78vw !important;
		align-items: flex-end;
	}

	.jukzta-hero .wp-block-cover__image-background {
		height: 100vw;
		bottom: auto;
		object-position: 76% 30% !important;
	}

	.jukzta-hero .wp-block-cover__background {
		background: linear-gradient(180deg, rgb(13 13 13 / 0) 0%, rgb(13 13 13 / 0.15) 45vw, var(--wp--preset--color--base) 92vw) !important;
	}
}

/* ---------------------------------------------------------------- Sections */

/* Full-width hairlines between homepage sections. */
.jukzta-section {
	border-top: 1px solid var(--wp--preset--color--border);
}

/* "§ 01 — Selected work" — hairline — caption / link. */
.jukzta-section-head {
	width: 100%;
}

.jukzta-section-head > * {
	margin: 0;
}

h2.jukzta-section-label {
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.jukzta-section-head > .wp-block-separator {
	flex: 1 1 auto;
	width: auto;
	min-width: 2rem;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--border);
}

.jukzta-section-head > p {
	flex: 0 0 auto;
	white-space: nowrap;
}

.jukzta-section-caption {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 1023px) {
	.jukzta-section-caption {
		display: none;
	}
}

@media (max-width: 599px) {
	.jukzta-section-head {
		flex-wrap: wrap !important;
	}

	.jukzta-section-head > .wp-block-separator {
		display: none;
	}
}

/* ---------------------------------------------------------------- Post grids */

/* Archive grids: 1 column on phones, 2 on tablets, 3 on desktop. */
.wp-block-query .wp-block-post-template.is-layout-grid {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 600px) {
	.wp-block-query .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.wp-block-query .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Selected work: three across from tablet up; four on desktop when four posts are featured. */
@media (max-width: 699px) {
	.jukzta-featured .wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 700px) {
	.jukzta-featured .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.jukzta-featured .wp-block-post-template.is-layout-grid:has(> li:nth-child(4)) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.jukzta-featured .wp-block-post-template.is-layout-grid:has(> li:nth-child(4)) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Recent notes: three text columns divided by hairlines; stacked below 782px. */
.jukzta-latest .wp-block-post-template.is-layout-grid {
	grid-template-columns: minmax(0, 1fr);
	row-gap: 0;
}

@media (min-width: 782px) {
	.jukzta-latest .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------- Post cards */

/* The whole card is clickable (via the title link); category links stay separately clickable. */
.jukzta-card {
	position: relative;
	display: grid !important;
	grid-template-rows: auto 1fr;
	height: 100%;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	transition: border-color 0.3s ease, transform 0.3s ease;
}

.jukzta-card:hover {
	border-color: var(--wp--preset--color--muted);
	transform: translateY(-2px);
}

.jukzta-card:has(.wp-block-post-title a:focus-visible),
.jukzta-note:has(.wp-block-post-title a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

.jukzta-card .wp-block-post-title a::after,
.jukzta-note .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.jukzta-card .wp-block-post-title a:focus-visible,
.jukzta-note .wp-block-post-title a:focus-visible {
	outline: none;
}

.jukzta-card .wp-block-post-terms a,
.jukzta-card .wp-block-read-more,
.jukzta-note .wp-block-post-terms a {
	position: relative;
	z-index: 2;
}

.jukzta-card:hover .wp-block-post-title a,
.jukzta-note:hover .wp-block-post-title a {
	color: var(--wp--preset--color--accent);
}

/* The frame sets the shape, so every card lines up whatever the image size. */
.jukzta-card .wp-block-post-featured-image {
	position: relative;
	flex-shrink: 0;
	overflow: hidden;
	margin: 0;
	background: var(--wp--preset--color--surface-raised);
}

/* 3:2 frame (padding keeps the shape inside the card's flex column). */
.jukzta-card .wp-block-post-featured-image::before {
	content: "";
	display: block;
	padding-top: 66.667%;
}

.jukzta-card .wp-block-post-featured-image a {
	position: absolute;
	inset: 0;
	display: block;
}

.jukzta-card .wp-block-post-featured-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	transition: transform 0.6s ease, filter 0.6s ease;
}

.jukzta-card:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
	filter: brightness(1.08);
}

.jukzta-card__body {
	flex-grow: 1;
}

.jukzta-card__body > * {
	margin: 0;
}

.jukzta-card .wp-block-post-title {
	line-height: 1.2;
}

.wp-block-read-more.jukzta-read-more {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--10);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.18em;
	text-decoration: none;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.wp-block-read-more.jukzta-read-more:hover {
	color: var(--wp--preset--color--contrast);
}

/* Compact card (Selected work): title and a category line, with an arrow. */
.jukzta-card--compact .wp-block-post-featured-image::before {
	padding-top: 62.5%;
}

.jukzta-card--compact .jukzta-card__body {
	position: relative;
	padding-right: 3rem !important;
}

.jukzta-card--compact .wp-block-post-title {
	font-weight: 500;
}

.jukzta-card--compact .jukzta-card__body::after,
.jukzta-note::after {
	content: "→";
	position: absolute;
	right: 1rem;
	bottom: 0.9rem;
	font-size: 1.125rem;
	line-height: 1;
	color: var(--wp--preset--color--accent);
	transition: transform 0.3s ease;
}

.jukzta-card--compact:hover .jukzta-card__body::after,
.jukzta-note:hover::after {
	transform: translateX(4px);
}

/* Note card (Recent notes): text divided by hairlines; the arrow sits bottom-right. */
.jukzta-note {
	position: relative;
	height: 100%;
	border-left: 1px solid var(--wp--preset--color--border);
}

.jukzta-note > * {
	margin: 0;
}

.jukzta-note__body {
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--wp--preset--spacing--30) 3rem var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.jukzta-note__body > * {
	margin: 0;
}

.jukzta-latest li:first-child .jukzta-note {
	border-left: 2px solid var(--wp--preset--color--accent);
}

.jukzta-note .wp-block-post-title {
	font-weight: 500;
	line-height: 1.25;
}

.jukzta-note__meta .wp-block-post-date::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 0.6em;
	border-radius: 50%;
	vertical-align: 0.1em;
	background: var(--wp--preset--color--accent);
}

.jukzta-note__meta .wp-block-post-date + .wp-block-post-terms::before {
	content: "/";
	margin-right: 0.75em;
}

/* Small square thumbnail on the card's left, centred vertically (only when the post has one).
   The card's height still comes from the text, so it is never taller than a text-only card. */
.jukzta-note__image {
	position: relative;
	flex: 0 0 auto;
	align-self: center;
	width: clamp(88px, 8vw, 116px);
	aspect-ratio: 1 / 1;
	margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) !important;
	overflow: hidden;
	border-radius: 2px;
	background: var(--wp--preset--color--surface-raised);
}

.jukzta-note__image a,
.jukzta-note__image img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	transition: transform 0.6s ease, filter 0.6s ease;
}

.jukzta-note:hover .jukzta-note__image img {
	transform: scale(1.04);
	filter: brightness(1.08);
}

/* When any note has an image, the section switches to bordered cards, as in the reference. */
.jukzta-latest:has(.jukzta-note__image) .wp-block-post-template.is-layout-grid {
	gap: var(--wp--preset--spacing--30);
}

.jukzta-latest:has(.jukzta-note__image) .jukzta-note,
.jukzta-latest:has(.jukzta-note__image) li:first-child .jukzta-note {
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
	transition: border-color 0.3s ease;
}

.jukzta-latest:has(.jukzta-note__image) .jukzta-note:hover {
	border-color: var(--wp--preset--color--muted);
}

.jukzta-latest:has(.jukzta-note__image) .jukzta-note__body {
	padding: var(--wp--preset--spacing--20) 2.75rem var(--wp--preset--spacing--20) var(--wp--preset--spacing--20);
}

/* A card without an image lines its text up with the ones beside it. */
.jukzta-latest:has(.jukzta-note__image) .jukzta-note:not(:has(.jukzta-note__image)) .jukzta-note__body {
	padding-left: var(--wp--preset--spacing--30);
}

/* Keep image cards compact: two-line excerpt. */
.jukzta-latest:has(.jukzta-note__image) .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

@media (max-width: 781px) {
	.jukzta-note {
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--border);
	}

	.jukzta-note__body {
		padding-left: 0;
	}

	.jukzta-latest li:first-child .jukzta-note {
		border-left: 0;
		border-top: 2px solid var(--wp--preset--color--accent);
	}

	.jukzta-note__image {
		width: 88px;
	}
}

/* ---------------------------------------------------------------- Areas */

/* The glow shows until a background photo is added to the card. */
.jukzta-area {
	border: 1px solid var(--wp--preset--color--border);
	background: radial-gradient(circle at 85% 12%, rgb(124 255 79 / 0.1), transparent 55%), var(--wp--preset--color--surface);
	transition: border-color 0.3s ease;
}

/* Photo overlay: a soft lime glow in the top corner and a dark fade behind the text. */
.jukzta-area .wp-block-cover__background {
	opacity: 1 !important;
	background:
		radial-gradient(circle at 85% 12%, rgb(124 255 79 / 0.16), transparent 55%),
		linear-gradient(0deg, rgb(13 13 13 / 0.95) 0%, rgb(13 13 13 / 0.7) 38%, rgb(13 13 13 / 0.25) 70%, rgb(13 13 13 / 0.15) 100%) !important;
	transition: opacity 0.4s ease;
}

.jukzta-area .wp-block-cover__image-background {
	transition: transform 0.8s ease, filter 0.8s ease;
}

.jukzta-area:hover .wp-block-cover__image-background {
	transform: scale(1.04);
	filter: brightness(1.1);
}

/* The whole card is clickable (assets/js/theme.js). */
.jukzta-area.is-linked {
	cursor: pointer;
}

.jukzta-area.is-linked:hover .wp-block-heading {
	color: var(--wp--preset--color--accent);
}

.jukzta-area:hover,
.jukzta-area:focus-within {
	border-color: var(--wp--preset--color--accent);
}

.jukzta-area .wp-block-cover__inner-container > * {
	margin-block: 0.5em 0;
}

.jukzta-area .wp-block-heading {
	font-weight: 500;
}

/* Reserve the same space for every description so the three titles line up. */
.jukzta-area__text {
	min-height: calc(2 * 1.5em);
	font-family: var(--wp--preset--font-family--heading);
	line-height: 1.5;
}

@media (min-width: 1024px) and (max-width: 1279px) {
	.jukzta-area__text {
		min-height: calc(3 * 1.5em);
	}
}

@media (min-width: 600px) and (max-width: 1023px) {
	.jukzta-area__text {
		min-height: calc(4 * 1.5em);
	}
}

@media (max-width: 599px) {
	.jukzta-area__text {
		min-height: 0;
	}

	.jukzta-area {
		min-height: 260px !important;
	}
}

.jukzta-area__num {
	position: absolute;
	right: 0;
	bottom: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------- Now */

.jukzta-now__statement {
	padding-left: var(--wp--preset--spacing--30);
	border-left: 2px solid var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--heading);
	line-height: 1.45;
}

.jukzta-status-list {
	margin: 0;
	padding-left: var(--wp--preset--spacing--30);
	border-left: 1px solid var(--wp--preset--color--border);
	list-style: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.18em;
	line-height: 2.2;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.jukzta-status-list li::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 0.9em;
	border-radius: 50%;
	vertical-align: 0.1em;
	background: var(--wp--preset--color--accent);
}

/* Now page: hairlines between areas, and around the list. */
.jukzta-now__items {
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.jukzta-now__item + .jukzta-now__item {
	border-top: 1px solid var(--wp--preset--color--border);
}

.jukzta-now__item > p {
	color: var(--wp--preset--color--contrast);
	line-height: 1.7;
}

.jukzta-now__footer .wp-block-post-date {
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--contrast);
}

/* Heading icons: pick one in a heading's Styles panel ("Icon: …"). */
.wp-block-heading[class*="is-style-icon-"]::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 0.55em;
	vertical-align: -0.12em;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
}

.wp-block-heading.is-style-icon-hammer::before { -webkit-mask-image: url(../icons/hammer.svg); mask-image: url(../icons/hammer.svg); }
.wp-block-heading.is-style-icon-book::before { -webkit-mask-image: url(../icons/book.svg); mask-image: url(../icons/book.svg); }
.wp-block-heading.is-style-icon-chip::before { -webkit-mask-image: url(../icons/chip.svg); mask-image: url(../icons/chip.svg); }
.wp-block-heading.is-style-icon-video::before { -webkit-mask-image: url(../icons/video.svg); mask-image: url(../icons/video.svg); }
.wp-block-heading.is-style-icon-pen::before { -webkit-mask-image: url(../icons/pen.svg); mask-image: url(../icons/pen.svg); }
.wp-block-heading.is-style-icon-camera::before { -webkit-mask-image: url(../icons/camera.svg); mask-image: url(../icons/camera.svg); }
.wp-block-heading.is-style-icon-compass::before { -webkit-mask-image: url(../icons/compass.svg); mask-image: url(../icons/compass.svg); }
.wp-block-heading.is-style-icon-sparkle::before { -webkit-mask-image: url(../icons/sparkle.svg); mask-image: url(../icons/sparkle.svg); }

/* ---------------------------------------------------------------- Closing statement */

/* Slim landscape banner above the footer: the image sits right, fading to black behind the text. */
.jukzta-closing {
	min-height: clamp(200px, 15vw, 280px) !important;
	padding-top: var(--wp--preset--spacing--30) !important;
	padding-bottom: var(--wp--preset--spacing--30) !important;
	border-top: 1px solid var(--wp--preset--color--border);
}

.jukzta-closing .jukzta-closing__title {
	font-size: clamp(1.75rem, 3vw, 2.75rem) !important;
}

.jukzta-closing .jukzta-word-list {
	font-size: 0.6875rem;
	line-height: 1.75;
}

.jukzta-closing .wp-block-cover__background {
	opacity: 1 !important;
	background:
		linear-gradient(90deg, var(--wp--preset--color--base) 0%, rgb(13 13 13 / 0.92) 30%, rgb(13 13 13 / 0.35) 58%, rgb(13 13 13 / 0) 78%),
		linear-gradient(0deg, rgb(13 13 13 / 0.6) 0%, rgb(13 13 13 / 0) 30%),
		linear-gradient(180deg, rgb(13 13 13 / 0.5) 0%, rgb(13 13 13 / 0) 25%) !important;
}

.jukzta-closing__inner {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1320px) !important;
	margin-inline: auto !important;
}

.jukzta-closing__inner > * {
	margin: 0;
}

/* Short lime dash in front of the line, as in the reference. */
.jukzta-closing__title {
	position: relative;
	flex: 0 0 auto;
	padding-left: clamp(3rem, 6vw, 5.5rem);
	font-weight: 600;
	line-height: 1.08;
}

.jukzta-closing__title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: clamp(2rem, 4vw, 3.5rem);
	height: 2px;
	background: var(--wp--preset--color--accent);
}

/* Word list with a thin divider on its left. */
.jukzta-word-list {
	flex: 0 0 auto;
	padding: 0.25rem 0 0.25rem var(--wp--preset--spacing--40);
	border-left: 1px solid rgb(237 234 227 / 0.35);
	line-height: 2;
}

@media (min-width: 600px) and (max-width: 1023px) {
	.jukzta-closing .wp-block-cover__background {
		background:
			linear-gradient(90deg, var(--wp--preset--color--base) 0%, rgb(13 13 13 / 0.88) 50%, rgb(13 13 13 / 0.2) 90%),
			linear-gradient(0deg, rgb(13 13 13 / 0.6) 0%, rgb(13 13 13 / 0) 30%) !important;
	}
}

/* Phones: landscape strip on top (figure in view), text stacked underneath. */
@media (max-width: 599px) {
	.jukzta-closing {
		min-height: 0 !important;
		padding-top: 34vw !important;
		align-items: flex-end;
	}

	.jukzta-closing .wp-block-cover__image-background {
		height: 46vw;
		bottom: auto;
		object-position: 84% 45% !important;
	}

	.jukzta-closing .wp-block-cover__background {
		background: linear-gradient(180deg, rgb(13 13 13 / 0) 0%, rgb(13 13 13 / 0.2) 22vw, var(--wp--preset--color--base) 45vw) !important;
	}

	.jukzta-closing__inner {
		flex-direction: column;
		align-items: flex-start !important;
	}

	.jukzta-closing__inner {
		gap: var(--wp--preset--spacing--20) !important;
	}

	.jukzta-closing__title {
		padding-left: 0;
		padding-top: 1rem;
	}

	.jukzta-closing__title::before {
		top: 0;
		width: 2.5rem;
	}

	.jukzta-closing .jukzta-word-list {
		line-height: 1.6;
	}
}

/* ---------------------------------------------------------------- Footer */

.jukzta-footer {
	border-top: 1px solid var(--wp--preset--color--border);
}

/* Keep the last footer line clear of the back-to-top button. */
.jukzta-footer__base {
	padding-right: 4rem;
}

.jukzta-footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--heading);
}

.jukzta-footer__nav a {
	text-decoration: none;
}

.jukzta-footer__blurb {
	margin: 0;
	padding-left: var(--wp--preset--spacing--30);
	border-left: 1px solid var(--wp--preset--color--border);
	line-height: 1.6;
}

.jukzta-footer__base {
	border-top: 1px solid var(--wp--preset--color--border);
}

.jukzta-footer__base > * {
	margin: 0;
}

.jukzta-wordmark {
	margin: 0;
}

.jukzta-wordmark img {
	display: block;
	height: auto;
}

/* ---------------------------------------------------------------- Single posts and pages */

.wp-block-post-content > :where(h2, h3) {
	margin-top: 2em;
}

.wp-block-post-content a:where(:not(.wp-element-button)) {
	text-decoration-color: var(--wp--preset--color--accent);
}

.wp-block-post-content :where(figcaption) {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-post-featured-image img {
	object-fit: cover;
}

/* Code blocks: a labelled panel, set apart from body text. Long lines scroll instead of wrapping. */
.wp-block-code,
.wp-block-preformatted {
	position: relative;
	overflow-x: auto;
	padding-top: calc(var(--wp--preset--spacing--30) + 1.75em) !important;
	white-space: pre;
}

.wp-block-code code {
	white-space: pre;
}

.wp-block-code::before {
	content: "Code";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 0.45em var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--border);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-style: normal;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

/* Inline `code` inside text. */
:where(p, li, td, h2, h3, h4) code {
	padding: 0.1em 0.35em;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 2px;
	background: var(--wp--preset--color--surface-raised);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.875em;
}

/* Quotes: a quiet panel with a lime edge; the citation in small monospace. */
.wp-block-quote > :first-child {
	margin-top: 0;
}

.wp-block-quote > :last-child {
	margin-bottom: 0;
}

.wp-block-quote cite {
	display: block;
	margin-top: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-style: normal;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* Single posts: a small, centred header image, scaled to fit (never cropped). */
.wp-block-post-featured-image.jukzta-post-image {
	display: flex;
	justify-content: center;
}

.wp-block-post-featured-image.jukzta-post-image img {
	width: auto !important;
	max-width: 100%;
	height: auto !important;
	max-height: 440px;
	object-fit: contain !important;
}

/* ---------------------------------------------------------------- Subcategory grid */

.jukzta-subcategories {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: var(--wp--preset--spacing--40);
}

.jukzta-subcategories__item {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.jukzta-subcategories__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
}

.jukzta-subcategories__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.jukzta-subcategories__item:hover .jukzta-subcategories__media img,
.jukzta-subcategories__item:focus-visible .jukzta-subcategories__media img {
	transform: scale(1.04);
}

.jukzta-subcategories__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.15;
}

.jukzta-subcategories__item:hover .jukzta-subcategories__name {
	color: var(--wp--preset--color--accent);
}

.jukzta-subcategories__description {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.jukzta-subcategories-placeholder {
	padding: var(--wp--preset--spacing--40);
	border: 1px dashed var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------- Back to top */

.jukzta-to-top {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 90;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 2px;
	background: rgb(22 22 22 / 0.88);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.75rem);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s, border-color 0.2s ease, color 0.2s ease;
}

.jukzta-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s, border-color 0.2s ease, color 0.2s ease;
}

.jukzta-to-top:hover,
.jukzta-to-top:focus-visible {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------- Reduced motion */

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

	.jukzta-card:hover,
	.jukzta-card:hover .wp-block-post-featured-image img,
	.jukzta-subcategories__item:hover .jukzta-subcategories__media img,
	.jukzta-card--compact:hover .jukzta-card__body::after,
	.jukzta-note:hover::after,
	.jukzta-area:hover .wp-block-cover__image-background {
		transform: none;
	}
}