/**
 * Homepage -- approved R4 (inc/homepage.php, front-page.php).
 *
 * Enqueued on the theme-rendered front page only; every rule is scoped to
 * body.tsc-home. Values are the approved prototype's (R1→R4 cascade resolved),
 * in px because the site's root font-size is responsive.
 *
 * Replaces the Elementor-ID homepage stylesheets (hero-scroller.css,
 * shop-by-category.css, featured-captures.css, audio-software.css,
 * homepage-reviews.css), which are retired with the Elementor homepage markup.
 */

body.tsc-home {
	--h-ink: var(--tsc-bg);
	--h-line-d: #2A2A2E;
	--h-on-d: #F5F4F2;
	--h-on-d-2: #a3a3a0;
	--h-on-d-3: #6e6e6b;
	--h-paper: var(--tsc-paper);
	--h-line-l: var(--tsc-paper-line);
	--h-on-l: #16161A;
	--h-on-l-2: var(--tsc-paper-text-2);
	--h-on-l-3: var(--tsc-paper-text-3);
	--h-gutter: 48px;
	--h-header: 85px;           /* Astra's transparent header sits over the page */
	background-color: var(--h-ink);
}

body.tsc-home #content,
body.tsc-home .site-content {
	background-color: var(--h-ink);
}

body.tsc-home #content > .ast-container {
	display: block;
	max-width: none;
	margin: 0;
	padding: 0;
}

body.tsc-home .tsc-home-page {
	color: var(--h-on-d);
	font-family: var(--tsc-font-body);
	font-size: 17px;
	line-height: 1.55;
}

body.tsc-home .tsc-home-page *,
body.tsc-home .tsc-home-page *::before,
body.tsc-home .tsc-home-page *::after {
	box-sizing: border-box;
}

body.tsc-home .tsc-home-page :where(h1, h2, h3, p, ol, ul, blockquote, figure) {
	margin: 0;
	padding: 0;
}

body.tsc-home .tsc-home-page :where(ol, ul) {
	list-style: none;
}

body.tsc-home .tsc-home-page img,
body.tsc-home .tsc-home-page video {
	display: block;
	max-width: 100%;
	height: auto;
}

body.tsc-home .tsc-home-page code {
	font: 500 0.88em ui-monospace, Menlo, monospace;
	background: none;
	padding: 0;
	color: inherit;
}

body.tsc-home .tsc-home-page a,
body.tsc-home .tsc-home-page a:link,
body.tsc-home .tsc-home-page a:visited,
body.tsc-home .tsc-home-page a:hover,
body.tsc-home .tsc-home-page a:focus {
	color: inherit;
	text-decoration: none;
}

body.tsc-home .tsc-home-page a:focus-visible {
	outline: 2px solid var(--tsc-accent);
	outline-offset: 3px;
}

body.tsc-home .tsc-home-wrap {
	max-width: 1200px;
	margin: 0 auto;
}

/* ---------- shared type ---------- */
body.tsc-home .tsc-home-eyebrow {
	margin-bottom: 18px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--h-on-l-2);
}

body.tsc-home .tsc-home-eyebrow--dark {
	color: var(--h-on-d-3);
}

body.tsc-home .tsc-home-h2 {
	font-family: var(--tsc-font-display);
	font-size: 48px;
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: -0.02em;
	text-transform: none;
	color: inherit;
}

body.tsc-home .tsc-home-lead {
	font-size: 18px;
	line-height: 1.6;
	color: var(--h-on-l-2);
}

