/* ==========================================================================
   Overlapping Photos — shared (front end + editor)
   ========================================================================== */

.op-gallery {
	--op-w: min(var(--op-size, 300px), 50cqi); /* cqi = the gallery's own width */
	/* Keep the prints' stacking (up to 1000 on hover) inside the gallery, so they never
	   rise above a theme's own arrows, header or footer. */
	isolation: isolate;
	--op-gap: calc(var(--op-w) * var(--op-overlap, 0.22));
	--op-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--op-bw: clamp(4px, 1.1cqi, 12px); /* white print border */
	/* Named, so the phone switch below never answers to a fan card (cards are containers too). */
	container: op-gallery / inline-size;
	box-sizing: border-box;
}

.op-gallery .op-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.op-gallery .op-print {
	position: relative;
	order: var(--op-o, 0); /* shuffled place; the markup keeps the editor's order */
	z-index: var(--op-z, 1);
	margin: 0;
	translate: var(--op-dx, 0%) var(--op-dy, 0%);
	rotate: var(--op-rot, 0deg);
	scale: var(--op-scale, 1);
	/* z-index waits until the shrink finishes so the print doesn't pop behind mid-animation */
	transition: scale 0.35s var(--op-ease), rotate 0.35s var(--op-ease), z-index 0s linear 0.35s;
}

.op-gallery .op-print:hover,
.op-gallery .op-print:has(:focus-visible) {
	z-index: 1000;
	scale: calc(var(--op-scale, 1) * 1.08);
	transition: scale 0.35s var(--op-ease), rotate 0.35s var(--op-ease), z-index 0s;
}

.op-gallery .op-trigger {
	display: block;
	box-sizing: border-box;
	cursor: zoom-in;
	border-radius: var(--op-radius, 0px);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 6px 18px rgba(0, 0, 0, 0.16);
	transition: box-shadow 0.35s var(--op-ease);
	-webkit-tap-highlight-color: transparent;
}

.op-gallery .op-print:hover .op-trigger,
.op-gallery .op-print:has(:focus-visible) .op-trigger {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 18px 44px rgba(0, 0, 0, 0.3);
}

.op-gallery .op-trigger:focus-visible {
	outline: 3px solid CanvasText;
	outline-offset: 3px;
}

.op-gallery.op-has-border .op-trigger {
	padding: var(--op-bw);
	background: #fcfbf8;
}

/* Inner corner follows the outer one, less the border. */
.op-gallery.op-has-border .op-img {
	border-radius: max(0px, calc(var(--op-radius, 0px) - var(--op-bw)));
}

.op-gallery .op-img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border-radius: var(--op-radius, 0px);
	user-select: none;
	-webkit-user-drag: none;
}

/* --- Scattered prints ---------------------------------------------------- */

.op-layout-scatter .op-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding: calc(var(--op-gap) * 0.5 + 2rem) calc(var(--op-gap) * 0.5);
}

.op-layout-scatter .op-print {
	/* --op-k: per-print size (portraits narrower, slight random variation) */
	flex: 0 0 calc(var(--op-w) * var(--op-k, 1));
	width: calc(var(--op-w) * var(--op-k, 1));
	margin: calc(var(--op-gap) * -0.3) calc(var(--op-gap) * -0.5);
}

/* --- Cascade: one fanned row, scrolls sideways when it runs long ----------- */

.op-layout-cascade .op-list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	overflow-x: auto;
	padding: 3rem calc(var(--op-gap) + 1rem);
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
}

/* Equal heights, natural widths, so portrait and landscape fan out evenly. */
.op-layout-cascade .op-print {
	flex: 0 0 auto;
	scroll-snap-align: center;
}

.op-layout-cascade .op-img {
	width: auto;
	height: calc(var(--op-w) * 0.8);
}

.op-layout-cascade .op-print + .op-print {
	/* Gentler than the slider value: narrow portrait prints would otherwise mostly vanish. */
	margin-left: calc(var(--op-gap) * -0.7);
}

