/*
Theme Name: Threekey
Theme URI: https://threekey-hub.local
Author: Threekey Hub
Description: Dark, street-inflected block theme for Threekey Hub — the South London Ponglish rap collective. Built for releases, artists, videos and merch.
Version: 1.5.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: threekey
*/

/* ---- Brand components ---------------------------------------- */

/* Streaming / social link buttons (output by threekey-core shortcodes) */
.tk-stream-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block: 1.25rem;
}

.tk-stream-btn {
	display: inline-block;
	padding: 0.55rem 1.4rem;
	border: 1px solid var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.tk-stream-btn:hover,
.tk-stream-btn:focus {
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--base);
}

/* Release meta line: "Single · 2026 · Ketz 03k x Polish Mic" */
.tk-release-meta {
	color: var(--wp--preset--color--muted);
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Channel names remain readable independently of their colour. */
.tk-channel-badge {
	display: inline-block;
	margin: 0.2em 0.5em 0.2em 0;
	padding: 0.25em 0.65em;
	border: 1px solid currentColor;
	border-radius: 3px;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.08em;
	white-space: nowrap;
	vertical-align: middle;
}

.tk-channel-badge--threekey-hub {
	color: var(--wp--preset--color--gold);
	background: #211d12;
}

.tk-channel-badge--hubxtra {
	color: #a8d7ff;
	background: #142536;
}

.tk-channel-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
}

.tk-channel-filter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	box-sizing: border-box;
	min-height: 56px;
	padding: 0.5rem 1rem;
	border: 1px solid #4b4b53;
	border-radius: 3px;
	color: #eeeeef;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
}

.tk-channel-filter:hover,
.tk-channel-filter[aria-current="page"] {
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold);
	background: #211d12;
}

.tk-channel-filter--hubxtra:hover,
.tk-channel-filter--hubxtra[aria-current="page"] {
	border-color: #a8d7ff;
	color: #a8d7ff;
	background: #142536;
}

.tk-channel-filter:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.tk-channel-count {
	font-variant-numeric: tabular-nums;
}

.tk-channel-summary {
	margin-block: 1rem 1.5rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.85rem;
}

.tk-video-library > .tk-video-wall {
	margin-top: clamp(2rem, 5vw, 4rem);
}

.tk-channel-subscribe {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 3rem;
}

@media (max-width: 599px) {
	.tk-channel-filters {
		gap: 0.5rem;
	}
	.tk-channel-filter {
		flex: 1 1 auto;
		padding-inline: 0.75rem;
	}
	/* Keep channel and artist labels clear of the play button on phones. */
	.tk-video-library .tk-video-card--hero .tk-video-info {
		position: static;
		padding-top: 1rem;
	}
	.tk-video-library .tk-video-card--hero .tk-play {
		width: 72px;
		height: 72px;
	}
	.tk-video-library .tk-video-card--hero .tk-play::after {
		border-width: 12px 0 12px 20px;
	}
}

/* Gold keyline used under section headings */
.tk-keyline {
	width: 4.5rem;
	height: 3px;
	background: var(--wp--preset--color--gold);
	border: none;
	margin: 0.75rem 0 0;
}

/* ---- Sticky header: transparent over the hero, glass on scroll -- */

/* Sticky must live on the template-part wrapper: the inner group's
   containing block is only as tall as the nav, so it can't stick. */
header:has(.tk-header) {
	position: sticky;
	top: 0;
	z-index: 60;
}

.tk-header {
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color 0.35s ease, border-color 0.35s ease, padding 0.35s ease;
}

.tk-header--scrolled {
	background: rgba(10, 10, 12, 0.82);
	border-bottom-color: #26262d;
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	backdrop-filter: blur(16px) saturate(1.4);
	padding-top: 0.65rem !important;
	padding-bottom: 0.65rem !important;
}

/* backdrop-filter makes the scrolled header a containing block for
   position:fixed, which traps the mobile-nav overlay inside the ~60px
   header (so scrolled-down, opening the menu shows only the header strip
   and you can't reach the close button). While the overlay is open WP
   flags <html> with .has-modal-open — drop the blur then so the fixed
   overlay is viewport-relative and covers the screen. */
.has-modal-open .tk-header--scrolled,
.tk-header--scrolled:has(.wp-block-navigation__responsive-container.is-menu-open) {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* Brand lockup: the Threekey logo as a CSS mask so its tint can
   transition (an <img> can't recolour on hover). */
.tk-brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	background-image: none !important;
}

.tk-brand__logo {
	/* Logo viewBox is 2259x1016 — keep the ratio */
	width: 116px;
	height: 52px;
	background-color: var(--wp--preset--color--contrast);
	-webkit-mask: url(assets/img/threekey-logo.svg?v=2) no-repeat center / contain;
	mask: url(assets/img/threekey-logo.svg?v=2) no-repeat center / contain;
	transition: background-color 0.25s ease;
}

.tk-brand:hover .tk-brand__logo,
.tk-brand:focus-visible .tk-brand__logo {
	background-color: var(--wp--preset--color--gold);
}

/* Nav links */
.tk-nav {
	gap: 2rem;
}

.tk-nav .wp-block-navigation-item__content {
	padding-block: 0.3rem;
}

/* Current section: gold with a solid underline that stays.
   Core forces link color:inherit with a doubled-class selector,
   so tint the <li> and let the link inherit it. */
.tk-nav .tk-current,
.tk-nav .wp-block-navigation-item:has(> a[aria-current="page"]) {
	color: var(--wp--preset--color--gold);
}

.tk-nav .tk-current a,
.tk-nav a[aria-current="page"] {
	background-size: 100% 2px;
}

/* CTA */
.tk-nav-cta .wp-block-button__link {
	padding: 0.55rem 1.3rem;
}

/* Mobile: tighten the row */
@media (max-width: 781px) {
	.tk-header__row {
		gap: 0.9rem;
	}

	.tk-brand__logo {
		width: 89px;
		height: 40px;
	}

	.tk-nav-cta {
		display: none;
	}

	/* Mobile menu overlay: give the close (✕) a proper 44px tap target
	   (core's default is a cramped 24px box at the very screen edge) and
	   let it pick up the site's gold on hover/focus. */
	.wp-block-navigation__responsive-container-close {
		width: 44px;
		height: 44px;
		padding: 10px;
		top: 0.4rem;
		right: 0.4rem;
	}

	.wp-block-navigation__responsive-container-close svg {
		width: 24px;
		height: 24px;
	}

	.wp-block-navigation__responsive-container-close:hover,
	.wp-block-navigation__responsive-container-close:focus-visible {
		color: var(--wp--preset--color--gold);
	}
}

@media (prefers-reduced-motion: reduce) {
	header:has(.tk-header) {
		transition: none;
	}

	.tk-brand__logo {
		transition: none;
	}
}

/* ---- Cinematic hero --------------------------------------------- */

.tk-cinema {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	/* Pull up behind the transparent sticky header so the hero's top hits
	   the document top: it then ends flush with the viewport bottom and
	   its content centres truly. threekey.js measures --tk-hero-pull
	   (header height + root blockGap); the 96px fallback matches the
	   unscrolled header if JS never runs. !important is required: core's
	   layout CSS zeroes first-child margin-block-start with a
	   :root-prefixed selector that outranks any single class. */
	margin-block-start: calc(-1 * var(--tk-hero-pull, 96px)) !important;
	display: grid;
	place-items: center;
	overflow: hidden;
	text-align: center;
}

.tk-cinema__bg {
	position: absolute;
	inset: 0;
	/* threekey.js drives a slow translateY parallax on scroll */
	will-change: transform;
}

.tk-cinema__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.42) saturate(1.1) contrast(1.03);
	transform: scale(1.12);
	animation: tk-kenburns 26s ease-in-out infinite alternate;
}

