/**
 * Brace Yourself Theme - Main Stylesheet
 *
 * Production-grade CSS design system built on modular scale principles.
 * Base: 17px | Ratio: 1.414 (√2) | Browser default: 16px
 *
 * @package Brace_Yourself
 */

/* ========================================
   CUSTOM WEB FONTS
   ======================================== */

@font-face {
	font-family: 'Pilat';
	src:
		local('Pilat Bold'),
		local('Pilat-Bold'),
		url('../fonts/Pilat-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Pilat';
	src:
		local('Pilat Heavy'),
		local('Pilat-Heavy'),
		url('../fonts/Pilat-Heavy.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Pilat Wide';
	src:
		local('PilatWide Black'),
		local('PilatWide-Black'),
		url('../fonts/PilatWide-Black.woff2') format('woff2');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

/* ========================================
   CSS RESET & BASE
   ======================================== */

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

html {
	font-size: 100%; /* 16px browser default */
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

/* Disable smooth scroll for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	font-family: var(--font-family-body);
	font-size: var(--font-body);
	line-height: var(--line-height-base);
	color: var(--color-text);
	/* Background color matches carousel - prevents flash when carousel items are transparent */
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: auto;
	font-kerning: normal;
	font-feature-settings: normal;
	-webkit-font-feature-settings: normal;
}

::selection {
	background-color: var(--color-text);
	color: var(--color-bg);
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	/* Exception: Background carousel should still animate but slower */
	.background-carousel__item {
		animation-duration: var(--total-duration, 7000ms) !important;
		animation-iteration-count: infinite !important;
	}

	/* Reduced motion: show single centered logo instead of static ticker strip */
	.site-title__ticker {
		display: none !important;
	}
	.site-title__svg--desktop {
		display: block !important;
		width: calc(100vw - var(--space-400) * 2);
		height: auto;
		max-width: none;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ========================================
   MODULAR SCALE VALUES
   ========================================
   Base: 17px | Ratio: 1.414 (√2) | Browser: 16px
   All values calculated mathematically, no approximations.
   */

:root {
	/* Scale Values */
	--scale-000: 0.187967rem; /* 3.01px */
	--scale-100: 0.265786rem; /* 4.25px */
	--scale-200: 0.375821rem; /* 6.01px */
	--scale-300: 0.531410rem; /* 8.50px */
	--scale-400: 0.751414rem; /* 12.02px */
	--scale-500: 1.062500rem; /* 17.00px - Base */
	--scale-600: 1.502375rem; /* 24.04px */
	--scale-700: 2.124358rem; /* 33.99px */
	--scale-800: 3.003843rem; /* 48.06px */
	--scale-900: 4.247433rem; /* 67.96px */
	--scale-1000: 6.005871rem; /* 96.09px */
	--scale-1100: 8.492302rem; /* 135.88px */
	--scale-1200: 12.008114rem; /* 192.13px */
	--scale-1300: 16.979474rem; /* 271.65px */
	--scale-1400: 24.008976rem; /* 384.15px */
	--scale-1500: 33.948692rem; /* 542.46px */

	/* ========================================
	   COLOR SYSTEM
	   ======================================== */

	/* Raw Color Variables (Never use directly in components) */
	--near-black: #121212;
	--crimson-red: #E03C28;
	--pure-white: #FFFFFF;
	--lime: #EDFF00;

	/* Semantic Color Aliases (Use these in components) */
	--color-bg: var(--crimson-red);
	--color-text: var(--near-black);
	--color-accent: var(--pure-white);

	/* ========================================
	   SPACING SCALE
	   ======================================== */

	--space-000: 0;
	--space-100: var(--scale-000);  /* 0.187967rem / 3.01px */
	--space-200: var(--scale-100);  /* 0.265786rem / 4.25px */
	--space-300: var(--scale-200);  /* 0.375821rem / 6.01px */
	--space-400: var(--scale-300);  /* 0.531410rem / 8.50px */
	--space-500: var(--scale-400);  /* 0.751414rem / 12.02px */
	--space-600: var(--scale-500);  /* 1.062500rem / 17.00px */
	--space-700: var(--scale-600);  /* 1.502375rem / 24.04px */
	--space-800: var(--scale-700);  /* 2.124358rem / 33.99px */
	--space-900: var(--scale-800);  /* 3.003843rem / 48.06px */
	--space-1000: var(--scale-900); /* 4.247433rem / 67.96px */
	--space-1100: var(--scale-1000); /* 6.005871rem / 96.09px */
	--space-1200: var(--scale-1100); /* 8.492302rem / 135.88px */
	--space-1300: var(--scale-1200); /* 12.008114rem / 192.13px */
	--space-1400: var(--scale-1300); /* 16.979474rem / 271.65px */
	--space-1500: var(--scale-1400); /* 24.008976rem / 384.15px */

	/* ========================================
	   TYPOGRAPHY SCALE
	   ======================================== */

	--text-sm: var(--scale-400);    /* 0.751414rem / 12.02px */
	--text-base: var(--scale-500);  /* 1.062500rem / 17.00px */
	--text-lg: var(--scale-600);    /* 1.502375rem / 24.04px */
	--text-xl: var(--scale-700);    /* 2.124358rem / 33.99px */
	--text-2xl: var(--scale-800);   /* 3.003843rem / 48.06px */
	--text-3xl: var(--scale-900);   /* 4.247433rem / 67.96px */
	--text-4xl: var(--scale-1000);  /* 6.005871rem / 96.09px */

	/* ========================================
	   SEMANTIC TYPOGRAPHY TOKENS
	   ======================================== */

	/* Headings */
	--font-heading-xl: var(--text-4xl); /* Display / hero */
	--font-heading-lg: var(--text-3xl);  /* Primary page titles */
	--font-heading-md: var(--text-2xl);  /* Section headings */
	--font-heading-sm: var(--text-xl);   /* Sub-section headings */

	/* Body text */
	--font-body-lg: var(--text-xl);      /* Large body text / lead */
	--font-body: var(--text-lg);      /* Default body text */
	--font-caption: var(--text-base);     /* Captions / meta */
	--font-label: var(--text-sm);         /* Labels / fine print */

	/* ========================================
	   LINE HEIGHT SYSTEM
	   ======================================== */

	--line-height-tight: 1;
	--line-height-base: 1.2;
	--line-height-relaxed: 1.3;
	--line-height-loose: 1.4;

	/* ========================================
	   LETTER SPACING
	   ======================================== */

	--letter-spacing-tight: -0.02em;
	--letter-spacing-normal: 0;
	--letter-spacing-wide: 0.02em;
	--letter-spacing-wider: 0.04em;

	/* ========================================
	   FONT FAMILIES
	   ======================================== */

	/* Primary sans-serif stack (body) */
	--font-family-body: 'Pilat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

	/* Heading stack prefers wide display where available */
	--font-family-heading: 'Pilat Wide', 'Pilat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

	/* ========================================
	   BORDER RADIUS
	   ======================================== */

	--radius-sm: var(--scale-200);  /* 0.375821rem / 6.01px */
	--radius-base: var(--scale-300); /* 0.531410rem / 8.50px */
	--radius-lg: var(--scale-400);  /* 0.751414rem / 12.02px */
	--radius-full: 9999px;

	/* ========================================
	   SHADOWS
	   ======================================== */

	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

	/* ========================================
	   MOTION SYSTEM
	   ======================================== */

	--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-in: cubic-bezier(0.4, 0, 1, 1);
	--ease-out: cubic-bezier(0, 0, 0.2, 1);
	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

	--duration-fast: 100ms;
	--duration-base: 250ms;
	--duration-slow: 400ms;
	--duration-carousel: 7000ms; /* 7 seconds - carousel slide duration */

	/* ========================================
	   SEMANTIC SPACING TOKENS
	   ======================================== */

	--space-section: var(--space-1000); /* 6.005871rem / 96.09px */
	--space-stack: var(--space-600);    /* 1.062500rem / 17.00px */
	--space-inline: var(--space-400);   /* 0.531410rem / 8.50px */

	/* ========================================
	   LAYOUT
	   ======================================== */

	--content-max-width: 1680px;
}

@media (max-width: 767px) {
	:root {
		--space-section: var(--space-800);
		/* Nav padding-block + caption line before JS sets --primary-nav-row-height */
		--primary-nav-row-height-fallback: calc(2 * var(--space-400) + var(--font-caption) * var(--line-height-base));
	}
}

/* ========================================
   TYPOGRAPHY
   ======================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--color-text);
	margin: 0;
}

h1 {
	font-family: var(--font-family-heading);
	font-size: var(--font-heading-lg);
	font-weight: 900;
	letter-spacing: var(--letter-spacing-normal);
	line-height: var(--line-height-tight);
	text-transform: uppercase;
}

h2 {
	font-family: var(--font-family-body);
	font-size: var(--font-heading-lg);
	font-weight: 800;
	letter-spacing: var(--letter-spacing-normal);
	line-height: var(--line-height-tight);
	text-transform: uppercase;
}

h3 {
	font-family: var(--font-family-body);
	font-size: var(--font-heading-md);
	font-weight: 800;
	letter-spacing: var(--letter-spacing-normal);
	line-height: var(--line-height-tight);
	text-transform: uppercase;
}

h4 {
	font-family: var(--font-family-body);
	font-size: var(--font-heading-sm);
	font-weight: 800;
	letter-spacing: var(--letter-spacing-normal);
	line-height: var(--line-height-tight);
	text-transform: uppercase;
}

h5 {
	font-family: var(--font-family-body);
	font-size: var(--font-body-lg);
	font-weight: 700;
	letter-spacing: var(--letter-spacing-normal);
	line-height: var(--line-height-base);
}

h6 {
	font-family: var(--font-family-body);
	font-size: var(--font-caption);
	font-weight: 700;
	letter-spacing: var(--letter-spacing-wide);
	line-height: var(--line-height-relaxed);
	text-transform: uppercase;
}

/* Responsive: h1→.text-heading-xl, h2→.text-heading-lg, h3→.text-heading-md, h4→.text-heading-sm at each breakpoint */
@media (max-width: 1023px) {
	h1 {
		font-size: var(--font-heading-md);
	}

	h2 {
		font-size: var(--font-heading-sm);
	}

	h3 {
		font-size: var(--font-body-lg);
	}
}

@media (max-width: 767px) {
	/* iOS Safari applies Pilat's kern table more aggressively at retina DPR,
	   causing negative kern pairs around punctuation to visually collapse word spaces.
	   letter-spacing on caption/body text already provides visual spacing between glyphs. */
	body {
		font-kerning: none;
	}

	h1 {
		font-size: var(--font-heading-sm);
	}

	h2 {
		font-size: var(--font-body-lg);
	}

	h5,
	h6 {
		line-height: var(--line-height-relaxed);
	}
}

@media (max-width: 480px) {
	h1,
	h2,
	h3,
	h4,
	h5 {
		font-size: var(--font-body);
	}

	body {
		font-size: var(--font-caption);
		line-height: var(--line-height-relaxed);
	}
}

/* ----------------------------------------
   TYPOGRAPHY UTILITIES
   ---------------------------------------- */

/* Font size utilities (independent of element type) */
.text-heading-xl {
	font-family: var(--font-family-heading);
	font-size: var(--font-heading-lg);
	font-weight: 900;
	letter-spacing: var(--letter-spacing-normal);
	line-height: var(--line-height-tight);
	text-transform: uppercase;
}

.text-heading-lg {
	font-family: var(--font-family-body);
	font-size: var(--font-heading-lg);
	font-weight: 800;
	letter-spacing: var(--letter-spacing-normal);
	line-height: var(--line-height-tight);
	text-transform: uppercase;
}

.text-heading-md {
	font-family: var(--font-family-body);
	font-size: var(--font-heading-md);
	font-weight: 800;
	letter-spacing: var(--letter-spacing-normal);
	line-height: var(--line-height-tight);
	text-transform: uppercase;
}

.text-heading-sm {
	font-family: var(--font-family-body);
	font-size: var(--font-heading-sm);
	font-weight: 800;
	letter-spacing: var(--letter-spacing-normal);
	line-height: var(--line-height-tight);
	text-transform: uppercase;
}

.text-body-lg {
	font-family: var(--font-family-body);
	font-size: var(--font-body-lg);
	font-weight: 700;
	letter-spacing: var(--letter-spacing-normal);
	line-height: var(--line-height-base);
}

.text-body {
	font-family: var(--font-family-body);
	font-size: var(--font-body);
	font-weight: 700;
	letter-spacing: var(--letter-spacing-normal);
	line-height: var(--line-height-base);
}

.text-caption {
	font-family: var(--font-family-body);
	font-size: var(--font-caption);
	font-weight: 700;
	letter-spacing: var(--letter-spacing-wide);
	line-height: var(--line-height-base);
	text-transform: uppercase;
}

/* Responsive scale: 1023px (tablet), 767px (mobile), 375px (small mobile) */
@media (max-width: 1023px) {
	.text-heading-xl {
		font-size: var(--font-heading-md);
	}

	.text-heading-lg {
		font-size: var(--font-heading-sm);
	}

	.text-heading-md {
		font-size: var(--font-body-lg);
	}
}

@media (max-width: 767px) {
	.text-heading-xl {
		font-size: var(--font-heading-sm);
	}

	.text-heading-lg {
		font-size: var(--font-body-lg);
	}
}

@media (max-width: 480px) {
	.text-heading-xl,
	.text-heading-lg,
	.text-heading-md,
	.text-heading-sm,
	.text-body-lg {
		font-size: var(--font-body);
		line-height: var(--line-height-base);
	}

	.text-body {
		font-size: var(--font-caption);
		line-height: var(--line-height-relaxed);
	}
}

/* Font family utilities */
.font-heading {
	font-family: var(--font-family-heading);
}

.font-body {
	font-family: var(--font-family-body);
}

p {
	margin: 0;
}

a {
	color: var(--color-text);
	text-decoration: underline;
	transition: color var(--duration-fast) var(--ease-standard);
}

a:hover,
a:focus {
	color: var(--color-accent);
}

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

/* ========================================
   VERTICAL RHYTHM UTILITIES
   ======================================== */

/**
 * Flow utility - adds consistent spacing between direct children
 * Uses semantic spacing token for predictable rhythm
 */
.flow > * + * {
	margin-top: var(--space-stack);
}

/**
 * Stack utility - alias for flow (kept for semantic readability)
 */
.stack > * + * {
	margin-top: var(--space-stack);
}

/* ========================================
   LAYOUT UTILITIES
   ======================================== */

.sections {
	--space-stack: var(--space-section);
}


.container {
	width: 100%;
	max-width: var(--content-max-width);
	margin-left: auto;
	margin-right: auto;
}

.section {
	padding-top: var(--space-section);
	padding-bottom: var(--space-section);
}

/* Site Header */
.site-header {
	position: relative;
	width: 100%;
	overflow: visible;
}

.site-branding {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	text-align: center;
	padding: var(--space-400) 0 0;
	overflow: hidden;
	box-sizing: border-box;
}

/* Ensure logo respects device safe areas (e.g. iPhone notches / Dynamic Island) */
@supports (padding: max(0px)) {
	.site-branding {
		padding-top: max(env(safe-area-inset-top, 0px), var(--space-400));
	}
}

.site-title {
	margin: 0;
	line-height: var(--line-height-base);
	width: 100%;
	overflow: hidden;
	max-width: none;
}

.site-title__ticker {
	display: flex;
	gap: 0.5vw;
	animation: ticker-tape 30s linear infinite;
	will-change: transform;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

@media (max-width: 767px) {
	.site-title__ticker {
		animation-duration: 12s;
	}

	/*
	 * Sit above fixed `.nav-veil` (z-index 9) so the masthead/ticker is never
	 * covered when scrolled to the top; stay below `.main-navigation` (100) so
	 * the sticky nav row still stacks over the header once they overlap.
	 */
	.site-header {
		z-index: 11;
	}
}

.site-title__svg--mobile {
	width: 250vw;
	height: auto;
	display: block;
	flex-shrink: 0;
	max-width: none;
	/* Path-based SVG with exact viewBox (1400×96) — scales proportionally */
}

.site-title__svg--desktop {
	display: none;
}

.site-title__link {
	color: var(--color-text);
	text-decoration: none;
	display: block;
}

.site-title__link:hover {
	color: var(--color-text);
}

/* Tagline: in DOM for SEO, visually hidden on site */
.site-description {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Ticker tape animation for mobile SVG */
/* Translates by exactly one pattern (250vw copy + 0.5vw gap) for seamless loop */
@keyframes ticker-tape {
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(calc(-250vw - 0.5vw), 0, 0);
	}
}

.main-navigation {
	position: sticky;
	top: 0;
	z-index: 100;
	padding: var(--space-400);
	/* Prevent flex stretch so sticky sticks to viewport, not flex container */
	align-self: flex-start;
	width: 100%;
}

.site-main {
	padding: var(--space-800) var(--space-400);
	flex: 1;
}

.primary-menu {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-400);
	width: 100%;
}

/* 1 item - centered */
.primary-menu > li:first-child:nth-last-child(1) {
	grid-column: 1 / -1;
	justify-self: center;
}

/* 2 items - space-between (first at start, second at end) */
.primary-menu > li:first-child:nth-last-child(2) {
	grid-column: 1;
	justify-self: start;
}

.primary-menu > li:first-child:nth-last-child(2) ~ li {
	grid-column: 3;
	justify-self: end;
}

/* 3 items - first at start, middle centered, last at end */
.primary-menu > li:first-child:nth-last-child(3) {
	grid-column: 1;
	justify-self: start;
}

.primary-menu > li:first-child:nth-last-child(3) ~ li:nth-child(2) {
	grid-column: 2;
	justify-self: center;
}

.primary-menu > li:first-child:nth-last-child(3) ~ li:nth-child(3) {
	grid-column: 3;
	justify-self: end;
}

/* Stretch link to full row height */
.primary-menu > li {
	display: flex;
	align-items: center;
	position: relative;
	transition: color var(--duration-base) var(--ease-standard);
}

.primary-menu a {
	display: flex;
	align-items: center;
	align-self: stretch;
	color: var(--color-text);
	text-decoration: none;
	position: relative;
	z-index: 0;
	padding-left: var(--space-800);
	background: transparent;
	background-repeat: no-repeat;
	background-position: var(--scale-400) 50%;
	background-size: var(--scale-200) var(--scale-200);
	transition: color var(--duration-fast) var(--ease-standard),
				background var(--duration-fast) var(--ease-standard),
				box-shadow var(--duration-fast) var(--ease-standard);
}

.primary-menu a:hover,
.primary-menu a:focus-visible {
	color: var(--crimson-red);
	background-color: var(--near-black);
	background-image: radial-gradient(circle at center, currentColor 0, currentColor calc(var(--scale-200) / 2), transparent calc(var(--scale-200) / 2));
	background-position: var(--scale-400) 50%;
	background-size: var(--scale-200) var(--scale-200);
	box-shadow: 0 0 0 var(--space-200) var(--near-black);
}

/* Bracket + dot: [ • ] — opening bracket, dot via link background (unified with footer column links), closing bracket */
/* Opening bracket */
.primary-menu a::before {
	content: "[";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	font-family: inherit;
	font-size: inherit;
	color: currentColor;
	line-height: var(--line-height-base);
}

/* Closing bracket – 1.5rem gap so circle (at 0.75rem) sits in the middle */
.primary-menu a::after {
	content: "]";
	position: absolute;
	left: var(--scale-600);
	top: 50%;
	transform: translateY(-50%);
	font-family: inherit;
	font-size: inherit;
	color: currentColor;
	line-height: var(--line-height-base);
}

/* Dot (circle) between brackets: same as footer – radial-gradient on link so one approach for nav and footer column links */
.primary-menu .current-menu-item > a,
.primary-menu .current_page_item > a,
.primary-menu .current-menu-ancestor > a {
	background-image: radial-gradient(circle at center, currentColor 0, currentColor calc(var(--scale-200) / 2), transparent calc(var(--scale-200) / 2));
	background-position: var(--scale-400) 54%;
	background-size: var(--scale-200) var(--scale-200);
}

.primary-menu.is-open {
	display: grid;
}

@media (min-width: 768px) {
	.main-navigation {
		padding: var(--space-400) var(--space-600);
	}
	.site-main {
		padding: var(--space-1000) var(--space-600);
	}
	.site-branding {
		padding: var(--space-600) 0 0;
		width: 100vw;
		left: 50%;
		right: 50%;
		margin-left: -50vw;
		margin-right: -50vw;
	}

	.site-title {
		width: 100vw;
		max-width: none;
		display: block;
		text-align: center;
		margin: 0;
		overflow: visible;
	}

	.site-title__link {
		width: 100vw;
		display: block;
	}

	.site-title__ticker {
		display: none;
	}

	.site-title__svg--desktop {
		display: block;
		width: calc(100vw - var(--space-600) * 2);
		height: auto;
		max-width: none;
		margin-left: auto;
		margin-right: auto;
		/* Path-based SVG with exact viewBox (1400×96) — space-600 padding either side */
	}

	.primary-menu {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-600);
		width: 100%;
	}

	/* Desktop: 4 items - switch to 4-column layout */
	.primary-menu:has(> li:first-child:nth-last-child(4)) {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Desktop: 4 items - first at start, 2&3 centered, last at end */
	.primary-menu:has(> li:first-child:nth-last-child(4)) > li:first-child:nth-last-child(4) {
		grid-column: 1;
		justify-self: start;
	}
	.primary-menu:has(> li:first-child:nth-last-child(4)) > li:first-child:nth-last-child(4) ~ li:nth-child(2) {
		grid-column: 2;
		justify-self: center;
	}
	.primary-menu:has(> li:first-child:nth-last-child(4)) > li:first-child:nth-last-child(4) ~ li:nth-child(3) {
		grid-column: 3;
		justify-self: center;
	}
	.primary-menu:has(> li:first-child:nth-last-child(4)) > li:first-child:nth-last-child(4) ~ li:nth-child(4) {
		grid-column: 4;
		justify-self: end;
	}

	/* Desktop: 2 items - space-between (first at start, second at end) */
	.primary-menu > li:first-child:nth-last-child(2) {
		grid-column: 1;
		justify-self: start;
	}

	.primary-menu > li:first-child:nth-last-child(2) ~ li {
		grid-column: 3;
		justify-self: end;
	}
}

/* ========================================
   NAVIGATION VEIL (mobile)
   ========================================
   Fixed viewport-anchored background layers behind the mobile nav.
   Top veil sits behind the sticky top row, bottom veil behind the
   fixed bottom corners. Both share a single body-level toggle class
   so they animate in sync. Mobile-only; disabled on the homepage
   (see header.php) to avoid competing with `.homepage-intro`.

   z-index 9 = below `.site-header` (11), `.homepage-intro` (10 is homepage-only),
   and `.main-navigation` (100); above in-flow page content. */

.nav-veil {
	display: none;
	pointer-events: none;
	/* Paint isolation: veil is a solid-color rectangle with no children,
	   so the browser can skip it during unrelated paint passes. */
	contain: paint;
}

@media (max-width: 767px) {
	.nav-veil {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		background-color: var(--color-bg);
		opacity: 1;
		z-index: 9;
		transition: opacity var(--duration-fast) var(--ease-standard);
		will-change: opacity;
	}

	/*
	 * Both veils use a single measured height (the parent `.main-navigation`'s
	 * box) written by JS as `--primary-nav-row-height`. Top/bottom items share the
	 * same intrinsic size, so one measurement covers both strips. Each strip
	 * additionally extends into its respective safe-area inset.
	 * Fallback covers the brief no-JS frame via `--primary-nav-row-height-fallback`.
	 * Veil markup is omitted on the homepage (see header.php); row height is
	 * still measured for the bottom bar (and the no-JS fixed-item fallback).
	 */
	.nav-veil--top {
		top: 0;
		height: calc(var(--primary-nav-row-height, var(--primary-nav-row-height-fallback)) + env(safe-area-inset-top, 0px));
	}

	.nav-veil--bottom {
		bottom: 0;
		height: calc(var(--primary-nav-row-height, var(--primary-nav-row-height-fallback)) + env(safe-area-inset-bottom, 0px));
	}

	body.nav-veil-hidden .nav-veil {
		opacity: 0;
	}
}

/* Site Footer */
.site-footer {
	padding: var(--space-400) var(--space-400) var(--space-800);
	text-align: center;
}

.site-footer__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-800);
	align-items: flex-end;
	text-align: left;
}


.site-footer__column {
	text-align: left;
}

.site-footer__columns {
	display: contents;
}

.site-footer__icon {
	width: var(--scale-900);
	max-width: 100%;
	color: var(--near-black);
	margin-bottom: var(--space-400);
	display: flex;
	align-items: center;
}

.site-footer__icon svg {
	width: 100%;
	height: auto;
	display: block;
}

.site-footer__inner .site-footer__column p:has(a):not(:last-child) {
	margin-bottom: var(--space-200);
}

/* Footer columns: default alignment */
.site-footer__column--1,
.site-footer__column--2,
.site-footer__column--3,
.site-footer__column--4 {
	justify-self: center;
	text-align: center;
}

/* Tablet (768–1023px): icon left, 2×2 columns grid right.
   Placed before the mobile rule below so the mobile (max-width: 767px) rule
   wins at narrow widths via source-order cascade. */
@media (max-width: 1023px) {
	.site-footer__inner,
	.site-footer__inner--3cols,
	.site-footer__inner--4cols {
		grid-template-columns: auto 1fr;
		align-items: center;
		text-align: left;
		gap: var(--space-600);
	}

	.site-footer__icon {
		grid-column: 1;
		margin-bottom: 0;
	}

	.site-footer__columns {
		display: grid;
		grid-column: 2;
		align-self: center;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-600);
		align-items: start;
	}

	.site-footer__column--1,
	.site-footer__column--3 {
		justify-self: start;
		text-align: left;
	}

	.site-footer__column--2,
	.site-footer__column--4 {
		justify-self: end;
		text-align: left;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	/* Three columns: one row, three equal tracks */
	.site-footer__inner--3cols .site-footer__columns {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.site-footer__inner--3cols .site-footer__column:nth-child(1) {
		grid-column: 1;
		justify-self: start;
		text-align: left;
	}

	.site-footer__inner--3cols .site-footer__column:nth-child(2) {
		grid-column: 2;
		justify-self: center;
		text-align: center;
	}

	.site-footer__inner--3cols .site-footer__column:nth-child(3) {
		grid-column: 3;
		justify-self: end;
		text-align: left;
	}

	/* All four ACF columns filled: left-align every cell; sparse layouts keep --2 / --4 flush right above */
	.site-footer__inner--4cols .site-footer__column--2,
	.site-footer__inner--4cols .site-footer__column--4 {
		justify-self: start;
	}
}

@media (max-width: 767px) {
	/*
	 * Clearance for fixed bottom nav + `.nav-veil--bottom`: measured row height,
	 * safe-area, a little gap above the bar, plus slack so link/copy stays
	 * readable while scrolling (including prefers-reduced-motion, where the veil
	 * does not fade with scroll).
	 */
	.site-footer {
		padding-bottom: calc(var(--primary-nav-row-height, var(--primary-nav-row-height-fallback)) + env(safe-area-inset-bottom, 0px) + var(--space-400) + var(--space-600));
	}

	.site-footer__inner,
	.site-footer__inner--2cols,
	.site-footer__inner--3cols,
	.site-footer__inner--4cols {
		gap: var(--space-400);
		grid-template-columns: 1fr;
		align-items: center;
		text-align: center;
	}

	/* Undo the tablet 2-col grid so footer columns stack as a single column. */
	.site-footer__columns {
		display: contents;
	}

	.site-footer__icon {
		grid-column: auto;
		justify-content: center;
		justify-self: center;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: var(--space-400);
	}

	.site-footer__column--1,
	.site-footer__column--2,
	.site-footer__column--3,
	.site-footer__column--4 {
		grid-column: auto;
		justify-self: center;
		text-align: center;
	}
}

@media (min-width: 1024px) {
	.site-footer {
		padding: var(--space-600);
	}

	/* Desktop footer layout: icon takes its natural width, columns fill the rest */
	.site-footer__inner,
	.site-footer__inner--2cols,
	.site-footer__inner--3cols,
	.site-footer__inner--4cols {
		grid-template-columns: auto 1fr;
		align-items: center;
		text-align: left;
		gap: var(--space-800);
	}

	.site-footer__icon {
		grid-column: 1;
		justify-self: start;
		margin-bottom: 0;
	}

	/* Even four-column layout aligned to the SVG */
	.site-footer__columns {
		display: grid;
		grid-column: 2;
		align-self: center;
		grid-template-columns: repeat(4, 1fr);
		align-items: start;
		gap: var(--space-600);
	}

	/* Explicit placement so sparse layouts (e.g. only cols 1 + 4) land in the correct tracks.
	   Without this, grid auto-placement fills consecutive tracks regardless of the --n suffix. */
	.site-footer__columns .site-footer__column--1 {
		grid-column: 1;
		justify-self: start;
		text-align: left;
	}
	.site-footer__columns .site-footer__column--2 {
		grid-column: 2;
		justify-self: start;
		text-align: left;
	}
	.site-footer__columns .site-footer__column--3 {
		grid-column: 3;
		justify-self: start;
		text-align: left;
	}
	.site-footer__columns .site-footer__column--4 {
		grid-column: 4;
		justify-self: end;
		text-align: left;
	}
}

.footer-menu {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-600);
	margin-bottom: var(--space-600);
}

.footer-menu a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	background: transparent;
	transition: color var(--duration-fast) var(--ease-standard),
				background var(--duration-fast) var(--ease-standard),
				box-shadow var(--duration-fast) var(--ease-standard);
}

.footer-menu a:hover,
.footer-menu a:focus-visible {
	color: var(--crimson-red);
	background-color: var(--near-black);
	box-shadow: 0 0 0 var(--space-200) var(--near-black);
}

/* Footer column links: same bracket + dot treatment as primary nav (no li wrapper, so dot is link background) */
.site-footer__inner .site-footer__column a {
	display: inline-flex;
	align-items: center;
	position: relative;
	padding-left: var(--space-800);
	color: var(--color-text);
	text-decoration: none;
	background: transparent;
	background-repeat: no-repeat;
	background-position: var(--scale-400) 50%;
	background-size: var(--scale-200) var(--scale-200);
	transition: color var(--duration-fast) var(--ease-standard),
				background var(--duration-fast) var(--ease-standard),
				box-shadow var(--duration-fast) var(--ease-standard);
}

/* Opening bracket */
.site-footer__inner .site-footer__column a::before {
	content: "[";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	font-family: inherit;
	font-size: inherit;
	color: currentColor;
	line-height: var(--line-height-base);
}

/* Closing bracket */
.site-footer__inner .site-footer__column a::after {
	content: "]";
	position: absolute;
	left: var(--scale-600);
	top: 50%;
	transform: translateY(-50%);
	font-family: inherit;
	font-size: inherit;
	color: currentColor;
	line-height: var(--line-height-base);
}

.site-footer__inner .site-footer__column a:hover,
.site-footer__inner .site-footer__column a:focus-visible {
	color: var(--crimson-red);
	background-color: var(--near-black);
	background-image: radial-gradient(circle at center, currentColor 0, currentColor calc(var(--scale-200) / 2), transparent calc(var(--scale-200) / 2));
	background-position: var(--scale-400) 50%;
	background-size: var(--scale-200) var(--scale-200);
	box-shadow: 0 0 0 var(--space-200) var(--near-black);
}

/* Entry Content */
.entry-header {
	margin-bottom: var(--space-800);
}

/* No visual spacing when the only content is an sr-only title (e.g. About, Artists, content pages) */
.entry-header:has(.entry-title.sr-only) {
	margin: 0;
}

.entry-title {
	margin-bottom: var(--space-600);
}

.entry-title a {
	color: var(--color-text);
	text-decoration: none;
}

.entry-meta {
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: var(--space-600);
}

.entry-content p:not(:last-child) {
	margin-bottom: var(--space-600);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-top: var(--space-1000);
	margin-bottom: var(--space-600);
}

.entry-content h2:first-child,
.entry-content h3:first-child,
.entry-content h4:first-child {
	margin-top: 0;
}

.entry-footer {
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.7);
	padding-top: var(--space-800);
}

.post-thumbnail {
	margin-bottom: var(--space-800);
}

.post-thumbnail img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-base);
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Skip to content link */
.skip-link {
	position: absolute;
	top: -9999px;
	left: 0;
	background: var(--color-accent);
	color: var(--color-text);
	padding: var(--space-400);
	text-decoration: none;
	z-index: 100000;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
}

