/*
 * Portfolio: whole photos in columns on a black page, under a big white title.
 * portfolio.js arranges the columns (.is-arranged), arms the reveal (.is-armed) and sets
 * --progress for the side lines.
 */

.works {
	--columns: 3;
	--gap: clamp(.75rem, 1.4vw, 1.5rem);
	/* --works-paper is the page, --works-ink the type, lines and the Instagram tile */
	--works-paper: #000;
	--works-ink: #FFF;
	--ease-reveal: cubic-bezier(.16, 1, .3, 1);
	--ease-hover: cubic-bezier(.2, .7, .2, 1);
	background: var(--works-paper);
	color: var(--works-ink);
	border-top: 1px solid var(--line-dark);
}

.works__inner {
	max-width: 1760px;
	margin: 0 auto;
	padding: clamp(4.5rem, 8vw, 9rem) var(--gutter) clamp(5rem, 9vw, 10rem);
}

/* Big white title across the whole width; PORTFOLIO is about 9.9em wide in Syne. */
.works__title {
	margin-left: -.05em;
	font-size: min(calc((min(100vw, 1760px) - 2 * var(--gutter)) / 10.1), 11.2rem);
	line-height: .86;
	color: var(--works-ink);
}

.works__body {
	position: relative;
	margin-top: clamp(2.5rem, 4.5vw, 5rem);
}

/* Side lines: a faint line that draws in white as you scroll through the works. */
.works__rail {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: rgb(255 255 255 / .14);
	pointer-events: none;
}

.works__rail--left { left: calc(var(--gutter) / -2); }
.works__rail--right { right: calc(var(--gutter) / -2); }

.works__rail::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--works-ink);
	transform: scaleY(var(--progress, 0));
	transform-origin: top;
}

/* A small dot leads the drawn line. */
.works__rail::after {
	content: '';
	position: absolute;
	top: calc(var(--progress, 0) * 100%);
	left: 50%;
	width: 7px;
	height: 7px;
	margin: -3.5px 0 0 -3.5px;
	border-radius: 50%;
	background: var(--works-ink);
	opacity: var(--rail-dot, 0);
	transition: opacity .3s ease;
}

/* Columns: the browser's own until portfolio.js arranges them */
.works__grid {
	columns: var(--columns);
	column-gap: var(--gap);
}

.works__grid.is-arranged {
	display: flex;
	align-items: stretch;
	gap: var(--gap);
	columns: auto;
}

.works__column {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--gap);
	min-width: 0;
}

/* The middle column starts lower, so the photos fall into an offset rhythm. */
.works__column--offset { margin-top: var(--offset, 0); }

.works__item {
	position: relative;
	display: block;
	margin-bottom: var(--gap);
	overflow: hidden;
	background: #111;
	color: #FFF;
	break-inside: avoid;
}

.works__grid.is-arranged .works__item { margin-bottom: 0; }

.works__item:focus-visible { outline: 2px solid var(--works-ink); outline-offset: 3px; }

.works__item img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform .7s var(--ease-hover), filter .7s var(--ease-hover);
}

/* Catalogue number, always shown */
.works__index {
	position: absolute;
	top: .8rem;
	left: .85rem;
	font-size: .6875rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: .14em;
	text-shadow: 0 1px 10px rgb(0 0 0 / .55), 0 0 3px rgb(0 0 0 / .5);
	pointer-events: none;
}

/* Number of details, on the work under the cursor only */
.works__label {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: flex-end;
	min-height: 25%;
	padding: 1rem .9rem .85rem;
	background: linear-gradient(to top, rgb(0 0 0 / .62), transparent);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}

.works__label > span { transform: translateY(6px); transition: transform .3s var(--ease-reveal); }

/* Closing tile: a white outline on the black page, fills what is left at the bottom of the shortest column. */
.works__more {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: clamp(9rem, 16vw, 14rem);
	padding: clamp(1rem, 2vw, 1.75rem);
	overflow: hidden;
	border: 1px solid var(--works-ink);
	color: var(--works-ink);
	container-type: inline-size;
}

.works__grid:not(.is-arranged) .works__more { min-height: 14rem; break-inside: avoid; }

.works__more-bottom { display: flex; flex-direction: column; gap: .6rem; }

.works__more-handle {
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .04em;
}

/* Too narrow for the account name next to nothing else: the word alone says it. */
@container (max-width: 150px) {
	.works__more-handle { display: none; }
}

.works__more-button {
	display: grid;
	align-self: flex-end;
	flex: none;
	place-items: center;
	width: clamp(2.5rem, 4vw, 3.25rem);
	aspect-ratio: 1;
	border: 1px solid var(--works-ink);
	border-radius: 50%;
	font-size: 1.125rem;
	line-height: 1;
	transition: background-color .3s ease, color .3s ease, transform .45s var(--ease-reveal);
}

.works__more-text {
	display: block;
	font-family: var(--font-head);
	/* INSTAGRAM is about 9.8em wide in Syne, so it fills the tile's width at 10 % per em. */
	font-size: min(9.6cqw, 4.5rem);
	font-weight: 800;
	letter-spacing: -.04em;
	line-height: 1;
	text-transform: uppercase;
}

.works__more:focus-visible { outline: 2px solid var(--works-ink); outline-offset: 3px; }

/* Reveal: each photo rises a little and fades in, one after another. */
.works.is-armed .works__item,
.works.is-armed .works__more {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity .7s ease var(--delay, 0ms), transform 1s var(--ease-reveal) var(--delay, 0ms);
}

.works.is-armed .works__item.is-in,
.works.is-armed .works__more.is-in { opacity: 1; transform: none; }

.works.is-armed .works__item.is-settled,
.works.is-armed .works__more.is-settled { transition: none; }

@media (hover: hover) and (pointer: fine) {
	.works__item:hover img { transform: scale(1.03); filter: brightness(1.06); }
	.works__item:hover .works__label,
	.works__item:focus-visible .works__label { opacity: 1; }
	.works__item:hover .works__label > span,
	.works__item:focus-visible .works__label > span { transform: none; }
	.works__more:hover .works__more-button { background: var(--works-ink); color: var(--works-paper); transform: rotate(45deg); }
}

/* Phones held upright: two columns. Kept in sync with PHONE in portfolio.js. */
@media (max-width: 768px) and (orientation: portrait), (max-width: 560px) {
	.works { --columns: 2; --gap: .5rem; }
	.works__index { top: .6rem; left: .65rem; }
	.works__more-handle { font-size: .6875rem; }
	.works__more { padding: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
	.works__item img, .works__label, .works__label > span, .works__more-button, .works__rail::after { transition: none; }
}