body.tsc-home .tsc-home-page a.tsc-home-btn,
body.tsc-home .tsc-home-page a.tsc-home-btn:link,
body.tsc-home .tsc-home-page a.tsc-home-btn:visited,
body.tsc-home .tsc-home-page a.tsc-home-btn:hover,
body.tsc-home .tsc-home-page a.tsc-home-btn:focus {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 50px;
	padding: 0 28px;
	background-color: var(--tsc-accent);
	color: var(--tsc-text-on-accent);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

body.tsc-home .tsc-home-page a.tsc-home-btn:hover {
	background-color: var(--tsc-accent-hover);
}

body.tsc-home .tsc-home-page a.tsc-home-tlink,
body.tsc-home .tsc-home-page a.tsc-home-tlink:link,
body.tsc-home .tsc-home-page a.tsc-home-tlink:visited,
body.tsc-home .tsc-home-page a.tsc-home-tlink:hover,
body.tsc-home .tsc-home-page a.tsc-home-tlink:focus {
	font-size: 15px;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 1px;
}

body.tsc-home .tsc-home-page a.tsc-home-tlink:hover {
	text-decoration-thickness: 2px;
}

body.tsc-home .tsc-home-page a.tsc-home-tlink--quiet {
	color: var(--h-on-l-2);
}

body.tsc-home .tsc-home-page a.tsc-home-tlink--dark {
	color: var(--h-on-d);
}

body.tsc-home .tsc-home-page a.tsc-home-tlink--dark.tsc-home-tlink--quiet {
	color: var(--h-on-d-2);
}

/* ============================================================
 * 00 HERO -- production hero-scroller geometry
 * ============================================================ */
body.tsc-home .tsc-hero {
	--slide-w: min(1124px, 82vw);
	--gap: 24px;
	--slide-h: clamp(540px, calc(100svh - 84px - 110px), 700px);
	--peek: calc((100% - var(--slide-w)) / 2);
	position: relative;
	padding: var(--h-header) 0 20px;
	background-color: var(--h-ink);
}

body.tsc-home:not(.ast-theme-transparent-header) .tsc-hero {
	--h-header: 0px;
}

body.tsc-home .tsc-hero__track {
	display: flex;
	gap: var(--gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-inline: calc((100% - var(--slide-w)) / 2);
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

body.tsc-home .tsc-hero__track::-webkit-scrollbar {
	display: none;
}

body.tsc-home .tsc-hero__track:focus-visible {
	outline: 2px solid var(--tsc-accent);
	outline-offset: 4px;
}

body.tsc-home .tsc-hero__slide {
	position: relative;
	flex: 0 0 var(--slide-w);
	height: var(--slide-h);
	scroll-snap-align: center;
	overflow: hidden;
	border-radius: 3px;
	background: #000;
}

@media (prefers-reduced-motion: no-preference) {
	body.tsc-home .tsc-hero__slide {
		transition: opacity 0.3s;
	}
}

body.tsc-home .tsc-hero.is-enhanced .tsc-hero__slide:not(.is-active) {
	opacity: 0.74;
}

body.tsc-home .tsc-slide__stage,
body.tsc-home .tsc-slide__art--photo {
	position: absolute;
	inset: 0;
}

/* Rack slide: rack ≈ 50% of slide width, centred at 66%; the left edge
   dissolves so the copy sits on black. */
body.tsc-home .tsc-slide--rack .tsc-slide__stage {
	-webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 16%, #000 50%);
	mask-image: linear-gradient(to right, transparent 0%, transparent 16%, #000 50%);
}

body.tsc-home .tsc-slide--rack .tsc-slide__art {
	position: absolute;
	width: calc(var(--slide-w) * 0.50 / 0.434);
	aspect-ratio: 16 / 10;
	left: calc(var(--slide-w) * 0.66 - var(--slide-w) * 0.50 / 0.434 * 0.5215);
	top: calc(var(--slide-h) * 0.50 - var(--slide-w) * 0.50 / 0.434 / 1.6 * 0.478);
}

/* TSC Analog Alive slide (first slide; approved homepage variant B, 2026-09-28): the final 04C
   hero loop (assets/video/SOURCE.txt §1), product at x 0.435–0.787 / y 0.384–0.685 of the 16:10
   frame. The frame covers the slide, so no mask is needed; the world runs behind the copy.
     --aa-base  sizing basis: 46 % of the slide, never less than 490px
     size       1.15 × (1.12 × the room right of the basis), capped at 1.15 × 1.05 × the slide height;
                the right end runs off the slide
     left edge  the basis, but ≥ 518px on desktop (64px inset + 418px one-line title + 36px)
     centre     60 % of the slide height */
body.tsc-home .tsc-slide--aa {
	--aa-base: max(calc(var(--slide-w) * 0.46), 490px);
	--aa-left: max(var(--aa-base), 518px);
	--aa-pw: calc(min(calc((var(--slide-w) - var(--aa-base)) * 1.12), calc(var(--slide-h) * 1.05)) * 1.15);
	--aa-aw: calc(var(--aa-pw) / 0.352);
	--aa-cy: 0.60;
}

body.tsc-home .tsc-slide--aa .tsc-slide__art {
	position: absolute;
	width: var(--aa-aw);
	aspect-ratio: 16 / 10;
	left: calc(var(--aa-left) - var(--aa-aw) * 0.435);
	top: calc(var(--slide-h) * var(--aa-cy) - var(--aa-aw) / 1.6 * 0.534);
	background: #000;
}

body.tsc-home .tsc-slide--aa .tsc-slide__art picture {
	display: contents;
}

@media (max-width: 1024px) {
	body.tsc-home .tsc-slide--aa {
		--aa-left: var(--aa-base);
	}
}

/* 768–1023px: the frame no longer covers the narrow tablet slide, and with the visible 04C world its
   own edges would read as a box (same treatment as the product-page hero at 641–1023px). */
@media (min-width: 768px) and (max-width: 1023px) {
	body.tsc-home .tsc-slide--aa .tsc-slide__art {
		-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 80%, transparent 100%), linear-gradient(to right, transparent 0%, #000 22%);
		-webkit-mask-composite: source-in;
		mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 80%, transparent 100%), linear-gradient(to right, transparent 0%, #000 22%);
		mask-composite: intersect;
	}
}

@media (max-width: 767px) {
	/* Visual on top (300px, fading into the black like the Rack slide), copy at the bottom. The
	   4:5 mobile crop of the 04C master (product x 0.135–0.865, centre y 0.535) at 1.1 × the slide
	   width from the copy's left edge; the right end runs off the slide. */
	body.tsc-home .tsc-slide--aa {
		--aa-pw: calc(var(--slide-w) * 1.1);
		--aa-aw: calc(var(--aa-pw) / 0.73);
	}

	body.tsc-home .tsc-slide--aa .tsc-slide__stage {
		top: 0;
		bottom: auto;
		height: 300px;
		-webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
		mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
	}

	body.tsc-home .tsc-slide--aa .tsc-slide__art {
		aspect-ratio: 4 / 5;
		left: calc(20px - var(--aa-aw) * 0.135);
		top: calc(158px - var(--aa-aw) * 1.25 * 0.535);
	}
}

/* Product slides (TSC Analog Alive, TSC Rack 2), >= 768px: the copy block is as wide as the
   product name (at most 440px) and the supporting line wraps inside that width, so it never runs
   out past the title (width 0 + min-width 100% keeps the line out of the block's intrinsic
   width). The NAM Captures slide keeps its 400px block. */
@media (min-width: 768px) {
	body.tsc-home :is(.tsc-slide--rack, .tsc-slide--aa) .tsc-slide__copy {
		width: max-content;
		max-width: 440px;
	}

	body.tsc-home :is(.tsc-slide--rack, .tsc-slide--aa) .tsc-slide__line {
		width: 0;
		min-width: 100%;
	}

	/* "TSC Analog Alive" on one line: 56px (418px) on desktop, 52px (388px) on the 840px tablet slide. */
	body.tsc-home .tsc-slide--aa .tsc-slide__title {
		font-size: 56px;
		white-space: nowrap;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	body.tsc-home .tsc-slide--aa .tsc-slide__title {
		font-size: 52px;
	}
}

body.tsc-home .tsc-c2 .tsc-c2__still,
body.tsc-home .tsc-c2 .tsc-c2__video {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
}

body.tsc-home .tsc-c2 .tsc-c2__video {
	opacity: 0;
}

body.tsc-home .tsc-c2 .tsc-c2__video.is-playing {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	body.tsc-home .tsc-c2 .tsc-c2__video {
		display: none;
	}
}

body.tsc-home .tsc-slide__art--photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.tsc-home .tsc-slide__art--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0) 75%);
}

body.tsc-home .tsc-slide__copy {
	position: absolute;
	z-index: 2;
	left: 64px;
	top: 50%;
	width: 400px;
	transform: translateY(-50%);
}

body.tsc-home .tsc-slide__eyebrow {
	margin-bottom: 18px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--h-on-d-2);
}

body.tsc-home .tsc-slide__title {
	margin-bottom: 18px;
	font-family: var(--tsc-font-display);
	font-size: 60px;
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.025em;
	text-transform: none;
	color: var(--h-on-d);
}

body.tsc-home .tsc-slide--captures .tsc-slide__title {
	font-size: 52px;
}

body.tsc-home .tsc-slide__line {
	margin-bottom: 32px;
	font-size: 19px;
	line-height: 1.5;
	color: #d6d5d2;
}

/* Arrows injected by assets/js/hero-scroller.js (no "n / N" readout). */
body.tsc-home .tsc-hero__count {
	display: none;
}

body.tsc-home .tsc-hero__nav {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	width: var(--slide-w);
	margin: 16px auto 0;
}

body.tsc-home .tsc-hero__btn {
	width: 44px;
	height: 44px;
	display: inline-flex;
	gap: 0.3em;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid rgba(245, 244, 242, 0.22);
	border-radius: 999px;
	background: transparent;
	color: var(--h-on-d);
	cursor: pointer;
}

body.tsc-home .tsc-hero__btn svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
}

