/**
 * ALLENTE Works Index v1.
 *
 * Scoped to the existing /artwork/ request.
 */

.allente-site--works {
	--allente-works-accent: var(--allente-color-accent);
	--allente-works-muted: #6f685f;
}

.allente-site--works .site-content {
	padding-block: clamp(2.5rem, 6vw, 6.5rem) clamp(5rem, 10vw, 10rem);
}

.allente-site--works .allente-works-main {
	width: min(100%, 82rem);
	margin-inline: auto;
}

.allente-site--works .allente-works__header {
	margin-bottom: clamp(4rem, 9vw, 9rem);
}

.allente-site--works .allente-works__title {
	max-width: 10ch;
	margin: 0;
	font-family: var(--allente-font-display);
	font-size: var(--allente-type-page-title-size);
	font-weight: 600;
	letter-spacing: -0.055em;
	line-height: 0.86;
}

.allente-site--works .allente-works__grid {
	display: block;
	margin: 0;
	padding: 0;
}

.allente-site--works .allente-works__series {
	display: block;
	margin-top: clamp(5rem, 9vw, 8rem);
}

.allente-site--works .allente-works__series:first-child {
	margin-top: 0;
}

.allente-site--works .allente-works__series-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--allente-color-ink);
}

.allente-site--works .allente-works__series-title {
	display: block;
	margin: 0;
	color: var(--allente-works-muted);
	font-family: var(--allente-font-body);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
}

.allente-site--works .allente-works__rail-controls {
	display: flex;
	flex: 0 0 auto;
	gap: 0.5rem;
}

.allente-site--works .allente-works__rail-controls[hidden] {
	display: none;
}

.allente-site--works .allente-works__rail-button {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0;
	border: 1px solid var(--allente-color-line);
	border-radius: 50%;
	background: transparent;
	color: var(--allente-color-ink);
	font: inherit;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: border-color 180ms ease, color 180ms ease, transform 180ms ease, opacity 180ms ease;
}

.allente-site--works .allente-works__rail-button:hover,
.allente-site--works .allente-works__rail-button:focus-visible {
	border-color: var(--allente-works-accent);
	color: var(--allente-works-accent);
}

.allente-site--works .allente-works__rail-button:active:not(:disabled) {
	transform: translateY(1px);
}

.allente-site--works .allente-works__rail-button:disabled {
	opacity: 0.25;
	cursor: default;
}

.allente-site--works .allente-works__series-rail {
	display: grid;
	grid-auto-columns: min(400px, calc(100vw - (2 * var(--allente-page-gutter))));
	grid-auto-flow: column;
	gap: 180px;
	width: calc(100% + (2 * var(--allente-page-gutter)));
	margin-inline: calc(-1 * var(--allente-page-gutter));
	padding: 0 var(--allente-page-gutter) 1rem;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-padding-inline: var(--allente-page-gutter);
	scroll-snap-type: inline mandatory;
	scrollbar-color: var(--allente-color-line) transparent;
	scrollbar-width: thin;
	list-style: none;
}

.allente-site--works .allente-works__series-rail::-webkit-scrollbar {
	height: 3px;
}

.allente-site--works .allente-works__series-rail::-webkit-scrollbar-thumb {
	background: var(--allente-color-line);
}

.allente-site--works .allente-works__item,
.allente-site--works .allente-work-card,
.allente-site--works .allente-work-card__figure {
	min-width: 0;
	margin: 0;
}

.allente-site--works .allente-works__item {
	scroll-snap-align: start;
}

.allente-site--works .allente-work-card {
	width: 100%;
	max-width: 400px;
}

.allente-site--works .allente-work-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.allente-site--works .allente-work-card__visual {
	width: 100%;
	background: var(--allente-color-surface);
	transform: translateY(0);
	box-shadow: 0 0 0 rgb(34 32 27 / 0%);
	transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.allente-site--works .allente-work-card__image {
	width: 100%;
	max-width: 400px;
	height: auto;
	object-fit: contain;
	transform: scale(1);
	filter: saturate(1) contrast(1);
	transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1), filter 560ms ease;
}

.allente-site--works .allente-work-card__caption {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--allente-color-line);
}

.allente-site--works .allente-work-card__title,
.allente-site--works .allente-work-card__year {
	margin: 0;
	font-family: var(--allente-font-body);
	font-size: clamp(0.8rem, 1.1vw, 0.95rem);
	font-weight: 500;
	letter-spacing: 0.035em;
	line-height: 1.35;
}

.allente-site--works .allente-work-card__year {
	flex: 0 0 auto;
	color: var(--allente-works-muted);
	font-variant-numeric: tabular-nums;
}

.allente-site--works .allente-work-card:hover .allente-work-card__visual,
.allente-site--works .allente-work-card__link:focus-visible .allente-work-card__visual {
	transform: translateY(-2px);
	box-shadow: 0 20px 44px rgb(34 32 27 / 12%);
}

.allente-site--works .allente-work-card:hover .allente-work-card__image,
.allente-site--works .allente-work-card__link:focus-visible .allente-work-card__image {
	transform: scale(1.012);
	filter: saturate(1.025) contrast(1.01);
}

.allente-site--works .allente-work-card__link:focus-visible {
	outline: none;
}

.allente-site--works .allente-work-card__link:focus-visible .allente-work-card__title {
	text-decoration: underline;
	text-decoration-color: var(--allente-works-accent);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.25em;
}

@media (min-width: 1280px) {
	.allente-site--works .allente-works__header {
		padding-inline: clamp(1rem, 2vw, 2rem);
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.allente-site--works .allente-works__series-rail {
		grid-auto-columns: min(400px, 60vw);
		gap: clamp(90px, 17.55vw, 180px);
	}
}

@media (max-width: 767px) {
	.allente-site--works .site-content {
		padding-top: clamp(2.5rem, 12vw, 4.5rem);
	}

	.allente-site--works .allente-works__header {
		margin-bottom: clamp(3.5rem, 15vw, 5.5rem);
	}

	.allente-site--works .allente-works__series {
		margin-top: clamp(4.5rem, 16vw, 7rem);
	}

	.allente-site--works .allente-works__series-rail {
		grid-auto-columns: min(400px, 80vw);
		gap: 90px;
	}

	.allente-site--works .allente-work-card__caption {
		padding-top: 0.875rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.allente-site--works .allente-works__rail-button,
	.allente-site--works .allente-work-card__visual,
	.allente-site--works .allente-work-card__image {
		transition: none;
	}
}