/**
 * Component: homepage
 *
 * The Cabinet direction, applied to a shop front. Retail energy comes from
 * imagery, scale and hierarchy - not from gradients, glassmorphism or
 * invented urgency.
 *
 * The hero is a compact, hand-curated campaign banner: fixed heights, no
 * product data, uploaded imagery only. Merchandising sits beneath it.
 *
 * Every section disappears cleanly when empty, so the page never shows a
 * heading over an empty shelf.
 */

/* ---------------------------------------------------------------------- */
/* Hero banner slider                                                      */
/* ---------------------------------------------------------------------- */

/*
 * A promotional banner, not a landing page. Fixed, restrained heights -
 * roughly 350-450px on desktop and 220-300px on mobile - so the merchandising
 * beneath it stays close to the fold.
 *
 * Content is curated by hand. Nothing here is derived from products.
 */
.tcs-heroslider {
	position: relative;
	background: var(--tcs-plate);
	border-block-end: var(--tcs-border);
	overflow: hidden;
}

.tcs-slide {
	position: relative;
	display: grid;
	height: clamp(350px, 30vw, 450px);
}

.tcs-slide[hidden] { display: none; }

.tcs-slide__media,
.tcs-slide__panel { grid-area: 1 / 1; }

.tcs-slide__media {
	position: relative;
	overflow: hidden;
}

.tcs-slide__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Focal point is set per banner in the admin. */
	object-position: var(--tcs-focal, center);
	display: block;
}

.tcs-slide__img--mobile { display: none; }

/* Whole-banner link for image-only slides. */
.tcs-slide__wraplink {
	position: absolute;
	inset: 0;
	z-index: 3;
}

/*
 * A warm scrim, never a black one - product and campaign photography sits on
 * warm grounds and a cold overlay greys the metal out. Only drawn where there
 * is text to protect, so image-only banners stay clean.
 */
.tcs-slide:not(.tcs-slide--bare) .tcs-slide__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(var(--tcs-scrim-rgb), 0.72) 0%,
		rgba(var(--tcs-scrim-rgb), 0.5) 42%,
		rgba(var(--tcs-scrim-rgb), 0.08) 74%,
		rgba(var(--tcs-scrim-rgb), 0) 100%
	);
}

.tcs-slide--end:not(.tcs-slide--bare) .tcs-slide__media::after { transform: scaleX(-1); }

.tcs-slide--center:not(.tcs-slide--bare) .tcs-slide__media::after {
	background: linear-gradient(
		to bottom,
		rgba(var(--tcs-scrim-rgb), 0.22) 0%,
		rgba(var(--tcs-scrim-rgb), 0.62) 100%
	);
}

/* Pale imagery: invert the scrim so dark text stays readable. */
.tcs-slide--dark:not(.tcs-slide--bare) .tcs-slide__media::after {
	background: linear-gradient(
		to right,
		rgba(var(--tcs-scrim-pale-rgb), 0.9) 0%,
		rgba(var(--tcs-scrim-pale-rgb), 0.7) 42%,
		rgba(var(--tcs-scrim-pale-rgb), 0.12) 74%,
		rgba(var(--tcs-scrim-pale-rgb), 0) 100%
	);
}

.tcs-slide__panel {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	width: 100%;
	max-width: var(--tcs-container);
	margin-inline: auto;
	padding: var(--tcs-space-lg) var(--tcs-gutter);
	pointer-events: none;
}

.tcs-slide__panel a { pointer-events: auto; }

.tcs-slide--end .tcs-slide__panel    { justify-content: flex-end; }
.tcs-slide--center .tcs-slide__panel { justify-content: center; text-align: center; }

.tcs-slide__content {
	max-width: 30rem;
	color: var(--tcs-ink-inverse);
}

.tcs-slide--dark .tcs-slide__content { color: var(--tcs-ink); }
.tcs-slide--center .tcs-slide__content { max-width: 38rem; }

