:root {
	--lb-bar-top-padding: 21px;
	--lb-line-height: 20px; /* the bar’s line-height “row” */
	--lb-caption-height: calc(5 * var(--lb-line-height)); /* desktop caption block height */
	--lb-bottom-padding: 26px;
	--lb-side-padding: var(--space-page-x, 36px);
	--lb-horizontal-padding: calc(var(--lb-side-padding) * 2);
	--lb-background: #fff;
}

.lb[hidden] { display: none; }

.lb {
	width: 100%;
	height: 100%;
	position: fixed;
	display: flex;
	flex-direction: column;
	z-index: 1000;
	color: #000;
	background: var(--lb-background);
	padding: var(--lb-bar-top-padding) var(--space-page-x) var(--lb-bottom-padding);
} 

.lb-bar {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-grow: 0;
	color: var(--blue);
	line-height: var(--lb-line-height);
}

.lb-status {
	flex-grow: 1;
}

.lb-close {
	flex-grow: 0;
	padding: 0;
	cursor: pointer;
}

.lb-stage {
	width: 100%;
	flex-grow: 1;
}

.lb-figure {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.lb-image {
	display: flex;
	width: 100%;
	height: calc(
    100dvh
    - ( var(--lb-bar-top-padding)
      + var(--lb-line-height)
      + (var(--space-page-y) * 2)
      + var(--lb-caption-height)
      + var(--lb-bottom-padding) )
	);
    margin: var(--space-page-y) 0;
	object-fit: contain; 
}

.lb-caption {
	display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 360px;
    height: var(--lb-caption-height);
    flex-grow: 0;
    font-size: 16px;
    line-height: var(--lb-line-height);
    justify-content: flex-end;
}

.lb-caption > * {
	font-size: 16px;
	line-height: var(--lb-line-height);
}

.lb-hit {
	position: relative;
	height: calc(100% + var(--lb-bottom-padding));
	width: calc(50% + var(--space-page-x));
	background: transparent;
	z-index: 2; 
	touch-action: pan-y;
}

/* base arrows */
.lb-prev {
	left: calc(var(--space-page-x) * -1);
	top: -100%;
	cursor:
		url("../svg/arrow-left.svg") 6 18,
		url("../svg/arrow-left@2x.png?v=3") 12 32,
		url("../svg/arrow-left@1x.png?v=3") 6 18,
		w-resize;
}
.lb-next {
	left: 50%;
	top: calc(-200% - var(--lb-bottom-padding));
	cursor:
		url("../svg/arrow-right.svg") 30 18,
		url("../svg/arrow-right@2x.png?v=3") 52 32,
		url("../svg/arrow-right@1x.png?v=3") 30 18,
		e-resize;
}

/* edge of work cues */
.lb-prev.cursor-prev-work {
	cursor:
		url("../svg/prev-work.svg") 0 4,
		url("../svg/prev-work@2x.png?v=3") 0 8,
		url("../svg/prev-work@1x.png?v=3") 0 4,
		w-resize;
}
.lb-next.cursor-next-work {
	cursor:
		url("../svg/next-work.svg") 0 4,
		url("../svg/next-work@2x.png?v=3") 0 8,
		url("../svg/next-work@1x.png?v=3") 0 4,
		e-resize;
}

/* HiDPI fallback if SVG ignored */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
	.lb-prev {
		cursor:
			url("../svg/arrow-left.svg") 6 18,
			url("../svg/arrow-left@2x.png?v=3") 12 32,
			w-resize;
	}
	.lb-next {
		cursor:
			url("../svg/arrow-right.svg") 30 18,
			url("../svg/arrow-right@2x.png?v=3") 52 32,
			e-resize;
	}
}

/* lock body scroll when overlay is open */
.body-lock { overflow: hidden; }

html.body-lock,
body.body-lock {
	overflow: hidden;
	overscroll-behavior: none;
	position: fixed;
	width: 100%;
}

@media (max-width: 768px) {

	:root {
		--lb-bar-top-padding: 20px;
		--lb-line-height: 18px;
		--lb-caption-height: calc(5 * var(--lb-line-height));
		--lb-bottom-padding: 36px;
	}

	.lb-caption {
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: 360px;
		flex-grow: 0;
		font-size: 13.5px;
		line-height: var(--lb-line-height);
		justify-content: flex-end;
	}

	.lb-caption > * {
		font-size: 13.5px;
		line-height: var(--lb-line-height);
	}

	.lb-bar > * {
		font-size: 15px;
		font-variant: normal;
		text-transform: initial;
		letter-spacing: -0.01em;
	}

	.lb-caption { 
		max-width: min(90vw, 420px); 
	}
}