/* =========================================================================
   TSANEV KARATE — design system
   Deep burgundy / near-black / muted dusty pink / off-white / silver.
   Premium, athletic, disciplined. Sharp geometry, hairline rules,
   flat layered tone. No glow, no neon.
   ========================================================================= */

/* -------------------------------------------------------------- 1. Tokens */

:root {
	/* Brand */
	--tsk-brand: #643140;
	--tsk-burgundy-dark: #4b1d2d;
	--tsk-burgundy-mid: #804254;
	--tsk-rose: #9f5969;
	--tsk-pink: #bc8380;
	--tsk-ink: #0b0a0d;
	--tsk-white: #f4f1f2;
	--tsk-silver: #bfc0c3;

	/*
	 * Surfaces. Three distinct jobs, previously conflated:
	 *   band    — the alternating full-width section, wine-tinted so the
	 *             brand colour carries structure rather than only buttons
	 *   surface — cards, which must read as raised on BOTH ink and band
	 *   sunken  — inputs and empty media wells
	 * Tints lean wine (r > b > g), never neutral grey and never purple.
	 */
	--tsk-surface-0: #0b0a0d;
	--tsk-band: #140d12;
	--tsk-surface-1: #1c141a;
	--tsk-surface-2: #241a20;
	--tsk-surface-3: #2c2028;

	/* Text */
	--tsk-text: #f4f1f2;
	--tsk-text-2: #bfc0c3;
	/* Solid, not alpha: at 58% this composited to #76767a — 4.19:1, below AA. */
	--tsk-text-3: #9a9b9e;
	--tsk-text-on-brand: #f4f1f2;

	/* Hairlines */
	--tsk-line: rgba(191, 192, 195, 0.12);
	--tsk-line-2: rgba(191, 192, 195, 0.22);
	--tsk-line-rose: rgba(159, 89, 105, 0.4);

	/* Type */
	--tsk-font-display: "Oswald", "Barlow Condensed", "Archivo Narrow", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
	--tsk-font-body: "Inter", "Manrope", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
	--tsk-font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--tsk-track-display: 0.01em;
	--tsk-track-eyebrow: 0.24em;
	--tsk-track-btn: 0.16em;

	/* Rhythm */
	--tsk-container: 1280px;
	--tsk-gutter: clamp(1.25rem, 4vw, 3rem);
	--tsk-section-y: clamp(4.5rem, 8vw, 9rem);
	--tsk-cut: 14px; /* corner-cut size for the angular geometry */

	/* Motion */
	--tsk-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--tsk-fast: 180ms;
	--tsk-slow: 420ms;

	/* Elevation — flat and shadowed, never glowing */
	--tsk-shadow-1: 0 1px 0 rgba(244, 241, 242, 0.04), 0 18px 40px -24px rgba(0, 0, 0, 0.9);
	--tsk-shadow-2: 0 1px 0 rgba(244, 241, 242, 0.05), 0 34px 70px -32px rgba(0, 0, 0, 0.95);
}

/* -------------------------------------------------------- 2. Reset & base */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
}

body {
	margin: 0;
	background-color: var(--tsk-ink);
	color: var(--tsk-text);
	font-family: var(--tsk-font-body);
	font-size: 1rem;
	line-height: 1.7;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* `clip` rather than `hidden`: hidden would make <body> a scroll container,
	   which stops the sticky header sticking to the viewport. `clip` contains
	   any stray overflow without that side effect. Browsers without support
	   simply drop it, which is harmless — nothing currently overflows. */
	overflow-x: clip;
}

body.tsk-nav-open {
	overflow: hidden;
}

img,
svg,
video,
iframe {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--tsk-pink);
	outline-offset: 3px;
	border-radius: 1px;
}

::selection {
	background: var(--tsk-brand);
	color: var(--tsk-white);
}

hr {
	border: 0;
	border-top: 1px solid var(--tsk-line);
	margin: 3rem 0;
}

/* ---------------------------------------------------------- 3. Typography */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.6em;
	font-family: var(--tsk-font-display);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: var(--tsk-track-display);
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--tsk-white);
}

h1 { font-size: clamp(2.5rem, 1.4rem + 4.4vw, 4.5rem); }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); }
h3 { font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.75rem); }
h4 { font-size: 1.15rem; }

p {
	margin: 0 0 1.2em;
	text-wrap: pretty;
}

p:last-child {
	margin-bottom: 0;
}

strong { font-weight: 600; }

small { font-size: 0.8125rem; }

/* Bulgarian sets slightly wider — ease the tracking so headlines do not crowd. */
.tsk-lang-bg h1,
.tsk-lang-bg h2,
.tsk-lang-bg h3,
.tsk-lang-bg .tsk-hero__title {
	letter-spacing: 0;
}

.tsk-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin: 0 0 1.25rem;
	font-family: var(--tsk-font-display);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: var(--tsk-track-eyebrow);
	text-transform: uppercase;
	color: var(--tsk-pink);
}

.tsk-eyebrow__num {
	font-family: var(--tsk-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	color: var(--tsk-text-3);
}

.tsk-eyebrow__text {
	position: relative;
	padding-left: 2.6rem;
}

.tsk-eyebrow__text::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1.9rem;
	height: 1px;
	background: var(--tsk-rose);
}

/* ------------------------------------------------------------- 4. Layout */

.tsk-container {
	width: 100%;
	max-width: var(--tsk-container);
	margin-inline: auto;
	padding-inline: var(--tsk-gutter);
}

.tsk-container--narrow {
	max-width: 860px;
}

.tsk-section {
	position: relative;
	padding-block: var(--tsk-section-y);
}

.tsk-section--tight {
	padding-block: clamp(3rem, 5vw, 5rem);
}

/*
 * Alternating bands run tighter than the open sections. Identical padding on
 * every section reads as a metronome; alternating open/compressed gives the
 * page a pace without moving any content.
 */
.tsk-section--raised {
	padding-block: clamp(3.5rem, 6.2vw, 7rem);
	background: var(--tsk-band);
}

/* A hairline of brand colour where a band meets the ground. */
.tsk-section--raised::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--tsk-line-rose) 22%, var(--tsk-line-rose) 78%, transparent);
}