.tcs-slide__eyebrow {
	font-family: var(--tcs-font-sans);
	font-size: var(--tcs-text-3xs);
	font-weight: var(--tcs-weight-semibold);
	letter-spacing: var(--tcs-tracking-wide);
	text-transform: uppercase;
	opacity: 0.85;
	margin: 0 0 var(--tcs-space-xs);
}

.tcs-slide__title {
	font-family: var(--tcs-font-serif);
	font-size: clamp(1.6rem, 2.8vw, 2.4rem);
	font-weight: var(--tcs-weight-regular);
	line-height: 1.1;
	letter-spacing: var(--tcs-tracking-tight);
	color: inherit;
	margin: 0 0 var(--tcs-space-sm);
	text-wrap: balance;
}

.tcs-slide__body {
	font-size: var(--tcs-text-sm);
	line-height: var(--tcs-leading-normal);
	opacity: 0.92;
	margin: 0 0 var(--tcs-space-md);
	max-width: 40ch;
}

.tcs-slide--center .tcs-slide__body { margin-inline: auto; }

.tcs-slide__cta { min-width: 10rem; }

/* ---------------------------------------------------------------------- */
/* Slider controls                                                         */
/* ---------------------------------------------------------------------- */

/* Arrows sit on the edges, out of the way of the copy panel. */
.tcs-heroslider__arrow {
	position: absolute;
	inset-block-start: 50%;
	transform: translateY(-50%);
	z-index: 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--tcs-radius-pill);
	background: rgba(var(--tcs-scrim-pale-rgb), 0.92);
	color: var(--tcs-ink);
	border: 1px solid rgba(var(--tcs-scrim-rgb), 0.12);
	transition: background-color var(--tcs-duration) var(--tcs-ease);
}

.tcs-heroslider__arrow:hover { background: var(--tcs-surface-raised); }
.tcs-heroslider__arrow--prev { inset-inline-start: var(--tcs-space-md); }
.tcs-heroslider__arrow--next { inset-inline-end: var(--tcs-space-md); }

.tcs-heroslider__dots {
	position: absolute;
	inset-block-end: var(--tcs-space-md);
	inset-inline: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--tcs-space-2xs);
}

