/*
Theme Name: Underground Talent
Author: Underground Talent
Description: Independent classic PHP theme for Underground Talent.
Version: 0.2.15
Requires at least: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: underground-talent
*/

/* Global tokens. Keep the editor palette in theme.json in sync. */
:root {
	--ut-bg: #0b0c0c;
	--ut-surface: #171919;
	--ut-text: #f3f3ed;
	--ut-muted: #b2b5af;
	--ut-accent: #f0ff00;
	--ut-border: #303331;
	--ut-font-body: Arial, Helvetica, sans-serif;
	--ut-font-display: Impact, "Arial Narrow", "Helvetica Neue", sans-serif;
	--ut-font-label: "Courier New", Courier, monospace;
	--ut-text-small: 0.75rem;
	--ut-text-label: 0.8125rem;
	--ut-text-body: 1rem;
	--ut-text-lead: clamp(1.125rem, 1.55vw, 1.5rem);
	--ut-text-hero: clamp(4.5rem, 6.85vw, 7rem);
	--ut-space-1: 0.5rem;
	--ut-space-2: 1rem;
	--ut-space-3: 1.5rem;
	--ut-space-4: 2rem;
	--ut-space-5: 3rem;
	--ut-space-6: 4rem;
	--ut-space-7: 6rem;
	--ut-content: 82.5rem;
	--ut-content-wide: 105rem;
	--ut-section-space: clamp(2rem, 3.33vw, 4rem);
	--ut-section-heading-gap: clamp(1.5rem, 2vw, 2rem);
	--ut-editorial-gap: clamp(1rem, 1.5vw, 1.5rem);
	--ut-gutter-wide: clamp(1rem, 2.5vw, 3rem);
	--ut-reading: 47.5rem;
	--ut-gutter: clamp(1.25rem, 4.2vw, 4rem);
	--ut-header-height: 78px;
	--ut-admin-height: 0px;
	--ut-control-size: 44px;
	--ut-transition: 160ms ease;
	color-scheme: dark;
}

body {
	margin: 0;
	background: var(--ut-bg);
	color: var(--ut-text);
	font-family: var(--ut-font-body);
	font-size: var(--ut-text-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

body.admin-bar { --ut-admin-height: 32px; }
::selection { background: var(--ut-accent); color: var(--ut-bg); }
a { color: inherit; text-underline-offset: 0.2em; }
button, input, select, textarea { font: inherit; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
button, summary { cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline-color: var(--ut-accent); }
[hidden] { display: none !important; }

/* Shared controls. Square geometry keeps the interface precise. */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ut-space-4);
	min-height: 54px;
	padding: 0.875rem 1.75rem;
	border: 1px solid transparent;
	border-radius: 0;
	font-family: var(--ut-font-label);
	font-size: var(--ut-text-label);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color var(--ut-transition), background-color var(--ut-transition), border-color var(--ut-transition);
}
.button--primary { background: var(--ut-accent); color: var(--ut-bg); }
.button--primary:hover { background: var(--ut-text); color: var(--ut-bg); }
.button--secondary { border-color: #757972; background: transparent; color: var(--ut-text); }
.button--secondary:hover { border-color: var(--ut-accent); color: var(--ut-accent); }
.button span[aria-hidden] { font-family: var(--ut-font-body); font-size: 1.4rem; line-height: 1; }

/* Global header: 78px at desktop, with normal document flow. */
.site-header {
	position: relative;
	z-index: 20;
	border-bottom: 1px solid var(--ut-border);
	background: var(--ut-bg);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ut-space-4);
	width: min(100% - var(--ut-gutter) * 2, var(--ut-content));
	min-height: calc(var(--ut-header-height) - 1px);
	margin-inline: auto;
}
.site-brand { display: inline-flex; align-items: center; gap: 0.875rem; flex-shrink: 0; text-decoration: none; }
.site-brand__mark { display: block; width: 44px; height: 44px; object-fit: contain; }
.site-brand__name { font-family: var(--ut-font-display); font-size: 1.25rem; font-weight: 400; line-height: 1; letter-spacing: 0.015em; }
.primary-navigation { min-width: 0; margin-inline: auto; }
.primary-menu { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.25rem, 2.6vw, 2.75rem); padding: 0; margin: 0; list-style: none; }
.primary-menu li { min-width: 0; max-width: 100%; }
.primary-menu a {
	max-width: 100%;
	overflow-wrap: anywhere;
	display: inline-flex;
	align-items: center;
	min-height: var(--ut-control-size);
	font-family: var(--ut-font-label);
	font-size: var(--ut-text-label);
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color var(--ut-transition);
}
.primary-menu a:hover, .primary-menu .current-menu-item > a, .primary-menu .current-menu-ancestor > a { color: var(--ut-accent); }
.header-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.icon-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ut-control-size);
	height: var(--ut-control-size);
	padding: 10px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--ut-text);
	text-decoration: none;
	list-style: none;
}
.icon-button:hover, .header-search[open] > summary { color: var(--ut-accent); }
.icon-button svg { display: block; width: 24px; height: 24px; overflow: visible; }
.icon-button:disabled { color: var(--ut-muted); }
.cart-count {
	position: absolute;
	top: 0;
	right: -2px;
	display: grid;
	place-items: center;
	min-width: 18px;
	height: 18px;
	padding-inline: 4px;
	border-radius: 50%;
	background: var(--ut-accent);
	color: var(--ut-bg);
	font-family: var(--ut-font-label);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
}
.ut-cart { display: inline-flex; }
.menu-toggle, .menu-toggle__close { display: none; }
.is-menu-open .menu-toggle__open { display: none; }
.is-menu-open .menu-toggle__close { display: block; }
.header-search > summary::-webkit-details-marker { display: none; }
.header-search__panel {
	position: absolute;
	top: 100%;
	right: max(var(--ut-gutter), calc((100% - var(--ut-content)) / 2));
	width: min(30rem, calc(100% - var(--ut-gutter) * 2));
	padding: var(--ut-space-3);
	border: 1px solid var(--ut-border);
	background: var(--ut-surface);
	box-shadow: 0 20px 40px #0006;
}
.search-form { display: flex; gap: var(--ut-space-1); }
.search-field {
	min-width: 0;
	width: 100%;
	min-height: 48px;
	padding: 0.75rem;
	border: 1px solid var(--ut-border);
	border-radius: 0;
	background: var(--ut-bg);
	color: var(--ut-text);
}
.search-field::placeholder { color: var(--ut-muted); }
.search-form .button { min-height: 48px; padding-inline: 1rem; }