body.tsc-home .tsc-hero__btn:hover,
body.tsc-home .tsc-hero__btn:focus-visible {
	border-color: var(--tsc-accent);
	color: var(--tsc-accent);
}

body.tsc-home .tsc-hero__btn:focus-visible {
	outline: 2px solid var(--tsc-accent);
	outline-offset: 2px;
}

body.tsc-home .tsc-hero__btn[disabled] {
	opacity: 0.35;
	cursor: default;
}

@media (min-width: 1025px) {
	body.tsc-home .tsc-hero {
		padding-bottom: 28px;
	}

	body.tsc-home .tsc-hero__nav {
		height: 0;
		margin: 0;
	}

	body.tsc-home .tsc-hero__btn {
		position: absolute;
		z-index: 3;
		top: calc(var(--h-header) + var(--slide-h) / 2);
		width: 52px;
		height: 52px;
		transform: translateY(-50%);
		background: rgba(11, 11, 12, 0.55);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
	}

	body.tsc-home .tsc-hero__btn--prev {
		left: calc(var(--peek) - 26px - var(--gap) / 2);
	}

	body.tsc-home .tsc-hero__btn--next {
		right: calc(var(--peek) - 26px - var(--gap) / 2);
	}
}

@media (max-width: 1024px) {
	body.tsc-home .tsc-hero {
		--slide-w: min(840px, 84vw);
		--gap: 20px;
	}
}

