/**
 * 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-accent);
	color: var(--color-bg);
}

::-moz-selection {
	background-color: var(--color-accent);
	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(--near-black);
	--color-text: var(--pure-white);
	--color-accent: var(--lime);

	/* ========================================
	   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-lg);      /* Large body text / lead */
	--font-body: var(--text-base);      /* Default body text */
	--font-caption: var(--text-base);     /* Captions / meta */

	/* ========================================
	   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-1100); /* 6.005871rem / 96.09px */
	--space-stack: var(--space-600);    /* 1.062500rem / 17.00px */
	--space-inline: var(--space-400);   /* 0.531410rem / 8.50px */
}

/* ========================================
   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);
	}

	h4 {
		font-size: var(--font-body);
	}

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

@media (max-width: 375px) {
	h1 {
		font-size: var(--font-body-lg);
	}

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

/* ----------------------------------------
   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);
	}

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

	.text-body-lg, .text-body {
		line-height: var(--line-height-relaxed);
	}
}

@media (max-width: 375px) {
	.text-heading-lg {
		font-size: var(--font-body);
	}
}

/* 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-accent);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-standard);
}

a:hover,
a:focus {
	text-decoration: underline;
}

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
 */
.stack > * + * {
	margin-top: var(--space-stack);
}

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

.container {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-400);
	padding-right: var(--space-400);
}

.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: 1;
	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;
	}
}

.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;
}

/* 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-600) 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(--near-black);
	background-color: var(--color-accent);
	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(--color-accent);
}

/* 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: 1;
}

/* 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: 1;
}

/* 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-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-700);
		width: 100%;
	}

	/* 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;
	}
}

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

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

/* 2 columns: left and right edge alignment */
.site-footer__inner--2cols {
	grid-template-columns: 1fr 1fr;
}

.site-footer__inner--2cols .site-footer__column:first-child {
	grid-column: 1;
	justify-self: start;
	text-align: left;
}

.site-footer__inner--2cols .site-footer__column:last-child {
	grid-column: 2;
	justify-self: end;
	text-align: right;
}

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

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

/* Footer columns: map to nav-style positions (4-col layout) */
.site-footer__inner--4cols .site-footer__column--1,
.site-footer__column--1 {
	grid-column: 1;
	justify-self: start;
	text-align: left;
}

.site-footer__inner--4cols .site-footer__column--2,
.site-footer__column--2 {
	grid-column: 2;
	justify-self: center;
	text-align: left;
}

.site-footer__inner--4cols .site-footer__column--3,
.site-footer__column--3 {
	grid-column: 3;
	justify-self: center;
	text-align: left;
}

.site-footer__inner--4cols .site-footer__column--4,
.site-footer__column--4 {
	grid-column: 4;
	justify-self: end;
	text-align: right;
}

@media (max-width: 767px) {
	.site-footer__inner,
	.site-footer__inner--2cols {
		gap: var(--space-400);
		grid-template-columns: 1fr;
		align-items: center;
		text-align: center;
	}

	.site-footer__inner--2cols .site-footer__column:first-child,
	.site-footer__inner--2cols .site-footer__column:last-child,
	.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: 768px) {
	.site-footer {
		padding: var(--space-600);
	}
}

.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(--near-black);
	background-color: var(--color-accent);
	box-shadow: 0 0 0 var(--space-200) var(--color-accent);
}

/* 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: 1;
}

/* 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: 1;
}

.site-footer__inner .site-footer__column a:hover,
.site-footer__inner .site-footer__column a:focus-visible {
	color: var(--near-black);
	background-color: var(--color-accent);
	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(--color-accent);
}

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

/* No visual spacing when the only content is an sr-only title (e.g. About, Roster, 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 {
	margin-bottom: var(--space-800);
}

.entry-content p {
	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);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (min-width: 768px) {
	:root {
		/* Adjust spacing scale for larger screens if needed */
	}

	.container {
		padding-left: var(--space-800);
		padding-right: var(--space-800);
	}
}

@media (min-width: 1200px) {
	.container {
		padding-left: var(--space-1000);
		padding-right: var(--space-1000);
	}
}

/* ========================================
   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
 * 
 * Global background carousel that displays on all pages.
 * Uses CSS animations for smooth, continuous transitions.
 * Intensely blurred on inner pages, fully visible on homepage.
 */

.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;
}

/* Intense blur for inner pages */
.background-carousel--inner .background-carousel__container {
	filter: blur(20px);
	transform: scale(1.1); /* Slight scale to hide blur edges */
}

/* 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;
	/* Make page content background transparent so carousel shows through */
	background-color: transparent;
	/* 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;
}

/* 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: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding: var(--space-400) var(--space-400) var(--space-600);
	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-600));
	}
}

.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;
}

.centered__content p + p {
	margin-top: var(--space-600);
}

/* ========================================
   ROSTER (artist list)
   ======================================== */

body.roster-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.roster-page .site-main {
		padding: var(--space-1000) var(--space-600);
	}
}

.roster {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-800);
}

.artist__item {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	gap: var(--space-400);
}

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

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

/* Initial state: zero size so image never extends document or adds scroll height */
.artist__preview {
	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;
}

/* Preview visible state (hover on desktop) */
.artist__item:hover .artist__preview {
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	max-width: min(90vw, calc(6 * var(--scale-1000)));
	max-height: min(90vh, calc(6 * var(--scale-1000)));
	object-fit: contain;
}

/* Only fade in after JS has set position to avoid flicker at (0,0) */
.artist__item:hover .artist__preview.artist__preview--positioned {
	opacity: 1;
}

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

	/* Grid centers the name; subtitle is absolute so it doesn’t affect name position */
	.artist__item {
		z-index: 0;
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: start;
	}

	.artist__heading {
		grid-column: 2;
		position: relative;
		display: inline-block;
	}

	.artist__subtitle {
		position: absolute;
		left: 100%;
		top: var(--space-100);
		margin-left: var(--space-400);
		white-space: nowrap;
	}

	.artist__item:hover {
		z-index: 1;
	}
}

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

	.artist__heading {
		display: block;
	}

	.artist__name,
	.artist__subtitle {
		display: block;
		width: 100%;
	}

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

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

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

	.artist__name, .about-intro__text {
		font-size: var(--font-body-lg);
	}
}
/* ========================================
   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;
	}
}