/* First viewport only. The media surface deliberately contains no artwork. */
.site-main--home { padding: 0; }
.ut-hero {
	position: relative;
	isolation: isolate;
	min-height: calc(100vh - var(--ut-header-height) - var(--ut-admin-height));
	min-height: calc(100svh - var(--ut-header-height) - var(--ut-admin-height));
}
.ut-hero__media {
	position: absolute;
	z-index: -1;
	inset: 0 0 0 49%;
	background: linear-gradient(90deg, var(--ut-bg), transparent 45%), linear-gradient(155deg, #111414 5%, #1d2120 55%, #0f1111 100%);
}
.ut-hero__inner {
	position: relative;
	display: flex;
	align-items: center;
	width: min(100% - var(--ut-gutter) * 2, var(--ut-content));
	min-height: inherit;
	margin-inline: auto;
	padding-block: clamp(4rem, 9vh, 7rem);
}
.ut-hero__copy { width: 66%; max-width: 54rem; }
.ut-hero__eyebrow {
	margin: 0 0 var(--ut-space-3);
	color: var(--ut-accent);
	font-family: var(--ut-font-label);
	font-size: var(--ut-text-label);
	line-height: 1.6;
	letter-spacing: 0.13em;
}
.ut-hero__title {
	margin: 0;
	font-family: var(--ut-font-display);
	font-size: var(--ut-text-hero);
	font-weight: 900;
	font-synthesis: none;
	line-height: 0.98;
	letter-spacing: -0.015em;
}
.ut-hero__title span { display: block; }
.ut-hero__description { max-width: 31rem; margin: var(--ut-space-3) 0 0; color: var(--ut-muted); font-size: var(--ut-text-lead); line-height: 1.6; }
.ut-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ut-space-3); margin-top: var(--ut-space-5); }
.ut-hero__actions .button { min-width: 190px; }
.ut-hero__signal { position: absolute; right: 0; bottom: var(--ut-space-5); width: 10px; height: 10px; background: var(--ut-accent); }

/* Existing content templates retain a readable, restrained default layout. */
.site-main:not(.site-main--home) { width: min(100% - var(--ut-gutter) * 2, var(--ut-reading)); margin-inline: auto; padding-block: var(--ut-space-6); }
.site-main:not(.site-main--home) h1 { font-size: clamp(2rem, 4vw, 4rem); line-height: 1.1; }
.site-main:not(.site-main--home) article + article { margin-top: var(--ut-space-5); }
.site-footer:empty { display: none; }

@media (max-width: 1100px) {
	.site-header__inner { flex-wrap: wrap; gap: 0 var(--ut-space-2); }
	.primary-navigation { order: 3; width: 100%; margin: 0; padding-block: var(--ut-space-2); border-top: 1px solid var(--ut-border); }
	.primary-menu { flex-wrap: wrap; justify-content: space-between; }
	.has-navigation-js .primary-navigation { display: none; }
	.has-navigation-js.is-menu-open .primary-navigation { display: block; }
	.has-navigation-js .menu-toggle { display: inline-flex; }
	.ut-hero__copy { width: 80%; }
	.ut-hero__title { font-size: clamp(4rem, 8.4vw, 6.25rem); }
}

@media (max-width: 782px) {
	body.admin-bar { --ut-admin-height: 46px; }
}