.skip-link:focus {
	top: 0;
	clip: auto;
	clip-path: none;
}

/* Screen reader only */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* ========================================
   BACKGROUND CAROUSEL
   ======================================== */

/**
 * Background Carousel Component
 * 
 * Background carousel (homepage only).
 * Uses CSS animations for smooth, continuous transitions.
 */

.background-carousel {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	/* Use viewport-relative height so background always fills the visible area,
	   even as mobile browser chrome collapses/expands.
	   Order matters: dvh wins on modern browsers (dynamic — grows when chrome hides). */
	height: 100vh;
	height: 100svh;
	height: 100dvh;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	background-color: var(--color-bg);
}

.background-carousel__container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.background-carousel__item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	opacity: 0;
	/* Animation properties — animation-name set via inline style */
	animation-duration: var(--total-duration, 7000ms);
	animation-delay: var(--carousel-offset, 0ms);
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-fill-mode: both;
	/* z-index controlled by keyframes (0 = behind, 10 = on top during fade-in) */
	z-index: 0;
	/* Performance: hint browser to optimize opacity compositing */
	will-change: opacity;
}

/* Single item: no animation needed, just show it */
.background-carousel[data-total-items="1"] .background-carousel__item {
	animation: none !important;
	opacity: 1 !important;
}