/* ============================================================
 * 01 BRAND BRIDGE
 * ============================================================ */
body.tsc-home .tsc-h01 {
	padding: 0 var(--h-gutter) 32px;
}

body.tsc-home .tsc-h01__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 40px;
	padding-top: 22px;
	border-top: 1px solid var(--h-line-d);
}

body.tsc-home .tsc-h01__line {
	max-width: 34em;
	font-family: var(--tsc-font-display);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--h-on-d);
}

body.tsc-home .tsc-h01__links {
	display: flex;
	gap: 28px;
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
}

body.tsc-home .tsc-home-page .tsc-h01__links a,
body.tsc-home .tsc-home-page .tsc-h01__links a:link,
body.tsc-home .tsc-home-page .tsc-h01__links a:visited,
body.tsc-home .tsc-home-page .tsc-h01__links a:hover,
body.tsc-home .tsc-home-page .tsc-h01__links a:focus {
	color: var(--h-on-d-2);
	text-decoration: underline;
	text-underline-offset: 5px;
}

body.tsc-home .tsc-home-page .tsc-h01__links a:hover {
	color: var(--h-on-d);
}

/* ============================================================
 * 02 NAM CAPTURES + category index (Layout B)
 * ============================================================ */
body.tsc-home .tsc-h02 {
	padding: 120px var(--h-gutter) 88px;
	background-color: var(--h-paper);
	color: var(--h-on-l);
}