/* Video loop backdrop: same grade as the still, no Ken Burns — the
   footage brings its own motion. threekey.js starts playback only on
   desktop with no reduced-motion / data-saver. */
.tk-cinema__bg video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.42) saturate(1.1) contrast(1.03);
}

@keyframes tk-kenburns {
	from {
		transform: scale(1.12);
	}
	to {
		transform: scale(1.24) translateY(-2%);
	}
}

/* Soft radial vignette — no hard bands top or bottom, so the still
   reads edge-to-edge instead of looking letterboxed */
.tk-cinema::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at center, transparent 42%, rgba(10, 10, 12, 0.6) 100%),
		linear-gradient(180deg, rgba(10, 10, 12, 0.28) 0%, transparent 18%, transparent 84%, rgba(10, 10, 12, 0.5) 100%);
	pointer-events: none;
}

/* Film grain — the layer is oversized and jitters position in discrete
   steps (~7fps), so the noise reads as running film stock, not a static
   texture. Transform-only: stays on the compositor. */
.tk-cinema__grain {
	position: absolute;
	inset: -60%;
	z-index: 2;
	pointer-events: none;
	opacity: 0.5;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
	animation: tk-grain 1.4s steps(1, end) infinite;
}

@keyframes tk-grain {
	0%, 100% {
		transform: translate(0, 0);
	}
	12% {
		transform: translate(-2.4%, 1.6%);
	}
	25% {
		transform: translate(1.8%, -2.2%);
	}
	37% {
		transform: translate(-3.1%, -0.8%);
	}
	50% {
		transform: translate(2.6%, 2.9%);
	}
	62% {
		transform: translate(-1.2%, 3.2%);
	}
	75% {
		transform: translate(3.4%, -1.4%);
	}
	87% {
		transform: translate(-2.8%, -3%);
	}
}

.tk-cinema__inner {
	position: relative;
	z-index: 3;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.1rem;
}

.tk-cinema__inner > * {
	animation: tk-fade-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.tk-cinema__inner > *:nth-child(2) { animation-delay: 0.1s; }
.tk-cinema__inner > *:nth-child(3) { animation-delay: 0.2s; }
.tk-cinema__inner > *:nth-child(4) { animation-delay: 0.32s; }
.tk-cinema__inner > *:nth-child(5) { animation-delay: 0.44s; }

/* Logo-led hero lockup: the Threekey Entertainment wordmark with the
   outlined "HUB" stamp beneath it (which keeps the signal flicker).
   The logo's "ENTERTAINMENT" line fills its bottom edge, so HUB sits
   just below the box — no tuck. */
.tk-cinema__title--logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
}

.tk-cinema__logo {
	width: clamp(300px, 46vw, 640px);
	height: auto;
	/* The T's swash widens the box leftward, so the geometrically
	   centred logo reads shifted right — nudge left to optically centre
	   the letter mass (centred margin box: visual shift ≈ half of this) */
	margin-left: -8%;
	filter: drop-shadow(0 10px 44px rgba(0, 0, 0, 0.65));
}

.tk-cinema__title--logo .tk-cinema__title-ghost {
	font-size: clamp(1.6rem, 4vw, 2.9rem);
	line-height: 1;
	/* Wide stamp tracking; text-indent balances the trailing
	   letter-space so the word stays optically centred */
	letter-spacing: 0.5em;
	text-indent: 0.5em;
}

/* On phones HUB is small, so the fixed 2px stroke reads as a heavy
   outline that muddies the letterforms and hurts legibility. Enlarge it
   and thin the stroke so it stays proportionally the same as desktop. */
@media (max-width: 600px) {
	.tk-cinema__title--logo .tk-cinema__title-ghost {
		font-size: clamp(2.3rem, 9.5vw, 2.9rem);
		-webkit-text-stroke-width: 1.3px;
	}
}

.tk-cinema__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--anton);
	font-size: clamp(4.25rem, 12.5vw, 10.5rem);
	line-height: 0.92;
	text-transform: uppercase;
	letter-spacing: 0.005em;
	color: var(--wp--preset--color--contrast);
	text-shadow: 0 10px 60px rgba(0, 0, 0, 0.55);
}

.tk-cinema__title span {
	display: block;
}

.tk-cinema__title-ghost {
	color: transparent;
	-webkit-text-stroke: 2px var(--wp--preset--color--gold);
	text-shadow: none;
	/* Loose-cable signal flicker: two brief dips per cycle, otherwise steady */
	animation: tk-signal 11s linear infinite 4s;
}

@keyframes tk-signal {
	0%, 88.8%, 89.6%, 91.2%, 92%, 100% {
		opacity: 1;
	}
	89%, 89.4% {
		opacity: 0.35;
	}
	91.5% {
		opacity: 0.55;
	}
}

.tk-cinema__sub {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: clamp(1rem, 2vw, 1.35rem);
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.tk-cinema__sub em {
	font-style: normal;
	color: var(--wp--preset--color--gold);
}

/* "Out now" chip */
.tk-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	margin-top: 0.8rem;
	padding: 0.7rem 1.5rem;
	border: 1px solid rgba(233, 185, 73, 0.55);
	background: rgba(10, 10, 12, 0.55);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--wp--preset--color--contrast);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.tk-chip:hover,