.tsk-section--burgundy {
	background: linear-gradient(158deg, var(--tsk-burgundy-dark) 0%, #2a1019 62%, var(--tsk-ink) 100%);
}

/* A hairline that runs the width of the section, used to separate bands. */
.tsk-section + .tsk-section::before {
	content: "";
	position: absolute;
	inset-inline: var(--tsk-gutter);
	top: 0;
	height: 1px;
	background: var(--tsk-line);
}

/* Bands draw their own burgundy hairline via ::after — suppress the neutral one. */
.tsk-section--burgundy::before,
.tsk-section--raised::before,
.tsk-section--flush::before {
	display: none;
}

.tsk-section-head {
	max-width: 46rem;
	margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

.tsk-section-head--center {
	margin-inline: auto;
	text-align: center;
}

.tsk-section-head--center .tsk-eyebrow {
	justify-content: center;
}

.tsk-section-title {
	margin-bottom: 1rem;
}

.tsk-section-lead {
	max-width: 44rem;
	color: var(--tsk-text-2);
	font-size: 1.0625rem;
}

.tsk-section-head--center .tsk-section-lead {
	margin-inline: auto;
}

.tsk-grid {
	display: grid;
	gap: clamp(1rem, 2vw, 1.75rem);
}

.tsk-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.tsk-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.tsk-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

/* ------------------------------------------------------- 5. Decorative bits */

/* Large low-contrast kanji used as typographic texture, never as decoration
   that carries meaning. */
.tsk-watermark {
	position: absolute;
	right: -0.08em;
	bottom: -0.22em;
	z-index: 0;
	font-family: var(--tsk-font-display);
	font-size: clamp(9rem, 26vw, 24rem);
	font-weight: 700;
	line-height: 0.8;
	letter-spacing: 0.02em;
	color: rgba(159, 89, 105, 0.05);
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
}

/* A single clipped corner — the theme's structural signature. */
.tsk-cut {
	clip-path: polygon(
		0 0,
		calc(100% - var(--tsk-cut)) 0,
		100% var(--tsk-cut),
		100% 100%,
		var(--tsk-cut) 100%,
		0 calc(100% - var(--tsk-cut))
	);
}

.tsk-cut-tr {
	clip-path: polygon(0 0, calc(100% - var(--tsk-cut)) 0, 100% var(--tsk-cut), 100% 100%, 0 100%);
}

.tsk-rule {
	height: 1px;
	border: 0;
	margin: 0;
	background: linear-gradient(90deg, var(--tsk-rose), transparent 62%);
}

/* --------------------------------------------------------------- 6. Buttons */

.tsk-btn {
	--btn-bg: var(--tsk-brand);
	--btn-fg: var(--tsk-text-on-brand);
	--btn-border: transparent;

	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	padding: 1rem 1.75rem;
	border: 1px solid var(--btn-border);
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-family: var(--tsk-font-display);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: var(--tsk-track-btn);
	text-transform: uppercase;
	white-space: nowrap;
	transition: background var(--tsk-fast) var(--tsk-ease), color var(--tsk-fast) var(--tsk-ease),
		border-color var(--tsk-fast) var(--tsk-ease), transform var(--tsk-fast) var(--tsk-ease);
	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.tsk-btn:hover,
.tsk-btn:focus-visible {
	background: var(--tsk-burgundy-mid);
	transform: translateY(-2px);
}

.tsk-btn:active {
	transform: translateY(0);
}

.tsk-btn__arrow {
	width: 1.4rem;
	height: 1px;
	background: currentColor;
	opacity: 0.75;
	transition: width var(--tsk-fast) var(--tsk-ease), opacity var(--tsk-fast) var(--tsk-ease);
}

.tsk-btn:hover .tsk-btn__arrow {
	width: 2.1rem;
	opacity: 1;
}

.tsk-btn--ghost {
	--btn-bg: transparent;
	--btn-fg: var(--tsk-white);
	--btn-border: var(--tsk-line-2);
}

.tsk-btn--ghost:hover,
.tsk-btn--ghost:focus-visible {
	background: rgba(159, 89, 105, 0.12);
	border-color: var(--tsk-rose);
}

.tsk-btn--line {
	--btn-bg: transparent;
	--btn-fg: var(--tsk-pink);
	--btn-border: transparent;
	padding: 0.4rem 0;
	clip-path: none;
}

.tsk-btn--line:hover,
.tsk-btn--line:focus-visible {
	background: transparent;
	color: var(--tsk-white);
	transform: none;
}

.tsk-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	align-items: center;
}

/* ---------------------------------------------------------- 7. Site header */

.tsk-skip {
	position: absolute;
	left: -9999px;
}

.tsk-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: rgba(11, 10, 13, 0.72);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	border-bottom: 1px solid var(--tsk-line);
	transition: background var(--tsk-fast) var(--tsk-ease), border-color var(--tsk-fast) var(--tsk-ease);
}

.tsk-header.is-scrolled {
	background: rgba(11, 10, 13, 0.94);
	border-bottom-color: var(--tsk-line-2);
}

.tsk-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 5rem;
}

/* Logo */

.tsk-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	color: var(--tsk-white);
}

.tsk-logo__mon {
	display: grid;
	place-items: center;
	color: var(--tsk-rose);
	transition: color var(--tsk-fast) var(--tsk-ease), transform var(--tsk-slow) var(--tsk-ease);
}

.tsk-logo:hover .tsk-logo__mon > svg {
	color: var(--tsk-pink);
	transform: rotate(45deg);
}

.tsk-logo__text {
	display: flex;
	flex-direction: column;
	font-family: var(--tsk-font-display);
	text-transform: uppercase;
	line-height: 1;
}

.tsk-logo__line1 {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	color: var(--tsk-text-3);
}

.tsk-logo__line2 {
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin-top: 0.22rem;
}

/* The uploaded club crest, standing in for the geometric mark. */
.tsk-logo__crest {
	display: block;
	height: 2.9rem;
	width: auto;
}

.tsk-footer__brand .tsk-logo__crest {
	height: 4.25rem;
}

/* Navigation */

.tsk-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tsk-nav__list a {
	position: relative;
	display: inline-block;
	padding-block: 0.4rem;
	font-family: var(--tsk-font-display);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tsk-text-2);
	transition: color var(--tsk-fast) var(--tsk-ease);
}

.tsk-nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 1px;
	background: var(--tsk-rose);
	transition: width var(--tsk-slow) var(--tsk-ease);
}

.tsk-nav__list a:hover,
.tsk-nav__list a:focus-visible,
.tsk-nav__list .current-menu-item > a,
.tsk-nav__list .current_page_item > a {
	color: var(--tsk-white);
}

.tsk-nav__list a:hover::after,
.tsk-nav__list a:focus-visible::after,
.tsk-nav__list .current-menu-item > a::after,
.tsk-nav__list .current_page_item > a::after {
	width: 100%;
}

/* Sub menus */

.tsk-nav__list li {
	position: relative;
}

.tsk-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: -1rem;
	min-width: 13rem;
	margin: 0;
	padding: 0.6rem 0;
	list-style: none;
	background: var(--tsk-surface-2);
	border: 1px solid var(--tsk-line);
	box-shadow: var(--tsk-shadow-2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--tsk-fast) var(--tsk-ease), transform var(--tsk-fast) var(--tsk-ease),
		visibility var(--tsk-fast) var(--tsk-ease);
}

.tsk-nav__list li:hover > .sub-menu,
.tsk-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.tsk-nav__list .sub-menu a {
	display: block;
	padding: 0.55rem 1rem;
	letter-spacing: 0.1em;
}

.tsk-nav__list .sub-menu a::after {
	display: none;
}

.tsk-nav__list .sub-menu a:hover {
	background: rgba(159, 89, 105, 0.14);
}

/* Header actions */

.tsk-header__actions {
	display: flex;
	align-items: center;
	gap: 1.1rem;
}

/* Facebook shortcut in the header, sized to match the language switcher. */
.tsk-header__social {
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	border: 1px solid var(--tsk-line-2);
	color: var(--tsk-text-2);
	transition: border-color var(--tsk-fast) var(--tsk-ease), color var(--tsk-fast) var(--tsk-ease),
		background var(--tsk-fast) var(--tsk-ease);
}