body.tsc-home .tsc-h02__head {
	display: grid;
	grid-template-columns: 6fr 5fr;
	gap: 64px;
	align-items: end;
	margin-bottom: 56px;
}

body.tsc-home .tsc-h02__links {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	margin-top: 22px;
}

body.tsc-home .tsc-index {
	border-top: 1px solid var(--h-on-l);
}

body.tsc-home .tsc-idx {
	display: grid;
	/* The name column never gets narrower than the longest category name at
	 * 48px ("Preamp & Console", 378px); the strip gives way instead. */
	grid-template-columns: 56px minmax(380px, 1fr) minmax(0, 470px) 40px;
	align-items: center;
	column-gap: 28px;
	padding: 18px 0;
	border-bottom: 1px solid var(--h-line-l);
}

body.tsc-home .tsc-idx__n {
	font-family: var(--tsc-font-display);
	font-size: 15px;
	font-weight: 500;
	color: var(--h-on-l-3);
	font-variant-numeric: tabular-nums;
}

body.tsc-home .tsc-idx__head {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

body.tsc-home .tsc-idx__name {
	font-family: var(--tsc-font-display);
	font-size: 48px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.025em;
	white-space: nowrap;
}

body.tsc-home .tsc-idx__count {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--h-on-l-3);
}

body.tsc-home .tsc-strip {
	--w: 1000;
	--h: 227;
	position: relative;
	display: block;
	aspect-ratio: 1000 / 227;
	overflow: hidden;
	background: #111;
}

body.tsc-home .tsc-strip img {
	position: absolute;
	max-width: none !important;
	width: calc(1131 / var(--w) * 100%) !important;
	height: auto !important;
	left: calc(var(--x) / var(--w) * -100%);
	top: calc(var(--y) / var(--h) * -100%);
	transform-origin: 50% 50%;
}

body.tsc-home .tsc-idx__go {
	justify-self: end;
	font-style: normal;
	font-size: 22px;
	color: var(--h-on-l-3);
}

@media (prefers-reduced-motion: no-preference) {
	body.tsc-home .tsc-strip img {
		transition: transform 0.5s;
	}

	body.tsc-home .tsc-idx__go {
		transition: transform 0.2s, color 0.2s;
	}
}

body.tsc-home .tsc-idx:hover .tsc-strip img,
body.tsc-home .tsc-idx:focus-visible .tsc-strip img {
	transform: scale(1.03);
}

body.tsc-home .tsc-idx:hover .tsc-idx__go,
body.tsc-home .tsc-idx:focus-visible .tsc-idx__go {
	color: var(--h-on-l);
	transform: translateX(4px);
}

body.tsc-home .tsc-idx:hover .tsc-idx__name {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 8px;
}

/* Tablet (768-1024px): there is no room for name and strip side by side, so
 * the strip moves under the name, aligned with it and running to the edge. */
@media (min-width: 768px) and (max-width: 1024px) {
	body.tsc-home .tsc-idx {
		grid-template-columns: 56px minmax(0, 1fr) 40px;
		grid-template-areas: "n head go" ". strip strip";
		row-gap: 18px;
		column-gap: 28px;
		padding: 24px 0 28px;
	}

	body.tsc-home .tsc-idx__n {
		grid-area: n;
	}

	body.tsc-home .tsc-idx__head {
		grid-area: head;
	}

	body.tsc-home .tsc-strip {
		grid-area: strip;
	}

	body.tsc-home .tsc-idx__go {
		grid-area: go;
	}
}