.tcs-heroslider__dot {
	width: 34px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Short bars rather than bubbles - a catalogue rule, not a carousel cliche. */
.tcs-heroslider__dot::before {
	content: "";
	width: 22px;
	height: 3px;
	border-radius: 2px;
	background: rgba(var(--tcs-scrim-pale-rgb), 0.5);
	box-shadow: 0 0 0 1px rgba(var(--tcs-scrim-rgb), 0.12);
	transition: background-color var(--tcs-duration) var(--tcs-ease);
}

.tcs-heroslider__dot:hover::before { background: rgba(var(--tcs-scrim-pale-rgb), 0.8); }
.tcs-heroslider__dot.is-current::before { background: var(--tcs-ink-inverse); }

/* Admin-only prompt when no banners exist. Never shown to customers. */
.tcs-banner-empty {
	background: var(--tcs-state-low-bg);
	color: var(--tcs-state-low);
	font-size: var(--tcs-text-sm);
	padding-block: var(--tcs-space-sm);
	border-block-end: var(--tcs-border);
}

.tcs-banner-empty a {
	color: inherit;
	font-weight: var(--tcs-weight-semibold);
}


/* ---------------------------------------------------------------------- */
/* Grounds and rhythm                                                      */
/* ---------------------------------------------------------------------- */

/*
 * The single biggest fix to this page. Previously every section sat on the
 * same cream, so a dozen blocks of equal weight ran together into one column
 * and the page read as a catalogue export.
 *
 * Now the ground changes as you scroll: paper, a lifted surface, a full-bleed
 * photograph, an ink band. Three tones is enough - more would be restless.
 * Sections carry their own ground, so the order can change without the
 * alternation breaking.
 */

.tcs-tone-surface { background: var(--tcs-surface); }
.tcs-tone-sunk    { background: var(--tcs-paper-sunk); }

.tcs-tone-ink {
	background: var(--tcs-band-ink);
	color: var(--tcs-ink-inverse);
}

/* Hairlines inside a band have to invert too, or they vanish. */
.tcs-tone-ink .tcs-section__header { border-block-end-color: var(--tcs-band-rule); }
.tcs-tone-ink .tcs-section__title  { color: var(--tcs-ink-inverse); }
.tcs-tone-ink .tcs-section__intro,
.tcs-tone-ink .tcs-section__eyebrow { color: var(--tcs-ink-inverse-muted); }

.tcs-tone-ink .tcs-section__link {
	color: var(--tcs-ink-inverse);
	border-block-end-color: var(--tcs-band-rule-strong);
}

/*
 * A change of ground is its own separator, so consecutive sections only need
 * the generic padding restored - no hairline, no divider furniture.
 */
.home .tcs-site-main > .tcs-section {
	padding-block: var(--tcs-section-gap);
}

.home .tcs-site-main > .tcs-section + .tcs-section {
	padding-block-start: var(--tcs-section-gap);
}

/*
 * Where two sections share a ground, close the gap between them rather than
 * doubling it - otherwise they read as two unrelated things.
 */
.home .tcs-site-main > .tcs-tone-ink + .tcs-tone-ink,
.home .tcs-site-main > .tcs-tone-surface + .tcs-tone-surface {
	padding-block-start: 0;
}

/* The hero and the feature band run edge to edge and set their own spacing. */
.home .tcs-site-main > .tcs-heroslider + .tcs-section,
.home .tcs-site-main > .tcs-feature-band + .tcs-section {
	padding-block-start: var(--tcs-section-gap);
}

/* ---------------------------------------------------------------------- */
/* Section headings                                                        */
/* ---------------------------------------------------------------------- */

/*
 * Three levels, not one: a small tracked eyebrow, a serif title, and an
 * optional standfirst. The eyebrow is what lets a title be short - "Bullion"
 * rather than "Bullion products available to buy" - which is how a shop signs
 * a department.
 */

.tcs-section__eyebrow {
	margin: 0 0 var(--tcs-space-2xs);
	font-size: var(--tcs-text-3xs);
	font-weight: var(--tcs-weight-semibold);
	letter-spacing: var(--tcs-tracking-wide);
	text-transform: uppercase;
	color: var(--tcs-accent);
}

.home .tcs-section__title {
	font-family: var(--tcs-font-serif);
	font-size: var(--tcs-text-2xl);
	line-height: var(--tcs-leading-tight);
	letter-spacing: var(--tcs-tracking-tight);
}

/* Reads as a destination rather than body copy that happens to be blue. */
.home .tcs-section__link {
	align-self: flex-end;
	padding-block-end: 2px;
	border-block-end: 1px solid var(--tcs-rule-strong);
	font-size: var(--tcs-text-2xs);
	font-weight: var(--tcs-weight-semibold);
	letter-spacing: var(--tcs-tracking-label);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--tcs-ink);
	transition: border-color var(--tcs-duration) var(--tcs-ease);
}

.home .tcs-section__link:hover { border-block-end-color: var(--tcs-accent); }

/* ---------------------------------------------------------------------- */
/* Feature tiles - the three front windows                                 */
/* ---------------------------------------------------------------------- */

/*
 * Tall, photographic, and almost wordless. Portrait rather than landscape
 * because these are windows, not banners - the shape alone stops them reading
 * as three more cards - and because it gives the name somewhere to sit.
 *
 * No border, no card background, no product count. The photograph is the tile.
 */

.tcs-features__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--tcs-space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.tcs-feature { min-width: 0; }

.tcs-feature__link {
	display: block;
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--tcs-radius);
	background: var(--tcs-plate);
	text-decoration: none;
}