/* Respect reduced motion preference */
/* Background carousel is decorative, so it should still animate */
/* Override the global prefers-reduced-motion rule for carousel items */
@media (prefers-reduced-motion: reduce) {
	.background-carousel__item {
		animation-duration: var(--total-duration, 7000ms) !important;
		animation-iteration-count: infinite !important;
	}
}

/* Page transition overlay (kept for potential future use, inactive without JS) */
.background-carousel__overlay {
	display: none;
}

/* Ensure carousel doesn't interfere with content */
#page {
	position: relative;
	z-index: 1;
	/* Push footer to bottom of viewport when content is short */
	display: flex;
	flex-direction: column;
	/* Use modern viewport units so mobile browser chrome doesn't push the footer below the fold */
	min-height: 100vh;
	min-height: 100svh;
	min-height: 100dvh;
}

/*
 * iOS Safari + viewport-fit=cover: the physical screen is taller than the
 * layout viewport that 100dvh fills, and the safe-area overscan (notch / home
 * indicator) is paintable only by the root element's background — not by
 * `position: fixed` elements (Safari clips them to the layout viewport) nor, in
 * practice, by other descendant boxes. The homepage carousel's media therefore
 * can't be forced into the safe areas on iOS; instead we fill those bands with
 * the brand red via the `html` background. That red is the same colour as the
 * carousel's own background, so the seam is invisible. Scoped to iOS WebKit;
 * desktop and Android are unaffected.
 */