@media (max-width: 700px) {
	:root { --ut-header-height: 72px; }
	.site-brand { gap: 0.625rem; }
	.site-brand__mark { width: 36px; height: 36px; }
	.site-brand__name { max-width: 7rem; font-size: 1.05rem; line-height: 1.05; }
	.header-actions { gap: 0; }
	.primary-menu { display: block; }
	.primary-menu a { display: flex; min-height: 50px; }
	.ut-hero { display: flex; flex-direction: column; }
	.ut-hero__inner { flex: 1; min-height: auto; padding-block: var(--ut-space-5); }
	.ut-hero__copy { width: 100%; max-width: none; }
	.ut-hero__title { font-size: clamp(1.875rem, 9.9vw, 4.5rem); }
	.ut-hero__eyebrow { max-width: 22rem; font-size: 0.6875rem; letter-spacing: 0.1em; margin-bottom: var(--ut-space-3); }
	.ut-hero__description { max-width: 27rem; font-size: 1.125rem; }
	.ut-hero__actions { gap: var(--ut-space-2); margin-top: var(--ut-space-4); }
	.ut-hero__actions .button { min-width: 0; }
	.ut-hero__media { inset: 0; background: linear-gradient(105deg, var(--ut-bg) 15%, #171c1a); }
	.ut-hero__signal { right: 0; bottom: var(--ut-space-2); width: 7px; height: 7px; }
}

@media (max-width: 380px) {
	:root { --ut-gutter: 1rem; }
	.site-header__inner { column-gap: 0.5rem; }
	.site-brand { gap: 0.375rem; }
	.site-brand__name { max-width: 4rem; font-size: 0.75rem; }
	.site-brand__mark { width: 28px; height: 28px; }
	.header-actions .icon-button { width: 40px; padding-inline: 8px; }
	.ut-hero__actions { flex-direction: column; align-items: stretch; }
}

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

/* Shared wide container for homepage visual sections only. */
.ut-explore__header,
.ut-explore__list,
.ut-now__inner,
.ut-packs__inner,
.ut-guides__inner,
.ut-artists__inner,
.ut-resources__inner,
.ut-join__inner {
	width: min(100% - var(--ut-gutter-wide) * 2, var(--ut-content-wide));
	margin-inline: auto;
}

/* Homepage Section 2: one connected, media-ready four-panel composition. */
.ut-explore { background: var(--ut-bg); }
.ut-explore__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ut-space-3);
	min-height: 96px;
	margin-inline: auto;
	padding-block: var(--ut-space-3);
}
.ut-explore__eyebrow,
.ut-explore__caption {
	margin: 0;
	font-family: var(--ut-font-label);
	font-size: var(--ut-text-label);
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0.13em;
}
.ut-explore__eyebrow span { margin-right: var(--ut-space-1); color: var(--ut-accent); }
.ut-explore__caption { color: var(--ut-muted); font-size: var(--ut-text-small); }
.ut-explore__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	padding: 0;
	margin-block: 0;
	border-block: 1px solid var(--ut-border);
	list-style: none;
}
.ut-explore__item { min-width: 0; margin: 0; }
.ut-explore__item + .ut-explore__item { border-left: 1px solid var(--ut-border); }
.ut-explore__link {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: clamp(32rem, 39vw, 42rem);
	height: 100%;
	padding: var(--ut-space-5) clamp(var(--ut-space-3), 3vw, var(--ut-space-6));
	color: var(--ut-text);
	text-decoration: none;
}
.ut-explore__media {
	position: absolute;
	z-index: -2;
	inset: 0;
	overflow: hidden;
	background: linear-gradient(155deg, var(--ut-surface), var(--ut-bg));
}
.ut-explore__item:nth-child(even) .ut-explore__media { background: linear-gradient(205deg, var(--ut-surface), var(--ut-bg)); }
/* Future images/videos fill each panel. No media asset is currently loaded. */
.ut-explore__media > img,
.ut-explore__media > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ut-explore__link::before {
	position: absolute;
	z-index: -1;
	inset: 0;
	background: linear-gradient(180deg, transparent 10%, rgb(0 0 0 / 35%) 45%, rgb(0 0 0 / 85%));
	opacity: 0.85;
	content: "";
	transition: opacity var(--ut-transition);
}
.ut-explore__content { width: 100%; min-width: 0; }
.ut-explore__number {
	display: table;
	padding-bottom: var(--ut-space-1);
	margin-bottom: var(--ut-space-3);
	border-bottom: 1px solid currentColor;
	font-family: var(--ut-font-label);
	font-size: 1.125rem;
	line-height: 1;
}
.ut-explore__title {
	margin: 0 0 var(--ut-space-3);
	font-family: var(--ut-font-display);
	font-size: clamp(2rem, 3.25vw, 4.5rem);
	font-weight: 900;
	font-synthesis: none;
	line-height: 1;
	letter-spacing: -0.025em;
	overflow-wrap: anywhere;
	transition: color var(--ut-transition);
}
.ut-explore__description {
	min-height: 6em;
	max-width: 27ch;
	margin: 0 0 var(--ut-space-3);
	color: var(--ut-muted);
	font-size: clamp(1rem, 1.2vw, 1.25rem);
	line-height: 1.5;
	overflow-wrap: break-word;
}
.ut-explore__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--ut-space-3);
	font-family: var(--ut-font-label);
	font-size: var(--ut-text-label);
	font-weight: 700;
	letter-spacing: 0.1em;
	transition: color var(--ut-transition);
}
.ut-explore__arrow { width: 28px; height: 28px; transition: transform var(--ut-transition); }
.ut-explore__link:focus-visible { outline: 2px solid var(--ut-accent); outline-offset: -5px; }
.ut-explore__link:focus-visible::before { opacity: 1; }
.ut-explore__link:focus-visible .ut-explore__title,
.ut-explore__link:focus-visible .ut-explore__cta { color: var(--ut-accent); }
.ut-explore__link:focus-visible .ut-explore__arrow { transform: translateX(4px); }
@media (hover: hover) {
	.ut-explore__link:hover::before { opacity: 1; }
	.ut-explore__link:hover .ut-explore__title,
	.ut-explore__link:hover .ut-explore__cta { color: var(--ut-accent); }
	.ut-explore__link:hover .ut-explore__arrow { transform: translateX(4px); }
}
@media (max-width: 1100px) {
	.ut-explore__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ut-explore__item:nth-child(odd) { border-left: 0; }
	.ut-explore__item:nth-child(n+3) { border-top: 1px solid var(--ut-border); }
	.ut-explore__link { min-height: 32rem; padding: var(--ut-space-5) var(--ut-space-4); }
	.ut-explore__title { font-size: clamp(2.5rem, 5.5vw, 4rem); }
	.ut-explore__description { font-size: 1.125rem; }
}
@media (max-width: 640px) {
	.ut-explore__header { align-items: flex-start; flex-direction: column; gap: var(--ut-space-1); }
	.ut-explore__list { grid-template-columns: minmax(0, 1fr); }
	.ut-explore__item + .ut-explore__item { border-left: 0; border-top: 1px solid var(--ut-border); }
	.ut-explore__link { min-height: 30rem; padding: var(--ut-space-5) var(--ut-gutter); }
	.ut-explore__title { font-size: clamp(2.75rem, 10vw, 4rem); }
	.ut-explore__description { min-height: 0; max-width: 29ch; margin-bottom: var(--ut-space-4); }
}
@media (prefers-reduced-motion: reduce) {
	.ut-explore__arrow { transform: none !important; }
}