.tcs-feature__link:focus-visible {
	outline: var(--tcs-focus-width) solid var(--tcs-focus-color);
	outline-offset: var(--tcs-focus-offset);
}

.tcs-feature__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.tcs-feature__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--tcs-ease);
}

.tcs-feature__link:hover .tcs-feature__img { transform: scale(1.05); }

/* Weighted low and warm, so the top two thirds of the photograph stay clean. */
.tcs-feature__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(var(--tcs-scrim-rgb), 0.88) 0%,
		rgba(var(--tcs-scrim-rgb), 0.45) 34%,
		rgba(var(--tcs-scrim-rgb), 0) 66%
	);
}

.tcs-feature--nomedia .tcs-feature__media {
	background-image: repeating-linear-gradient(
		45deg, transparent, transparent 7px,
		var(--tcs-rule-faint) 7px, var(--tcs-rule-faint) 8px
	);
}

.tcs-feature--nomedia .tcs-feature__scrim { display: none; }

.tcs-feature__caption {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	display: flex;
	flex-direction: column;
	gap: var(--tcs-space-2xs);
	padding: var(--tcs-space-lg);
	color: var(--tcs-ink-inverse);
}

.tcs-feature--nomedia .tcs-feature__caption { color: var(--tcs-ink); }

.tcs-feature__name {
	font-family: var(--tcs-font-serif);
	font-size: var(--tcs-text-2xl);
	line-height: var(--tcs-leading-tight);
	letter-spacing: var(--tcs-tracking-tight);
	text-wrap: balance;
}

.tcs-feature__copy {
	font-size: var(--tcs-text-sm);
	line-height: var(--tcs-leading-normal);
	color: var(--tcs-ink-inverse-muted);
	max-width: 30ch;
}

.tcs-feature--nomedia .tcs-feature__copy { color: var(--tcs-ink-muted); }

/* The cue slides in on hover; on touch it is simply always there. */
.tcs-feature__cue {
	display: inline-flex;
	align-items: center;
	gap: var(--tcs-space-3xs);
	margin-block-start: var(--tcs-space-2xs);
	font-size: var(--tcs-text-3xs);
	font-weight: var(--tcs-weight-semibold);
	letter-spacing: var(--tcs-tracking-label);
	text-transform: uppercase;
}

.tcs-feature__cue svg { transition: transform var(--tcs-duration) var(--tcs-ease); }
.tcs-feature__link:hover .tcs-feature__cue svg { transform: translateX(3px); }

/* ---------------------------------------------------------------------- */
/* Product rows                                                            */
/* ---------------------------------------------------------------------- */

.tcs-home-row .tcs-product-grid {
	--tcs-grid-columns: 4;
}

/*
 * Merchandising cards. The catalogue card is a bordered box because a filtered
 * grid of eighty needs the boxes to tell one from the next. A homepage row of
 * four does not, and the borders were most of what made this page feel like a
 * database. Here the photograph is the card: bigger, on its own plate, with
 * the border and the box gone.
 */

.tcs-product-grid--merch .tcs-product-card {
	background: none;
	border: 0;
	border-radius: 0;
	overflow: visible;
}

.tcs-product-grid--merch .tcs-product-card:hover {
	border-color: transparent;
	box-shadow: none;
}

.tcs-product-grid--merch .tcs-product-card__media {
	aspect-ratio: 4 / 5;
	border-radius: var(--tcs-radius);
	background: var(--tcs-plate);
}

/*
 * The metal edge stays where it is - along the top of the image - but now sits
 * on the photograph rather than on a card lid, so it needs the image's radius
 * and to be lifted clear of it.
 */
.tcs-product-grid--merch .tcs-product-card::before {
	z-index: var(--tcs-z-raised);
	border-start-start-radius: var(--tcs-radius);
	border-start-end-radius: var(--tcs-radius);
}

.tcs-product-grid--merch .tcs-product-card__body {
	padding-inline: 0;
	padding-block: var(--tcs-space-sm) 0;
}