.tsk-header__social:hover {
	border-color: var(--tsk-rose);
	background: rgba(159, 89, 105, 0.14);
	color: var(--tsk-white);
}

/* Language switcher */

.tsk-lang {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--tsk-line-2);
}

.tsk-lang__item {
	padding: 0.4rem 0.7rem;
	font-family: var(--tsk-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--tsk-text-3);
	transition: background var(--tsk-fast) var(--tsk-ease), color var(--tsk-fast) var(--tsk-ease);
}

.tsk-lang__item + .tsk-lang__item {
	border-left: 1px solid var(--tsk-line-2);
}

.tsk-lang__item:hover {
	color: var(--tsk-white);
}

.tsk-lang__item.is-active {
	background: var(--tsk-brand);
	color: var(--tsk-white);
}

.tsk-lang--stacked {
	border: 0;
	gap: 0.5rem;
}

.tsk-lang--stacked .tsk-lang__item {
	border: 1px solid var(--tsk-line-2);
	padding: 0.5rem 0.9rem;
}

.tsk-lang--stacked .tsk-lang__item + .tsk-lang__item {
	border-left: 1px solid var(--tsk-line-2);
}

/* Burger */

.tsk-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--tsk-line-2);
	background: transparent;
}

.tsk-burger span {
	display: block;
	width: 1.15rem;
	height: 1.5px;
	margin-inline: auto;
	background: var(--tsk-white);
	transition: transform var(--tsk-fast) var(--tsk-ease), opacity var(--tsk-fast) var(--tsk-ease);
}

.tsk-burger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}

.tsk-burger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.tsk-burger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile drawer */

.tsk-drawer[hidden] {
	/* The breakpoint rule below sets display:flex, which would otherwise beat
	   the UA rule for [hidden] and leave a closed drawer on screen. */
	display: none !important;
}

.tsk-drawer {
	position: fixed;
	inset: 5rem 0 0;
	z-index: 89;
	display: none;
	flex-direction: column;
	gap: 2rem;
	padding: 2.5rem var(--tsk-gutter) 3rem;
	background: linear-gradient(170deg, var(--tsk-burgundy-dark) 0%, var(--tsk-ink) 58%);
	overflow-y: auto;
	opacity: 0;
	transform: translateY(-12px);
	transition: opacity var(--tsk-fast) var(--tsk-ease), transform var(--tsk-fast) var(--tsk-ease);
}

.tsk-drawer.is-open {
	opacity: 1;
	transform: translateY(0);
}

.tsk-drawer .tsk-nav__list {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.tsk-drawer .tsk-nav__list > li {
	border-bottom: 1px solid var(--tsk-line);
}

.tsk-drawer .tsk-nav__list a {
	padding-block: 1.05rem;
	font-size: 1.15rem;
	letter-spacing: 0.1em;
	color: var(--tsk-white);
}

.tsk-drawer .tsk-nav__list a::after {
	display: none;
}

.tsk-drawer .sub-menu {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0 0 0.6rem 1rem;
}

.tsk-drawer .sub-menu a {
	font-size: 0.9rem;
	color: var(--tsk-text-2);
}

.tsk-drawer__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: auto;
}

/* ------------------------------------------------------------------ 8. Hero */

.tsk-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	/* Deliberately short of full height so the burgundy figures strip shows
	   below the fold line and signals there is a page under the hero. */
	min-height: min(88svh, 52rem);
	/* Trimmed from 14vh: the hero was running to 99vh on content height alone,
	   so nothing showed beneath it. Type is untouched — only the air above. */
	padding-block: clamp(5rem, 9.5vh, 8rem) clamp(3rem, 6vh, 5rem);
	overflow: hidden;
	background: var(--tsk-ink);
	isolation: isolate;
}

.tsk-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.tsk-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Duotone: strip the photo to burgundy/silver rather than leaving it literal. */
	filter: grayscale(1) contrast(1.12) brightness(0.62);
}

/* Burgundy wash + bottom veil, layered flat. No bloom. */
.tsk-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(11, 10, 13, 0.55) 0%, rgba(11, 10, 13, 0.2) 38%, rgba(11, 10, 13, 0.96) 100%),
		linear-gradient(112deg, rgba(75, 29, 45, 0.85) 0%, rgba(100, 49, 64, 0.4) 46%, rgba(11, 10, 13, 0.35) 100%);
	mix-blend-mode: normal;
}

/* Fine diagonal texture — reads as woven tatami at low opacity. */
.tsk-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: repeating-linear-gradient(
		115deg,
		rgba(191, 192, 195, 0.05) 0px,
		rgba(191, 192, 195, 0.05) 1px,
		transparent 1px,
		transparent 7px
	);
	opacity: 0.5;
	pointer-events: none;
}

.tsk-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
}

.tsk-hero__title {
	margin: 0 0 1.5rem;
	font-family: var(--tsk-font-display);
	font-size: clamp(3rem, 1rem + 10vw, 9rem);
	font-weight: 700;
	line-height: 0.88;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: var(--tsk-white);
}

.tsk-hero__title span {
	display: block;
}

/* The middle word steps in and drops to outline — disciplined, not decorative. */
.tsk-hero__title span:nth-child(2) {
	padding-left: clamp(1.5rem, 7vw, 7rem);
	color: transparent;
	-webkit-text-stroke: 1px var(--tsk-pink);
}

.tsk-hero__title span:nth-child(3) {
	color: var(--tsk-pink);
}

/*
 * The line that says what the club actually does. It belongs inside the H1 —
 * the three display words are the motto, not a description of the page.
 */
.tsk-hero__title-sub {
	margin-top: clamp(1rem, 2vw, 1.6rem);
	font-size: clamp(1.0625rem, 0.85rem + 0.9vw, 1.5rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: none;
	color: var(--tsk-text-2);
}

.tsk-hero__lead {
	max-width: 38rem;
	margin-bottom: 2.5rem;
	color: var(--tsk-text-2);
	font-size: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
}

.tsk-hero__scroll {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 2rem;
	font-family: var(--tsk-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tsk-text-3);
}

.tsk-hero__scroll::after {
	content: "";
	width: 3.5rem;
	height: 1px;
	background: linear-gradient(90deg, var(--tsk-rose), transparent);
}

/* Vertical romaji rail on the right edge of the hero. */
.tsk-hero__rail {
	position: absolute;
	right: var(--tsk-gutter);
	top: 50%;
	transform: translateY(-50%) rotate(180deg);
	writing-mode: vertical-rl;
	font-family: var(--tsk-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--tsk-text-3);
	pointer-events: none;
}

/* ----------------------------------------------------------------- 9. Stats */

/*
 * The figures strip is the one full-width band high enough on the page to
 * carry the brand colour at scale. Neutral grey here was the main reason
 * burgundy read as a button colour rather than the identity.
 */
.tsk-stats {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	border-block: 1px solid rgba(244, 241, 242, 0.1);
	background: linear-gradient(100deg, var(--tsk-burgundy-dark) 0%, var(--tsk-brand) 58%, #3d1622 100%);
}

/* Same woven texture as the hero and CTA, so the burgundy bands read as a set. */
.tsk-stats::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		115deg,
		rgba(11, 10, 13, 0.16) 0px,
		rgba(11, 10, 13, 0.16) 1px,
		transparent 1px,
		transparent 9px
	);
	pointer-events: none;
}