/* Homepage Section 3: one lead story and two compact editorial features. */
.ut-now { padding-block: var(--ut-section-space); background: var(--ut-bg); }
.ut-now__heading { display: flex; align-items: center; gap: var(--ut-space-2); margin: 0 0 var(--ut-section-heading-gap); font-family: var(--ut-font-label); font-size: var(--ut-text-label); font-weight: 700; letter-spacing: 0.1em; line-height: 1.6; }
.ut-now__heading::before { content: ""; width: 16px; height: 3px; flex-shrink: 0; background: var(--ut-accent); }
.ut-now__grid { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: var(--ut-editorial-gap); }
.ut-now__featured, .ut-now__product { position: relative; isolation: isolate; min-width: 0; border: 1px solid var(--ut-border); color: var(--ut-text); text-decoration: none; background: var(--ut-surface); }
.ut-now__featured { display: flex; flex-direction: column; justify-content: space-between; min-height: 480px; padding: clamp(var(--ut-space-3), 3vw, var(--ut-space-5)); }
.ut-now__featured-media { position: absolute; z-index: -2; inset: 0; overflow: hidden; background: linear-gradient(145deg, var(--ut-surface), var(--ut-bg)); }
.ut-now__featured-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ut-transition); }
.ut-now__featured::before { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(180deg, rgb(0 0 0 / 55%), rgb(0 0 0 / 15%) 30%, rgb(0 0 0 / 92%) 100%); }
.ut-now__label { margin: 0 0 var(--ut-space-2); color: var(--ut-accent); font-family: var(--ut-font-label); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.5; }
.ut-now__featured > .ut-now__label { align-self: flex-start; padding: 0.375rem 0.625rem; background: var(--ut-bg); }
.ut-now__featured-copy { margin-top: var(--ut-space-7); }
.ut-now__featured h3 { margin: 0 0 var(--ut-space-3); max-width: 28ch; font-family: var(--ut-font-display); font-size: clamp(2rem, 3.2vw, 3.25rem); font-weight: 900; font-synthesis: none; line-height: 1.08; text-transform: uppercase; overflow-wrap: anywhere; }
.ut-now__side { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--ut-editorial-gap); min-width: 0; }
.ut-now__product {
	display: flex;
	align-items: center;
	padding: var(--ut-space-3);
	background: var(--ut-bg);
}
.ut-now__product-media {
	position: absolute;
	z-index: -2;
	inset: 0;
	width: 100%;
	overflow: hidden;
	mask-image: linear-gradient(90deg, #000 20%, transparent 95%);
}
.ut-now__product-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: brightness(0.8);
	transition: transform var(--ut-transition);
}
.ut-now__product::before {
	position: absolute;
	z-index: -1;
	inset: 0;
	content: "";
	pointer-events: none;
	background: linear-gradient(90deg, transparent, rgb(11 12 12 / 90%) 52%, var(--ut-bg));
}
.ut-now__product--tool .ut-now__product-media {
	inset: 0;
	mask-image: linear-gradient(270deg, #000 20%, transparent 95%);
}
.ut-now__product--tool::before { background: linear-gradient(270deg, transparent, rgb(11 12 12 / 90%) 52%, var(--ut-bg)); }
.ut-now__product--tool .ut-now__product-media img { object-position: 70% center; }
.ut-now__product-media img { object-position: 30% center; }
.ut-now__product-copy { position: relative; min-width: 0; width: 100%; }
.ut-now__product--has-media .ut-now__product-copy { width: 68%; margin-left: auto; }
.ut-now__product--tool.ut-now__product--has-media .ut-now__product-copy { margin-left: 0; margin-right: auto; }
.ut-now__product h3 { margin: 0 0 var(--ut-space-1); font-size: clamp(1.25rem, 1.7vw, 1.625rem); line-height: 1.15; overflow-wrap: anywhere; }
.ut-now__product .ut-now__label { display: flex; align-items: center; gap: var(--ut-space-1); }
.ut-now__product .ut-now__label::before { content: ""; width: 6px; height: 6px; flex-shrink: 0; background: var(--ut-accent); }
.ut-now__product .ut-now__description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ut-now__product .ut-now__action {
	min-height: 42px;
	padding: 0.5rem 0.875rem;
	margin-top: var(--ut-space-1);
	background: var(--ut-accent);
	color: var(--ut-bg);
	transition: background-color var(--ut-transition);
}
.ut-now__product:focus-visible .ut-now__action { background: var(--ut-text); color: var(--ut-bg); }
@media (hover: hover) {
	.ut-now__product:hover .ut-now__action { background: var(--ut-text); color: var(--ut-bg); }
}
.ut-now__description { margin: 0 0 var(--ut-space-2); color: var(--ut-muted); font-size: 0.875rem; line-height: 1.5; overflow-wrap: anywhere; }
.ut-now__action { display: inline-flex; align-items: center; gap: var(--ut-space-2); font-family: var(--ut-font-label); font-size: var(--ut-text-small); font-weight: 700; letter-spacing: 0.06em; }
.ut-now__action span { font-size: 1.25rem; transition: transform var(--ut-transition); }
.ut-now__featured:focus-visible, .ut-now__product:focus-visible { outline: 2px solid var(--ut-accent); outline-offset: 4px; }
.ut-now__featured:focus-visible .ut-now__action { color: var(--ut-accent); }
.ut-now__featured:focus-visible .ut-now__action span, .ut-now__product:focus-visible .ut-now__action span { transform: translateX(4px); }
@media (hover: hover) {
	.ut-now__featured:hover .ut-now__action { color: var(--ut-accent); }
	.ut-now__featured:hover img, .ut-now__product:hover img { transform: scale(1.025); }
	.ut-now__featured:hover .ut-now__action span, .ut-now__product:hover .ut-now__action span { transform: translateX(4px); }
}
@media (max-width: 1000px) {
	.ut-now__grid { grid-template-columns: minmax(0, 1fr); }
	.ut-now__side { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
	.ut-now__featured { min-height: 460px; }
	.ut-now__product { padding: var(--ut-space-2); }
}
@media (max-width: 600px) {
	.ut-now { padding-block: var(--ut-section-space); }
	.ut-now__side { grid-template-columns: minmax(0, 1fr); }
	.ut-now__featured { min-height: 420px; }
	.ut-now__product { min-height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
	.ut-now img, .ut-now__action span { transform: none !important; }
}

/* Homepage Section 4: native, snap-scrolling sample-pack rail. */
.ut-packs { padding-block: var(--ut-section-space); background: var(--ut-bg); }
.ut-packs__header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ut-space-4); margin-bottom: var(--ut-section-heading-gap); }
.ut-packs__heading { display: flex; align-items: center; gap: var(--ut-space-2); margin: 0 0 var(--ut-space-1); font-family: var(--ut-font-label); font-size: var(--ut-text-label); line-height: 1.6; letter-spacing: 0.1em; }
.ut-packs__heading::before { content: ""; flex-shrink: 0; width: 16px; height: 3px; background: var(--ut-accent); }
.ut-packs__intro { margin: 0; color: var(--ut-muted); font-size: var(--ut-text-body); }
.ut-packs__actions, .ut-packs__controls { display: flex; align-items: center; gap: var(--ut-space-1); }
.ut-packs__actions { gap: var(--ut-space-3); flex-shrink: 0; }
.ut-packs__view-all { display: inline-flex; align-items: center; min-height: 44px; gap: var(--ut-space-2); font-family: var(--ut-font-label); font-size: var(--ut-text-small); font-weight: 700; text-decoration: none; }
.ut-packs__view-all:hover { color: var(--ut-accent); }
.ut-packs__control { width: 44px; height: 44px; border: 1px solid var(--ut-border); border-radius: 0; background: transparent; color: var(--ut-text); font-size: 1.25rem; }
.ut-packs__control:hover:not(:disabled) { border-color: var(--ut-accent); color: var(--ut-accent); }
.ut-packs__control:disabled { opacity: 0.35; cursor: default; }
.ut-packs__rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - var(--ut-space-2) * 5) / 6); gap: var(--ut-space-2); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 0 0 var(--ut-space-2); margin: 0; list-style: none; scrollbar-width: thin; scrollbar-color: var(--ut-border) var(--ut-bg); }
.ut-packs__item { min-width: 0; scroll-snap-align: start; }
.ut-pack { position: relative; display: flex; flex-direction: column; height: 100%; border: 1px solid var(--ut-border); background: var(--ut-surface); }
.ut-pack__link { display: block; flex: 1; text-decoration: none; }
.ut-pack__link::after { position: absolute; inset: 0; content: ""; }
.ut-pack__art { aspect-ratio: 1; overflow: hidden; background: var(--ut-bg); }
.ut-pack__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ut-pack__copy { padding: var(--ut-space-2); }
.ut-pack__copy h3 { margin: 0 0 var(--ut-space-1); font-size: 1.0625rem; line-height: 1.3; overflow-wrap: anywhere; }
.ut-pack__copy p { margin: 0; color: var(--ut-muted); font-size: 0.8125rem; line-height: 1.5; overflow-wrap: anywhere; }
.ut-pack__footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; gap: var(--ut-space-1); padding: 0 var(--ut-space-2) var(--ut-space-2); }
.ut-pack__preview, .ut-pack__price { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.5rem; border: 0; border-radius: 0; font-family: var(--ut-font-label); font-size: 0.6875rem; line-height: 1.4; }
.ut-pack__preview { background: transparent; color: var(--ut-muted); cursor: not-allowed; }
.ut-pack__preview > span { font-size: 1.25rem; }
.ut-pack__price { flex-wrap: wrap; background: var(--ut-accent); color: var(--ut-bg); font-weight: 700; text-decoration: none; }
.ut-pack__price:only-child { grid-column: 1 / -1; }
.ut-pack__price ins { text-decoration: none; }
.ut-pack__price del { opacity: 0.7; }
.ut-pack__price:hover { background: var(--ut-text); }
.ut-pack:focus-within { outline: 2px solid var(--ut-accent); outline-offset: -2px; }
.ut-pack__link:focus-visible { outline-offset: -3px; }
.ut-packs__rail:focus-visible { outline-offset: 3px; }
.ut-packs__empty { margin: 0; padding: var(--ut-space-5); border: 1px solid var(--ut-border); color: var(--ut-muted); }
@media (max-width: 1600px) { .ut-packs__rail { grid-auto-columns: calc((100% - var(--ut-space-2) * 4) / 5); } }
@media (max-width: 1250px) { .ut-packs__rail { grid-auto-columns: calc((100% - var(--ut-space-2) * 3) / 4); } }
@media (max-width: 1000px) { .ut-packs__rail { grid-auto-columns: calc((100% - var(--ut-space-2) * 2) / 3); } }
@media (max-width: 760px) {
	.ut-packs__header { align-items: flex-start; flex-direction: column; gap: var(--ut-space-2); }
	.ut-packs__actions { width: 100%; justify-content: space-between; }
	.ut-packs__rail { grid-auto-columns: calc((100% - var(--ut-space-2)) / 2.3); }
}
@media (max-width: 600px) {
	.ut-packs { padding-block: var(--ut-section-space); }
	.ut-packs__rail { grid-auto-columns: 82%; }
}