@supports (-webkit-touch-callout: none) {
	html {
		background-color: var(--color-bg);
		min-height: -webkit-fill-available;
	}

	body {
		min-height: -webkit-fill-available;
	}

	#page {
		min-height: calc(100dvh + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));
	}

	/*
	 * Setting a background on `html` (above) stops Safari propagating `body`'s
	 * background to the root canvas, so `body`'s own red fill would otherwise
	 * paint over the negative-z-index carousel and hide it. Make the homepage
	 * `body` transparent so the carousel shows; the red `html` background fills
	 * the safe-area bands behind it.
	 */
	body.home,
	body.front-page {
		background-color: transparent;
	}
}

/* Homepage: make page content background transparent so carousel shows through */
body.home #page,
body.front-page #page {
	background-color: transparent;
}

/* Homepage: keep text white */
body.home,
body.front-page {
	--color-text: var(--pure-white);
}

/* Homepage: keep nav hover surface legible on dark imagery */
body.home .primary-menu a:hover,
body.home .primary-menu a:focus-visible,
body.front-page .primary-menu a:hover,
body.front-page .primary-menu a:focus-visible {
	background-color: var(--near-black);
	box-shadow: 0 0 0 var(--space-200) var(--near-black);
}

/* Frontpage: one visible viewport, but allow natural scroll on real devices */
body.home {
	min-height: 100vh;
	min-height: 100svh;
	min-height: 100dvh;
	overflow-x: hidden;
	overflow-y: auto;
}