/* ============================================================
 * 03 FEATURED CAPTURES (R4 card)
 * ============================================================ */
body.tsc-home .tsc-h03 {
	padding: 0 var(--h-gutter) 120px;
	background-color: var(--h-paper);
	color: var(--h-on-l);
}

body.tsc-home .tsc-h03 .tsc-home-wrap {
	padding-top: 72px;
	border-top: 1px solid var(--h-line-l);
}

body.tsc-home .tsc-h03__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 40px;
}

body.tsc-home .tsc-prods {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
}

body.tsc-home .tsc-prod {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--h-line-l);
}

@media (prefers-reduced-motion: no-preference) {
	body.tsc-home .tsc-prod {
		transition: border-color 0.16s;
	}

	body.tsc-home .tsc-prod__img img {
		transition: transform 0.5s;
	}
}

body.tsc-home .tsc-prod:hover,
body.tsc-home .tsc-prod:focus-within {
	border-color: var(--h-on-l-3);
}

body.tsc-home .tsc-prod__img {
	display: block;
	aspect-ratio: 1131 / 704;
	overflow: hidden;
	background: #ddd;
}

body.tsc-home .tsc-prod__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.tsc-home .tsc-prod:hover .tsc-prod__img img {
	transform: scale(1.03);
}

body.tsc-home .tsc-prod__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 18px 20px 20px;
}

body.tsc-home .tsc-prod__cat {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--h-on-l-3);
}

body.tsc-home .tsc-prod__title {
	margin-top: 6px;
	font-family: var(--tsc-font-display);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--h-on-l);
}

body.tsc-home .tsc-prod:hover .tsc-prod__title a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

body.tsc-home .tsc-prod__desc {
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--h-on-l-2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

body.tsc-home .tsc-prod__meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	margin-top: auto;
	padding-top: 16px;
	font-size: 17px;
	font-weight: 600;
}

body.tsc-home .tsc-prod__price .amount {
	color: var(--h-on-l);
}

body.tsc-home .tsc-prod__rating {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 400;
	color: var(--h-on-l-3);
	white-space: nowrap;
}

body.tsc-home .tsc-prod__rating .tsc-rating__stars {
	font-size: 11px;
	letter-spacing: 1px;
	color: var(--h-on-l-2);
}

/* ============================================================
 * 04 FROM CAPTURE TO CHAIN
 * ============================================================ */
body.tsc-home .tsc-h04 {
	padding: 120px var(--h-gutter);
	background-color: var(--h-ink);
}

body.tsc-home .tsc-h04__head {
	margin-bottom: 56px;
}

body.tsc-home .tsc-eco-flow {
	display: grid;
	grid-template-columns: 4fr auto 5fr auto 3fr;
	gap: 24px;
	align-items: start;
}

body.tsc-home .tsc-eco-flow__n {
	display: block;
	margin-bottom: 14px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--h-on-d-3);
}

body.tsc-home .tsc-eco-flow__step img {
	width: 100%;
	border-radius: 3px;
}

body.tsc-home .tsc-eco-flow__step p {
	margin-top: 14px;
	font-size: 15px;
	color: var(--h-on-d-2);
}

body.tsc-home .tsc-eco-flow__arrow {
	align-self: center;
	padding-top: 28px;
	font-size: 22px;
	color: var(--h-on-d-3);
}

body.tsc-home .tsc-eco-flow__step p.tsc-eco-flow__daw {
	margin-top: 0;
	padding: 28px 0;
	border-top: 1px solid var(--h-line-d);
	border-bottom: 1px solid var(--h-line-d);
	font-family: var(--tsc-font-display);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--h-on-d);
}

body.tsc-home .tsc-eco-flow__daw span {
	font-family: var(--tsc-font-body);
	font-size: 15px;
	font-weight: 400;
	color: var(--h-on-d-2);
}

body.tsc-home .tsc-h04__links {
	display: flex;
	gap: 28px;
	margin-top: 48px;
}