/* Homepage Section 5: editorial guides, sharing the existing native rail JS. */
.ut-guides { padding-block: var(--ut-section-space); background: var(--ut-bg); }
.ut-guides__heading { display: flex; align-items: center; gap: var(--ut-space-2); margin: 0; font-family: var(--ut-font-label); font-size: var(--ut-text-label); line-height: 1.6; letter-spacing: 0.1em; }
.ut-guides__heading::before { content: ""; width: 16px; height: 3px; flex-shrink: 0; background: var(--ut-accent); }
.ut-guides__rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - var(--ut-editorial-gap) * 3) / 4); gap: var(--ut-editorial-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 0 0 var(--ut-space-2); margin: 0; list-style: none; scrollbar-width: thin; scrollbar-color: var(--ut-border) var(--ut-bg); }
.ut-guides__item { min-width: 0; scroll-snap-align: start; }
.ut-guide { position: relative; height: 100%; border: 1px solid var(--ut-border); background: var(--ut-bg); }
.ut-guide__link { display: flex; flex-direction: column; height: 100%; color: var(--ut-text); text-decoration: none; }
.ut-guide__media { aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(145deg, var(--ut-surface), var(--ut-bg)); }
.ut-guide__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--ut-transition); }
.ut-guide__copy { display: flex; flex-direction: column; flex: 1; padding: var(--ut-space-3); }
.ut-guide__copy h3 { margin: 0 0 var(--ut-space-3); font-family: var(--ut-font-display); font-size: clamp(1.375rem, 1.6vw, 1.75rem); font-weight: 900; font-synthesis: none; line-height: 1.2; letter-spacing: 0.01em; text-transform: uppercase; overflow-wrap: anywhere; transition: color var(--ut-transition); }
.ut-guide__meta { margin: auto 0 0; color: var(--ut-muted); font-family: var(--ut-font-label); font-size: var(--ut-text-small); line-height: 1.6; overflow-wrap: anywhere; }
.ut-guide__link:focus-visible { outline: 2px solid var(--ut-accent); outline-offset: -3px; }
.ut-guide__link:focus-visible h3 { color: var(--ut-accent); }
.ut-guides__rail:focus-visible { outline-offset: 3px; }
.ut-guides__empty { padding: var(--ut-space-5); margin: 0; border: 1px solid var(--ut-border); color: var(--ut-muted); }
@media (hover: hover) {
	.ut-guide__link:hover h3 { color: var(--ut-accent); }
	.ut-guide__link:hover img { transform: scale(1.025); }
}
@media (max-width: 1000px) { .ut-guides__rail { grid-auto-columns: calc((100% - var(--ut-editorial-gap)) / 2.3); } }
@media (max-width: 600px) {
	.ut-guides { padding-block: var(--ut-section-space); }
	.ut-guides__rail { grid-auto-columns: 90%; gap: var(--ut-space-2); }
	.ut-guide__copy { padding: var(--ut-space-2); }
}
@media (prefers-reduced-motion: reduce) { .ut-guide__media img { transform: none !important; } }