.home #page {
	min-height: 100%;
	overflow: visible;
}


/* Hide carousel items that fail to load */
.background-carousel__item[data-fallback="true"],
.background-carousel__item[data-error="true"] {
	display: none;
}

/* Reduce video quality on slower connections */
@media (prefers-reduced-data: reduce) {
	.background-carousel__video {
		display: none;
	}
	
	.background-carousel__image {
		display: block !important;
		opacity: 1 !important;
	}
}

/* ========================================
   HOMEPAGE INTRO COMPONENT
   ======================================== */

/* Intro text: fixed at bottom of viewport across pages */
.homepage-intro {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10;
	pointer-events: none; /* Allow clicks to pass through */
}

.homepage-intro__container {
	width: 100%;
	max-width: var(--content-max-width);
	margin-left: auto;
	margin-right: auto;
	padding: var(--space-400) var(--space-400) var(--space-1000);
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--space-400);
}

@supports (padding: max(0px)) {
	/* Keep intro text clear of home indicator / rounded corners on edge-to-edge devices */
	.homepage-intro__container {
		padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--space-1000));
	}
}

.homepage-intro__text {
	margin: 0;
	text-align: center;
	pointer-events: auto; /* Re-enable pointer events for text */
	/* Default: full-width span on small/tablet screens */
	grid-column: 1 / -1;
}

/* Ensure intro doesn't overlap with footer on pages with content */
@media (min-width: 768px) {
	.homepage-intro__container {
		padding: var(--space-600) var(--space-600) var(--space-800);
		gap: var(--space-600);
	}
	.homepage-intro__text {
		/* Span the middle 7 columns (columns 3-9) of a 12-column grid */
		grid-column: 3 / span 8;
	}
}

/* ========================================
   CENTERED LAYOUT (viewport-centered content)
   ======================================== */

.site-main--centered {
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-x: hidden;
	overflow-y: auto; /* Scroll when text is too long (e.g. narrow breakpoints) */
}

.centered {
	width: 100%;
	margin: 0 auto;
}

.centered__inner {
	width: 100%;
}

.centered__content {
	text-align: center;
}

/* ========================================
   ABOUT PAGE
   ======================================== */

/* Paragraph rhythm inside WYSIWYG blocks (global p margins are reset) */
body.about-page .about-heading__text > * + *,
body.about-page .about-body__text > * + * {
	margin-top: var(--space-600);
}

/* ========================================
   LINK LIST COMPONENT (About + Posts)
   ======================================== */

.link-list {
	text-align: left;
}

.link-list__title {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-left: var(--space-900);
	padding-left: calc(var(--scale-800) + var(--scale-100));
	line-height: var(--line-height-base);
}

/* Override global .entry-content h2/h3/h4 margins for this component */
.entry-content .link-list__title {
	margin: 0 0 var(--space-600);
}

.entry-content .link-list .link-list__title {
	margin: 0 0 var(--space-400);
}
/* Permanent bracket + dot: [ • ] */
.link-list__title::before,
.link-list__title::after {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-family: inherit;
	font-size: inherit;
	color: currentColor;
	line-height: var(--line-height-base);
}

.link-list__title::before {
	content: "[";
	left: 0;
}

.link-list__title::after {
	content: "]";
	left: var(--scale-700);
}

.link-list__title {
	background-image: radial-gradient(circle at center, currentColor 0, currentColor calc(var(--scale-300) / 2), transparent calc(var(--scale-300) / 2));
	background-repeat: no-repeat;
	/* Center dot between `[` (0) and `]` (var(--scale-700)).
	   background-position uses the image’s top-left, so subtract half dot size. */
	background-position: calc((var(--scale-700) * 0.5) + (var(--scale-300) * 0.2)) 54%;
	background-size: var(--scale-300) var(--scale-300);
}

/* At 480px the title font drops to --font-body (--scale-600), so recalculate bracket + dot positions */
@media (max-width: 480px) {
	.link-list__title {
		background-position: calc((var(--scale-600) * 0.5) + (var(--scale-300) * 0.5)) 54%;
		padding-left: var(--space-900);
	}
}

.link-list__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.link-list__link {
	display: inline;
}

/* Commas outside the clickable link */
.link-list__link:not(:last-child)::after {
	content: ",";
	margin-right: var(--space-300);
}

.link-list__links a {
	color: var(--color-text);
	text-decoration: underline;
	text-underline-offset: 0.1em;
	transition: color var(--duration-fast) var(--ease-standard);
}

.link-list__links a:hover,
.link-list__links a:focus-visible {
	color: var(--color-accent);
}

/* Group wrapper: stacks up to 3 link-list sections vertically */
.link-list-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-800);
}

/* Stacked mode: preserve the WYSIWYG structure (lines of text + link) but tighten spacing */
.link-list__stacked {
	margin-top: 0;
}

.link-list__stacked > * {
	margin: 0;
}

.link-list__stacked > * + * {
	margin-top: var(--space-200);
}

.link-list__stacked a {
	color: var(--color-text);
	text-decoration: underline;
	text-underline-offset: 0.1em;
	transition: color var(--duration-fast) var(--ease-standard);
}

.link-list__stacked a:hover,
.link-list__stacked a:focus-visible {
	color: var(--color-accent);
}