.tcs-product-grid--merch .tcs-product-card__footer {
	padding-inline: 0;
}

/* Name and price carry the row, so both step up. */
.tcs-product-grid--merch .tcs-product-card__title {
	font-size: var(--tcs-text-md);
	line-height: var(--tcs-leading-snug);
}

.tcs-product-grid--merch .tcs-product-card__price {
	font-size: var(--tcs-text-md);
	font-weight: var(--tcs-weight-semibold);
}

/* Cards on ink: the plate lifts instead of the border. */
.tcs-tone-ink .tcs-product-card__media { background: var(--tcs-band-ink-raised); }
.tcs-tone-ink .tcs-product-card__title,
.tcs-tone-ink .tcs-product-card__link,
.tcs-tone-ink .tcs-product-card__price { color: var(--tcs-ink-inverse); }

.tcs-tone-ink .tcs-product-card__mint,
.tcs-tone-ink .tcs-product-card__spec,
.tcs-tone-ink .tcs-product-card__unit-price { color: var(--tcs-ink-inverse-muted); }

/* Bullion rows keep the Ledger density. */
.tcs-home-row--dense .tcs-product-card__title {
	font-size: var(--tcs-text-sm);
}

/* ---------------------------------------------------------------------- */
/* Feature band - the mid-page break                                       */
/* ---------------------------------------------------------------------- */

/*
 * One full-width curated image, edge to edge. This is the moment that splits
 * the page, so it is the only element allowed to break the container.
 */

.tcs-feature-band {
	position: relative;
	display: grid;
	min-height: clamp(320px, 34vw, 460px);
	overflow: hidden;
	background: var(--tcs-plate);
}

.tcs-feature-band__media,
.tcs-feature-band__panel { grid-area: 1 / 1; }

.tcs-feature-band__media { position: relative; overflow: hidden; }

.tcs-feature-band__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--tcs-focal, center);
}

.tcs-feature-band__img--mobile { display: none; }

.tcs-feature-band__wraplink {
	position: absolute;
	inset: 0;
	z-index: var(--tcs-z-raised);
}

.tcs-feature-band:not(.tcs-feature-band--bare) .tcs-feature-band__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(var(--tcs-scrim-rgb), 0.78) 0%,
		rgba(var(--tcs-scrim-rgb), 0.52) 44%,
		rgba(var(--tcs-scrim-rgb), 0) 78%
	);
}

.tcs-feature-band--end:not(.tcs-feature-band--bare) .tcs-feature-band__media::after {
	transform: scaleX(-1);
}

.tcs-feature-band--dark:not(.tcs-feature-band--bare) .tcs-feature-band__media::after {
	background: linear-gradient(
		to right,
		rgba(var(--tcs-scrim-pale-rgb), 0.92) 0%,
		rgba(var(--tcs-scrim-pale-rgb), 0.7) 44%,
		rgba(var(--tcs-scrim-pale-rgb), 0) 78%
	);
}

.tcs-feature-band__panel {
	position: relative;
	display: flex;
	align-items: center;
	pointer-events: none;
	padding-block: var(--tcs-space-xl);
}

.tcs-feature-band__panel a { pointer-events: auto; }

.tcs-feature-band__content {
	max-width: 34rem;
	color: var(--tcs-ink-inverse);
}

.tcs-feature-band--dark .tcs-feature-band__content { color: var(--tcs-ink); }
.tcs-feature-band--end .tcs-feature-band__content { margin-inline-start: auto; }

.tcs-feature-band--center .tcs-feature-band__panel { justify-content: center; text-align: center; }

.tcs-feature-band__eyebrow {
	margin: 0 0 var(--tcs-space-2xs);
	font-size: var(--tcs-text-3xs);
	font-weight: var(--tcs-weight-semibold);
	letter-spacing: var(--tcs-tracking-wide);
	text-transform: uppercase;
	opacity: 0.85;
}