.tsk-stat {
	position: relative;
	padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.25rem, 2.5vw, 2rem);
	border-right: 1px solid rgba(244, 241, 242, 0.12);
}

.tsk-stat:last-child {
	border-right: 0;
}

.tsk-stat__value {
	display: block;
	font-family: var(--tsk-font-display);
	font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);
	font-weight: 700;
	line-height: 1;
	color: var(--tsk-white);
}

.tsk-stat__value sup {
	font-size: 0.42em;
	color: var(--tsk-pink);
	vertical-align: super;
	margin-left: 0.15em;
}

.tsk-stat__label {
	display: block;
	margin-top: 0.7rem;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	/* On burgundy, not on ink — needs its own value. */
	color: rgba(244, 241, 242, 0.74);
}

/* ------------------------------------------------------- 10. Split feature */

.tsk-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

@media (min-width: 62rem) {
	.tsk-split {
		grid-template-columns: 1.05fr 1fr;
	}

	.tsk-split--reverse .tsk-split__media {
		order: -1;
	}
}

.tsk-split__media {
	position: relative;
}

.tsk-split__media img {
	width: 100%;
	filter: grayscale(0.85) contrast(1.08) brightness(0.82);
}

/* Offset burgundy frame behind the image. */
.tsk-split__media::before {
	content: "";
	position: absolute;
	inset: 1.5rem -1.5rem -1.5rem 1.5rem;
	border: 1px solid var(--tsk-line-rose);
	z-index: -1;
}

.tsk-split__body p {
	color: var(--tsk-text-2);
}

/* ---------------------------------------------------------- 11. Value cards */

.tsk-value {
	position: relative;
	padding: clamp(1.75rem, 3vw, 2.5rem);
	border: 1px solid var(--tsk-line);
	background: var(--tsk-surface-1);
	transition: border-color var(--tsk-fast) var(--tsk-ease), background var(--tsk-fast) var(--tsk-ease),
		transform var(--tsk-slow) var(--tsk-ease);
}

.tsk-value:hover {
	border-color: var(--tsk-line-rose);
	background: var(--tsk-surface-2);
	transform: translateY(-4px);
}

.tsk-value__num {
	display: block;
	margin-bottom: 1.4rem;
	font-family: var(--tsk-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	color: var(--tsk-rose);
}

.tsk-value__title {
	margin-bottom: 0.75rem;
	font-size: 1.25rem;
}

.tsk-value__text {
	margin: 0;
	color: var(--tsk-text-3);
	font-size: 0.9375rem;
}

/* -------------------------------------------------------- 12. Program cards */

.tsk-program {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--tsk-line);
	background: var(--tsk-surface-1);
	overflow: hidden;
	transition: border-color var(--tsk-fast) var(--tsk-ease), transform var(--tsk-slow) var(--tsk-ease);
}

.tsk-program:hover {
	border-color: var(--tsk-line-rose);
	transform: translateY(-4px);
}

.tsk-program__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--tsk-surface-3);
}

.tsk-program__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0.9) contrast(1.1) brightness(0.72);
	transition: transform var(--tsk-slow) var(--tsk-ease), filter var(--tsk-slow) var(--tsk-ease);
}

.tsk-program:hover .tsk-program__media img {
	transform: scale(1.04);
	filter: grayscale(0.55) contrast(1.1) brightness(0.8);
}

.tsk-program__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(75, 29, 45, 0.35) 0%, rgba(11, 10, 13, 0.85) 100%);
}

.tsk-program__age {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	padding: 0.5rem 1rem;
	background: var(--tsk-brand);
	font-family: var(--tsk-font-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tsk-white);
}

.tsk-program__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: clamp(1.5rem, 2.5vw, 2rem);
}

/* Item names sit a clear step above concept titles (.tsk-value__title, 1.25rem),
   which previously landed within 12% of each other and read as one level. */
.tsk-program__title {
	margin-bottom: 0.75rem;
	font-size: 1.5rem;
}

.tsk-program__text {
	margin-bottom: 1.5rem;
	color: var(--tsk-text-3);
	font-size: 0.9375rem;
}

.tsk-program__meta {
	margin: 0 0 1.5rem;
	padding: 1rem 0 0;
	border-top: 1px solid var(--tsk-line);
	display: grid;
	gap: 0.5rem;
}

/*
 * Label above value, not beside it. At 4-up these cards are ~275px wide
 * (~211px of content), and a side-by-side dt/dd wraps badly — especially in
 * Bulgarian, where "Тренировъчни дни" alone eats the row.
 */
.tsk-program__meta div {
	display: grid;
	gap: 0.15rem;
	font-size: 0.8125rem;
}

.tsk-program__meta dt {
	font-family: var(--tsk-font-display);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tsk-text-3);
}

.tsk-program__meta dd {
	margin: 0;
	color: var(--tsk-white);
	font-weight: 500;
}

.tsk-program__foot {
	margin-top: auto;
}

/* ------------------------------------------------------- 13. Schedule table */

.tsk-schedule {
	border: 1px solid var(--tsk-line);
	background: var(--tsk-surface-1);
	overflow-x: auto;
}