.tk-chip:focus-visible {
	background: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--base);
}

.tk-chip__pulse {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
	animation: tk-pulse 1.8s ease-in-out infinite;
}

.tk-chip:hover .tk-chip__pulse {
	background: var(--wp--preset--color--base);
}

@keyframes tk-pulse {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(233, 185, 73, 0.55);
	}
	50% {
		box-shadow: 0 0 0 7px rgba(233, 185, 73, 0);
	}
}

/* Release-page variant of the cinema hero (full viewport like the
   homepage — it only adjusts the title scale) */
.tk-cinema__title--release {
	font-size: clamp(2.9rem, 8.5vw, 7rem);
	max-width: 16ch;
	margin-inline: auto;
}

/* Standalone circular play button (hosts the same .tk-play glyph) */
.tk-cinema__play {
	position: relative;
	width: 108px;
	height: 108px;
	margin-top: 0.6rem;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
}

.tk-cinema__play .tk-play {
	width: 100%;
	height: 100%;
}

.tk-cinema__play:hover .tk-play,
.tk-cinema__play:focus-visible .tk-play {
	background: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	transform: translate(-50%, -50%) scale(1.1);
}

.tk-cinema__play:hover .tk-play::after,
.tk-cinema__play:focus-visible .tk-play::after {
	border-left-color: var(--wp--preset--color--base);
}

.tk-cinema__play .tk-play::after {
	border-width: 16px 0 16px 26px;
}

/* Streaming links inside the hero: centered, legible over the image */
.tk-cinema .tk-stream-links {
	justify-content: center;
	margin-block: 0.4rem 0;
}