.tcs-feature-band__title {
	margin: 0;
	font-family: var(--tcs-font-serif);
	font-size: var(--tcs-text-3xl);
	line-height: var(--tcs-leading-tight);
	letter-spacing: var(--tcs-tracking-tight);
	text-wrap: balance;
}

.tcs-feature-band__body {
	margin: var(--tcs-space-sm) 0 var(--tcs-space-lg);
	font-size: var(--tcs-text-md);
	line-height: var(--tcs-leading-normal);
	opacity: 0.9;
	max-width: 44ch;
}

/* ---------------------------------------------------------------------- */
/* Shop by mint                                                            */
/* ---------------------------------------------------------------------- */

/*
 * Large photographic tiles, four to six of them. This replaced two separate
 * dense grids of small text boxes - "Browse the catalogue" and the old mint
 * row - which together were most of why the lower half of the page felt like
 * an index rather than a shop.
 */

.tcs-mints__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--tcs-space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.tcs-mint { min-width: 0; }

.tcs-mint__link {
	display: block;
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--tcs-radius);
	background: var(--tcs-plate);
	text-decoration: none;
}

.tcs-mint__link:focus-visible {
	outline: var(--tcs-focus-width) solid var(--tcs-focus-color);
	outline-offset: var(--tcs-focus-offset);
}

.tcs-mint__media { position: absolute; inset: 0; overflow: hidden; }

.tcs-mint__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--tcs-ease);
}

.tcs-mint__link:hover .tcs-mint__img { transform: scale(1.05); }

.tcs-mint__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(var(--tcs-scrim-rgb), 0.82) 0%,
		rgba(var(--tcs-scrim-rgb), 0.3) 52%,
		rgba(var(--tcs-scrim-rgb), 0.08) 100%
	);
}

.tcs-mint--nomedia .tcs-mint__media {
	background-image: repeating-linear-gradient(
		45deg, transparent, transparent 7px,
		var(--tcs-rule-faint) 7px, var(--tcs-rule-faint) 8px
	);
}

.tcs-mint--nomedia .tcs-mint__scrim { display: none; }

.tcs-mint__name {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: var(--tcs-space-md);
	font-family: var(--tcs-font-serif);
	font-size: var(--tcs-text-lg);
	line-height: var(--tcs-leading-snug);
	color: var(--tcs-ink-inverse);
	text-wrap: balance;
}

.tcs-mint--nomedia .tcs-mint__name {
	position: static;
	display: block;
	color: var(--tcs-ink);
}

/* ---------------------------------------------------------------------- */
/* Services counter                                                        */
/* ---------------------------------------------------------------------- */

/*
 * Large image-led tiles on ink, closing the page. Grading, buy-back and
 * wholesale are the reasons to choose a dealer over a listing site, so they
 * end the page rather than trailing off it.
 */

.tcs-services {
	background: var(--tcs-band-ink);
	color: var(--tcs-ink-inverse);
}

.tcs-services .tcs-section__header { border-block-end-color: var(--tcs-band-rule); }
.tcs-services .tcs-section__title  { color: var(--tcs-ink-inverse); }

.tcs-services__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--tcs-space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.tcs-service { min-width: 0; }

.tcs-service__link {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--tcs-radius);
	background: var(--tcs-band-ink-raised);
	text-decoration: none;
}

.tcs-service__link:focus-visible {
	outline: var(--tcs-focus-width) solid var(--tcs-focus-color);
	outline-offset: var(--tcs-focus-offset);
}

.tcs-service__media { position: absolute; inset: 0; overflow: hidden; }

.tcs-service__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--tcs-ease);
}

.tcs-service__link:hover .tcs-service__img { transform: scale(1.05); }

.tcs-service__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(var(--tcs-scrim-rgb), 0.9) 0%,
		rgba(var(--tcs-scrim-rgb), 0.55) 46%,
		rgba(var(--tcs-scrim-rgb), 0.15) 100%
	);
}