@media (max-width: 767px) {
	/*
	 * Mobile 4-item menu: keep the first two items in the sticky top nav and pin
	 * the last two to the bottom corners of the viewport.
	 *
	 * `position: fixed` must NOT live inside `position: sticky` — Chrome/WebKit
	 * tie the fixed descendants to the sticky ancestor's scroll tree, which both
	 * stops the top row from sticking and floats the bottom row above the
	 * viewport edge when the mobile browser chrome collapses. So an inline script
	 * in header.php (running before first paint) moves items 3–4 into a sibling
	 * `<nav class="primary-nav-bottom">` outside the sticky `.main-navigation`;
	 * the top row then has exactly two items and uses the shared 2-item grid
	 * rules above.
	 *
	 * Bottom corner links use the same shell padding model as `.main-navigation`.
	 * Pre-JS/no-JS fallback keeps the old fixed-item rules on items 3–4 while
	 * they still live in the single top list.
	 */
	.primary-nav-bottom {
		position: fixed;
		bottom: env(safe-area-inset-bottom, 0px);
		left: 0;
		right: 0;
		z-index: 101;
		padding: var(--space-400);
		padding-left: calc(var(--space-400) + env(safe-area-inset-left, 0px));
		padding-right: calc(var(--space-400) + env(safe-area-inset-right, 0px));
	}

	.primary-menu--bottom {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.primary-menu:has(> li:first-child:nth-last-child(4)) > li:nth-child(3),
	.primary-menu:has(> li:first-child:nth-last-child(4)) > li:nth-child(4) {
		position: fixed;
		bottom: env(safe-area-inset-bottom, 0px);
		height: var(--primary-nav-row-height, var(--primary-nav-row-height-fallback));
		z-index: 101;
		align-items: stretch;
	}

	.primary-menu:has(> li:first-child:nth-last-child(4)) > li:nth-child(3) a,
	.primary-menu:has(> li:first-child:nth-last-child(4)) > li:nth-child(4) a {
		height: 100%;
	}

	.primary-menu:has(> li:first-child:nth-last-child(4)) > li:nth-child(3) {
		left: calc(var(--space-400) + env(safe-area-inset-left, 0px));
	}

	.primary-menu:has(> li:first-child:nth-last-child(4)) > li:nth-child(4) {
		right: calc(var(--space-400) + env(safe-area-inset-right, 0px));
	}

	.primary-menu:has(> li:first-child:nth-last-child(4)) {
		grid-template-columns: repeat(3, 1fr);
	}

	.primary-menu:has(> li:first-child:nth-last-child(4)) > li:nth-child(1) {
		grid-column: 1;
		justify-self: start;
	}

	.primary-menu:has(> li:first-child:nth-last-child(4)) > li:nth-child(2) {
		grid-column: 3;
		justify-self: end;
	}

	/* ---- Link list (mobile) ---- */
	.link-list__links {
		row-gap: var(--space-200);
	}

	.link-list__stacked {
		display: flex;
		flex-direction: column;
		row-gap: var(--space-100);
	}

	.link-list__stacked > * + * {
		margin-top: 0;
	}
}

/* ========================================
   ARTISTS (artist list)
   ======================================== */

body.artists-page .site-main {
	padding: var(--space-800) var(--space-600);
}

/* contain: layout intentionally omitted on mobile — .artist__preview is display: none
   on mobile so there is no containing-block interference with the sticky nav. */

@media (min-width: 768px) {
	body.artists-page .site-main {
		padding: var(--space-1000) var(--space-600);
	}
}

.artists {
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-800);
}

/* Each row shrinks to the artist name's width plus a small horizontal halo,
   so the hover trigger zone tracks the text rather than spanning the full
   container width. Prevents incidental triggers when the cursor sweeps the
   dead margins on either side of the name. */
.artist__item {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	gap: var(--space-400);
	max-width: 100%;
	padding-inline: var(--space-500);
}

a.artist__name {
	color: var(--color-text);
	text-decoration: none;
}

.artist__name {
	position: relative;
	z-index: 1;
	-webkit-hyphens: manual !important;
	hyphens: manual !important;
	overflow-wrap: break-word;
}

/* Initial state: zero size so the wrap never extends the document or adds
   scroll height. The img inside is unsized — it inherits dimensions from
   the wrap once the wrap opens on hover. */
.artist__preview-wrap {
	pointer-events: none;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	width: 0;
	height: 0;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: opacity var(--duration-fast) var(--ease-standard);
	transform: translate3d(0, 0, 0);
	will-change: transform;
	backface-visibility: hidden;
}

.artist__preview-wrap .duotone-hover__base {
	position: relative;
}

.artist__preview {
	display: block;
	width: auto;
	height: auto;
	max-width: min(90vw, calc(6 * var(--scale-1000)));
	max-height: min(90vh, calc(6 * var(--scale-1000)));
	object-fit: contain;
}

.artist__preview-wrap .duotone-hover__layer .duotone-hover__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Preview visible state (hover on desktop) */
.artist__item:hover .artist__preview-wrap {
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
}

/* Only fade in after JS has set position to avoid flicker at (0,0).
   Transition timing mirrors the artist-dimming: delayed fade-in ensures
   the outgoing preview finishes its exit (100ms) before the incoming one
   starts, preventing cross-fade flicker between adjacent artists. */
.artist__item:hover .artist__preview-wrap.artist__preview--positioned {
	opacity: 1;
	transition: opacity var(--duration-base) var(--ease-standard) var(--duration-fast);
}

/* Focus the active artist by dimming the others. Asymmetric transition timing:
   dim-out is delayed and gentle so a quick passthrough never triggers it, while
   un-dim snaps back instantly when the hover leaves. The :has() guard keeps
   the list at full opacity at rest (no row appears dimmed unless one is
   actively hovered/focused). Restricted to fine-pointer hover devices to avoid
   sticky-hover oddness on touch. */
@media (hover: hover) and (pointer: fine) {
	.artist__item {
		transition: opacity var(--duration-fast) var(--ease-standard);
	}

	.artists:has(.artist__item:hover) .artist__item:not(:hover),
	.artists:has(.artist__item:focus-within) .artist__item:not(:focus-within) {
		opacity: 0.4;
		transition: opacity var(--duration-base) var(--ease-standard) var(--duration-fast);
	}
}

/* Reduced-motion carve-out: JS skips the cursor-tracking transform when this
   media query matches, so we override the preview's position to sit centered
   on the row instead of following the pointer, and reveal it via :hover alone
   (the --positioned class is never set in reduced-motion mode). All
   transitions are zeroed so the hover/dim still communicates focus but
   without any animated feel. */
@media (prefers-reduced-motion: reduce) {
	.artist__preview-wrap {
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		transition: none;
	}

	.artist__item:hover .artist__preview-wrap {
		opacity: 1;
	}

	.artist__item:hover .artist__preview-wrap.artist__preview--positioned {
		transition: none;
	}

	.artist__item {
		transition: none;
	}

	.artists:has(.artist__item:hover) .artist__item:not(:hover),
	.artists:has(.artist__item:focus-within) .artist__item:not(:focus-within) {
		transition: none;
	}
}

@media (min-width: 768px) {
	.artists {
		gap: var(--space-100);
	}

	.artist__item {
		z-index: 0;
	}

	/* Lift the hovered item above siblings so the preview image is not clipped. */
	.artist__item:hover {
		z-index: 1;
	}
}

@media (max-width: 767px) {
	.artists {
		gap: var(--space-400);
	}

	/* Artist preview hidden on mobile */
	.artist__preview-wrap {
		display: none;
	}

	.artist__item {
		gap: var(--space-100);
	}

	.artist__name {
		font-size: var(--font-body);
	}
}

/* Touch tap focus. The image preview stays disabled on touch (display:none
   above); instead, tapping an artist dims the others, mirroring the desktop
   hover focus. JS adds .artist__item--tap-active briefly before navigating.
   Scoped to (hover: none) to match the JS gate so pointer devices are never
   affected. No delay on the dim (unlike desktop) since a tap has no
   quick-passthrough to guard against. */
@media (hover: none) {
	.artist__item {
		transition: opacity var(--duration-base) var(--ease-standard);
	}

	.artists:has(.artist__item--tap-active) .artist__item:not(.artist__item--tap-active) {
		opacity: 0.4;
	}
}

/* Card tap feedback on the pressed card only (no sibling dim — artists only).
   Gated to coarse pointers — the exact complement of the (pointer: fine) hover
   gate — so touch devices that still report (hover: hover) (e.g. iPadOS Safari)
   get press feedback here while their sticky-hover reveal stays disabled. */
@media (pointer: coarse) {
	:is(
		a.release__card,
		a.post-releases__card,
		a.post-related__card
	):active .duotone-hover__layer {
		transition: none;
		opacity: 1;
	}

	a.release__card:active :is(.release__number, .release__artist, .release__name),
	a.post-releases__card:active :is(.post-releases__heading, .post-releases__link, .post-releases__text),
	a.post-related__card:active .post-related__heading {
		transition: none;
		color: var(--crimson-red);
		background-color: var(--near-black);
		box-shadow: 0 0 0 var(--space-200) var(--near-black);
	}
}

/* ========================================
   DUOTONE HOVER (shared)
   ======================================== */

.duotone-hover {
	position: relative;
	isolation: isolate;
}

.duotone-hover__layer {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--duration-fast) var(--ease-standard);
	pointer-events: none;
}

.duotone-hover__layer .duotone-hover__image {
	display: block;
	filter: grayscale(1) brightness(1.4);
}

.duotone-hover__tint {
	position: absolute;
	inset: 0;
	background-color: var(--crimson-red);
	mix-blend-mode: multiply;
	pointer-events: none;
}

/* Firm up the touch press state: cursor:pointer makes iOS reliably treat these
   as tappable (and consistently fire :active), and removing the default grey
   tap highlight stops it masking the duotone + pill feedback on tap. */