.tk-cinema .tk-stream-btn {
	background: rgba(10, 10, 12, 0.5);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.tk-cinema .tk-stream-btn:hover,
.tk-cinema .tk-stream-btn:focus {
	background: var(--wp--preset--color--gold);
}

/* Scroll cue */
.tk-scrollcue {
	position: absolute;
	bottom: 2rem;
	left: 50%;
	z-index: 3;
	width: 1px;
	height: 56px;
	background: rgba(244, 241, 232, 0.25);
	overflow: hidden;
}

.tk-scrollcue::after {
	content: "";
	position: absolute;
	top: -40%;
	left: 0;
	width: 100%;
	height: 40%;
	background: var(--wp--preset--color--gold);
	animation: tk-scrollcue 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes tk-scrollcue {
	to {
		top: 110%;
	}
}

/* ---- Atmosphere: the page itself is lit, not flat -------------------
   Two fixed layers behind all content (body's background propagates to
   the canvas, so z-index:-1 still paints above it):
   ::before — the lighting rig: warm spill from above, a breath of
   Polska red low-right, corners falling to true black. Fixed, so the
   page scrolls through the light. Breathes over 45s.
   ::after — fine grit at ~1% so large empty blacks never read as flat
   digital pixels; doubles as dither for the gradients beneath it. */

body::before,
body::after {
	content: "";
	position: fixed;
	z-index: -1;
	pointer-events: none;
}

body::before {
	inset: 0;
	background:
		radial-gradient(120% 90% at 50% -20%, rgba(233, 185, 73, 0.1), transparent 62%),
		radial-gradient(70% 55% at 50% 42%, rgba(244, 241, 232, 0.035), transparent 70%),
		radial-gradient(80% 60% at 88% 108%, rgba(213, 35, 46, 0.055), transparent 65%),
		radial-gradient(150% 125% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
	animation: tk-atmo 45s ease-in-out infinite alternate;
}

@keyframes tk-atmo {
	from {
		opacity: 0.85;
	}
	to {
		opacity: 1;
	}
}

body::after {
	inset: -60%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
	opacity: 0.1;
	animation: tk-grain 1.8s steps(1, end) infinite;
}

/* ---- Ambient haze --------------------------------------------------
   One huge, slow-breathing radial in key gold — sodium streetlight
   through smoke. Applied only to flat typographic surfaces (roster,
   merch band, footer); photography sections carry their own light.
   Alpha is deliberately whisper-quiet: it should be felt, not seen. */

.tk-haze {
	position: relative;
	overflow: clip;
}

.tk-haze::after {
	content: "";
	position: absolute;
	inset: -25%;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(
		ellipse 42% 34% at var(--tk-haze-x, 50%) var(--tk-haze-y, 55%),
		rgba(233, 185, 73, var(--tk-haze-a, 0.1)),
		transparent 70%
	);
	animation: tk-haze-drift 36s ease-in-out infinite alternate;
}

@keyframes tk-haze-drift {
	from {
		transform: translate3d(-3%, -2%, 0) scale(1);
		opacity: 0.7;
	}
	to {
		transform: translate3d(3%, 2.5%, 0) scale(1.18);
		opacity: 1;
	}
}

/* Placement per surface */
.tk-haze--roster {
	--tk-haze-x: 62%;
	--tk-haze-y: 45%;
	--tk-haze-a: 0.075;
}

.tk-haze--footer {
	--tk-haze-x: 26%;
	--tk-haze-y: 24%;
	--tk-haze-a: 0.09;
}

/* ---- Kickers & editorial numbering ------------------------------- */

.tk-kicker {
	margin: 0;
	color: var(--wp--preset--color--gold);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.tk-kicker::before {
	content: "";
	display: inline-block;
	width: 2rem;
	height: 1px;
	background: var(--wp--preset--color--gold);
	vertical-align: middle;
	margin-right: 0.9rem;
}

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

@keyframes tk-fade-up {
	from {
		opacity: 0;
		transform: translateY(28px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ---- Marquee ticker (tilted, streetwear) ------------------------ */

.tk-marquee {
	overflow: hidden;
	border-top: 1px solid rgba(233, 185, 73, 0.35);
	border-bottom: 1px solid rgba(233, 185, 73, 0.35);
	background: var(--wp--preset--color--base);
	padding-block: 0.9rem;
	white-space: nowrap;
	/* Tilt without scale: widen via negative margins instead, so the
	   rotated strip never pokes past the viewport (no horizontal scroll) */
	width: calc(100% + 6rem);
	margin-left: -3rem !important;
	margin-right: -3rem;
	transform: rotate(-1.4deg);
	margin-block: 1.5rem;
}

/* Safety net: clip any full-bleed transform overhang without creating a
   scroll container (overflow:hidden here would break position:sticky) */
html {
	overflow-x: clip;
}

/* On phones the constrained content box is narrow, so the desktop-tuned
   `calc(100% + 6rem)` widening overshoots the viewport and creates a
   horizontal scrollbar. Pin the strip to exactly the viewport width (no
   scrollbar on mobile, so 100vw is safe) — the ~1° tilt overhang left is
   sub-pixel and absorbed by the html clip above. */
@media (max-width: 600px) {
	.tk-marquee {
		width: 100vw;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw);
		/* Drop the tilt on mobile: a rotated strip always overhangs the
		   viewport, and iOS Safari doesn't reliably honour the html clip,
		   so the overhang becomes a horizontal scrollbar. No tilt = no
		   overhang = guaranteed no overflow. */
		transform: none;
	}
}

.tk-marquee__track {
	display: inline-block;
	animation: tk-marquee-scroll 36s linear infinite;
	font-family: var(--wp--preset--font-family--anton);
	font-size: 1.1rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.tk-marquee__track span {
	padding-inline: 1.6rem;
}

@keyframes tk-marquee-scroll {
	to {
		transform: translateX(-50%);
	}
}

.tk-marquee:hover .tk-marquee__track {
	animation-play-state: paused;
}

/* ---- Section heads ---------------------------------------------- */

.tk-section-head .wp-block-heading {
	font-size: var(--wp--preset--font-size--xx-large);
}

/* Ghost/outline display text for oversized section labels */
.tk-outline {
	color: transparent;
	-webkit-text-stroke: 1px rgba(244, 241, 232, 0.22);
}

/* Keylines + kicker dashes draw themselves in when their section head
   reveals (threekey.js adds .tk-reveal, then .tk-in on intersection).
   Without JS neither class lands and they render fully drawn. */
.tk-section-head .tk-keyline,
.tk-section-head .tk-kicker::before {
	transform-origin: 0 50%;
}

.tk-section-head.tk-reveal .tk-keyline,
.tk-section-head.tk-reveal .tk-kicker::before {
	transform: scaleX(0);
}

.tk-section-head.tk-in .tk-keyline,
.tk-section-head.tk-in .tk-kicker::before {
	transform: scaleX(1);
	transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}

/* ---- Video cards ------------------------------------------------ */

.tk-video-card {
	position: relative;
}

.tk-video-thumb {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 0;
	border: none;
	background: var(--wp--preset--color--surface);
	cursor: pointer;
	overflow: hidden;
}

.tk-video-thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.55) contrast(1.02);
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

.tk-video-thumb:hover img,
.tk-video-thumb:focus-visible img {
	transform: scale(1.06);
	filter: saturate(1.15) brightness(1.06);
}

/* Camera-viewfinder corner brackets snap in on hover */
.tk-video-thumb::before {
	content: "";
	position: absolute;
	inset: 0.9rem;
	z-index: 2;
	pointer-events: none;
	--tk-vf: var(--wp--preset--color--gold);
	background:
		linear-gradient(var(--tk-vf), var(--tk-vf)) left top / 18px 2px,
		linear-gradient(var(--tk-vf), var(--tk-vf)) left top / 2px 18px,
		linear-gradient(var(--tk-vf), var(--tk-vf)) right top / 18px 2px,
		linear-gradient(var(--tk-vf), var(--tk-vf)) right top / 2px 18px,
		linear-gradient(var(--tk-vf), var(--tk-vf)) left bottom / 18px 2px,
		linear-gradient(var(--tk-vf), var(--tk-vf)) left bottom / 2px 18px,
		linear-gradient(var(--tk-vf), var(--tk-vf)) right bottom / 18px 2px,
		linear-gradient(var(--tk-vf), var(--tk-vf)) right bottom / 2px 18px;
	background-repeat: no-repeat;
	opacity: 0;
	transform: scale(1.05);
	transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.tk-video-thumb:hover::before,
.tk-video-thumb:focus-visible::before {
	opacity: 1;
	transform: none;
}

/* Hero + single variants stay full colour */
.tk-video-card--hero .tk-video-thumb img,
.tk-video-card--single .tk-video-thumb img {
	filter: none;
}

.tk-video-thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(10, 10, 12, 0.65) 100%);
	pointer-events: none;
}

/* Play button */
.tk-play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 72px;
	height: 72px;
	transform: translate(-50%, -50%);
	border: 2px solid rgba(244, 241, 232, 0.85);
	border-radius: 50%;
	background: rgba(10, 10, 12, 0.55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
	z-index: 1;
}

.tk-play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent var(--wp--preset--color--contrast);
}

.tk-video-thumb:hover .tk-play,
.tk-video-thumb:focus-visible .tk-play {
	background: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	transform: translate(-50%, -50%) scale(1.12);
}

.tk-video-thumb:hover .tk-play::after,
.tk-video-thumb:focus-visible .tk-play::after {
	border-left-color: var(--wp--preset--color--base);
}

.tk-video-info {
	padding-top: 0.9rem;
}

.tk-video-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--anton);
	font-size: 1.35rem;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.tk-video-title a {
	text-decoration: none;
}

.tk-video-kicker {
	margin: 0 0 0.4rem;
	color: var(--wp--preset--color--gold);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

/* Hero (cinematic) variant: full-width, info overlaid */
.tk-video-card--hero .tk-video-thumb {
	aspect-ratio: 16 / 9;
	max-height: 78vh;
}

.tk-video-card--hero .tk-video-thumb::after {
	background: linear-gradient(180deg, transparent 35%, rgba(10, 10, 12, 0.88) 100%);
}

.tk-video-card--hero .tk-play {
	width: 104px;
	height: 104px;
}

.tk-video-card--hero .tk-play::after {
	border-width: 17px 0 17px 28px;
}

.tk-video-card--hero .tk-video-info {
	position: absolute;
	left: clamp(1.25rem, 5vw, 4rem);
	right: clamp(1.25rem, 5vw, 4rem);
	bottom: clamp(1.25rem, 4vw, 3rem);
	padding: 0;
	pointer-events: none;
}

.tk-video-card--hero .tk-video-info a {
	pointer-events: auto;
}

.tk-video-card--hero .tk-video-title {
	font-size: clamp(2rem, 6vw, 4.5rem);
}

/* Video wall grid */
.tk-video-wall {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem 1.5rem;
}

@media (max-width: 1023px) {
	.tk-video-wall {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 599px) {
	.tk-video-wall {
		grid-template-columns: 1fr;
	}
}

/* ---- Lightbox ---------------------------------------------------- */

.tk-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(5, 5, 6, 0.92);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.tk-modal--open {
	opacity: 1;
}

.tk-modal-inner {
	position: relative;
	width: min(1200px, 100%);
	transform: translateY(16px) scale(0.985);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tk-modal--open .tk-modal-inner {
	transform: none;
}

.tk-modal-frame {
	aspect-ratio: 16 / 9;
	background: #000;
	box-shadow: 0 0 80px rgba(233, 185, 73, 0.14);
}

.tk-modal-frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.tk-modal-close {
	position: absolute;
	top: -3rem;
	right: 0;
	padding: 0.4rem 0.9rem;
	border: 1px solid rgba(244, 241, 232, 0.4);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-size: 1.1rem;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.tk-modal-close:hover,
.tk-modal-close:focus-visible {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--gold);
}

/* ---- Scroll reveal ------------------------------------------------
   Typed reveals, assigned by threekey.js:
   default        fade + rise
   --slide        roster rows enter from the left
   --media        video thumbs rack-focus in: soft blur + slight zoom
                  pulling sharp, like a lens finding the frame
   Release-strip cards cascade in from the right (scroll direction). */

.tk-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.tk-reveal.tk-in {
	opacity: 1;
	transform: none;
}

.tk-reveal--slide {
	transform: translateX(-36px);
}

.tk-release-strip .tk-reveal:not(.tk-in) {
	transform: translateX(48px);
}

.tk-reveal--media {
	transform: translateY(14px);
}

.tk-reveal--media:not(.tk-in) .tk-video-thumb img {
	transform: scale(1.08);
	filter: blur(14px) saturate(0.55) contrast(1.02);
}

/* Hero + single variants are full colour at rest — blur only */
.tk-video-card--hero.tk-reveal--media:not(.tk-in) .tk-video-thumb img,
.tk-video-card--single.tk-reveal--media:not(.tk-in) .tk-video-thumb img {
	filter: blur(14px);
}

/* Card hover: lift + gold glow */
.tk-card,
.wp-block-post-template .wp-block-post-featured-image img {
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.tk-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(233, 185, 73, 0.35), 0 0 42px rgba(233, 185, 73, 0.08);
}

/* ---- Artist roster (typographic) --------------------------------- */

.tk-roster {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tk-roster__row {
	border-bottom: 1px solid #26262d;
}

.tk-roster__row:first-child {
	border-top: 1px solid #26262d;
}

.tk-roster__row a {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 0.9rem 0.25rem;
	text-decoration: none;
	transition: padding-left 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
}

/* Photo chip: desaturated until the row is hovered */
.tk-roster__thumb {
	flex: none;
	width: 72px;
	height: 72px;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}

.tk-roster__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.4) contrast(1.02);
	transition: filter 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.tk-roster__row a:hover .tk-roster__thumb img,
.tk-roster__row a:focus-visible .tk-roster__thumb img {
	filter: saturate(1.1);
	transform: scale(1.07);
}

/* No-photo artists: subtle key-gold square keeps the grid rhythm */
.tk-roster__thumb--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #26262d;
}

.tk-roster__thumb--empty::after {
	content: "\1F5Dd\FE0E";
	color: rgba(233, 185, 73, 0.55);
	font-size: 1.5rem;
}

.tk-roster__name {
	font-family: var(--wp--preset--font-family--anton);
	font-size: clamp(1.6rem, 4.5vw, 3rem);
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--contrast);
	transition: color 0.25s ease;
}

.tk-roster__tag {
	flex: 1;
	color: var(--wp--preset--color--muted);
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tk-roster__arrow {
	color: var(--wp--preset--color--muted);
	font-size: 1.3rem;
	transition: color 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tk-roster__row a:hover,
.tk-roster__row a:focus-visible {
	padding-left: 1rem;
}

.tk-roster__row a:hover .tk-roster__name,
.tk-roster__row a:focus-visible .tk-roster__name {
	color: var(--wp--preset--color--gold);
}

.tk-roster__row a:hover .tk-roster__arrow,
.tk-roster__row a:focus-visible .tk-roster__arrow {
	color: var(--wp--preset--color--gold);
	transform: translate(4px, -4px);
}

@media (max-width: 599px) {
	.tk-roster__tag {
		display: none;
	}
}

/* ---- Horizontal release strip ------------------------------------ */

.tk-release-strip .wp-block-post-template {
	display: flex !important;
	gap: 1.4rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 1.2rem;
	margin: 0;
	list-style: none;
	/* No native scrollbar — the paging arrows and right-edge fade carry
	   the affordance; wheel/trackpad/drag scrolling is unaffected */
	scrollbar-width: none;
	/* Netflix-style: full-bleed scroll area, but the first card aligns
	   with the wide grid edge and cards run off the right of the window */
	padding-inline-start: max(var(--wp--preset--spacing--30), calc((100vw - var(--wp--style--global--wide-size)) / 2));
	padding-inline-end: max(var(--wp--preset--spacing--30), calc((100vw - var(--wp--style--global--wide-size)) / 2));
	scroll-padding-inline-start: max(var(--wp--preset--spacing--30), calc((100vw - var(--wp--style--global--wide-size)) / 2));
}

.tk-release-strip .wp-block-post-template::-webkit-scrollbar {
	display: none;
}

.tk-release-strip .wp-block-post-template > li {
	flex: 0 0 clamp(300px, 34vw, 460px);
	scroll-snap-align: start;
	margin: 0;
}

/* Right-edge fade: signals there's more row off-screen */
.tk-release-strip {
	position: relative;
}

.tk-release-strip::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: clamp(60px, 8vw, 140px);
	background: linear-gradient(90deg, transparent, rgba(10, 10, 12, 0.9));
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.3s ease;
}

.tk-release-strip.tk-strip--end::after {
	opacity: 0;
}

/* Prev / next paging arrows */
.tk-strip-nav {
	position: absolute;
	top: 38%;
	z-index: 5;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(233, 185, 73, 0.6);
	border-radius: 50%;
	background: rgba(10, 10, 12, 0.75);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--wp--preset--color--contrast);
	font-size: 1.2rem;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.25s ease, transform 0.25s ease;
}

.tk-strip-nav:hover,
.tk-strip-nav:focus-visible {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--base);
	transform: scale(1.06);
}

.tk-strip-nav--prev {
	left: 1.25rem;
}

.tk-strip-nav--next {
	right: 1.25rem;
}

.tk-strip-nav[disabled] {
	opacity: 0;
	pointer-events: none;
}

.tk-release-strip .wp-block-post-featured-image img {
	filter: saturate(0.55);
	transition: filter 0.4s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.tk-release-strip li:hover .wp-block-post-featured-image img {
	filter: saturate(1.15);
	transform: translateY(-4px);
}

/* ---- Merch band (ghost type) -------------------------------------- */

.tk-merch {
	position: relative;
	overflow: hidden;
}

/* Same running film grain as the cinema hero, dialled way down */
.tk-merch::before {
	content: "";
	position: absolute;
	inset: -60%;
	z-index: 0;
	pointer-events: none;
	opacity: 0.3;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
	animation: tk-grain 1.4s steps(1, end) infinite;
}

.tk-merch__ghost {
	position: absolute;
	top: 50%;
	left: 50%;
	/* Core's constrained layout caps children at content-size (720px);
	   translate(-50%) then centres that BOX while the nowrap text
	   overflows it rightward — uncap so the text itself centres */
	max-width: none;
	/* --tk-drift is a slow scroll parallax set by threekey.js */
	transform: translate(-50%, calc(-50% + var(--tk-drift, 0px)));
	z-index: 0;
	font-family: var(--wp--preset--font-family--anton);
	font-size: clamp(8rem, 24vw, 22rem);
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1px rgba(233, 185, 73, 0.16);
	pointer-events: none;
	user-select: none;
}

.tk-merch > *:not(.tk-merch__ghost) {
	position: relative;
	z-index: 1;
}

/* The root blockGap leaves a black slit between the last section and
   the footer's top border — sections supply their own spacing, so the
   footer sits flush. (body-prefixed to outrank global-styles layout
   CSS regardless of print order.) */
body .wp-site-blocks > footer {
	margin-block-start: 0;
}

/* ---- Footer: end-credits layout ------------------------------------
   Row 1: oversized wordmark + socials, bottom-aligned.
   Row 2: column grid — display-type nav, listen links, contact.
   Row 3: bottom bar, right-padded so the floating basket never
   overlaps it. */

.tk-footer__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 2rem 3rem;
}

.tk-footer-logo {
	display: block;
	width: clamp(220px, 24vw, 360px);
	height: auto;
}

.tk-footer__strap {
	margin: 1.5rem 0 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.85rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* Socials are a labelled group like the link columns below, its bottom
   edge sharing a baseline with the strap (head row is flex-end) */
.tk-footer__follow .tk-social {
	margin-top: 1.1rem;
}

/* Link columns */

.tk-footer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(2.5rem, 5vw, 4rem) 2rem;
	margin-top: clamp(3.5rem, 8vw, 6rem);
}

.tk-footer-nav {
	list-style: none;
	margin: 1.2rem 0 0;
	padding: 0;
}

.tk-footer-nav li + li {
	margin-top: 0.35rem;
}

.tk-footer-nav a {
	display: inline-flex;
	align-items: baseline;
	gap: 0.7rem;
	font-family: var(--wp--preset--font-family--anton);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--contrast);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
}

.tk-footer-nav a:hover,
.tk-footer-nav a:focus-visible {
	transform: translateX(8px);
	color: var(--wp--preset--color--gold);
}

.tk-footer-nav__no {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--gold);
	opacity: 0.8;
}

.tk-footer-listen {
	list-style: none;
	margin: 1.4rem 0 0;
	padding: 0;
}

.tk-footer-listen li + li {
	margin-top: 0.75rem;
}

.tk-footer-listen a {
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

.tk-footer-listen a span {
	display: inline-block;
	margin-left: 0.4rem;
	color: var(--wp--preset--color--gold);
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.tk-footer-listen a:hover span,
.tk-footer-listen a:focus-visible span {
	transform: translate(3px, -3px);
}

.tk-footer-contact {
	margin: 1.4rem 0 0;
	color: var(--wp--preset--color--muted);
	line-height: 2;
}

.tk-footer-contact a {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.tk-footer-drop {
	margin: 1.6rem 0 0;
}

/* Bottom bar — padding-right keeps clear of the floating basket */

.tk-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1rem 2.5rem;
	margin-top: clamp(3.5rem, 8vw, 6rem);
	border-top: 1px solid #26262d;
	padding-top: 1.4rem;
	padding-right: clamp(5.5rem, 9vw, 8rem);
}

.tk-footer-copy {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.85rem;
}

.tk-footer-tags {
	margin: 0;
	color: var(--wp--preset--color--gold);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.tk-totop {
	padding: 0.5rem 1.1rem;
	border: 1px solid rgba(244, 241, 232, 0.3);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.tk-totop:hover,
.tk-totop:focus-visible {
	background: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--base);
}

/* ---- WooCommerce ------------------------------------------------- */

/* Keep the catalogue focused on the products. */
.woocommerce-result-count,
.woocommerce-ordering,
.woocommerce-breadcrumb {
	display: none !important;
}

/* Safety net: zoom is disabled in functions.php, but if the full-res
   .zoomImg overlay ever loads it must never lay out (1000px = overflow) */
.woocommerce-product-gallery .zoomImg {
	display: none !important;
}

/* Product grid: WooCommerce's default is a float-based `columns-4` layout
   whose content-box card widths + margins tile unevenly and stagger on
   mobile. Override with a plain responsive CSS grid (3 / 2 / 1). */
.woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin: 0 !important;
	padding: 0;
	list-style: none;
}

/* Kill WooCommerce's clearfix pseudo-elements (they add phantom grid rows) */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none !important;
}

/* Give the single available T-shirt enough room to show its artwork. */
.woocommerce ul.products:has(> li.product:only-child) {
	grid-template-columns: minmax(0, 640px);
	justify-content: center;
}

.tk-shipping-note {
	font-size: 0.9rem;
	color: var(--wp--preset--color--gold);
}

.tk-store-switcher {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin-bottom: 2rem;
}
.tk-store-switcher a {
	display: inline-flex;
	align-items: center;
	padding: 0.8rem 1.25rem !important;
	border: 1px solid #48484f;
	text-decoration: none;
	background-image: none !important;
	font-weight: 700;
	line-height: 1.25;
}
.tk-store-switcher a[aria-current="page"] {
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold);
	background-color: #211d12;
}
.tk-store-switcher a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.tk-drawer__item-variation {
	margin: 0.25rem 0;
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 899px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 599px) {
	.woocommerce ul.products {
		grid-template-columns: 1fr;
		gap: 1.2rem;
	}
}

/* Product cards */
.woocommerce ul.products li.product {
	/* Neutralise WooCommerce's float/width/margin so the grid controls layout */
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	box-sizing: border-box;
	background: var(--wp--preset--color--surface);
	padding: 1.1rem 1.1rem 1.5rem;
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(233, 185, 73, 0.35);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .product_title {
	font-family: var(--wp--preset--font-family--anton);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--contrast);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.35rem;
	padding-top: 0.9rem;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
	color: var(--wp--preset--color--gold);
	font-weight: 600;
	letter-spacing: 0.08em;
}

.woocommerce div.product p.price {
	font-size: 1.4rem;
}

/* Buttons: match the theme's gold squared style */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce button.button.alt,
.woocommerce input.button,
.wc-block-components-button {
	background: var(--wp--preset--color--gold) !important;
	color: var(--wp--preset--color--base) !important;
	border-radius: 0 !important;
	font-family: var(--wp--preset--font-family--archivo) !important;
	font-size: 0.85rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	padding: 0.8rem 1.6rem !important;
	transition: background-color 0.2s ease !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wc-block-components-button:hover {
	background: var(--wp--preset--color--contrast) !important;
}

/* Quantity + forms on dark */
.woocommerce div.product form.cart .quantity .qty,
.woocommerce-page select,
.woocommerce-page input[type="text"],
.woocommerce-page input[type="email"],
.woocommerce-page input[type="tel"] {
	background: var(--wp--preset--color--surface);
	border: 1px solid #26262d;
	color: var(--wp--preset--color--contrast);
	padding: 0.6rem;
}

/* Single product: tabs + notices */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding-left: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: none;
	border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--wp--preset--color--muted);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.85rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--gold);
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
	font-size: 1.4rem;
}