/*
 * Without artwork the tile becomes typographic rather than a bordered box.
 * Three empty rectangles closing the page is the exact failure this pass set
 * out to remove, so the fallback is a hairline and large type instead - which
 * is a deliberate treatment rather than a hole where a photograph should be.
 */
.tcs-service--nomedia .tcs-service__link {
	aspect-ratio: auto;
	background: none;
	border-block-start: 1px solid var(--tcs-band-rule-strong);
	border-radius: 0;
}

.tcs-service--nomedia .tcs-service__media { display: none; }

.tcs-service__body {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	display: flex;
	flex-direction: column;
	gap: var(--tcs-space-2xs);
	padding: var(--tcs-space-lg);
	color: var(--tcs-ink-inverse);
}

.tcs-service--nomedia .tcs-service__body {
	position: static;
	min-height: 9rem;
	padding-inline: 0;
	padding-block: var(--tcs-space-md) 0;
}

.tcs-service--nomedia .tcs-service__title { font-size: var(--tcs-text-2xl); }

.tcs-service__title {
	font-family: var(--tcs-font-serif);
	font-size: var(--tcs-text-xl);
	line-height: var(--tcs-leading-snug);
}

.tcs-service__copy {
	font-size: var(--tcs-text-sm);
	line-height: var(--tcs-leading-normal);
	color: var(--tcs-ink-inverse-muted);
	max-width: 38ch;
}

.tcs-service__cta {
	margin-block-start: var(--tcs-space-2xs);
	font-size: var(--tcs-text-3xs);
	font-weight: var(--tcs-weight-semibold);
	letter-spacing: var(--tcs-tracking-label);
	text-transform: uppercase;
	color: var(--tcs-ink-inverse);
}

.tcs-service__link:hover .tcs-service__cta { text-decoration: underline; }

/* ---------------------------------------------------------------------- */
/* Editor-only prompts                                                     */
/* ---------------------------------------------------------------------- */

/*
 * Shown to people who can act on them and to nobody else. A customer must
 * never see scaffolding, but an editor should not have to guess why a panel
 * looks bare.
 */
.tcs-admin-hint {
	margin-block-start: var(--tcs-space-lg);
	padding: var(--tcs-space-sm) var(--tcs-space-md);
	border: var(--tcs-border-faint);
	border-inline-start: 2px solid var(--tcs-accent);
	border-radius: var(--tcs-radius-sm);
	background: var(--tcs-surface);
	font-size: var(--tcs-text-xs);
	color: var(--tcs-ink-muted);
}

.tcs-tone-ink .tcs-admin-hint,
.tcs-services .tcs-admin-hint {
	background: var(--tcs-band-ink-raised);
	border-color: var(--tcs-band-rule);
	border-inline-start-color: var(--tcs-accent);
	color: var(--tcs-ink-inverse-muted);
}

