/* ---------------------------------------------------
   Ator layer over zpBase. Loaded after style.css.
   Tokens and components mirror the front page (style_i.css)
   so the gallery reads as part of the same site.
--------------------------------------------------- */
:root {
	--bg: #0a0a0a;
	--ink: #f5f3ef;
	--ink-dim: rgba(245, 243, 239, 0.72);
	--glass: rgba(0, 0, 0, 0.42);
	--glass-border: rgba(255, 255, 255, 0.16);
	--edge: clamp(16px, 4vw, 40px);
	--radius-md: 12px;
	--radius-lg: 16px;
}

html {
	background: var(--bg);
}

body#dark {
	position: relative;
	background-color: var(--bg);
	color: var(--ink);
}

#dark a {
	color: var(--ink);
	text-decoration: none;
}

#dark a:hover,
#dark a:focus-visible {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------
   Logo mark, top-left. Sits on the left edge of the grid
   (same maths as .row: centered, max --row-max, 18px padding)
   and scrolls away with the page; the description block
   (#object-info) starts to its right.
--------------------------------------------------- */
#dark .logo {
	position: absolute;
	top: 18px;
	left: calc((100% - min(100%, var(--row-max, 1400px))) / 2 + 18px);
	z-index: 20;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--glass-border);
	background: var(--glass);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: var(--ink);
	text-decoration: none;
	transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.logo svg {
	width: 18px;
	height: auto;
	display: block;
}

#dark .logo:hover,
#dark .logo:focus-visible {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--bg);
	text-decoration: none;
}

.logo__label {
	position: absolute;
	top: 50%;
	left: calc(100% + 10px);
	transform: translateY(-50%);
	white-space: nowrap;
	padding: 0.55em 0.9em;
	border-radius: 6px;
	background: var(--glass);
	border: 1px solid var(--glass-border);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: var(--ink);
	font-size: 0.85rem;
	letter-spacing: 0.01em;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease;
}

.logo:hover .logo__label,
.logo:focus-visible .logo__label {
	opacity: 1;
}

/* ---------------------------------------------------
   Links pill, bottom center
--------------------------------------------------- */
.links {
	position: fixed;
	left: 0;
	right: 0;
	bottom: var(--edge);
	z-index: 20;
	display: flex;
	justify-content: center;
	padding-inline: var(--edge);
	pointer-events: none;
}

/* hidden while scrolling down (see js/ator.js); still reachable by keyboard */
.links {
	transition: transform 250ms ease, opacity 250ms ease;
}

.links.is-hidden {
	transform: translateY(calc(100% + var(--edge) + 16px));
	opacity: 0;
}

.links.is-hidden .links__row {
	pointer-events: none;
}

.links.is-hidden:focus-within {
	transform: none;
	opacity: 1;
}

.links.is-hidden:focus-within .links__row {
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.links,
	#dark .scrollup {
		transition: none;
	}
}

.links__row {
	pointer-events: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5em 0.8em;
	max-width: 92vw;
	padding: 0.8em 1.6em;
	border-radius: 999px;
	background: var(--glass);
	border: 1px solid var(--glass-border);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font-size: clamp(1.05rem, 1.8vw + 0.5rem, 1.4rem);
	letter-spacing: 0.01em;
	line-height: 1.3;
}

.links__row span {
	color: var(--ink-dim);
}

#dark .links__row a {
	color: var(--ink);
	text-decoration: none;
	text-underline-offset: 3px;
	white-space: nowrap;
	transition: opacity 200ms ease;
}

#dark .links__row a:hover,
#dark .links__row a:focus-visible,
#dark .links__row a[aria-current] {
	text-decoration: underline;
}

#dark .links__row a:hover,
#dark .links__row a:focus-visible {
	opacity: 0.85;
}

#dark .links__row a.is-featured {
	background-image: linear-gradient(100deg, #f5f3ef 0%, #f5f3ef 38%, #8e8b85 50%, #f5f3ef 62%, #f5f3ef 100%);
	background-size: 300% 100%;
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	animation: sheen 4s ease-in-out infinite;
}

@keyframes sheen {
	0%   { background-position: 100% 0; }
	100% { background-position: 0% 0; }
}

@media (prefers-reduced-motion: reduce) {
	#dark .links__row a.is-featured { animation: none; background-position: 50% 0; }
}

@media (max-width: 480px) {
	.links__row {
		gap: 0.35em 0.55em;
		padding: 0.6em 1em;
		font-size: 1.05rem;
	}
}

@media (max-width: 430px) {
	.links__row {
		gap: 0.25em 0.4em;
		padding: 0.5em 0.85em;
		font-size: 0.9rem;
	}
}

/* ---------------------------------------------------
   Page frame
--------------------------------------------------- */
#middle .row {
	padding-top: 18px;
}

/* info block, centered on the grid: the gallery description, or on an album page
   "← Gallery", the title, and the description with the image count.
   Symmetric side padding keeps the text clear of the logo (and its hover label)
   on the left and of the album arrows on the right. */
#dark #object-info {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 44px;
	padding: 0 clamp(96px, calc((100% - 640px) / 2), 300px);
	margin-bottom: 8px;
	text-align: center;
}

#dark #object-title,
#dark #object-menu,
#dark #object-desc {
	text-align: center;
}

/* nothing left in the menu line once the count moved into the description */
#dark #object-menu:not(:has(span)) {
	display: none;
}

#dark #object-desc,
#dark #object-desc p {
	margin: 0;
}