/* Auto margins centre a short row without clipping a long one. */
.op-layout-cascade .op-print:first-child { margin-left: auto; }
.op-layout-cascade .op-print:last-child { margin-right: auto; }

/* --- Collage: rows that fill the width at each photo's true proportions ----- */

.op-layout-collage .op-list {
	position: relative;
	aspect-ratio: var(--op-ar, 1);
	/* Room for prints that are scaled up and nudged past the edge. */
	margin: calc(var(--op-overlap, 0.22) * 22cqi + 1.5rem);
}

.op-layout-collage .op-print {
	position: absolute;
	left: var(--op-cx);
	top: var(--op-cy);
	width: var(--op-cw);
	height: var(--op-ch);
}

.op-layout-collage .op-trigger,
.op-layout-collage .op-img {
	width: 100%;
	height: 100%;
}

.op-layout-collage .op-img {
	object-fit: cover; /* boxes already match the photo; this only absorbs rounding */
}

/* --- Vertical cascade: one column, each print overlapping the one above ------ */

.op-gallery {
	--op-vw: min(var(--op-size, 300px), 82cqi);
}

.op-layout-vcascade .op-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2rem 0 3rem;
}

.op-layout-vcascade .op-print {
	width: var(--op-vw);
	translate: var(--op-vx, 0%) 0;
}

.op-layout-vcascade .op-print + .op-print {
	margin-top: calc(var(--op-vw) * var(--op-overlap, 0.22) * -1);
}

.op-layout-vcascade .op-print:nth-child(odd) { --op-vx: -7%; }
.op-layout-vcascade .op-print:nth-child(even) { --op-vx: 7%; }

/* --- Fan ("peacock"): up to 10 2:3 cards pivoting on one point at bottom centre ---- */
/* --op-fanf / --op-fanh / --op-fanb (render.php): the fan's width, height and dip below
   the pivot, in card widths. Cards shrink to fit the gallery's width. */

.op-layout-fan {
	--op-fw: min(var(--op-size, 300px), calc(100cqi / var(--op-fanf, 3.5)));
}

.op-layout-fan .op-list {
	position: relative;
	height: calc(var(--op-fw) * var(--op-fanh, 1.75) + 1rem);
}

.op-layout-fan .op-print {
	position: absolute;
	left: calc(50% - var(--op-fw) / 2);
	bottom: calc(var(--op-fw) * var(--op-fanb, 0) + 0.5rem);
	width: var(--op-fw);
	height: calc(var(--op-fw) * 1.5);
	margin: 0;
	translate: none;
	rotate: none;
	scale: none;
	transform-origin: 50% 100%;
	transform: rotate(var(--op-a, 0deg));
	transition: transform 0.35s var(--op-ease), z-index 0s linear 0.35s;
}

/* Hover: the card slides out along its own angle, like pulling it from a hand, and comes to the front. */
.op-gallery.op-layout-fan .op-print:hover,
.op-gallery.op-layout-fan .op-print:has(:focus-visible) {
	transform: rotate(var(--op-a, 0deg)) translateY(-9%);
	scale: none;
	transition: transform 0.35s var(--op-ease), z-index 0s;
}

.op-layout-fan .op-trigger {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	container-type: size; /* lets the photo size itself to the card's inner box */
}

.op-gallery.op-layout-fan .op-img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100cqw;
	height: 100cqh;
	max-width: none;
	translate: -50% -50%;
	object-fit: cover;
	border-radius: 0;
}

/* Landscape photos turn a quarter counter-clockwise to fill the portrait card. */
.op-gallery.op-layout-fan .op-is-landscape .op-img {
	width: 100cqh;
	height: 100cqw;
	rotate: -90deg;
}

/* --- Stack: up to 7 prints piled loosely; a click sends the top print to the bottom ---- */
/* --op-stackh (render.php): pile height in print widths. view.js keeps --op-z and
   data-op-depth (0 = top) up to date as prints move through the pile. */

.op-layout-stack {
	--op-sw: min(var(--op-size, 300px), 80cqi);
}