.tsk-schedule table {
	width: 100%;
	min-width: 44rem;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.tsk-schedule th {
	padding: 1.1rem clamp(1rem, 2vw, 1.75rem);
	background: var(--tsk-surface-2);
	border-bottom: 1px solid var(--tsk-line-2);
	font-family: var(--tsk-font-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: left;
	color: var(--tsk-text-2);
	white-space: nowrap;
}

.tsk-schedule td {
	padding: 1.15rem clamp(1rem, 2vw, 1.75rem);
	border-bottom: 1px solid var(--tsk-line);
	vertical-align: middle;
	color: var(--tsk-text-2);
}

.tsk-schedule tr:last-child td {
	border-bottom: 0;
}

.tsk-schedule tbody tr {
	transition: background var(--tsk-fast) var(--tsk-ease);
}

.tsk-schedule tbody tr:hover {
	background: rgba(159, 89, 105, 0.07);
}

.tsk-schedule__group {
	font-family: var(--tsk-font-display);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tsk-white);
}

.tsk-schedule__time {
	font-family: var(--tsk-font-mono);
	font-size: 0.875rem;
	color: var(--tsk-pink);
	white-space: nowrap;
}

.tsk-schedule__note {
	display: flex;
	gap: 0.9rem;
	margin-top: 1.5rem;
	padding: 1.1rem 1.35rem;
	border-left: 2px solid var(--tsk-rose);
	background: var(--tsk-surface-1);
	color: var(--tsk-text-3);
	font-size: 0.875rem;
}

/* ------------------------------------------------------------- 13b. Halls */

/*
 * Independent bordered cards, not a hairline-gap grid: seven halls never fill
 * the last row evenly, and a shared background would show through the empty
 * cells as a stray tinted block.
 */
.tsk-halls {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
}

.tsk-hall {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: clamp(1.5rem, 2.6vw, 2rem);
	border: 1px solid var(--tsk-line);
	background: var(--tsk-surface-1);
	transition: border-color var(--tsk-fast) var(--tsk-ease), background var(--tsk-fast) var(--tsk-ease),
		transform var(--tsk-slow) var(--tsk-ease);
}

.tsk-hall:hover {
	border-color: var(--tsk-line-rose);
	background: var(--tsk-surface-2);
	transform: translateY(-4px);
}

.tsk-hall__num {
	margin-bottom: 0.65rem;
	font-family: var(--tsk-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	color: var(--tsk-rose);
}

.tsk-hall__area {
	margin: 0;
	font-size: 1.1875rem;
	line-height: 1.15;
}

.tsk-hall__address {
	margin: 0;
	color: var(--tsk-text-2);
	font-size: 0.9375rem;
}

.tsk-hall__venue {
	margin: 0;
	color: var(--tsk-text-3);
	font-size: 0.875rem;
}

.tsk-hall__map {
	margin-top: auto;
	padding-top: 1.1rem;
	font-family: var(--tsk-font-display);
	font-size: 0.6875rem;
	letter-spacing: var(--tsk-track-btn);
	text-transform: uppercase;
}

.tsk-halls__note {
	display: flex;
	gap: 0.9rem;
	margin-top: 1.5rem;
	padding: 1.1rem 1.35rem;
	border-left: 2px solid var(--tsk-rose);
	background: var(--tsk-surface-1);
	color: var(--tsk-text-3);
	font-size: 0.875rem;
}

/* ---------------------------------------------------------- 14. Coach cards */

.tsk-coach {
	position: relative;
	display: block;
	border: 1px solid var(--tsk-line);
	background: var(--tsk-surface-1);
	overflow: hidden;
	transition: border-color var(--tsk-fast) var(--tsk-ease), transform var(--tsk-slow) var(--tsk-ease);
}

.tsk-coach:hover {
	border-color: var(--tsk-line-rose);
	transform: translateY(-4px);
}

.tsk-coach__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--tsk-surface-3);
}

.tsk-coach__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.14) brightness(0.78);
	transition: filter var(--tsk-slow) var(--tsk-ease), transform var(--tsk-slow) var(--tsk-ease);
}

.tsk-coach:hover .tsk-coach__media img {
	filter: grayscale(0.35) contrast(1.1) brightness(0.86);
	transform: scale(1.03);
}

.tsk-coach__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 42%, rgba(11, 10, 13, 0.92) 100%);
}

.tsk-coach__rank {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 1;
	padding: 0.35rem 0.7rem;
	border: 1px solid var(--tsk-line-rose);
	background: rgba(11, 10, 13, 0.7);
	font-family: var(--tsk-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	color: var(--tsk-pink);
}

.tsk-coach__body {
	position: relative;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.tsk-coach__name {
	margin-bottom: 0.3rem;
	font-size: 1.5rem;
}

.tsk-coach__role {
	margin: 0;
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tsk-rose);
}

.tsk-coach__creds {
	margin: 1rem 0 0;
	padding: 1rem 0 0;
	border-top: 1px solid var(--tsk-line);
	list-style: none;
	display: grid;
	gap: 0.4rem;
}

.tsk-coach__creds li {
	position: relative;
	padding-left: 1.1rem;
	font-size: 0.875rem;
	color: var(--tsk-text-3);
}

.tsk-coach__creds li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 5px;
	height: 5px;
	background: var(--tsk-rose);
	transform: rotate(45deg);
}

/* -------------------------------------------------------------- 15. Results */

.tsk-results {
	border-top: 1px solid var(--tsk-line);
}

.tsk-result {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.35rem 1.5rem;
	align-items: baseline;
	padding: clamp(1.25rem, 2.5vw, 1.75rem) 0;
	border-bottom: 1px solid var(--tsk-line);
	transition: background var(--tsk-fast) var(--tsk-ease), padding-inline var(--tsk-fast) var(--tsk-ease);
}

.tsk-result:hover {
	background: rgba(159, 89, 105, 0.06);
	padding-inline: 1rem;
}

@media (min-width: 48rem) {
	.tsk-result {
		grid-template-columns: 5.5rem 1fr auto auto;
		align-items: center;
	}
}

.tsk-result__year {
	font-family: var(--tsk-font-mono);
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	color: var(--tsk-text-3);
}

.tsk-result__event {
	margin: 0;
	font-family: var(--tsk-font-display);
	font-size: 1.0625rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--tsk-white);
}

.tsk-result__athlete {
	font-size: 0.875rem;
	color: var(--tsk-text-2);
}

.tsk-result__medal {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--tsk-font-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
}

.tsk-result__medal::before {
	content: "";
	width: 9px;
	height: 9px;
	transform: rotate(45deg);
	background: var(--tsk-silver);
}

.tsk-result__medal--gold {
	color: var(--tsk-pink);
}

.tsk-result__medal--gold::before {
	background: var(--tsk-pink);
}

.tsk-result__medal--silver {
	color: var(--tsk-silver);
}

.tsk-result__medal--silver::before {
	background: var(--tsk-silver);
}

.tsk-result__medal--bronze {
	color: var(--tsk-rose);
}

.tsk-result__medal--bronze::before {
	background: var(--tsk-rose);
}

.tsk-result__medal--place {
	color: var(--tsk-text-3);
}

.tsk-result__medal--place::before {
	background: var(--tsk-text-3);
}

/* ------------------------------------------------------ 15b. Press coverage */

.tsk-press {
	border-top: 1px solid var(--tsk-line);
}

/*
 * Rows, not cards: the headline is the content, and a row keeps a long
 * Bulgarian headline on one readable measure.
 */
.tsk-press__item {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.4rem;
	padding: clamp(1.25rem, 2.5vw, 1.75rem) 0;
	border-bottom: 1px solid var(--tsk-line);
	color: inherit;
	transition: background var(--tsk-fast) var(--tsk-ease), padding-inline var(--tsk-fast) var(--tsk-ease);
}

a.tsk-press__item:hover {
	background: rgba(159, 89, 105, 0.06);
	padding-inline: 1rem;
}

@media (min-width: 48rem) {
	.tsk-press__item {
		grid-template-columns: 9rem 1fr auto;
		align-items: baseline;
		gap: 0.4rem 1.5rem;
	}
}

.tsk-press__outlet {
	font-family: var(--tsk-font-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--tsk-track-btn);
	text-transform: uppercase;
	color: var(--tsk-pink);
}

.tsk-press__title {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	color: var(--tsk-white);
}

.tsk-press__date {
	font-family: var(--tsk-font-mono);
	font-size: 0.8125rem;
	color: var(--tsk-text-3);
}

.tsk-press__go {
	font-family: var(--tsk-font-display);
	font-size: 0.6875rem;
	letter-spacing: var(--tsk-track-btn);
	text-transform: uppercase;
	color: var(--tsk-text-3);
	white-space: nowrap;
	transition: color var(--tsk-fast) var(--tsk-ease);
}

.tsk-press__go::after {
	content: " →";
}

a.tsk-press__item:hover .tsk-press__go {
	color: var(--tsk-pink);
}