.woocommerce-message,
.woocommerce-info {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	border-top-color: var(--wp--preset--color--gold);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--wp--preset--color--gold);
}

/* Related products heading */
.woocommerce .related.products > h2 {
	font-size: var(--wp--preset--font-size--x-large);
	margin-bottom: 1.5rem;
}

/* De-brand: hide generic Woo chrome (our drawer handles feedback) */
.woocommerce-notices-wrapper,
.wc-block-components-notice-banner,
.woocommerce-message,
.woocommerce-info:not(.cart-empty),
.product_meta,
.wp-block-woocommerce-product-meta,
.woocommerce-product-gallery__trigger {
	display: none !important;
}

/* Empty cart: kill the sad-face icon + dotted rule, brand the message */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	display: none;
}

.wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots {
	display: none;
}

.wc-block-cart__empty-cart__title {
	font-size: var(--wp--preset--font-size--x-large);
}

/* ---- Floating basket ---------------------------------------------- */

.tk-basket {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 80;
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(233, 185, 73, 0.6);
	border-radius: 50%;
	background: rgba(10, 10, 12, 0.85);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tk-basket svg {
	width: 26px;
	height: 26px;
}

.tk-basket:hover,
.tk-basket:focus-visible {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--base);
	transform: translateY(-4px);
}