:is(
	a.release__card,
	a.post-releases__card,
	a.post-related__card
) {
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* Focus (keyboard) reveals everywhere. Hover is gated to fine-pointer devices
   below — (pointer: fine) excludes finger touch even on devices that report
   (hover: hover) (e.g. iPadOS Safari), where a :hover reveal would otherwise be
   "absorbed" by the first tap and force a second tap to follow the link (iOS
   double-tap). Touch gets the :active feedback in the (pointer: coarse) block
   above instead. */
:is(
	a.release__card,
	a.post-releases__card,
	a.post-related__card
):focus-visible .duotone-hover__layer,
.artist__item:focus-within .duotone-hover__layer {
	opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
	:is(
		a.release__card,
		a.post-releases__card,
		a.post-related__card
	):hover .duotone-hover__layer,
	.artist__item:hover .duotone-hover__layer {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.duotone-hover__layer {
		transition: none;
	}
}

/* Preview wrap is absolutely positioned — override duotone-hover's relative. */
.artist__preview-wrap.duotone-hover {
	position: absolute;
}

/* ========================================
   RELEASES (release grid)
   ======================================== */

.releases {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-800) var(--space-400);
}

@media (min-width: 768px) {
	.releases {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-1000) var(--space-600);
	}
}

/* Skip rendering/layout/paint for off-screen cards in the ~55-item grid.
   `auto` in contain-intrinsic-size remembers each card's real size after its
   first render; the fallback height is only used before that, so it just needs
   to roughly match a rendered card (square artwork + meta) to limit scroll jump. */
.release__item {
	display: block;
	content-visibility: auto;
	/* Block axis only — setting both axes would force an intrinsic width on the
	   grid tracks (minmax(auto, 1fr)) and overflow the viewport. Width is left
	   to the grid; `auto` remembers each card's real height after first render. */
	contain-intrinsic-block-size: auto 280px;
	/* content-visibility applies paint containment, which clips the hover pill
	   box-shadow (spread: var(--space-200)) at the card's box edge. Reserve that
	   spread at the bottom so the halo isn't clipped on the tallest card in a row
	   (e.g. when .release__name wraps to two lines and gets no stretch slack). */
	padding-bottom: var(--space-200);
}

@media (min-width: 768px) {
	.release__item {
		contain-intrinsic-block-size: auto 440px;
	}
}

/* Soften the content-visibility pop-in: JS adds .is-revealing the moment a card
   flips from skipped to rendered (contentvisibilityautostatechange), fading it
   in instead of appearing instantly. Opacity-only so it stays compositor-cheap
   and doesn't affect layout/size containment. Same duration/easing as the
   site's other entrance fades. */
@media (prefers-reduced-motion: no-preference) {
	.release__item.is-revealing {
		animation: release-reveal var(--duration-base) var(--ease-standard);
	}
}

@keyframes release-reveal {
	from {
		opacity: 0;
	}
}

.release__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-500);
	color: var(--color-text);
	text-decoration: none;
	transition: none;
}

a.release__card:focus-visible {
	color: var(--color-text);
}

@media (hover: hover) and (pointer: fine) {
	a.release__card:hover {
		color: var(--color-text);
	}
}

a.release__card:focus-visible {
	outline: 2px solid var(--color-text);
	outline-offset: var(--space-300);
}

a.release__card:focus-visible :is(.release__number, .release__artist, .release__name) {
	color: var(--crimson-red);
	background-color: var(--near-black);
	box-shadow: 0 0 0 var(--space-200) var(--near-black);
}

@media (hover: hover) and (pointer: fine) {
	a.release__card:hover :is(.release__number, .release__artist, .release__name) {
		color: var(--crimson-red);
		background-color: var(--near-black);
		box-shadow: 0 0 0 var(--space-200) var(--near-black);
	}
}

.release__artwork-wrap {
	aspect-ratio: 1 / 1;
	width: 100%;
	overflow: hidden;
	background-color: transparent;
}

.release__artwork-wrap .duotone-hover__base,
.release__artwork-wrap .duotone-hover__layer {
	position: absolute;
	inset: 0;
}

.release__artwork,
.release__artwork-wrap .duotone-hover__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.release__meta {
	display: flex;
	flex-direction: column;
}

a.release__card .release__number,
a.release__card .release__artist,
a.release__card .release__name {
	width: fit-content;
	padding-inline: var(--space-200);
}

.release__artist,
.release__name {
	margin-top: var(--space-200);
}

.release__number {
	display: block;
}

.release__number,
.release__artist,
.release__name {
	color: var(--color-text);
	background-color: transparent;
	box-shadow: 0 0 0 0 transparent;
	transition: color var(--duration-fast) var(--ease-standard),
		background-color var(--duration-fast) var(--ease-standard),
		box-shadow var(--duration-fast) var(--ease-standard);
}

.release__artist,
.release__name {
	display: block;
	overflow-wrap: break-word;
	font-size: var(--font-body);
}

@media (max-width: 767px) {
	.release__card {
		gap: var(--space-400);
	}

	.release__artist,
	.release__name {
		margin-top: var(--space-100);
	}
}

@media (max-width: 480px) {
	.release__number {
		font-size: var(--font-label);
	}

	.release__artist,
	.release__name {
		font-size: var(--font-caption);
	}
}

/* ========================================
   SINGLE POST LAYOUT (ACF-driven)
   ========================================
   Sections, in order: Hero → Main content → Releases → Link list → Related.
   Vertical rhythm between sections is handled by `.sections.flow` (see
   "VERTICAL RHYTHM UTILITIES"). Section internals use semantic `flow`
   spacing on a per-section basis.
   */

/* ----- Hero (quote + featured image) ----- */

.post-hero {
	display: flex;
	flex-direction: column;
	gap: var(--space-800);
	align-items: stretch;
}

@media (min-width: 768px) {
	.post-hero {
		flex-direction: row;
		align-items: center;
	}

	/* `.post-hero--reverse` swaps the visual order to image-left / quote-right. */
	.post-hero--reverse {
		flex-direction: row-reverse;
	}
}

.post-hero__quote-wrap,
.post-hero__image-wrap {
	flex: 1 1 0;
	min-width: 0;
}

.post-hero__quote::before {
	content: open-quote;
	display: block;
	text-align: left;
	font-size: var(--font-heading-md);
	line-height: 0.3;
	margin-top: var(--space-500);
}

.post-hero__quote-close {
	display: block;
	text-align: left;
	font-size: var(--font-heading-md);
	line-height: 0.3;
}

.post-hero__cite-wrap {
	font-size: var(--font-caption);
	margin-top: var(--space-400);
}

.post-hero__cite {
	font-style: normal;
}

.post-hero__image-wrap {
	margin: 0;
}

/* On mobile (column layout), always show the image above the quote, full bleed. */
@media (max-width: 767px) {
	.post-hero__image-wrap {
		order: -1;
		margin-inline: calc(-1 * var(--space-400));
	}
}

.post-hero__image {
	width: 100%;
	height: auto;
	display: block;
}

/* Full-width only (no quote): enforce 3:2 landscape crop from centre — desktop only. */
@media (min-width: 768px) {
	.post-hero--single .post-hero__image-wrap {
		aspect-ratio: 3 / 2;
		overflow: hidden;
	}

	.post-hero--single .post-hero__image {
		height: 100%;
		object-fit: cover;
		object-position: center;
	}
}

/* ----- Main content (post title + WYSIWYG) ----- */

.post-main-content {
	display: flex;
	flex-direction: column;
}

.post-main-content__title {
	align-self: flex-start;
}

/* ----- Releases (8 fixed slots; only populated render) ----- */

.post-releases {
	display: flex;
	flex-direction: column;
}

.post-releases__title {
	align-self: flex-start;
}

.post-releases__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-800) var(--space-600);
}

.post-releases__item {
	display: block;
}

@media (max-width: 767px) {
	.post-releases__list {
		display: flex;
		flex-direction: row;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: var(--space-400);
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: var(--space-400);
		padding-bottom: var(--space-300);
		margin-inline: calc(-1 * var(--space-400));
	}

	.post-releases__list::-webkit-scrollbar {
		display: none;
	}

	.post-releases__item {
		flex: 0 0 calc(100% / 1.5);
		scroll-snap-align: start;
	}

	.post-releases__item:first-child {
		margin-left: var(--space-400);
	}

	.post-releases__item:last-child {
		margin-right: var(--space-400);
	}

	/* Single release: full width, no scroll behaviour */
	.post-releases__list:has(.post-releases__item:only-child) {
		overflow-x: visible;
		scroll-snap-type: none;
		scroll-padding-left: 0;
		padding-bottom: 0;
		margin-inline: 0;
	}

	.post-releases__item:only-child {
		flex: 0 0 100%;
		scroll-snap-align: none;
		margin-inline: 0;
	}
}

.post-releases__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-600);
	color: var(--color-text);
	text-decoration: none;
	transition: none;
}

a.post-releases__card:focus-visible {
	outline: 2px solid var(--color-text);
	outline-offset: var(--space-300);
}

/* Card is one <a>; global a:hover uses --color-accent so it would inherit into
   .post-releases__text. Keep body copy on --color-text; pills override their own color. */