@media (min-width: 48rem) {
	/* The date drops under the headline so the link marker keeps the right edge. */
	.tsk-press__date {
		grid-column: 2;
		grid-row: 2;
	}
}

/* ----------------------------------------------------------- 16. News cards */

.tsk-post {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--tsk-line);
	background: var(--tsk-surface-1);
	transition: border-color var(--tsk-fast) var(--tsk-ease), transform var(--tsk-slow) var(--tsk-ease);
}

.tsk-post:hover {
	border-color: var(--tsk-line-rose);
	transform: translateY(-4px);
}

.tsk-post__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--tsk-surface-3);
}

.tsk-post__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0.9) contrast(1.08) brightness(0.76);
	transition: transform var(--tsk-slow) var(--tsk-ease), filter var(--tsk-slow) var(--tsk-ease);
}

.tsk-post:hover .tsk-post__media img {
	transform: scale(1.04);
	filter: grayscale(0.5) contrast(1.08) brightness(0.84);
}

.tsk-post__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: clamp(1.35rem, 2.5vw, 1.9rem);
}

.tsk-post__date {
	display: block;
	margin-bottom: 0.85rem;
	font-family: var(--tsk-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tsk-text-3);
}

.tsk-post__title {
	margin-bottom: 0.85rem;
	font-size: 1.2rem;
	line-height: 1.15;
}

.tsk-post__title a:hover {
	color: var(--tsk-pink);
}

.tsk-post__excerpt {
	margin-bottom: 1.5rem;
	color: var(--tsk-text-3);
	font-size: 0.9375rem;
}

.tsk-post__foot {
	margin-top: auto;
}

/* -------------------------------------------------------------- 17. Gallery */

.tsk-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	gap: 2px;
}

.tsk-gallery__item {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--tsk-surface-2);
}

.tsk-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.12) brightness(0.74);
	transition: transform var(--tsk-slow) var(--tsk-ease), filter var(--tsk-slow) var(--tsk-ease);
}

.tsk-gallery__item:hover img {
	transform: scale(1.05);
	filter: grayscale(0.2) contrast(1.06) brightness(0.92);
}

.tsk-gallery__item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(75, 29, 45, 0.28), rgba(11, 10, 13, 0.5));
	opacity: 1;
	transition: opacity var(--tsk-slow) var(--tsk-ease);
	pointer-events: none;
}

.tsk-gallery__item:hover::after {
	opacity: 0.35;
}

/* ------------------------------------------------------------- 18. CTA band */

.tsk-cta {
	position: relative;
	overflow: hidden;
	background: linear-gradient(104deg, var(--tsk-burgundy-dark) 0%, var(--tsk-brand) 54%, #3a1522 100%);
}

.tsk-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		115deg,
		rgba(11, 10, 13, 0.16) 0px,
		rgba(11, 10, 13, 0.16) 1px,
		transparent 1px,
		transparent 9px
	);
	pointer-events: none;
}

.tsk-cta__inner {
	position: relative;
	display: grid;
	gap: 2rem;
	align-items: center;
}

@media (min-width: 56rem) {
	.tsk-cta__inner {
		grid-template-columns: 1fr auto;
		gap: 3.5rem;
	}
}

.tsk-cta .tsk-eyebrow {
	color: var(--tsk-pink);
}

.tsk-cta__title {
	margin-bottom: 0.9rem;
	font-size: clamp(2rem, 1.2rem + 3.2vw, 3.5rem);
}

.tsk-cta__text {
	max-width: 36rem;
	margin: 0;
	color: rgba(244, 241, 242, 0.78);
}

.tsk-cta .tsk-btn--primary {
	--btn-bg: var(--tsk-white);
	--btn-fg: var(--tsk-burgundy-dark);
}

.tsk-cta .tsk-btn--primary:hover {
	background: var(--tsk-pink);
	color: var(--tsk-ink);
}

.tsk-cta__call {
	display: block;
	margin-top: 1rem;
	font-family: var(--tsk-font-mono);
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	color: rgba(244, 241, 242, 0.72);
}

.tsk-cta__call a:hover {
	color: var(--tsk-white);
}

/* ------------------------------------------------------- 19. Contact & form */

.tsk-contact-grid {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 62rem) {
	.tsk-contact-grid {
		grid-template-columns: 1fr 1.15fr;
	}
}

.tsk-contact-list {
	display: grid;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tsk-contact-item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
	align-items: start;
}

.tsk-contact-item__icon {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--tsk-line-rose);
	color: var(--tsk-rose);
}

.tsk-contact-item__label {
	display: block;
	margin-bottom: 0.25rem;
	font-family: var(--tsk-font-display);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tsk-text-3);
}

.tsk-contact-item__value {
	margin: 0;
	color: var(--tsk-white);
	white-space: pre-line;
}

.tsk-contact-item__value a:hover {
	color: var(--tsk-pink);
}

.tsk-map {
	margin-top: 2.5rem;
	border: 1px solid var(--tsk-line);
	filter: grayscale(1) contrast(0.9) brightness(0.72);
}

.tsk-map iframe {
	width: 100%;
	height: 22rem;
	border: 0;
}

/* Form */

.tsk-form {
	padding: clamp(1.75rem, 3.5vw, 3rem);
	border: 1px solid var(--tsk-line);
	background: var(--tsk-surface-1);
}

.tsk-form__title {
	margin-bottom: 1.75rem;
	font-size: 1.5rem;
}

.tsk-field {
	margin-bottom: 1.35rem;
}

.tsk-field__label {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--tsk-font-display);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tsk-text-2);
}

.tsk-field__req {
	color: var(--tsk-rose);
}

.tsk-field__hint {
	margin: 0.45rem 0 0;
	font-size: 0.8125rem;
	color: var(--tsk-text-3);
}

.tsk-field__error {
	margin: 0.45rem 0 0;
	font-size: 0.8125rem;
	color: var(--tsk-pink);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="password"],
select,
textarea {
	width: 100%;
	padding: 0.9rem 1rem;
	border: 1px solid var(--tsk-line-2);
	border-radius: 0;
	background: var(--tsk-surface-0);
	color: var(--tsk-white);
	font-family: inherit;
	font-size: 0.9375rem;
	transition: border-color var(--tsk-fast) var(--tsk-ease), background var(--tsk-fast) var(--tsk-ease);
	appearance: none;
}

select {
	background-image: linear-gradient(45deg, transparent 50%, var(--tsk-silver) 50%),
		linear-gradient(135deg, var(--tsk-silver) 50%, transparent 50%);
	background-position: calc(100% - 1.25rem) 1.25rem, calc(100% - 1rem) 1.25rem;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 2.75rem;
}

textarea {
	min-height: 8.5rem;
	resize: vertical;
}

input::placeholder,
textarea::placeholder {
	color: var(--tsk-text-3);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--tsk-rose);
	background: var(--tsk-surface-1);
	outline: none;
}

.tsk-field.has-error input,
.tsk-field.has-error select,
.tsk-field.has-error textarea {
	border-color: var(--tsk-pink);
}

.tsk-checkbox {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.8rem;
	align-items: start;
	font-size: 0.875rem;
	color: var(--tsk-text-2);
	cursor: pointer;
}