/* Homepage Section 6: cinematic artist editorial and secondary story index. */
.ut-artists { padding-block: var(--ut-section-space); background: var(--ut-bg); }
.ut-artists__header { display: flex; align-items: center; justify-content: space-between; gap: var(--ut-space-4); margin-bottom: var(--ut-section-heading-gap); }
.ut-artists__heading { display: flex; align-items: center; gap: var(--ut-space-2); margin: 0 0 var(--ut-space-1); font-family: var(--ut-font-label); font-size: var(--ut-text-label); letter-spacing: 0.1em; line-height: 1.6; }
.ut-artists__heading::before { content: ""; width: 16px; height: 3px; flex-shrink: 0; background: var(--ut-accent); }
.ut-artists__intro { margin: 0; color: var(--ut-muted); font-size: var(--ut-text-body); }
.ut-artists__header > a { flex-shrink: 0; }
.ut-artists__layout { display: grid; grid-template-columns: minmax(0, 3.4fr) minmax(0, 1fr); gap: var(--ut-editorial-gap); }
.ut-artists__layout--solo { grid-template-columns: minmax(0, 1fr); }
.ut-artists__feature { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-width: 0; min-height: 560px; padding: clamp(var(--ut-space-4), 4vw, var(--ut-space-6)); border: 1px solid var(--ut-border); }
.ut-artists__media { position: absolute; z-index: -2; inset: 0; overflow: hidden; background: linear-gradient(135deg, var(--ut-surface), var(--ut-bg)); }
.ut-artists__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ut-artists__feature::before { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(90deg, rgb(0 0 0 / 85%), rgb(0 0 0 / 15%)), linear-gradient(0deg, rgb(0 0 0 / 80%), transparent 85%); }
.ut-artists__feature-copy { width: 100%; max-width: 43rem; }
.ut-artists__eyebrow { margin: 0 0 var(--ut-space-3); color: var(--ut-accent); font-family: var(--ut-font-label); font-size: var(--ut-text-label); letter-spacing: 0.08em; text-transform: uppercase; }
.ut-artists__eyebrow > span { margin-right: var(--ut-space-1); }
.ut-artists__feature h3 { max-width: 24ch; margin: 0 0 var(--ut-space-3); font-family: var(--ut-font-display); font-size: clamp(2rem, 3.2vw, 3.5rem); font-weight: 900; font-synthesis: none; line-height: 1.08; text-transform: uppercase; overflow-wrap: anywhere; }
.ut-artists__excerpt { max-width: 52ch; margin: 0 0 var(--ut-space-4); color: var(--ut-text); font-size: 1.125rem; line-height: 1.6; overflow-wrap: anywhere; }
.ut-artists__index { display: flex; flex-direction: column; gap: var(--ut-space-3); min-width: 0; padding: 0; margin: 0; list-style: none; }
.ut-artists__index > li { display: flex; flex: 1; min-width: 0; }
.ut-artists__index > li + li { border-top: 1px solid var(--ut-border); padding-top: var(--ut-space-3); }
.ut-artists__story { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: var(--ut-space-2); width: 100%; min-width: 0; color: var(--ut-text); text-decoration: none; }
.ut-artists__thumbnail { aspect-ratio: 1; overflow: hidden; background: var(--ut-surface); }
.ut-artists__thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ut-artists__story-copy { min-width: 0; }
.ut-artists__number { display: block; margin-bottom: var(--ut-space-1); color: var(--ut-muted); font-family: var(--ut-font-label); font-size: var(--ut-text-small); }
.ut-artists__story h3 { margin: 0 0 var(--ut-space-1); font-size: clamp(0.9375rem, 1.1vw, 1.125rem); line-height: 1.3; overflow-wrap: anywhere; transition: color var(--ut-transition); }
.ut-artists__story p { margin: 0; color: var(--ut-muted); font-size: var(--ut-text-small); line-height: 1.5; }
.ut-artists__story:focus-visible { outline: 2px solid var(--ut-accent); outline-offset: 4px; }
.ut-artists__story:focus-visible h3 { color: var(--ut-accent); text-decoration: underline; text-underline-offset: 0.2em; }
.ut-artists__empty { padding: var(--ut-space-5); margin: 0; border: 1px solid var(--ut-border); color: var(--ut-muted); }
@media (hover: hover) { .ut-artists__story:hover h3 { color: var(--ut-accent); text-decoration: underline; text-underline-offset: 0.2em; } }
@media (max-width: 1000px) {
	.ut-artists__layout { grid-template-columns: minmax(0, 1fr); }
	.ut-artists__feature { min-height: 480px; }
	.ut-artists__index { gap: var(--ut-space-2); }
	.ut-artists__story { grid-template-columns: 96px minmax(0, 1fr); }
	.ut-artists__index > li + li { padding-top: var(--ut-space-2); }
	.ut-artists__story h3 { font-size: 1.125rem; }
}
@media (max-width: 600px) {
	.ut-artists { padding-block: var(--ut-section-space); }
	.ut-artists__header { align-items: flex-start; flex-direction: column; gap: var(--ut-space-2); }
	.ut-artists__feature { padding: var(--ut-space-3); }
	.ut-artists__excerpt { font-size: var(--ut-text-body); }
	.ut-artists__story { grid-template-columns: 80px minmax(0, 1fr); }
	.ut-artists__story h3 { font-size: var(--ut-text-body); }
}

