/* Layout lab — test pages, reached by typing "fff" */

.lab-crumb {
	position: fixed;
	top: 1rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	white-space: nowrap;
}

.lab-main { padding-top: calc(var(--fs) * 1.3 + 3rem); padding-bottom: 3rem; } /* the corner links rest below the last line, not on it */

button.lab-card, button.lab-tile, .lab-close {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	text-align: left;
	cursor: pointer;
}

/* Landing page */
.lab-intro { max-width: 32rem; margin-bottom: 3rem; }
.lab-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.lab-list li { border-bottom: 1px solid var(--rule); }
.lab-list a {
	display: grid;
	grid-template-columns: 3rem minmax(8rem, 14rem) 1fr auto;
	gap: 1rem;
	padding: 1rem 0;
}
.lab-list a:hover { border-bottom: 0; }
.lab-list a:hover .lab-go { transform: translateX(4px); color: var(--text); }
.lab-go { color: var(--muted); transition: transform 0.15s ease; }

/* 01 Index */
.lab-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.lab-index li {
	display: grid;
	/* Fixed outer columns: every row is its own grid, so an auto width
	   ("6 img" vs "29 img") would shift the middle columns row to row */
	grid-template-columns: 3rem minmax(0, 1.2fr) minmax(0, 1fr) 4em;
	gap: 1rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--rule);
	cursor: pointer;
}
.lab-index li:hover { background: var(--highlight); color: var(--highlight-ink); }
.lab-index li:hover .muted { color: var(--highlight-muted); }
.lab-index .lab-count { text-align: right; }
.lab-preview {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 15;
	width: min(28vw, 360px);
	height: auto;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
}
.lab-preview.is-visible { opacity: 1; }
@media (hover: none) { .lab-preview { display: none; } }

/* 02 Grid */
.lab-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem 1.5rem;
}
.lab-card-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--rule); }
.lab-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.lab-card:hover .lab-card-media img { transform: scale(1.02); }
.lab-card-text { display: flex; flex-direction: column; margin-top: 0.6rem; }

/* 03 Filmstrip */
.lab-strip {
	display: grid;
	grid-template-columns: minmax(10rem, 2fr) 10fr;
	gap: 1.5rem;
	padding: 1.5rem 0;
	border-top: 1px solid var(--rule);
}
.lab-strip-text { display: flex; flex-direction: column; gap: 0.1rem; }
.lab-strip-text .lab-link { margin-top: 0.8rem; align-self: flex-start; }
.lab-strip-track {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	margin-right: -1rem;
	padding-right: 1rem;
}
.lab-strip-track img {
	flex: 0 0 auto;
	height: min(38vh, 340px);
	width: auto;
	scroll-snap-align: start;
	cursor: pointer;
}

/* 04 Stack */
html:has(body[data-layout="stack"]) { scroll-snap-type: y mandatory; }
body[data-layout="stack"] .site-footer { scroll-snap-align: end; }
.lab-slide {
	height: 100vh;
	height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	scroll-snap-align: start;
	padding: 3.5rem 0 1rem;
}
.lab-slide-media { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.lab-slide-media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; cursor: pointer; }
.lab-slide-bar { display: flex; justify-content: space-between; gap: 1rem; padding-top: 0.75rem; }
body[data-layout="stack"] .lab-main { padding-top: 0; }

/* 05 Contact sheet */
.lab-sheet-names {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	max-width: 60rem;
}
.lab-sheet-names li { cursor: pointer; color: var(--muted); transition: color 0.15s ease; }
.lab-sheet-names li:hover, .lab-sheet-names li.is-active { color: var(--text); }
.lab-sheet {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	gap: 4px;
}
.lab-tile { aspect-ratio: 1; overflow: hidden; transition: opacity 0.2s ease; }
.lab-tile img { width: 100%; height: 100%; object-fit: cover; }

/* Lightbox */
.lab-lightbox {
	position: fixed;
	inset: 0;
	z-index: 30;
	display: flex;
	flex-direction: column;
	padding: 1rem;
	/* The page shows faintly through, heavily blurred */
	background: color-mix(in srgb, var(--bg) 82%, transparent);
	-webkit-backdrop-filter: blur(28px) saturate(1.2);
	backdrop-filter: blur(28px) saturate(1.2);
}
.lab-lightbox > figure { flex: 1; min-height: 0; margin: 0; display: flex; align-items: center; justify-content: center; }
.lab-lightbox > figure img { cursor: pointer; }
/* In: the page fades up, then the picture eases in from slightly smaller.
   Out: the same, quicker, in reverse. */