.tk-basket__count {
	position: absolute;
	top: -5px;
	right: -5px;
	min-width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-inline: 6px;
	border-radius: 12px;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.75rem;
	font-weight: 700;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.tk-basket--filled .tk-basket__count {
	opacity: 1;
	transform: scale(1);
}

/* Add-to-cart in flight: dim + lock until the Store API answers */
.tk-adding {
	opacity: 0.6;
	pointer-events: none;
}

/* ---- Basket drawer ------------------------------------------------- */

.tk-drawer-backdrop {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(5, 5, 6, 0.7);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.tk-drawer-backdrop--show {
	opacity: 1;
}

.tk-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 95;
	width: min(430px, 92vw);
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--surface);
	border-left: 1px solid rgba(233, 185, 73, 0.35);
	transform: translateX(102%);
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.tk-drawer--open {
	transform: none;
}

.tk-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.4rem 1.6rem;
	border-bottom: 1px solid #26262d;
}

.tk-drawer__close {
	background: transparent;
	border: 1px solid rgba(244, 241, 232, 0.3);
	color: var(--wp--preset--color--contrast);
	padding: 0.35rem 0.75rem;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.tk-drawer__close:hover,
.tk-drawer__close:focus-visible {
	background: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--base);
}

.tk-drawer__items {
	flex: 1;
	overflow-y: auto;
	padding: 1.2rem 1.6rem;
}