a.post-releases__card:focus-visible {
	color: var(--color-text);
}

@media (hover: hover) and (pointer: fine) {
	a.post-releases__card:hover {
		color: var(--color-text);
	}
}

a.post-releases__card:focus-visible :is(.post-releases__heading, .post-releases__link, .post-releases__text) {
	color: var(--crimson-red);
	background-color: var(--near-black);
	box-shadow: 0 0 0 var(--space-200) var(--near-black);
}

a.post-releases__card:focus-visible .post-releases__link {
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	a.post-releases__card:hover :is(.post-releases__heading, .post-releases__link, .post-releases__text) {
		color: var(--crimson-red);
		background-color: var(--near-black);
		box-shadow: 0 0 0 var(--space-200) var(--near-black);
	}

	a.post-releases__card:hover .post-releases__link {
		text-decoration: none;
	}
}

.post-releases__image-wrap {
	margin: 0;
	overflow: hidden;
}

.post-releases__image-wrap .duotone-hover__layer {
	position: absolute;
	inset: 0;
}

.post-releases__image,
.post-releases__image-wrap .duotone-hover__image {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.post-releases__image-wrap .duotone-hover__layer .duotone-hover__image {
	width: 100%;
	height: 100%;
}

.post-releases__content {
	display: flex;
	flex-direction: column;
}

a.post-releases__card .post-releases__heading,
a.post-releases__card .post-releases__link,
a.post-releases__card .post-releases__text {
	align-self: flex-start;
	width: fit-content;
	max-width: 100%;
	padding-inline: var(--space-200);
	box-sizing: border-box;
}

a.post-releases__card .post-releases__heading {
	margin-bottom: var(--space-500);
}

.entry-content .post-releases__text p:not(:last-child) {
	margin-bottom: var(--space-200);
}

.post-releases__heading {
	margin: 0;
	color: var(--color-text);
	background-color: transparent;
	box-shadow: 0 0 0 0 transparent;
	transition: color var(--duration-fast) var(--ease-standard),
		background-color var(--duration-fast) var(--ease-standard),
		box-shadow var(--duration-fast) var(--ease-standard);
}

.post-releases__name {
	text-transform: none;
}

.post-releases__number {
	white-space: nowrap;
	margin-left: var(--space-200);
}

.post-releases__text {
	font-size: var(--font-caption);
	color: var(--color-text);
	background-color: transparent;
	box-shadow: 0 0 0 0 transparent;
	transition: color var(--duration-fast) var(--ease-standard),
		background-color var(--duration-fast) var(--ease-standard),
		box-shadow var(--duration-fast) var(--ease-standard);
}

.post-releases__link {
	margin-top: var(--space-500);
	color: var(--color-text);
	background-color: transparent;
	box-shadow: 0 0 0 0 transparent;
	/* text-transform: none;
	text-decoration: underline;
	text-underline-offset: 0.2em; */
	transition: color var(--duration-fast) var(--ease-standard),
		background-color var(--duration-fast) var(--ease-standard),
		box-shadow var(--duration-fast) var(--ease-standard),
		text-decoration-color var(--duration-fast) var(--ease-standard);
}

@media (max-width: 767px) {
	.post-releases__number, .post-releases__text {
		font-size: var(--font-label);
	}
}

/* ----- Related posts (4 cards, grid) ----- */

.post-related {
	display: flex;
	flex-direction: column;
}

.post-related__title {
	align-self: flex-start;
}

.post-related__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-600);
}

.post-related__item {
	display: block;
}

.post-related__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-600);
	color: var(--color-text);
	text-decoration: none;
	transition: none;
}

a.post-related__card:focus-visible {
	color: var(--color-text);
}

@media (hover: hover) and (pointer: fine) {
	a.post-related__card:hover {
		color: var(--color-text);
	}
}

a.post-related__card:focus-visible {
	outline: 2px solid var(--color-text);
	outline-offset: var(--space-300);
}

a.post-related__card:focus-visible .post-related__heading {
	color: var(--crimson-red);
	background-color: var(--near-black);
	box-shadow: 0 0 0 var(--space-200) var(--near-black);
}

@media (hover: hover) and (pointer: fine) {
	a.post-related__card:hover .post-related__heading {
		color: var(--crimson-red);
		background-color: var(--near-black);
		box-shadow: 0 0 0 var(--space-200) var(--near-black);
	}
}

.post-related__card .post-related__heading {
	width: fit-content;
	padding-inline: var(--space-200);
}

.post-related__image-wrap {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.post-related__image-wrap:not(.duotone-hover) {
	position: relative;
}

.post-related__image-wrap .duotone-hover__base,
.post-related__image-wrap .duotone-hover__layer {
	position: absolute;
	inset: 0;
}

.post-related__image,
.post-related__image-wrap .duotone-hover__image {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.post-related__image--placeholder {
	background-color: var(--color-text);
	opacity: 0.08;
}

.post-related__heading,
.entry-content .post-related__heading {
	font-size: var(--font-body);
	margin: 0;
	color: var(--color-text);
	background-color: transparent;
	box-shadow: 0 0 0 0 transparent;
	transition: color var(--duration-fast) var(--ease-standard),
		background-color var(--duration-fast) var(--ease-standard),
		box-shadow var(--duration-fast) var(--ease-standard);
}

@media (max-width: 767px) {
	.post-related__list {
		display: flex;
		flex-direction: row;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: var(--space-400);
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: var(--space-400);
		padding-bottom: var(--space-300);
		margin-inline: calc(-1 * var(--space-400));
	}

	.post-related__list::-webkit-scrollbar {
		display: none;
	}

	.post-related__item {
		flex: 0 0 calc(100% / 1.5);
		scroll-snap-align: start;
	}

	.post-related__item:first-child {
		margin-left: var(--space-400);
	}

	.post-related__item:last-child {
		margin-right: var(--space-400);
	}

	/* Single post: full width, no scroll behaviour */
	.post-related__list:has(.post-related__item:only-child) {
		overflow-x: visible;
		scroll-snap-type: none;
		scroll-padding-left: 0;
		padding-bottom: 0;
		margin-inline: 0;
	}

	.post-related__item:only-child {
		flex: 0 0 100%;
		scroll-snap-align: none;
		margin-inline: 0;
	}
}

/* ========================================
   MOBILE DECORATIVE SVG
   ======================================== */

/* Desktop: hide the mobile-only decorative SVG */
@media (min-width: 768px) {
	.home .homepage-cursor-mobile {
		display: none !important;
	}
}

/* Mobile / tablet: decorative SVG fixed near bottom-right (scale-1100 width, aspect 193:281) */
@media (max-width: 767px) {
	.home .homepage-cursor-mobile {
		position: fixed;
		right: var(--space-800);
		bottom: var(--space-1300);
		transform: none;
		width: var(--scale-1100);
		height: calc(var(--scale-1100) * 281 / 193);
		pointer-events: none;
	}
	.home .homepage-cursor-mobile svg {
		width: 100%;
		height: 100%;
		display: block;
		object-fit: contain;
	}
}

/* ========================================
   DESKTOP CUSTOM CURSOR (JS-DRIVEN)
   ======================================== */
/* Only when JS has added .has-custom-cursor and we're on desktop */
@media (min-width: 768px) {
	body.home.has-custom-cursor,
	body.home.has-custom-cursor * {
		cursor: none !important;
	}

	/* scale-1200 width, aspect 193:281 from SVG viewBox */
	.custom-cursor {
		position: fixed;
		top: 0;
		left: 0;
		width: var(--scale-1200);
		height: calc(var(--scale-1200) * 281 / 193);
		pointer-events: none;
		z-index: 9999;
		will-change: transform;
		contain: layout style;
		isolation: isolate;
		opacity: 0;
		transition: opacity 0.15s ease-out;
	}
	.custom-cursor__inner {
		width: 100%;
		height: 100%;
		transform-origin: center center;
		transition: transform var(--duration-fast) var(--ease-standard);
	}
	.custom-cursor.is-hover {
		mix-blend-mode: difference;
	}
	.custom-cursor.is-clicking .custom-cursor__inner {
		transform: scale(0.92);
	}
	.custom-cursor.is-visible {
		opacity: 1;
	}
	/* Hide when pointer leaves the document (e.g. to browser chrome or second screen) */
	.custom-cursor.is-outside {
		opacity: 0;
		pointer-events: none;
	}
	.custom-cursor svg {
		width: 100%;
		height: 100%;
		display: block;
		vertical-align: top;
	}
}
/* Respect reduced motion: never hide native cursor for these users (no .has-custom-cursor added by JS) */
@media (prefers-reduced-motion: reduce) {
	body.home.has-custom-cursor,
	body.home.has-custom-cursor * {
		cursor: auto !important;
	}
}