.tsk-checkbox input {
	width: 1.15rem;
	height: 1.15rem;
	margin: 0.2rem 0 0;
	border: 1px solid var(--tsk-line-2);
	background: var(--tsk-surface-0);
	appearance: none;
	cursor: pointer;
	transition: background var(--tsk-fast) var(--tsk-ease), border-color var(--tsk-fast) var(--tsk-ease);
}

.tsk-checkbox input:checked {
	background: var(--tsk-brand);
	border-color: var(--tsk-brand);
	background-image: linear-gradient(45deg, transparent 44%, var(--tsk-white) 44%, var(--tsk-white) 56%, transparent 56%),
		linear-gradient(-45deg, transparent 44%, var(--tsk-white) 44%, var(--tsk-white) 56%, transparent 56%);
}

/* Honeypot — hidden from humans, still reachable by naive bots. */
.tsk-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.tsk-notice {
	margin-bottom: 1.75rem;
	padding: 1.1rem 1.35rem;
	border-left: 2px solid var(--tsk-rose);
	background: var(--tsk-surface-2);
	font-size: 0.9375rem;
}

.tsk-notice--success {
	border-left-color: var(--tsk-pink);
	color: var(--tsk-white);
}

.tsk-notice--error {
	color: var(--tsk-pink);
}

/* ---------------------------------------------------------------- 20. Footer */

.tsk-footer {
	position: relative;
	border-top: 1px solid var(--tsk-line);
	/* Band, not card: the footer is ground, and should not read as elevated. */
	background: var(--tsk-band);
	overflow: hidden;
}

.tsk-footer__top {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	padding-block: clamp(3rem, 6vw, 5rem);
}

@media (min-width: 56rem) {
	.tsk-footer__top {
		grid-template-columns: 1.4fr 1fr 1fr;
	}
}

.tsk-footer__about {
	max-width: 26rem;
	margin: 1.5rem 0 0;
	color: var(--tsk-text-3);
	font-size: 0.9375rem;
}

.tsk-footer__heading {
	margin-bottom: 1.25rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	color: var(--tsk-text-3);
}

.tsk-footer__list {
	display: grid;
	gap: 0.7rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
}

.tsk-footer__list a {
	color: var(--tsk-text-2);
	transition: color var(--tsk-fast) var(--tsk-ease);
}

.tsk-footer__list a:hover {
	color: var(--tsk-pink);
}

.tsk-socials {
	display: flex;
	gap: 0.6rem;
	margin-top: 1.75rem;
}

.tsk-socials a {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--tsk-line-2);
	color: var(--tsk-text-2);
	transition: border-color var(--tsk-fast) var(--tsk-ease), color var(--tsk-fast) var(--tsk-ease),
		background var(--tsk-fast) var(--tsk-ease);
}

.tsk-socials a:hover {
	border-color: var(--tsk-rose);
	background: rgba(159, 89, 105, 0.14);
	color: var(--tsk-white);
}

.tsk-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.75rem;
	border-top: 1px solid var(--tsk-line);
	font-size: 0.8125rem;
	color: var(--tsk-text-3);
}

.tsk-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tsk-footer__legal a:hover {
	color: var(--tsk-pink);
}

/* ----------------------------------------------- 21. Prose / editor content */

.tsk-prose {
	max-width: 46rem;
	color: var(--tsk-text-2);
	font-size: 1.0625rem;
}

.tsk-prose > * + * {
	margin-top: 1.4em;
}

.tsk-prose h2,
.tsk-prose h3,
.tsk-prose h4 {
	margin-top: 2.2em;
	margin-bottom: 0.7em;
	color: var(--tsk-white);
}

.tsk-prose a {
	color: var(--tsk-pink);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--tsk-line-rose);
	transition: color var(--tsk-fast) var(--tsk-ease), text-decoration-color var(--tsk-fast) var(--tsk-ease);
}

.tsk-prose a:hover {
	color: var(--tsk-white);
	text-decoration-color: var(--tsk-rose);
}

.tsk-prose ul,
.tsk-prose ol {
	padding-left: 1.3rem;
}

.tsk-prose li + li {
	margin-top: 0.5em;
}

.tsk-prose ul {
	list-style: none;
	padding-left: 0;
}

.tsk-prose ul li {
	position: relative;
	padding-left: 1.4rem;
}

.tsk-prose ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 6px;
	height: 6px;
	background: var(--tsk-rose);
	transform: rotate(45deg);
}

.tsk-prose blockquote {
	margin: 2.4em 0;
	padding: 0.4rem 0 0.4rem 1.75rem;
	border-left: 2px solid var(--tsk-rose);
	font-family: var(--tsk-font-display);
	font-size: 1.35rem;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: 0.01em;
	color: var(--tsk-white);
	text-transform: none;
}

.tsk-prose img,
.tsk-prose figure {
	margin-block: 2.4em;
}

.tsk-prose figcaption {
	margin-top: 0.75rem;
	font-size: 0.8125rem;
	color: var(--tsk-text-3);
}

.tsk-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.tsk-prose th,
.tsk-prose td {
	padding: 0.85rem 1rem;
	border: 1px solid var(--tsk-line);
	text-align: left;
}

.tsk-prose th {
	background: var(--tsk-surface-2);
	color: var(--tsk-white);
}

.tsk-prose code {
	padding: 0.15em 0.4em;
	background: var(--tsk-surface-2);
	font-family: var(--tsk-font-mono);
	font-size: 0.875em;
	color: var(--tsk-pink);
}

.tsk-prose pre {
	padding: 1.35rem;
	background: var(--tsk-surface-2);
	border: 1px solid var(--tsk-line);
	overflow-x: auto;
}

/* Block editor alignments inside prose */

.tsk-prose .alignwide {
	width: min(100vw - (var(--tsk-gutter) * 2), 1120px);
	max-width: none;
	margin-inline: calc(50% - min(50vw - var(--tsk-gutter), 560px));
}

.tsk-prose .alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

.wp-block-image img {
	height: auto;
}

/* Give core Gallery blocks the same duotone treatment as the custom grid. */
.wp-block-gallery.has-nested-images figure.wp-block-image img {
	filter: grayscale(1) contrast(1.12) brightness(0.74);
	transition: filter var(--tsk-slow) var(--tsk-ease), transform var(--tsk-slow) var(--tsk-ease);
}

.wp-block-gallery.has-nested-images figure.wp-block-image:hover img {
	filter: grayscale(0.2) contrast(1.06) brightness(0.92);
	transform: scale(1.03);
}

.wp-block-gallery.has-nested-images figure.wp-block-image {
	overflow: hidden;
	background: var(--tsk-surface-2);
}

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	background: linear-gradient(0deg, rgba(11, 10, 13, 0.92), transparent);
	font-size: 0.8125rem;
	color: var(--tsk-text-2);
}

/* ------------------------------------------------- 22. Page header & misc UI */

.tsk-page-head {
	position: relative;
	padding-block: clamp(4rem, 9vw, 8rem) clamp(2.5rem, 5vw, 4rem);
	border-bottom: 1px solid var(--tsk-line);
	background: linear-gradient(168deg, var(--tsk-burgundy-dark) -20%, var(--tsk-ink) 62%);
	overflow: hidden;
}

.tsk-page-head__inner {
	position: relative;
	z-index: 1;
}