.tk-drawer__empty {
	color: var(--wp--preset--color--muted);
	text-align: center;
	margin-top: 3rem;
	line-height: 1.9;
}

.tk-drawer__item {
	display: flex;
	gap: 1rem;
	padding-block: 1.1rem;
	border-bottom: 1px solid #26262d;
}

.tk-drawer__item img {
	width: 76px;
	height: 76px;
	object-fit: cover;
	flex: none;
}

.tk-drawer__item-info {
	flex: 1;
	min-width: 0;
}

.tk-drawer__item-name {
	margin: 0 0 0.2rem;
	font-family: var(--wp--preset--font-family--anton);
	font-size: 1.02rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.2;
}

.tk-drawer__item-price {
	margin: 0 0 0.6rem;
	color: var(--wp--preset--color--gold);
	font-weight: 600;
	font-size: 0.9rem;
	letter-spacing: 0.06em;
}

.tk-drawer__qty {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.tk-drawer__qty button {
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid rgba(244, 241, 232, 0.3);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.tk-drawer__qty button:hover,
.tk-drawer__qty button:focus-visible {
	background: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--base);
}

.tk-drawer__qty span {
	min-width: 1.4rem;
	text-align: center;
	font-weight: 600;
}

.tk-drawer__remove {
	margin-left: auto;
	width: auto !important;
	height: auto !important;
	padding: 0.2rem 0.6rem;
	border: none !important;
	background: transparent !important;
	color: var(--wp--preset--color--muted) !important;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

.tk-drawer__remove:hover,
.tk-drawer__remove:focus-visible {
	color: var(--wp--preset--color--red) !important;
}

.tk-drawer__foot {
	padding: 1.3rem 1.6rem 1.6rem;
	border-top: 1px solid #26262d;
}

.tk-drawer__total {
	display: flex;
	justify-content: space-between;
	margin: 0 0 1rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
}

.tk-drawer__total strong {
	color: var(--wp--preset--color--gold);
	font-size: 1.15rem;
	letter-spacing: 0.04em;
}

.tk-drawer__checkout {
	display: block;
	text-align: center;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--base) !important;
	padding: 0.95rem 1.5rem;
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	background-image: none !important;
	transition: background-color 0.2s ease;
}

.tk-drawer__checkout:hover,
.tk-drawer__checkout:focus-visible {
	background: var(--wp--preset--color--contrast);
}

.tk-drawer__note {
	margin: 0.9rem 0 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.78rem;
	text-align: center;
	letter-spacing: 0.06em;
}

/* ---- Cart & checkout blocks in brand colors ------------------------ */

.wc-block-components-sidebar-layout,
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart {
	color: var(--wp--preset--color--contrast);
}

.wc-block-components-panel,
.wc-block-cart-items,
.wc-block-components-totals-wrapper,
.wc-block-components-order-summary,
.wc-block-components-checkout-step {
	background: transparent;
	border-color: #26262d !important;
}

.wc-block-components-text-input input,
.wc-block-components-combobox .components-combobox-control__input,
.wc-block-components-form .wc-block-components-text-input input,
.wc-block-components-country-input input,
.wc-block-components-address-form input,
.wc-block-components-address-form select {
	background: var(--wp--preset--color--base) !important;
	border: 1px solid #26262d !important;
	color: var(--wp--preset--color--contrast) !important;
	border-radius: 0 !important;
}

.wc-block-components-text-input label,
.wc-block-components-checkbox__label,
.wc-block-components-totals-item,
.wc-block-cart-item__product .wc-block-components-product-name {
	color: var(--wp--preset--color--contrast) !important;
}

.wc-block-components-product-price,
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--wp--preset--color--gold) !important;
}