.op-layout-stack .op-list {
	position: relative;
	height: calc(var(--op-sw) * var(--op-stackh, 1.6));
}

.op-layout-stack .op-print {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--op-sw);
	margin: 0;
	translate: calc(-50% + var(--op-dx, 0%)) calc(-50% + var(--op-dy, 0%));
	scale: 1;
	transition: translate 0.32s var(--op-ease), rotate 0.32s var(--op-ease), scale 0.32s var(--op-ease);
}

.op-layout-stack .op-trigger {
	cursor: pointer;
}

/* Only the top print reacts to hover; the rest stay put in the pile. */
.op-gallery.op-layout-stack .op-print:hover,
.op-gallery.op-layout-stack .op-print:has(:focus-visible) {
	z-index: var(--op-z, 1);
	scale: 1;
	transition: translate 0.32s var(--op-ease), rotate 0.32s var(--op-ease), scale 0.32s var(--op-ease);
}

.op-gallery.op-layout-stack .op-print[data-op-depth="0"]:hover,
.op-gallery.op-layout-stack .op-print[data-op-depth="0"]:has(:focus-visible) {
	scale: 1.02;
}

/* The flip: the top print slides out to the right, then tucks in under the pile. */
.op-gallery.op-layout-stack .op-print.is-flipping {
	translate: calc(-50% + 62%) calc(-50% - 3%);
	rotate: calc(var(--op-rot, 0deg) + 7deg);
}

/* Stack hint: a small arrow on the top print says "tap me for the next one". Decoration only. */
.op-stack-hint {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, translate 0.3s var(--op-ease);
}

.op-stack-hint svg {
	width: 20px;
	height: 20px;
}

.op-gallery.op-layout-stack .op-print[data-op-depth="0"] .op-stack-hint {
	opacity: 0.85;
}

.op-gallery.op-layout-stack .op-print[data-op-depth="0"]:hover .op-stack-hint {
	translate: 4px 0;
}

/* ==========================================================================
   Magnifier button (every layout) — opens the lightbox
   ========================================================================== */