.lab-lightbox { animation: lb-fade 0.28s ease both; }
.lab-lightbox > figure img { animation: lb-pic 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both; }
.lab-lightbox-bar,
.lab-lightbox .lab-close { animation: lb-fade 0.4s ease 0.15s both; }
.lab-lightbox.is-closing { animation: lb-fade 0.2s ease reverse both; }
.lab-lightbox.is-closing figure img { animation: lb-pic 0.2s ease reverse both; }
@keyframes lb-fade { from { opacity: 0; } }
@keyframes lb-pic { from { opacity: 0; transform: scale(0.96); } }
@media (prefers-reduced-motion: reduce) {
	.lab-lightbox, .lab-lightbox > figure img, .lab-lightbox-bar, .lab-lightbox .lab-close { animation-duration: 0.01s; animation-delay: 0s; }
}
.lab-lightbox > figure > img,
.lab-lightbox > figure > video { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.lab-lightbox > figure > video { cursor: auto; animation: lb-pic 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both; }
/* A film: the case study player, as wide as fits with its bar underneath */
.lab-lightbox > figure > .film { width: min(100%, calc((100dvh - 10rem) * 16 / 9)); animation: lb-pic 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both; }
/* Lightbox uses the slideshow's arrow cursor (see .cursor-arrow in site.css) */
.lab-lightbox.hover-left .cursor-arrow::before { content: "\2190"; }
.lab-lightbox.hover-right .cursor-arrow::before { content: "\2192"; }
.lab-lightbox.hover-close .cursor-arrow::before { content: "Close"; } /* off the picture, a click closes it */
@media (hover: hover) {
	.lab-lightbox > figure img,
	.lab-lightbox.hover-close { cursor: none; }
	.lab-lightbox.hover-left .cursor-arrow,
	.lab-lightbox.hover-right .cursor-arrow,
	.lab-lightbox.hover-close .cursor-arrow { opacity: 1; }
}
.lab-lightbox-bar { display: flex; justify-content: space-between; gap: 1rem; padding-top: 0.75rem; }
/* Caption: "Title — tag" in one line; on phones the tag drops under the title
   so the count stays on one line */
.lab-lightbox-sub::before { content: " — "; }
.lab-lightbox-count { white-space: nowrap; }
.lab-lightbox-link { margin-left: 1.2rem; }
@media (max-width: 640px) {
	.lab-lightbox-sub { display: block; }
	.lab-lightbox-sub::before { content: none; }
	.lab-lightbox-link { display: block; margin: 0.5rem 0 0; }
}
/* Close sits in the top-right corner, where the light/dark dot usually is */
.lab-lightbox .lab-close { position: absolute; top: 1rem; right: 1rem; z-index: 2; }
.lab-lightbox > figure { margin-top: calc(var(--fs) * 1.3 + 0.75rem); }
.lab-close:hover { background: var(--highlight); color: var(--highlight-ink); }

@media (max-width: 900px) {
	.lab-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.lab-crumb { left: auto; right: calc(1rem + 24px); transform: none; }
	.lab-list a { grid-template-columns: 2rem 1fr auto; }
	.lab-list a .lab-desc { grid-column: 2 / -1; grid-row: 2; }
	/* Phones: number | title and tags stacked | a small picture */
	.lab-index li {
		grid-template-columns: 2rem minmax(0, 1fr) 6.4rem;
		grid-template-areas: "num title thumb" "num tag thumb";
		grid-template-rows: auto 1fr;
		column-gap: 1rem;
		row-gap: 0.15rem;
		padding: 1rem 0;
	}
	.lab-index .lab-num { grid-area: num; }
	.lab-index .lab-title { grid-area: title; }
	.lab-index .lab-tag { grid-area: tag; }
	.lab-index .lab-count { display: none; }
	.lab-index .lab-index-thumb { display: block; grid-area: thumb; align-self: center; }
	.lab-grid { grid-template-columns: 1fr; }
	.lab-strip { grid-template-columns: 1fr; gap: 0.75rem; }
	.lab-strip-track img { height: 220px; }
	.lab-sheet { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
}

/* Homepage view switch: Projects · Spectrum · Shelf · Index */
.view-toggle {
	position: fixed;
	top: 1rem;
	/* Sits just left of the light/dark dot */
	right: calc(1rem + 11px + 0.9rem);
	z-index: 10;
	display: flex;
	gap: 0.75rem;
	white-space: nowrap;
}
.view-toggle button {
	font: inherit;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	opacity: 0.4;
	cursor: pointer;
	transition: opacity 0.15s ease;
}
.view-toggle button:hover,
.view-toggle button[aria-pressed="true"] { opacity: 1; }

html[data-view="index"] .home main > section.page:not(#Title),
html[data-view="shelves"] .home main > section.page:not(#Title),
html[data-view="spectrum"] .home main > section.page:not(#Title) { display: none; }
html:not([data-view="index"]) .index-view { display: none; }
html:not([data-view="shelves"]) .shelves-view { display: none; }
html:not([data-view="spectrum"]) .spectrum-view { display: none; }

/* Shelf tiles: the cover in its real shape, name and type under it */
.work-tile { display: flex; flex-direction: column; justify-content: flex-start; padding: 0; color: inherit; } /* buttons would centre their contents */
button.work-tile { font: inherit; text-align: left; border: 0; background: none; cursor: pointer; }
.work-tile:hover { background: none; }
.work-tile:hover .work-title { background: var(--highlight); color: var(--highlight-ink); }
.work-pic { position: relative; overflow: hidden; background: var(--rule); }
.work-pic img,
.work-pic video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Image switching: two stacked images trade places (see workTile) */
.work-pic.is-flip > img { position: absolute; inset: 0; }
.work-pic.is-flip > img.is-back { visibility: hidden !important; }
/* Stills scrubbed over a paused film while hovered */
.work-scrub { position: absolute; inset: 0; visibility: hidden; }
.is-scrubbing .work-scrub { visibility: visible; }
.work-cap { padding-top: 0.45rem; }
.work-cap .muted { display: block; }
html[data-filter="art"] .work-tile:not([data-tags~="art"]),
html[data-filter="video"] .work-tile:not([data-tags~="video"]),
html[data-filter="photo"] .work-tile:not([data-tags~="photo"]),
html[data-filter="design"] .work-tile:not([data-tags~="design"]) { display: none; }

.home { --label-room: calc(var(--fs) * 1.3 + 0.5rem); --lift: 0.6rem; /* everything sits this much closer under the filters */ }
/* Every view's very first thing (a picture, Shelf's label, Index's top
   rule) starts on one line: each view opens with a rem of padding, which a
   project row's own top spacing matches */
.home .project-filters { margin-bottom: calc(var(--label-room) - 1rem - var(--lift)); }

/* Spectrum view: justified rows sorted by colour, nothing cropped */
.spectrum-view { padding: 1rem 0 3rem; }
.spectrum-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.5rem 0.5rem; } /* pictures line up along the top */
.spectrum-grid::after { content: ""; flex-grow: 999; } /* the last row keeps its height */
.spectrum-tile { flex-grow: var(--r); flex-basis: calc(var(--r) * 200px); }
.spectrum-tile .work-pic { aspect-ratio: var(--r); background: none; }
.spectrum-tile .work-pic img,
.spectrum-tile .work-pic video { object-fit: contain; }

/* Shelves view: a sideways row per kind of work; only the shelf scrolls */
.shelves-view { padding: 1rem 0 3rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.shelf { min-width: 0; --h: 15rem; }
.shelf-name { margin-bottom: 0.5rem; }
/* Each shelf runs the full width of the screen: the first picture lines up
   with the page, and pictures slide off both edges as it scrolls */
.shelf-track { display: flex; gap: 0.5rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; width: 100vw; margin-left: calc(50% - 50vw); padding-inline: 1rem; scroll-padding-inline: 1rem; } /* swipe or shift-scroll; no scrollbar */
.shelf-track::after { content: ""; flex: 0 0 0.5rem; } /* room after the last picture (end padding is dropped) */
.shelf-track::-webkit-scrollbar { display: none; }
.shelf-tile { flex: 0 0 auto; width: calc(var(--r) * var(--h)); scroll-snap-align: start; }
.shelf-tile .work-pic { height: var(--h); background: none; }
/* Nothing cropped: every image (and film) shows whole, whatever its shape */
.shelf-tile .work-pic img,
.shelf-tile .work-pic video { object-fit: contain; object-position: left bottom; }
/* Filtered: just that kind's shelf */
html[data-filter="art"] .shelf:not([data-shelf="art"]),
html[data-filter="video"] .shelf:not([data-shelf="video"]),
html[data-filter="photo"] .shelf:not([data-shelf="photo"]),
html[data-filter="design"] .shelf:not([data-shelf="design"]) { display: none; }

@media (max-width: 640px) {
	.shelf { --h: 13.5rem; } /* phones: a little taller */
	.spectrum-grid { gap: 1rem 0.35rem; }
	.spectrum-tile { flex-basis: calc(var(--r) * 110px); }
}
/* Phones have no view toggle, so always show the projects there */
.index-view { padding: 1rem 0 3rem; }

/* Music archive rows (not links) */
.lab-tracks div { display: grid; grid-template-columns: 3rem minmax(8rem, 14rem) 1fr; gap: 1rem; padding: 1rem 0; }
@media (max-width: 640px) { .lab-tracks div { grid-template-columns: 2rem 1fr; } .lab-tracks .lab-desc { grid-column: 2; } }

/* Project filters: All · Art · Video · Photo · Design, in the Projects and Index views */
.project-filters { display: flex; gap: 0.75rem; padding: 0.5rem 0 0; }
html[data-view]:not([data-view="projects"]):not([data-view="index"]):not([data-view="shelves"]):not([data-view="spectrum"]) .project-filters { display: none; }
/* The same filters narrow the Index list */
html[data-filter="art"] .lab-index li:not([data-tags~="art"]),
html[data-filter="video"] .lab-index li:not([data-tags~="video"]),
html[data-filter="photo"] .lab-index li:not([data-tags~="photo"]),
html[data-filter="design"] .lab-index li:not([data-tags~="design"]) { display: none; }
.project-filters button {
	font: inherit;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	opacity: 0.4;
	cursor: pointer;
	transition: opacity 0.15s ease;
}
.project-filters button:hover,
.project-filters button[aria-pressed="true"] { opacity: 1; }
.home main > section.page.is-filtered-out { display: none !important; }

/* Index thumbnails are for phones; desktop has the hover preview instead */
.lab-index-thumb { display: none; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (hover: none) { .lab-preview { display: none; } }