#dark #object-info:has(#object-title) #object-desc {
	margin-top: 0.4em;
}

#dark #object-title h1 {
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	font-weight: 600;
	line-height: 1.1;
	margin: 0;
}

@media (max-width: 670px) {
	#dark .logo {
		top: 15px;
		left: 5px;
	}

	#dark #object-info {
		padding-left: 62px;
		padding-right: 62px;
	}

	/* narrower album arrows, so a long title still fits beside the logo */
	#dark #object-info .object-link {
		width: 28px;
	}

	#dark #object-info .object-link.prev {
		right: 28px;
	}

	#middle .row {
		padding-top: 15px;
	}
}

#dark #breadcrumb,
#dark #object-menu,
#dark #object-desc {
	color: var(--ink-dim);
	font-size: 0.9rem;
}

#dark #object-menu span,
#dark #footer-menu span {
	border-color: var(--glass-border);
}

/* "← Gallery": the obvious way back from an album to the gallery index */
#dark #breadcrumb {
	margin-bottom: 0.35em;
}

#dark #breadcrumb a.breadcrumb-home {
	color: var(--ink);
	font-size: 1rem;
	font-weight: 500;
}

#dark #breadcrumb a.breadcrumb-home span {
	display: inline-block;
	transition: transform 150ms ease;
}

#dark #breadcrumb a.breadcrumb-home:hover span,
#dark #breadcrumb a.breadcrumb-home:focus-visible span {
	transform: translateX(-3px);
}

/* separators only between items */
#dark #object-menu span {
	padding-left: 0;
	border-left: 0;
}

#dark #object-menu span + span {
	padding-left: 8px;
	border-left: 1px solid var(--glass-border);
}

#dark #object-menu a,
#dark #footer-menu a,
#dark #breadcrumb a {
	color: var(--ink-dim);
	text-decoration: none;
}

#dark #object-menu a:hover,
#dark #footer-menu a:hover,
#dark #breadcrumb a:hover {
	color: var(--ink);
	text-decoration: underline;
}

/* previous / next album arrows: drawn, same feel as the front page chevron */
#dark .object-link {
	background: none;
	width: 40px;
	height: 44px;
	top: 0;
	opacity: 0.45;
	overflow: visible;
	transition: opacity 200ms ease;
}

/* both arrows at the right end of the info block, clear of the logo */
#dark .object-link.prev {
	left: auto;
	right: 44px;
}

#dark .object-link.next {
	right: 0;
}

#dark .object-link:hover {
	opacity: 1;
}

#dark .object-link a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	text-indent: -9999px;
}

#dark .object-link a::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	border-top: 2px solid var(--ink);
	border-right: 2px solid var(--ink);
}

#dark .object-link.next a::after {
	transform: translate(-70%, -50%) rotate(45deg);
}

#dark .object-link.prev a::after {
	transform: translate(-30%, -50%) rotate(-135deg);
}

/* ---------------------------------------------------
   Tiles: CSS grid instead of the inline-block hack
   (which overflowed the viewport by ~11px)
--------------------------------------------------- */
#dark .image-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: 20px;
	letter-spacing: normal;
	margin: 0;
	padding: 24px 0 0;
}

#dark .image-grid.images {
	padding-top: 8px;
}

#dark .image-grid .image-unit {
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	text-align: left;
}

#dark .image-grid .image-unit a {
	display: block;
}

#dark .image-grid img.remove-attributes {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-md);
	border: 1px solid var(--glass-border);
	transition: transform 150ms ease, border-color 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
	#dark .image-grid .image-unit a:hover img.remove-attributes {
		transform: translateY(-3px);
		border-color: rgba(255, 255, 255, 0.3);
	}
}

#dark .image-unit h3 {
	margin: 12px 2px 0;
	font-size: 1.05rem;
	font-weight: 600;
}

#dark .image-unit .album-desc {
	margin: 4px 2px 0;
	color: var(--ink-dim);
	font-size: 0.85rem;
}

/* ---------------------------------------------------
   Bottom of the page
--------------------------------------------------- */
#dark #page-nav {
	border-top: 1px solid var(--glass-border);
	margin: 28px 0 0;
	padding-top: 16px;
}

#dark .jump select {
	background: var(--glass);
	color: var(--ink);
	border: 1px solid var(--glass-border);
	border-radius: 999px;
	padding: 0.5em 1em;
}

#dark #page-nav .pagination a {
	color: var(--ink);
}

/* room for the fixed links pill so the footer never hides behind it */
#bottom .row {
	padding-bottom: calc(var(--edge) + 96px);
}

#dark #footer {
	color: var(--ink-dim);
	font-size: 0.8rem;
}

#dark #footer a {
	color: var(--ink-dim);
}

#dark #footer a:hover {
	color: var(--ink);
}

#dark.links-hidden .scrollup {
	bottom: var(--edge);
}

#dark .scrollup {
	transition: bottom 250ms ease, opacity 200ms ease;
	bottom: calc(var(--edge) + 72px);
	right: var(--edge);
	background-color: var(--glass);
	border: 1px solid var(--glass-border);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* ---------------------------------------------------
   Lightbox (Magnific Popup)
--------------------------------------------------- */
.mfp-bg {
	background: var(--bg);
}

.mfp-title,
.mfp-counter {
	color: var(--ink);
}

.mfp-counter {
	color: var(--ink-dim);
}

img.mfp-img {
	border-radius: var(--radius-md);
}