/* ============================================================
 * 05 VERIFIED REVIEWS
 * ============================================================ */
body.tsc-home .tsc-h05 {
	padding: 104px var(--h-gutter);
	background-color: var(--h-paper);
	color: var(--h-on-l);
}

body.tsc-home .tsc-h05__title {
	margin-bottom: 40px;
	font-family: var(--tsc-font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--h-on-l-2);
}

body.tsc-home .tsc-home-quotes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
}

body.tsc-home .tsc-home-quote {
	margin: 0;
	padding: 22px 0 0;
	border: 0;
	border-top: 1px solid var(--h-line-l);
	font-style: normal;
}

body.tsc-home .tsc-home-quote p {
	font-size: 20px;
	line-height: 1.5;
	color: var(--h-on-l);
}

body.tsc-home .tsc-home-quote footer {
	margin-top: 16px;
	font-size: 13px;
	letter-spacing: 0.02em;
	color: var(--h-on-l-3);
}

body.tsc-home .tsc-home-page .tsc-home-quote footer a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ============================================================
 * 06 CLOSING ROUTES
 * ============================================================ */
body.tsc-home .tsc-h06 {
	padding: 0 var(--h-gutter);
	border-top: 1px solid var(--h-line-d);
	background-color: var(--h-ink);
}

body.tsc-home .tsc-h06__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

body.tsc-home .tsc-door {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 6px 24px;
	align-items: end;
	padding: 56px 40px 56px 0;
}

body.tsc-home .tsc-door + .tsc-door {
	padding: 56px 0 56px 40px;
	border-left: 1px solid var(--h-line-d);
}

body.tsc-home .tsc-door__k {
	grid-column: 1;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--h-on-d-3);
}

body.tsc-home .tsc-door b {
	grid-column: 1;
	font-family: var(--tsc-font-display);
	font-size: 34px;
	font-weight: 600;
	line-height: 1.1;
}

body.tsc-home .tsc-door i {
	grid-column: 2;
	grid-row: 1 / span 2;
	font-style: normal;
	font-size: 28px;
	color: var(--h-on-d-2);
}

body.tsc-home .tsc-door:hover b {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
}

/* ============================================================
 * MOBILE (<= 767px)
 * ============================================================ */