/* ---------------------------------------------------------------------- */
/* Breakpoints                                                             */
/* ---------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.tcs-home-row .tcs-product-grid { --tcs-grid-columns: 3; }
	.tcs-mints__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.tcs-slide { height: clamp(220px, 42vw, 300px); }

	/* The uploaded mobile crop takes over where one exists. */
	.tcs-slide__img--mobile { display: block; }
	.tcs-slide__media:has(.tcs-slide__img--mobile) .tcs-slide__img--desktop { display: none; }

	.tcs-heroslider__arrow { width: 34px; height: 34px; }
	.tcs-heroslider__arrow--prev { inset-inline-start: var(--tcs-space-xs); }
	.tcs-heroslider__arrow--next { inset-inline-end: var(--tcs-space-xs); }

	/* Copy sits over the foot of the image, so the product stays visible. */
	.tcs-slide__media::after,
	.tcs-slide--end .tcs-slide__media::after {
		transform: none;
		background: linear-gradient( to top, rgba(var(--tcs-scrim-rgb), 0.88) 0%, rgba(var(--tcs-scrim-rgb), 0.35) 62% );
	}

	.tcs-slide__panel,
	.tcs-slide--end .tcs-slide__panel,
	.tcs-slide--center .tcs-slide__panel {
		align-items: flex-end;
		justify-content: flex-start;
		text-align: start;
		padding-block-end: 2.75rem;
	}

	.tcs-slide__content { max-width: none; }
	.tcs-slide--center .tcs-slide__body { margin-inline: 0; }

	/*
	 * The three windows become a single column. Three portrait tiles squeezed
	 * side by side on a phone is exactly the cramped, wireframe look this pass
	 * set out to remove, so they go wide and shallow instead.
	 */
	.tcs-features__list { grid-template-columns: 1fr; }
	.tcs-feature__link  { aspect-ratio: 16 / 9; }
	.tcs-feature__caption { padding: var(--tcs-space-md); }
	.tcs-feature__name  { font-size: var(--tcs-text-xl); }

	.tcs-services__list { grid-template-columns: 1fr; }
	.tcs-service__link  { aspect-ratio: 16 / 9; }
	.tcs-service__body  { padding: var(--tcs-space-md); }

	/* Text over a full-bleed image needs the scrim to come from below. */
	.tcs-feature-band { min-height: 0; }
	.tcs-feature-band__img--mobile { display: block; }
	.tcs-feature-band__media:has(.tcs-feature-band__img--mobile) .tcs-feature-band__img:not(.tcs-feature-band__img--mobile) { display: none; }

	.tcs-feature-band:not(.tcs-feature-band--bare) .tcs-feature-band__media::after,
	.tcs-feature-band--end:not(.tcs-feature-band--bare) .tcs-feature-band__media::after {
		transform: none;
		background: linear-gradient(
			to top,
			rgba(var(--tcs-scrim-rgb), 0.9) 0%,
			rgba(var(--tcs-scrim-rgb), 0.4) 62%
		);
	}

	.tcs-feature-band__panel {
		align-items: flex-end;
		padding-block: var(--tcs-space-2xl) var(--tcs-space-lg);
	}

	.tcs-feature-band__content { max-width: none; }
	.tcs-feature-band__title { font-size: var(--tcs-text-2xl); }
	.tcs-feature-band__body { margin-block-end: var(--tcs-space-md); }
}

@media (max-width: 640px) {
	.tcs-home-row .tcs-product-grid { --tcs-grid-columns: 2; }

	.tcs-mints__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--tcs-space-sm);
	}

	.tcs-mint__link { aspect-ratio: 1 / 1; }
	.tcs-mint__name { padding: var(--tcs-space-sm); font-size: var(--tcs-text-base); }

	.tcs-slide__title { font-size: clamp(1.3rem, 5.5vw, 1.7rem); }
	.tcs-slide__body  { display: none; } /* Height is tight; heading and button carry it. */

	.home .tcs-section__title { font-size: var(--tcs-text-xl); }

	.tcs-feature-band__body { display: none; } /* Heading and button carry it. */
}

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

@media (prefers-reduced-motion: reduce) {
	.tcs-feature__img,
	.tcs-mint__img,
	.tcs-service__img,
	.tcs-feature__cue svg,
	.tcs-heroslider__arrow,
	.tcs-heroslider__dot::before {
		transition: none;
	}

	.tcs-feature__link:hover .tcs-feature__img,
	.tcs-mint__link:hover .tcs-mint__img,
	.tcs-service__link:hover .tcs-service__img,
	.tcs-feature__link:hover .tcs-feature__cue svg {
		transform: none;
	}
}

/* ---------------------------------------------------------------------- */
/* Print                                                                   */
/* ---------------------------------------------------------------------- */

@media print {
	.tcs-heroslider,
	.tcs-feature-band,
	.tcs-features,
	.tcs-services,
	.tcs-mints {
		display: none;
	}
}