.tsk-page-title {
	margin-bottom: 0;
	font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
}

.tsk-page-head .tsk-section-lead {
	margin-top: 1.25rem;
}

.tsk-breadcrumb {
	margin-bottom: 1.25rem;
	font-family: var(--tsk-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tsk-text-3);
}

.tsk-breadcrumb a:hover {
	color: var(--tsk-pink);
}

.tsk-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.tsk-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding-inline: 0.85rem;
	border: 1px solid var(--tsk-line);
	font-family: var(--tsk-font-display);
	font-size: 0.875rem;
	letter-spacing: 0.1em;
	color: var(--tsk-text-2);
	transition: border-color var(--tsk-fast) var(--tsk-ease), color var(--tsk-fast) var(--tsk-ease),
		background var(--tsk-fast) var(--tsk-ease);
}

.tsk-pagination .page-numbers:hover {
	border-color: var(--tsk-rose);
	color: var(--tsk-white);
}

.tsk-pagination .page-numbers.current {
	background: var(--tsk-brand);
	border-color: var(--tsk-brand);
	color: var(--tsk-white);
}

.tsk-empty {
	padding: clamp(2rem, 4vw, 3rem);
	border: 1px dashed var(--tsk-line-2);
	color: var(--tsk-text-3);
	text-align: center;
}

/* Search form */

.tsk-searchform {
	display: flex;
	gap: 0;
	max-width: 30rem;
}

.tsk-searchform input[type="search"] {
	flex: 1;
}

.tsk-searchform button {
	display: grid;
	place-items: center;
	width: 3.25rem;
	border: 1px solid var(--tsk-line-2);
	border-left: 0;
	background: var(--tsk-brand);
	color: var(--tsk-white);
	transition: background var(--tsk-fast) var(--tsk-ease);
}

.tsk-searchform button:hover {
	background: var(--tsk-burgundy-mid);
}

/* Single post */

.tsk-single__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-bottom: 2.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--tsk-line);
	font-family: var(--tsk-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tsk-text-3);
}

.tsk-single__hero {
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
	border: 1px solid var(--tsk-line);
}

.tsk-single__hero img {
	width: 100%;
	filter: grayscale(0.72) contrast(1.06) brightness(0.86);
}

.tsk-media__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background:
		repeating-linear-gradient(115deg, rgba(191, 192, 195, 0.05) 0 1px, transparent 1px 8px),
		linear-gradient(160deg, var(--tsk-surface-3), var(--tsk-surface-1));
}

/* 404 */

.tsk-404 {
	display: grid;
	place-items: center;
	min-height: 70svh;
	text-align: center;
}

.tsk-404__code {
	font-family: var(--tsk-font-display);
	font-size: clamp(6rem, 20vw, 14rem);
	font-weight: 700;
	line-height: 0.85;
	color: transparent;
	-webkit-text-stroke: 1px var(--tsk-line-rose);
}

/* Comments */

.tsk-comments {
	margin-top: clamp(3rem, 6vw, 5rem);
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--tsk-line);
}

.tsk-comments .comment-list {
	margin: 0 0 3rem;
	padding: 0;
	list-style: none;
}

.tsk-comments .comment-list li {
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--tsk-line);
}

.tsk-comments .comment-list .children {
	margin: 1.5rem 0 0 1.5rem;
	padding: 0;
	list-style: none;
	border-left: 1px solid var(--tsk-line);
	padding-left: 1.5rem;
}

/* Accordion (FAQ) */

.tsk-accordion {
	border-top: 1px solid var(--tsk-line);
}

.tsk-accordion__item {
	border-bottom: 1px solid var(--tsk-line);
}

.tsk-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
	padding: 1.4rem 0;
	border: 0;
	background: none;
	text-align: left;
	font-family: var(--tsk-font-display);
	font-size: 1.0625rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--tsk-text-2);
	transition: color var(--tsk-fast) var(--tsk-ease);
}

.tsk-accordion__trigger:hover,
.tsk-accordion__trigger[aria-expanded="true"] {
	color: var(--tsk-white);
}

/* A plus that becomes a minus — no chevron, keeps the geometry square. */
.tsk-accordion__icon {
	position: relative;
	flex: none;
	width: 1rem;
	height: 1rem;
}

.tsk-accordion__icon::before,
.tsk-accordion__icon::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto 0;
	height: 1px;
	background: var(--tsk-rose);
	transition: transform var(--tsk-fast) var(--tsk-ease), opacity var(--tsk-fast) var(--tsk-ease);
}

.tsk-accordion__icon::after {
	transform: rotate(90deg);
}

.tsk-accordion__trigger[aria-expanded="true"] .tsk-accordion__icon::after {
	transform: rotate(0deg);
	opacity: 0;
}

.tsk-accordion__panel {
	padding: 0 0 1.6rem;
	max-width: 46rem;
	color: var(--tsk-text-3);
	font-size: 0.9375rem;
}

.tsk-accordion__panel p {
	margin: 0;
}

/* Widgets */

.tsk-widget__title {
	margin-bottom: 1rem;
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	color: var(--tsk-text-3);
}

/* ---------------------------------------------------- 23. Motion & responsive */

/* Scroll reveal — a short, restrained lift.

   Content is visible by DEFAULT. The hidden starting state is applied only
   under .tsk-js, which the inline snippet in the document head sets. If the
   script is blocked, fails, or the environment never delivers
   IntersectionObserver callbacks, the page still renders in full rather than
   leaving every section below the hero invisible. */
.tsk-reveal {
	transition: opacity 620ms var(--tsk-ease), transform 620ms var(--tsk-ease);
}

.tsk-js .tsk-reveal {
	opacity: 0;
	transform: translateY(18px);
}

.tsk-js .tsk-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (max-width: 61.99rem) {
	.tsk-header__nav {
		display: none;
	}

	.tsk-burger {
		display: flex;
	}

	.tsk-drawer {
		display: flex;
	}

	.tsk-hero__rail {
		display: none;
	}

	.tsk-stat {
		border-right: 0;
		border-bottom: 1px solid var(--tsk-line);
	}
}

@media (min-width: 62rem) {
	.tsk-drawer {
		display: none !important;
	}
}

@media (max-width: 47.99rem) {
	/* The drawer carries the same call to action, so the header keeps only
	   the language switcher and the burger at this width. */
	.tsk-header__cta {
		display: none;
	}

	.tsk-result {
		grid-template-columns: 1fr;
		gap: 0.3rem;
	}

	.tsk-hero__title span:nth-child(2) {
		padding-left: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.tsk-js .tsk-reveal,
	.tsk-js .tsk-reveal.is-visible {
		opacity: 1;
		transform: none;
	}
}

/* Respect users who ask for more contrast: drop the tinted veils. */
@media (prefers-contrast: more) {
	:root {
		--tsk-text-2: #e4e2e3;
		--tsk-text-3: #c9cacc;
		--tsk-line: rgba(191, 192, 195, 0.28);
		--tsk-line-2: rgba(191, 192, 195, 0.45);
	}
}

@media print {
	.tsk-header,
	.tsk-drawer,
	.tsk-footer,
	.tsk-cta,
	.tsk-hero__media {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}
}