.op-view {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	cursor: zoom-in;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.op-view svg {
	width: 23px;
	height: 23px;
}

/* Mouse: it appears with the hover lift. */
.op-gallery .op-print:hover .op-view,
.op-gallery .op-print:has(:focus-visible) .op-view {
	opacity: 0.85;
	pointer-events: auto;
}

/* Touch screens have no hover, so it's always there. */
@media (hover: none) {
	.op-gallery .op-view {
		opacity: 0.85;
		pointer-events: auto;
	}
}

/* Stack: only on the top print. */
.op-gallery.op-layout-stack .op-print:not([data-op-depth="0"]) .op-view {
	opacity: 0;
	pointer-events: none;
}

.op-gallery.op-layout-stack .op-print[data-op-depth="0"] .op-view {
	opacity: 0.85;
	pointer-events: auto;
}

.op-gallery .op-print .op-view:hover,
.op-gallery .op-print .op-view:focus-visible {
	opacity: 1;
}

.op-view:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* --- Phones: every layout becomes the vertical cascade ---------------------- */
/* Doubled class beats the layout rules above without !important. */

@container op-gallery (max-width: 600px) {
	.op-gallery.op-gallery .op-list {
		--op-vw: 82cqi; /* phone prints ignore the desktop width setting */
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
		position: static;
		aspect-ratio: auto;
		overflow: visible;
		margin: 0;
		padding: 1.5rem 0 2.5rem;
		scroll-snap-type: none;
	}

	.op-gallery.op-gallery .op-print {
		position: relative;
		inset: auto;
		flex: none;
		width: var(--op-vw);
		height: auto;
		margin: 0;
		translate: var(--op-vx, 0%) 0;
		rotate: 0deg;
		scale: 1;
		z-index: auto;
	}

	.op-gallery.op-gallery .op-print + .op-print {
		margin-top: calc(var(--op-vw) * var(--op-overlap, 0.22) * -1);
	}

	.op-gallery.op-gallery .op-print:nth-child(odd) { --op-vx: -5%; }
	.op-gallery.op-gallery .op-print:nth-child(even) { --op-vx: 5%; }

	.op-gallery.op-gallery .op-print:hover,
	.op-gallery.op-gallery .op-print:has(:focus-visible) {
		z-index: 1000;
		scale: 1.04;
	}

	.op-gallery.op-gallery .op-trigger,
	.op-gallery.op-gallery .op-img {
		width: 100%;
		height: auto;
	}

	/* Stack → plain cascade (a tap opens the lightbox there); no hint arrow. */
	.op-gallery.op-layout-stack .op-list { height: auto; }
	.op-gallery.op-layout-stack .op-print { z-index: auto; }
	.op-gallery.op-layout-stack .op-stack-hint { display: none; }

	/* The stack is a plain cascade here, so every print gets its magnifier like the other layouts. */
	.op-gallery.op-gallery.op-layout-stack .op-print .op-view {
		opacity: 0;
		pointer-events: none;
	}
	.op-gallery.op-gallery.op-layout-stack .op-print:hover .op-view {
		opacity: 0.85;
		pointer-events: auto;
	}
	@media (hover: none) {
		.op-gallery.op-gallery.op-layout-stack .op-print .op-view {
			opacity: 0.85;
			pointer-events: auto;
		}
	}

	/* Fan → plain cascade: upright cards, whole photos, no quarter turn. */
	.op-gallery.op-layout-fan .op-list { height: auto; }

	.op-gallery.op-layout-fan .op-print,
	.op-gallery.op-layout-fan .op-print:hover,
	.op-gallery.op-layout-fan .op-print:has(:focus-visible) {
		transform: none;
	}

	.op-gallery.op-layout-fan .op-trigger { container-type: normal; }

	.op-gallery.op-layout-fan .op-print .op-img {
		position: static;
		width: 100%;
		height: auto;
		translate: none;
		rotate: none;
	}
}

/* ==========================================================================
   Horizontal themes (Panorama, Panoramic-26) — same breakpoint as the themes
   ========================================================================== */

@media (min-width: 782px) and (orientation: landscape) {

	/* --- Photo Panels pages: the gallery is its own screen-tall panel in the sideways row.
	   view.js measures the usable height into --op-ph. --- */

	.hz-scroller > .wp-block-post-content > .op-gallery {
		--op-ph: 70vh; /* until view.js measures */
		--op-w: min(var(--op-size, 300px), calc(var(--op-ph) * 0.55));
		--op-vw: var(--op-w);
		flex: 0 0 auto;
		width: auto;
		height: 100%;
		max-width: none;
		margin: 0;
		box-sizing: border-box;
		/* Same top/bottom clearance as the themes' text sections; sides clear the arrows. */
		padding: calc(var(--hz-header-h, 0px) + 1.5rem) 4.5rem calc(var(--hz-footer-h, 0px) + 1.5rem);
		container-type: normal; /* width comes from the photos, not the other way round */
		display: flex;
		align-items: center;
		scroll-snap-align: start;
	}

	.hz-scroller > .wp-block-post-content > .op-gallery .op-list {
		flex: 0 0 auto;
	}

	/* Stack: as tall as the screen allows. */
	.hz-scroller > .wp-block-post-content > .op-layout-stack {
		--op-sw: min(var(--op-size, 300px) * 1.6, calc(var(--op-ph) / var(--op-stackh, 1.6)));
	}

	.hz-scroller > .wp-block-post-content > .op-layout-stack .op-list {
		width: calc(var(--op-sw) * 1.45);
		height: var(--op-ph);
	}

	/* Fan: as tall as the screen allows. */
	.hz-scroller > .wp-block-post-content > .op-layout-fan {
		--op-fw: calc(var(--op-ph) / var(--op-fanh, 1.75));
	}

	.hz-scroller > .wp-block-post-content > .op-layout-fan .op-list {
		width: calc(var(--op-fw) * var(--op-fanf, 3.5));
		height: var(--op-ph);
	}

	/* Collage: as tall as the screen allows, as wide as its proportions need. */
	.hz-scroller > .wp-block-post-content > .op-layout-collage .op-list {
		width: calc(var(--op-ph) * var(--op-ratio, 1.5));
		margin: 0;
	}

	/* Scattered: columns of prints that keep going sideways. */
	.hz-scroller > .wp-block-post-content > .op-layout-scatter .op-list {
		display: grid;
		grid-auto-flow: column;
		/* As many rows as fit, stretched to use the whole height. */
		grid-template-rows: repeat(auto-fill, minmax(calc(var(--op-w) * 0.62), 1fr));
		grid-auto-columns: calc(var(--op-w) * (1 - var(--op-overlap, 0.22) * 0.5));
		box-sizing: border-box;
		height: var(--op-ph);
		/* Tilted, offset portraits reach past their row; keep them clear of the bars. */
		padding-block: calc(var(--op-w) * 0.22) !important;
		align-content: center;
		align-items: center;
		justify-items: center;
		padding: 0 calc(var(--op-w) * 0.12); /* prints are wider than their columns */
	}

	.hz-scroller > .wp-block-post-content > .op-layout-scatter .op-print {
		margin: 0;
		/* Less vertical jitter so tall prints stay clear of the header and footer bars. */
		translate: var(--op-dx, 0%) calc(var(--op-dy, 0%) * 0.4);
	}

	/* Both cascades: one fanned row, as tall as the screen allows, no inner scrollbar. */
	.hz-scroller > .wp-block-post-content > :is(.op-layout-cascade, .op-layout-vcascade) .op-list {
		display: flex;
		flex-direction: row;
		align-items: center;
		overflow: visible;
		padding: 0;
	}

	.hz-scroller > .wp-block-post-content > :is(.op-layout-cascade, .op-layout-vcascade) .op-print {
		width: auto;
		margin: 0;
		translate: 0 var(--op-dy, 0%);
	}

	.hz-scroller > .wp-block-post-content > :is(.op-layout-cascade, .op-layout-vcascade) .op-print + .op-print {
		margin-left: calc(var(--op-ph) * 0.9 * var(--op-overlap, 0.22) * -1);
	}

	.hz-scroller > .wp-block-post-content > :is(.op-layout-cascade, .op-layout-vcascade) .op-img {
		width: auto;
		height: calc(var(--op-ph) * 0.9);
	}

	.hz-scroller > .wp-block-post-content > .op-layout-vcascade .op-print:nth-child(odd) { --op-dy: -4%; }
	.hz-scroller > .wp-block-post-content > .op-layout-vcascade .op-print:nth-child(even) { --op-dy: 4%; }

	/* --- Normal pages and posts: text flows in columns, so the gallery flows down them as a
	   vertical cascade (the phone rules apply, since a column is narrow). Each print stays whole. --- */

	.hz-text .op-gallery.op-gallery .op-list {
		display: block;
		padding: 0.5rem 0;
	}

	.hz-text .op-gallery.op-gallery .op-print {
		margin-inline: auto;
		break-inside: avoid;
		-webkit-column-break-inside: avoid;
	}

	.hz-text .op-gallery.op-gallery .op-img {
		max-height: calc(var(--hz-col-h, 80vh) - 2rem);
		object-fit: contain;
	}
}

/* ==========================================================================
   Lightbox — full-screen photo, controls and info laid over it, fading out when idle
   ========================================================================== */

html.op-lb-open {
	overflow: hidden;
}

.op-lightbox {
	position: fixed;
	inset: 0;
	box-sizing: border-box;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: #000;
	color: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
	overscroll-behavior: contain;
	overflow: hidden;
}

.op-lightbox[open] {
	display: block;
	animation: op-fade 0.25s ease-out;
}

.op-lightbox::backdrop {
	background: transparent;
}

.op-lightbox.is-idle {
	cursor: none;
}

/* Everything inside the lightbox. This wrapper (not the <dialog>, not the page) is what goes
   fullscreen, so the bar, arrows and caption are positioned against it in both modes. */
.op-lb-root {
	position: absolute;
	inset: 0;
	background: #000;
}

.op-lb-root:fullscreen {
	width: 100%;
	height: 100%;
	background: #000;
}

.op-lb-root:-webkit-full-screen {
	width: 100%;
	height: 100%;
	background: #000;
}

/* The photo fills the screen at its own proportions. */
.op-lb-stage {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
}

.op-lb-img {
	display: block;
	width: auto;
	height: auto;
	/* Screen units: a percentage would resolve against an auto-sized grid track and not limit anything. */
	max-width: 100vw;
	max-height: 100vh;
	max-height: 100dvh;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
	animation: op-zoom 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
	transition: opacity 0.2s ease;
}

.op-lb-img.is-loading {
	opacity: 0.35;
}

/* Everything laid over the photo fades out together. */
.op-lb-ui {
	transition: opacity 0.35s ease;
}

.op-lightbox.is-idle .op-lb-ui {
	opacity: 0;
	pointer-events: none;
}

.op-lb-bar {
	position: absolute;
	inset: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem 0.5rem 1.5rem 1.25rem;
	background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}

.op-lb-count {
	margin: 0;
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.06em;
	opacity: 0.85;
}

.op-lb-tools {
	display: flex;
	gap: 0.25rem;
}

.op-lb-btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	opacity: 0.85;
	transition: opacity 0.2s ease, background 0.2s ease;
}