/* Homepage Section 7: practical career resources, sharing the existing native rail JS. */
.ut-resources { padding-block: var(--ut-section-space); background: var(--ut-bg); }
.ut-resources__heading { display: flex; align-items: center; gap: var(--ut-space-2); margin: 0; font-family: var(--ut-font-label); font-size: var(--ut-text-label); line-height: 1.6; letter-spacing: 0.1em; }
.ut-resources__heading::before { content: ""; width: 16px; height: 3px; flex-shrink: 0; background: var(--ut-accent); }
.ut-resources__rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - var(--ut-editorial-gap) * 3) / 4); gap: var(--ut-editorial-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 0 0 var(--ut-space-2); margin: 0; list-style: none; scrollbar-width: thin; scrollbar-color: var(--ut-border) var(--ut-bg); }
.ut-resources__item { min-width: 0; scroll-snap-align: start; }
.ut-resource { position: relative; height: 100%; border: 1px solid var(--ut-border); background: var(--ut-bg); }
.ut-resource__link { display: flex; flex-direction: column; height: 100%; color: var(--ut-text); text-decoration: none; }
.ut-resource__media { aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(145deg, var(--ut-surface), var(--ut-bg)); }
.ut-resource__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--ut-transition); }
.ut-resource__copy { display: flex; flex-direction: column; flex: 1; padding: var(--ut-space-3); }
.ut-resource__copy h3 { margin: 0 0 var(--ut-space-3); font-family: var(--ut-font-display); font-size: clamp(1.375rem, 1.6vw, 1.75rem); font-weight: 900; font-synthesis: none; line-height: 1.2; letter-spacing: 0.01em; text-transform: uppercase; overflow-wrap: anywhere; transition: color var(--ut-transition); }
.ut-resource__meta { margin: auto 0 0; color: var(--ut-muted); font-family: var(--ut-font-label); font-size: var(--ut-text-small); line-height: 1.6; overflow-wrap: anywhere; }
.ut-resource__link:focus-visible { outline: 2px solid var(--ut-accent); outline-offset: -3px; }
.ut-resource__link:focus-visible h3 { color: var(--ut-accent); }
.ut-resources__rail:focus-visible { outline-offset: 3px; }
.ut-resources__empty { padding: var(--ut-space-5); margin: 0; border: 1px solid var(--ut-border); color: var(--ut-muted); }
@media (hover: hover) {
	.ut-resource__link:hover h3 { color: var(--ut-accent); }
	.ut-resource__link:hover img { transform: scale(1.025); }
}
@media (max-width: 1000px) { .ut-resources__rail { grid-auto-columns: calc((100% - var(--ut-editorial-gap)) / 2.3); } }
@media (max-width: 600px) {
	.ut-resources { padding-block: var(--ut-section-space); }
	.ut-resources__rail { grid-auto-columns: 90%; gap: var(--ut-space-2); }
	.ut-resource__copy { padding: var(--ut-space-2); }
}
@media (prefers-reduced-motion: reduce) { .ut-resource__media img { transform: none !important; } }


.ut-resources__intro { margin: var(--ut-space-1) 0 0; color: var(--ut-muted); font-size: var(--ut-text-body); }
.ut-resource__copy { position: relative; padding-bottom: var(--ut-space-5); }
.ut-resource__meta { padding-right: 36px; }
.ut-resource__arrow { position: absolute; right: var(--ut-space-2); bottom: var(--ut-space-2); display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--ut-border); border-radius: 50%; transition: transform var(--ut-transition), color var(--ut-transition); }
.ut-resource__link:focus-visible h3 { text-decoration: underline; text-underline-offset: 0.15em; }
.ut-resource__link:focus-visible .ut-resource__arrow { color: var(--ut-accent); transform: translateX(2px); }
@media (hover: hover) { .ut-resource__link:hover .ut-resource__arrow { color: var(--ut-accent); transform: translateX(2px); } }
@media (prefers-reduced-motion: reduce) { .ut-resource__arrow { transform: none !important; } }