@media (max-width: 767px) {
	body.tsc-home {
		--h-gutter: 16px;
		--h-header: 82px;
	}

	body.tsc-home .tsc-home-page {
		font-size: 16px;
	}

	body.tsc-home .tsc-home-h2 {
		font-size: 34px;
	}

	body.tsc-home .tsc-home-page a.tsc-home-btn {
		min-height: 52px;
	}

	body.tsc-home .tsc-home-page a.tsc-home-tlink {
		min-height: 44px;
		display: inline-flex;
		gap: 0.3em;
		align-items: center;
	}

	body.tsc-home .tsc-hero {
		--slide-w: 90vw;
		--gap: 12px;
		--slide-h: 600px;
	}

	body.tsc-home .tsc-hero__nav {
		margin-top: 12px;
	}

	body.tsc-home .tsc-slide--rack .tsc-slide__stage {
		top: 0;
		bottom: auto;
		height: 300px;
		-webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
		mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
	}

	body.tsc-home .tsc-slide--rack .tsc-slide__art {
		width: calc(var(--slide-w) * 0.86 / 0.434);
		left: calc(var(--slide-w) * 0.5 - var(--slide-w) * 0.86 / 0.434 * 0.5215);
		top: calc(150px - var(--slide-w) * 0.86 / 0.434 / 1.6 * 0.478);
	}

	body.tsc-home .tsc-slide__art--photo::after {
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 0, 0.1) 75%);
	}

	/* The Library renders keep their shelf at the top (the copy sits at the bottom here); when the
	   slide is wider than the portrait render, crop from the bottom, not the top. */
	body.tsc-home .tsc-slide__art--photo img {
		object-position: 50% 0;
	}

	body.tsc-home .tsc-slide__copy {
		left: 20px;
		right: 20px;
		top: auto;
		bottom: 28px;
		width: auto;
		transform: none;
	}

	body.tsc-home .tsc-slide__title {
		font-size: 40px;
	}

	body.tsc-home .tsc-slide--captures .tsc-slide__title {
		font-size: 36px;
	}

	body.tsc-home .tsc-slide__line {
		margin-bottom: 22px;
		font-size: 16px;
	}

	body.tsc-home .tsc-h01 {
		padding-bottom: 28px;
	}

	body.tsc-home .tsc-h01__row {
		flex-direction: column;
		gap: 16px;
	}

	body.tsc-home .tsc-h01__line {
		font-size: 19px;
	}

	body.tsc-home .tsc-home-page .tsc-h01__links a {
		min-height: 44px;
		display: inline-flex;
		gap: 0.3em;
		align-items: center;
	}

	body.tsc-home .tsc-h02 {
		padding: 72px 16px;
	}

	body.tsc-home .tsc-h02__head {
		grid-template-columns: 1fr;
		gap: 20px;
		margin-bottom: 36px;
	}

	body.tsc-home .tsc-idx {
		grid-template-columns: 26px minmax(0, 1fr) 24px;
		grid-template-areas: "n head go" "strip strip strip";
		row-gap: 12px;
		column-gap: 10px;
		padding: 18px 0 20px;
	}

	body.tsc-home .tsc-idx__n {
		grid-area: n;
		font-size: 13px;
	}

	body.tsc-home .tsc-idx__head {
		grid-area: head;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: 4px 10px;
	}

	body.tsc-home .tsc-idx__name {
		font-size: 28px;
		white-space: normal;
	}

	body.tsc-home .tsc-idx__count {
		font-size: 12px;
		white-space: nowrap;
	}

	body.tsc-home .tsc-strip {
		grid-area: strip;
	}

	body.tsc-home .tsc-idx__go {
		grid-area: go;
		font-size: 20px;
	}

	body.tsc-home .tsc-h03 {
		padding: 0 16px 72px;
	}

	body.tsc-home .tsc-h03 .tsc-home-wrap {
		padding-top: 64px;
	}

	body.tsc-home .tsc-h03__head {
		flex-direction: column;
		gap: 8px;
		margin-bottom: 28px;
	}

	body.tsc-home .tsc-prods {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	body.tsc-home .tsc-prod__body {
		padding: 12px 12px 14px;
	}

	body.tsc-home .tsc-prod__title {
		font-size: 14px;
	}

	body.tsc-home .tsc-prod__desc {
		display: none;
	}

	body.tsc-home .tsc-prod__meta {
		flex-direction: column;
		gap: 2px;
		padding-top: 10px;
		font-size: 15px;
	}

	body.tsc-home .tsc-prod__rating {
		white-space: normal;
		flex-wrap: wrap;
	}

	body.tsc-home .tsc-h04 {
		padding: 72px 16px;
	}

	body.tsc-home .tsc-h04__head {
		margin-bottom: 32px;
	}

	body.tsc-home .tsc-eco-flow {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	body.tsc-home .tsc-eco-flow__arrow {
		justify-self: start;
		padding: 0 0 0 8px;
		transform: rotate(90deg);
	}

	body.tsc-home .tsc-h04__links {
		flex-direction: column;
		gap: 4px;
	}

	body.tsc-home .tsc-h05 {
		padding: 72px 16px;
	}

	body.tsc-home .tsc-home-quotes {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	body.tsc-home .tsc-home-quote p {
		font-size: 18px;
	}

	body.tsc-home .tsc-h06__grid {
		grid-template-columns: 1fr;
	}

	body.tsc-home .tsc-door,
	body.tsc-home .tsc-door + .tsc-door {
		padding: 32px 0;
		border-left: 0;
	}

	body.tsc-home .tsc-door + .tsc-door {
		border-top: 1px solid var(--h-line-d);
	}

	body.tsc-home .tsc-door b {
		font-size: 26px;
	}
}