.op-lb-btn[hidden] {
	display: none;
}

.op-lb-btn:hover {
	opacity: 1;
	background: rgba(255, 255, 255, 0.12);
}

.op-lb-btn:focus-visible {
	opacity: 1;
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.op-lb-btn svg {
	width: 22px;
	height: 22px;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.op-lb-arrow {
	position: absolute;
	top: 50%;
	width: 56px;
	height: 56px;
	translate: 0 -50%;
}

.op-lb-arrow svg {
	width: 30px;
	height: 30px;
}

.op-lb-prev { left: 0.5rem; }
.op-lb-next { right: 0.5rem; }

.op-lightbox.is-single .op-lb-arrow,
.op-lightbox.is-single .op-lb-count {
	display: none;
}

/* Title, caption and camera details over the bottom of the photo. */
.op-lb-caption {
	position: absolute;
	inset: auto 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	padding: 3.5rem 1.5rem 1.5rem;
	background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65));
	font-size: 1.5rem; /* title and caption (was 1rem) */
	line-height: 1.45;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.op-lb-caption[hidden],
.op-lb-caption > :empty {
	display: none;
}

.op-lb-caption > * {
	max-width: 60ch;
}

.op-lb-title {
	font-weight: 400; /* regular, so the larger caption leads */
	opacity: 0.75; /* lets a little of the photo show through */
}

.op-lb-text {
	font-size: 1.25em; /* the caption stands out: 25% larger than the title (24px → 30px; 20px → 25px on phones) */
	opacity: 0.75; /* lets a little of the photo show through */
}

.op-lb-camera {
	font-size: 1.2rem; /* was 0.8rem */
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	opacity: 0.7;
}

@media (max-width: 600px) {
	.op-lb-arrow {
		top: auto;
		bottom: 0.5rem;
		translate: none;
	}

	.op-lb-prev { left: 0.25rem; }
	.op-lb-next { right: 0.25rem; }

	.op-lb-caption {
		padding-inline: 3.75rem; /* clear the arrows at the bottom corners */
		font-size: 1.25rem; /* still bigger than before, but leaves more of the photo showing */
	}

	.op-lb-camera {
		font-size: 1rem;
	}
}

@keyframes op-fade {
	from { opacity: 0; }
}

@keyframes op-zoom {
	from { opacity: 0; scale: 0.96; }
}

@media (prefers-reduced-motion: reduce) {
	.op-gallery .op-print,
	.op-gallery .op-trigger,
	.op-lightbox,
	.op-lb-img {
		transition: none !important;
		animation: none !important;
	}
}