.wc-block-cart-item__quantity .wc-block-components-quantity-selector {
	border-radius: 0;
	border-color: #26262d;
}

.wc-block-components-quantity-selector input,
.wc-block-components-quantity-selector button {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* ---- Links: slide-in gold underline ------------------------------- */

main a,
footer a,
.wp-block-navigation a {
	text-decoration: none;
}

main a:not(.wp-element-button):not(.tk-chip):not(.tk-stream-btn):not(.tk-channel-filter):not(.button),
footer a:not(.wp-element-button):not(.tk-social__link):not(.tk-stream-btn),
.wp-block-navigation a {
	background-image: linear-gradient(90deg, var(--wp--preset--color--gold), #fff2c9);
	background-size: 0% 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	padding-bottom: 2px;
	transition: background-size 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
}

main a:not(.wp-element-button):not(.tk-chip):not(.tk-stream-btn):not(.tk-channel-filter):not(.button):hover,
main a:not(.wp-element-button):not(.tk-chip):not(.tk-stream-btn):not(.tk-channel-filter):not(.button):focus-visible,
footer a:not(.wp-element-button):not(.tk-social__link):not(.tk-stream-btn):hover,
footer a:not(.wp-element-button):not(.tk-social__link):not(.tk-stream-btn):focus-visible,
.wp-block-navigation a:hover,
.wp-block-navigation a:focus-visible {
	background-size: 100% 2px;
}

/* Prose links keep a gold tint so they're findable without the underline */
.wp-block-post-content p a:not(.wp-element-button),
.woocommerce-product-details__short-description a {
	color: var(--wp--preset--color--gold);
}

/* Components with their own hover language opt out of the underline */
.tk-roster__row a,
.tk-video-thumb,
.tk-video-title a,
.wp-block-post-featured-image a,
.wp-block-post-title a,
.woocommerce-LoopProduct-link,
.tk-release-strip a {
	background-image: none !important;
}

/* ---- Big social icons --------------------------------------------- */

.tk-social {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1.8rem;
}

.tk-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border: 1px solid rgba(244, 241, 232, 0.25);
	border-radius: 50%;
	color: var(--wp--preset--color--contrast);
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tk-social__link svg {
	width: 26px;
	height: 26px;
	display: block;
}

.tk-social__link:hover,
.tk-social__link:focus-visible {
	background: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--base);
	transform: translateY(-5px);
}

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

/* ---- Polish: outline buttons, page cuts, scrollbar ----------------- */

/* Outline button variant: gold keyline, fills on hover */
.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold);
}

.is-style-outline .wp-block-button__link:hover,
.is-style-outline .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--base);
}

/* Tactile press on every button-shaped control */
.wp-element-button:active,
.tk-stream-btn:active,
.tk-chip:active {
	transform: translateY(1px);
}

/* Page-to-page navigation cuts like an edit, not a reload. The AJAX
   router in threekey.js swaps <main> inside a same-document view
   transition; excluded pages (store, checkout) fall back to full loads
   and animate via this cross-document rule instead. */
@view-transition {
	navigation: auto;
}

html.tk-routing {
	cursor: progress;
}

/* The router focuses <main> after a swap for keyboard/AT users —
   don't draw the gold ring around the whole page for it. */
main:focus {
	outline: none;
}

::view-transition-old(root) {
	animation-duration: 0.18s;
}

::view-transition-new(root) {
	animation-duration: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

/* Branded scrollbar */
html {
	scrollbar-color: #3a3325 var(--wp--preset--color--base);
}

body::-webkit-scrollbar {
	width: 10px;
}

body::-webkit-scrollbar-track {
	background: var(--wp--preset--color--base);
}

body::-webkit-scrollbar-thumb {
	background: #3a3325;
	border-radius: 0;
}

body::-webkit-scrollbar-thumb:hover {
	background: var(--wp--preset--color--gold);
}

/* ---- Selection / focus polish ------------------------------------- */

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

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

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

@media (prefers-reduced-motion: reduce) {
	body::before,
	body::after,
	.tk-cinema__inner > *,
	.tk-cinema__bg img,
	.tk-cinema__title-ghost,
	.tk-cinema__grain,
	.tk-merch::before,
	.tk-haze::after,
	.tk-scrollcue::after,
	.tk-chip__pulse,
	.tk-marquee__track {
		animation: none;
	}

	.tk-reveal,
	.tk-section-head.tk-reveal .tk-keyline,
	.tk-section-head.tk-reveal .tk-kicker::before {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.tk-video-thumb img,
	.tk-video-thumb::before,
	.tk-card,
	.tk-play,
	.tk-release-strip .wp-block-post-featured-image img {
		transition: none;
	}
}