/* Homepage Section 8: community banner, pending newsletter integration. */
.ut-join { position: relative; padding-block: clamp(3rem, 6vw, 6rem); border-block: 1px solid var(--ut-border); background: linear-gradient(90deg, rgb(0 0 0 / 82%), rgb(0 0 0 / 50%)), linear-gradient(0deg, rgb(0 0 0 / 75%), transparent), url("assets/images/section-8-background.png") center / cover no-repeat; }
.ut-join__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--ut-space-5); align-items: center; }
.ut-join__copy, .ut-join__form { min-width: 0; }
.ut-join__eyebrow { display: flex; align-items: center; gap: var(--ut-space-2); margin: 0 0 var(--ut-space-3); font-family: var(--ut-font-label); font-size: var(--ut-text-label); letter-spacing: 0.12em; }
.ut-join__eyebrow::before { content: ""; width: 20px; height: 3px; background: var(--ut-accent); flex-shrink: 0; }
.ut-join h2 { margin: 0 0 var(--ut-space-2); font-family: var(--ut-font-display); font-size: clamp(2rem, 3.8vw, 4.5rem); font-weight: 900; font-synthesis: none; line-height: 1.05; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.ut-join h2 span { color: var(--ut-accent); }
.ut-join__intro { margin: 0; max-width: 65ch; font-size: var(--ut-text-body); line-height: 1.6; }
.ut-join__form { position: relative; margin: 0; }
.ut-join__fields { display: flex; gap: var(--ut-space-1); }
.ut-join__fields input { flex: 1; min-width: 0; width: 100%; min-height: 60px; border: 1px solid var(--ut-muted); border-radius: 0; padding: var(--ut-space-2); background: rgb(0 0 0 / 75%); color: var(--ut-text); font: inherit; }
.ut-join__fields input::placeholder { color: var(--ut-muted); opacity: 1; }
.ut-join__fields button { flex-shrink: 0; min-height: 60px; padding-inline: var(--ut-space-3); }
.ut-join__fields button:disabled { opacity: 0.75; cursor: not-allowed; }
.ut-join__interests { display: flex; flex-wrap: wrap; gap: var(--ut-space-1) var(--ut-space-2); min-width: 0; border: 0; padding: 0; margin: var(--ut-space-2) 0; }
.ut-join__interests label { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: var(--ut-text-small); cursor: pointer; }
.ut-join__interests input { width: 18px; height: 18px; margin: 0; accent-color: var(--ut-accent); }
.ut-join input:focus-visible { outline: 2px solid var(--ut-accent); outline-offset: 3px; }
.ut-join__note, .ut-join__privacy { font-size: var(--ut-text-small); margin: var(--ut-space-1) 0 0; color: var(--ut-text); }
.ut-join__privacy a { color: inherit; text-underline-offset: 3px; }
@media (max-width: 1000px) { .ut-join__inner { grid-template-columns: minmax(0, 1fr); gap: var(--ut-space-4); } .ut-join h2 { font-size: clamp(2rem, 6.5vw, 4rem); } }
@media (max-width: 600px) { .ut-join__fields { flex-direction: column; } .ut-join__fields button { width: 100%; } .ut-join__interests { column-gap: var(--ut-space-3); } }

/* Global footer: broad viewport alignment, independent of homepage widths. */
.ut-footer { background: var(--ut-bg); border-block: 1px solid var(--ut-border); color: var(--ut-muted); }
.ut-footer__inner { width: calc(100% - clamp(2rem, 5vw, 8rem)); margin-inline: auto; }
.ut-footer__main { display: grid; grid-template-columns: minmax(0, 1.8fr) repeat(5, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 3rem); padding-block: clamp(3rem, 5vw, 6rem); }
.ut-footer a { color: inherit; text-decoration: none; transition: color var(--ut-transition); overflow-wrap: anywhere; }
.ut-footer a:hover, .ut-footer a:focus-visible { color: var(--ut-accent); text-decoration: underline; text-underline-offset: 4px; }
.ut-footer a:focus-visible { outline: 2px solid var(--ut-accent); outline-offset: 4px; }
.ut-footer__identity { display: flex; align-items: center; gap: var(--ut-space-2); color: var(--ut-text) !important; font-family: var(--ut-font-display); font-weight: 900; font-size: clamp(1rem, 1.3vw, 1.5rem); line-height: 1.2; }
.ut-footer__identity img { flex-shrink: 0; width: 56px; height: 56px; object-fit: contain; }
.ut-footer__brand > p { margin: var(--ut-space-2) 0 var(--ut-space-3); font-size: var(--ut-text-small); }
.ut-footer__socials { display: flex; flex-wrap: wrap; gap: var(--ut-space-1); }
.ut-footer__socials:empty { display: none; }
.ut-footer__socials a { display: grid; place-items: center; width: 44px; height: 44px; color: var(--ut-text); }
.ut-footer__column { min-width: 0; }
.ut-footer__column h2 { margin: 0 0 var(--ut-space-2); color: var(--ut-text); font-family: var(--ut-font-label); font-size: var(--ut-text-small); line-height: 1.5; letter-spacing: 0.08em; }
.ut-footer__column ul { list-style: none; padding: 0; margin: 0; }
.ut-footer__column a { display: inline-block; padding-block: 6px; font-size: var(--ut-text-small); line-height: 1.5; }
.ut-footer__bottom { display: flex; justify-content: space-between; gap: var(--ut-space-3); border-top: 1px solid var(--ut-border); padding-block: var(--ut-space-4); font-size: var(--ut-text-small); }
.ut-footer__bottom p { margin: 0; }
@media (max-width: 1100px) { .ut-footer__main { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ut-space-4); } }
@media (max-width: 700px) { .ut-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ut-footer__brand { grid-column: 1 / -1; } .ut-footer__bottom { flex-direction: column; gap: var(--ut-space-2); } }
@media (max-width: 350px) { .ut-footer__main { grid-template-columns: minmax(0, 1fr); } }

/* Supplied hero and pillar backgrounds: original assets, unchanged geometry. */
.ut-hero__media { inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / 82%), rgb(0 0 0 / 35%) 55%, rgb(0 0 0 / 12%)), var(--ut-home-image, url("assets/images/techno-platform-hero-background-image.png")) 50% 45% / cover no-repeat; }
.ut-explore__item:nth-child(1) .ut-explore__media { background: var(--ut-home-image, url("assets/images/learn-techno-music-production.png")) 62% 40% / cover no-repeat; }
.ut-explore__item:nth-child(2) .ut-explore__media { background: var(--ut-home-image, url("assets/images/create-techno-music.png")) 68% 50% / cover no-repeat; }
.ut-explore__item:nth-child(3) .ut-explore__media { background: var(--ut-home-image, url("assets/images/discover-techno-music-and-artists.png")) 57% 42% / cover no-repeat; }
.ut-explore__item:nth-child(4) .ut-explore__media { background: var(--ut-home-image, url("assets/images/grow-as-a-techno-artist.png")) 55% 45% / cover no-repeat; }
@media (max-width: 1000px) {
	.ut-hero__media { background-position: 48% 40%; }
	.ut-explore__item:nth-child(1) .ut-explore__media { background-position: 60% 35%; }
	.ut-explore__item:nth-child(2) .ut-explore__media { background-position: 65% 48%; }
}
@media (max-width: 600px) {
	.ut-hero__media { background-image: linear-gradient(90deg, rgb(0 0 0 / 66%), rgb(0 0 0 / 35%)), var(--ut-home-image, url("assets/images/techno-platform-hero-background-image.png")); background-position: 47% 40%; }
	.ut-explore__item:nth-child(1) .ut-explore__media { background-position: 62% 30%; }
	.ut-explore__item:nth-child(2) .ut-explore__media { background-position: 70% 48%; }
	.ut-explore__item:nth-child(3) .ut-explore__media { background-position: 58% 40%; }
	.ut-explore__item:nth-child(4) .ut-explore__media { background-position: 54% 40%; }
}