/* ---------------------------------------------------------------
   static/archive.css – Ulf Bodin – Photography (templates/index.html).
   The style of Radius's "månadens" (static/featured.css), in the dark
   colours of ulfbodin.se (the abysm theme and assets/css/custom.css):
   the night blue #202030 as the room, #dddddd as the text, white headings
   and the site's link blue #7aa2f7 as the accent (green #a0c776 on hover).
   The site's system fonts throughout.
------------------------------------------------------------------ */
:root {
	--bg: #202030;
	--bg-deep: #17172a;
	--bg-2: #28283e;
	--bg-3: #33334d;
	--ink: #dddddd;
	--ink-bright: #ffffff;
	--ink-dim: #b9b9cc;
	--ink-faint: #8d8daa;
	--rule: #444466;
	--accent: #7aa2f7;
	--accent-hover: #a0c776;
	--visited: #bb9af7;
	--on-accent: #17172a;
	--rights: #f7a072;
	--shade: 32, 32, 48;            /* --bg as rgb, for gradients */
	--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	--display: var(--sans);
	--serif: var(--sans);
	--mono: ui-monospace, "Ubuntu Mono", Menlo, Consolas, monospace;
	--gutter: clamp(1rem, 4vw, 3.5rem);
	color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:visited { color: var(--visited); }
a:hover, a:focus { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 0.15em; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }

img { display: block; max-width: 100%; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* --- the top bar ----------------------------------------------------------------- */
.fx-top {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem var(--gutter);
	background: linear-gradient(to bottom, rgba(var(--shade), 0.7), rgba(var(--shade), 0));
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.fx-top__home, .fx-top__home:visited { color: var(--ink); font-weight: 600; text-decoration: none; }

.fx-top__nav { display: flex; gap: 1.5rem; }
.fx-top__nav a, .fx-top__nav a:visited { text-decoration: none; color: var(--ink-dim); }
.fx-top__nav a:hover { color: var(--ink-bright); }
/* --- the large picture ------------------------------------------------------------- */
.fx-hero {
	position: relative;
	height: 100vh;
	height: 100svh;
	min-height: 32rem;
	overflow: hidden;
	background: #000;
}

.fx-hero__frames, .fx-hero__frame { position: absolute; inset: 0; margin: 0; }

.fx-hero__frame {
	opacity: 0;
	transition: opacity 2.4s ease;
}

.fx-hero__frame.is-active { opacity: 1; }

.fx-hero__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0.15) contrast(1.05);
	transform: scale(1.04);
	animation: fx-drift 18s ease-in-out infinite alternate;
}

@keyframes fx-drift {
	from { transform: scale(1.04) translate(0, 0); }
	to { transform: scale(1.1) translate(-1.5%, -1%); }
}

.fx-hero__shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(var(--shade), 0.95) 0%, rgba(var(--shade), 0.35) 45%, rgba(var(--shade), 0.15) 100%),
		linear-gradient(to right, rgba(var(--shade), 0.55), rgba(var(--shade), 0) 60%);
}

.fx-hero__text {
	position: absolute;
	left: var(--gutter);
	bottom: clamp(3rem, 10vh, 7rem);
	max-width: min(52rem, 90vw);
}

.fx-hero__kicker {
	margin: 0 0 0.6rem;
	color: var(--accent);
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.fx-hero__name {
	margin: 0;
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(3.2rem, 9.5vw, 8.5rem);
	line-height: 0.92;
	color: var(--ink-bright);
}

.fx-hero__meta {
	margin: 1rem 0 0;
	color: var(--ink-dim);
	font-size: 1.05rem;
}

.fx-hero__count {
	margin: 0.3rem 0 0;
	font-size: 1.05rem;
}

.fx-hero__count strong { font-weight: 600; }

/* Enter the archive / View the map - side by side. */
.fx-hero__ctas { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.8rem 0 0; }
.fx-hero__cta, .fx-hero__cta:visited {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.7rem 1.3rem;
	border: 1px solid rgba(221, 221, 221, 0.55);
	color: var(--ink);
	border-radius: 999px;
	text-decoration: none;
	font-size: 0.9rem;
	transition: background 0.2s, color 0.2s;
}

.fx-hero__cta:hover { background: var(--ink); color: var(--bg); text-decoration: none; }
.fx-hero__cta--map svg { color: var(--accent); }
.fx-hero__cta--map:hover svg { color: var(--bg); }

.fx-hero__caption {
	position: absolute;
	right: var(--gutter);
	bottom: 1.4rem;
	max-width: 26rem;
	display: flex;
	gap: 0.6rem;
	color: var(--ink-dim);
	font-size: 0.78rem;
	text-align: right;
}

.fx-hero__caption:hover { color: var(--ink); }

/* Headings: the system sans-serif, medium weight, tight. */
:is(.fx-hero__name, .fx-section__title, .fx-figures dd, .fx-theme__label, .fx-job__title, .fx-panel__title, .fx-viewer__info h2, .fx-footer h3) {
	font-weight: 500;
	letter-spacing: -0.03em;
}

/* A square or upright picture (most 6x6 negatives) is not cropped to the wide format:
   it is shown whole in the right half, the name and the text in the left half. */
.fx-hero { transition: background-color 2.4s ease; }
.fx-hero.is-whole { background: var(--bg); }
.fx-hero__frame--whole {
	inset: clamp(5rem, 11vh, 7.5rem) var(--gutter) clamp(2.5rem, 8vh, 5rem) 50%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.fx-hero__frame--whole img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transform: none;
	animation: none;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.fx-hero__shade { transition: opacity 2.4s ease; }
.fx-hero.is-whole .fx-hero__shade { opacity: 0; }
.fx-hero.is-whole .fx-hero__text { max-width: calc(50% - var(--gutter) * 2); }
.fx-hero.is-whole .fx-hero__name { font-size: clamp(3rem, 7vw, 7rem); }
.fx-hero.is-whole .fx-hero__caption { left: 50%; right: var(--gutter); max-width: none; justify-content: flex-end; }
.fx-hero__caption-year { font-family: var(--mono); }

/* --- the person ---------------------------------------------------------------------- */
.fx-intro {
	display: grid;
	/* Centred on large screens - the text and the figures as one block. */
	grid-template-columns: minmax(0, 42rem) minmax(0, 16rem);
	justify-content: center;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
	padding: clamp(4rem, 10vw, 8rem) var(--gutter);
}


.fx-intro__text p { margin: 0 0 1.1rem; color: var(--ink-dim); }

.fx-intro__lead {
	color: var(--ink-bright) !important;
	font-family: var(--serif);
	font-size: clamp(1.5rem, 2.4vw, 2.1rem);
	line-height: 1.3;
}

.fx-intro__links { font-size: 0.9rem; }

.fx-figures {
	display: grid;
	gap: 1.6rem;
	margin: 0;
	padding-left: 2rem;
	border-left: 1px solid var(--rule);
}

.fx-figures dt { color: var(--ink-faint); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
.fx-figures dd { margin: 0; font-family: var(--display); font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.1; white-space: nowrap; }

/* --- sections --------------------------------------------------------------------------- */
.fx-section { padding: clamp(3rem, 7vw, 6rem) var(--gutter); border-top: 1px solid var(--rule); }

.fx-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	margin-bottom: 2rem;
}

.fx-section__title {
	margin: 0;
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(2.2rem, 4.5vw, 3.8rem);
	line-height: 1;
	color: var(--ink-bright);
}

.fx-section__sub { margin: 0; max-width: 34rem; color: var(--ink-dim); }

/* --- a life in pictures ----------------------------------------------------------------- */
/* The strip with large arrows at its ends (static/featured.js). */
.fx-life__scroller { position: relative; }
.fx-life__arrow {
	position: absolute; top: 40%; z-index: 2; transform: translateY(-50%);
	display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 999px;
	background: var(--accent); color: var(--on-accent);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
	transition: transform 0.15s ease, opacity 0.15s ease;
}
.fx-life__arrow:hover { transform: translateY(-50%) scale(1.08); }
.fx-life__arrow[hidden] { display: none; }
.fx-life__arrow--prev { left: -0.6rem; }
.fx-life__arrow--next { right: -0.6rem; }
@media (max-width: 640px) { .fx-life__arrow { width: 2.8rem; height: 2.8rem; } .fx-life__arrow--prev { left: 0; } .fx-life__arrow--next { right: 0; } }

.fx-life__strip {
	display: flex;
	align-items: flex-end;
	gap: 0.5rem;
	overflow-x: auto;
	padding-bottom: 1rem;
	scrollbar-width: thin;
	scrollbar-color: var(--bg-3) transparent;
}

.fx-year {
	flex: 0 0 auto;
	display: grid;
	grid-template-rows: auto 3.2rem auto auto;
	gap: 0.35rem;
	width: calc(10rem * var(--r, 1));
	width: auto;
}

.fx-year__img {
	display: block;
	height: 11rem;
	width: calc(11rem * var(--r, 1));
	overflow: hidden;
	background: var(--bg-3);
}

.fx-year__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.2); transition: filter 0.3s, transform 0.4s; }
.fx-year:hover .fx-year__img img { filter: none; transform: scale(1.04); }

.fx-year__bar {
	align-self: end;
	display: block;
	height: var(--h);
	min-height: 2px;
	background: var(--accent);
	opacity: 0.55;
}

.fx-year:hover .fx-year__bar { opacity: 1; }
.fx-year__label { font-family: var(--mono); font-size: 0.85rem; }
.fx-year__count { color: var(--ink-faint); font-size: 0.72rem; }

/* --- themes ----------------------------------------------------------------------------- */
.fx-themes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 2rem 1.5rem;
}

.fx-theme { display: grid; gap: 0.4rem; }

.fx-theme__mosaic {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3px;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--bg-3);
}

.fx-theme__mosaic img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.25); transition: filter 0.3s; }
.fx-theme:hover .fx-theme__mosaic img { filter: none; }
.fx-theme__label { font-family: var(--display); font-size: 1.7rem; line-height: 1.1; margin-top: 0.4rem; }
.fx-theme__count { color: var(--ink-faint); font-size: 0.8rem; }

.fx-theme[hidden] { display: none; }

.fx-more { margin: 2.5rem 0 0; text-align: center; }

.fx-more__btn {
	padding: 0.7rem 1.4rem;
	border: 1px solid var(--rule);
	border-radius: 999px;
	color: var(--ink);
	font-size: 0.9rem;
}

.fx-more__btn:hover { border-color: var(--accent); color: var(--accent); }

/* --- assignments ------------------------------------------------------------------------- */
.fx-jobs { list-style: none; margin: 0; padding: 0; }

.fx-job {
	display: grid;
	grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
	gap: 1.5rem;
	align-items: center;
	padding: 1.4rem 0;
	border-bottom: 1px solid var(--rule);
}

.fx-job__head { display: grid; gap: 0.2rem; }
.fx-job__title { font-family: var(--display); font-size: 1.8rem; line-height: 1.1; }
.fx-job__meta { color: var(--ink-faint); font-size: 0.8rem; }
.fx-job__head:hover .fx-job__title { color: var(--accent); }

.fx-job__pictures { display: flex; gap: 0.4rem; overflow: hidden; height: 7.5rem; }
.fx-job__pic { flex: 0 0 auto; height: 100%; width: calc(7.5rem * var(--r, 1)); background: var(--bg-3); }
.fx-job__pic img { width: 100%; height: 100%; object-fit: cover; }

/* --- the archive ------------------------------------------------------------------------- */
.fx-filters {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8rem 1.2rem;
	margin: 0 calc(var(--gutter) * -1) 1rem;
	padding: 0.9rem var(--gutter);
	background: rgba(var(--shade), 0.94);
	backdrop-filter: blur(8px);
}

.fx-search { position: relative; }

.fx-search__clear {
	position: absolute;
	top: 50%;
	right: 0.45rem;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 999px;
	color: var(--ink-dim);
}

.fx-search__clear:hover { background: var(--bg-3); color: var(--ink); }
.fx-search__clear[hidden] { display: none; }

/* The browser's own clear cross in search fields - ours clears everything. */
.fx-search input::-webkit-search-cancel-button { display: none; }

.fx-search input {
	width: min(22rem, 70vw);
	padding: 0.55rem 2.6rem 0.55rem 1rem;
	border: 1px solid var(--rule);
	border-radius: 999px;
	background: var(--bg-2);
	color: var(--ink);
	font: inherit;
	font-size: 0.9rem;
}

.fx-select {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8rem;
	color: var(--ink-dim);
}

.fx-select select {
	max-width: 16rem;
	padding: 0.4rem 2rem 0.4rem 0.9rem;
	border: 1px solid var(--rule);
	border-radius: 999px;
	background: var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23d8c3b8'/%3E%3C/svg%3E") no-repeat right 0.8rem center;
	color: var(--ink);
	font: inherit;
	font-size: 0.85rem;
	appearance: none;
	cursor: pointer;
}

.fx-select select:hover { border-color: var(--ink-faint); }
.fx-select select.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.fx-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* När / Var / Vad and their panels */
.fx-facets { display: flex; gap: 0.4rem; }

.fx-facet {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0.8rem 0.45rem 1.1rem;
	border: 1px solid var(--rule);
	border-radius: 999px;
	font-family: var(--serif);
	font-size: 1.05rem;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

/* The chevron in a small circle: down = closed, up = open. */
.fx-facet__chev {
	display: inline-grid;
	place-items: center;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 999px;
	background: var(--bg-3);
	color: var(--ink);
	transition: transform 0.2s ease, background 0.15s;
}

.fx-facet:hover { border-color: var(--ink-faint); }
.fx-facet:hover .fx-facet__chev { background: var(--rule); }
.fx-facet.is-active { border-color: var(--accent); }

/* Open: the button is filled (light) and the chevron points up. */
.fx-facet[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.fx-facet[aria-expanded="true"] .fx-facet__chev { transform: rotate(180deg); background: var(--bg); color: var(--ink); }
.fx-facet[aria-expanded="true"] .fx-facet__value { color: #2f5bd0; }

.fx-facet__value {
	max-width: 12rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--sans);
	font-size: 0.78rem;
	color: var(--accent);
}

.fx-facet__value:empty { display: none; }

.fx-facet--bookmarks { font-family: var(--sans); font-size: 0.9rem; }
.fx-facet--bookmarks.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.fx-facet__count { font-family: var(--mono); font-size: 0.75rem; opacity: 0.8; }
.fx-facet__count:empty { display: none; }

.fx-v-star {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: 0.6rem;
	padding: 0.35rem 0.9rem;
	border: 1px solid var(--rule);
	border-radius: 999px;
	font-size: 0.85rem;
}

.fx-v-star:hover { border-color: var(--accent); }
.fx-v-star.is-active { border-color: var(--accent); color: var(--accent); }
/* The label says the state - "Bokmärk" / "Bokmärkt" (static/featured.js: showStar). */

.fx-panel {
	margin: 0 0 1.2rem;
	padding: 1.2rem 1.4rem;
	border: 1px solid var(--rule);
	border-radius: 14px;
	background: var(--bg-2);
	max-height: 50vh;
	overflow-y: auto;
}

.fx-panel[hidden] { display: none; }

.fx-panel { border-top: 3px solid var(--ink); animation: fx-panel-in 0.18s ease-out; }

@keyframes fx-panel-in {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}

.fx-panel__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 1rem;
	margin-bottom: 0.6rem;
}

.fx-panel__title { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.5rem; }
.fx-panel__hint { margin: 0; flex: 1; color: var(--ink-faint); font-size: 0.82rem; }

.fx-panel__close {
	padding: 0.3rem 0.8rem;
	border: 1px solid var(--rule);
	border-radius: 999px;
	color: var(--ink-dim);
	font-size: 0.8rem;
}

.fx-panel__close:hover { color: var(--ink); border-color: var(--ink-faint); }

.fx-chip--map { display: inline-flex; align-items: center; gap: 0.35rem; }

/* The map above the wall */
.fx-map {
	height: min(60vh, 34rem);
	margin: 0 0 1.2rem;
	border-radius: 14px;
	overflow: hidden;
	background: var(--bg-2);
	/* Leaflet's panes and controls have z-index 400-1000: keep them inside the map,
	   below the sticky filter bar and the picture viewer. */
	position: relative;
	z-index: 0;
	isolation: isolate;
}

.fx-map[hidden] { display: none; }
.fx-map__empty { position: absolute; inset: auto 1rem 1rem; z-index: 1000; margin: 0; padding: 0.6rem 0.9rem; border-radius: 10px; background: rgba(var(--shade), 0.9); color: var(--ink); font-size: 0.9rem; text-align: center; }
.fx-map__empty[hidden] { display: none; }

/* A dot per picture; the thumbnail in a tooltip when pointed at (static/featured.js). */
.fx-map__dot {
	border: 2px solid var(--ink);
	border-radius: 999px;
	background: var(--accent);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
	cursor: pointer;
}
.fx-map__dot:hover { transform: scale(1.25); }
.leaflet-tooltip.fx-map__tip { padding: 4px; border: 0; border-radius: 8px; background: var(--bg-deep); color: var(--ink); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); }
.leaflet-tooltip.fx-map__tip::before { border-top-color: var(--bg-deep); }
.fx-map__tip img { display: block; width: 120px; height: 120px; object-fit: cover; border-radius: 5px; }
.fx-map__tip span { display: block; max-width: 120px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.72rem; }

@media (prefers-reduced-motion: reduce) {
	.fx-panel { animation: none; }
}
.fx-panel__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.45rem 0; border-bottom: 1px solid var(--rule); }
.fx-panel__row:last-child { border-bottom: 0; }
.fx-panel__years { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.fx-panel__group { display: grid; gap: 0.5rem; margin-top: 0.9rem; }
.fx-panel__label { color: var(--ink-faint); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; }
.fx-panel__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.fx-chip span { margin-left: 0.25rem; font-size: 0.72rem; opacity: 0.7; }
.fx-chip--strong { color: var(--ink); }
.fx-chip--small { padding: 0.15rem 0.5rem; font-family: var(--mono); font-size: 0.75rem; }
/* An assignment under "Varför": its title, shortened. */
.fx-chip--job { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "Foton av K W Gullers" - before the themes under What. */
.fx-panel__chips--about { display: flex; margin-bottom: 0.7rem; }
/* Cross-faceting hides the choices without pictures (static/featured.js: loadFacets). */
.fx-chip[hidden], .fx-panel__row[hidden], .fx-panel__group[hidden] { display: none; }
.fx-panel__empty { margin: 0.5rem 0 0; color: var(--ink-faint); font-style: italic; }

.fx-chip, .fx-order__btn {
	padding: 0.3rem 0.75rem;
	border: 1px solid var(--rule);
	border-radius: 999px;
	color: var(--ink-dim);
	font-size: 0.8rem;
}

.fx-chip:hover, .fx-order__btn:hover { color: var(--ink); border-color: var(--ink-faint); }
.fx-chip[aria-pressed="true"], .fx-order__btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.fx-order { display: flex; gap: 0.3rem; margin-left: auto; }

.fx-active { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.fx-active[hidden] { display: none; }

.fx-active__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.3rem 0.5rem 0.3rem 0.8rem;
	border-radius: 999px;
	background: var(--accent);
	color: var(--on-accent);
	font-size: 0.82rem;
	font-weight: 500;
}

.fx-active__chip span { opacity: 0.7; }

/* The wall: justified rows - each picture's width follows its proportions. */
.fx-wall {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.fx-wall::after { content: ""; flex-grow: 1000; }

.fx-tile {
	position: relative;
	flex: calc(var(--r) * 180) 1 calc(var(--r) * 180px);
	aspect-ratio: var(--r);
	max-height: 340px;
	overflow: hidden;
	background: var(--bg-3);
}

/* The picture clicked in the year strip or a theme: first in the wall, framed in the accent -
   a pulse, then the frame fades and the picture is one among the others. */
.fx-tile.is-pinned { outline: 3px solid transparent; outline-offset: -3px; animation: fx-pin 5s ease-in-out forwards; }
@keyframes fx-pin {
	0% { outline-color: var(--accent); outline-width: 7px; }
	12% { outline-width: 3px; }
	24% { outline-width: 7px; }
	36% { outline-width: 3px; }
	70% { outline-color: var(--accent); }
	100% { outline-color: transparent; }
}
.fx-order__dir { display: inline-block; margin-left: 0.15rem; }

.fx-tile__open { display: block; width: 100%; height: 100%; }
.fx-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease, filter 0.3s; }

/* The star: shown on hover, always when the picture is bookmarked. */
.fx-tile__star {
	position: absolute;
	top: 0.4rem;
	right: 0.4rem;
	z-index: 2;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	background: rgba(var(--shade), 0.7);
	color: var(--ink);
	font-size: 1rem;
	line-height: 2rem;
	text-align: center;
	opacity: 0;
	transition: opacity 0.2s, color 0.2s;
}

.fx-tile:hover .fx-tile__star, .fx-tile__star:focus-visible, .fx-tile__star.is-active { opacity: 1; }
.fx-tile__star.is-active { color: var(--accent); }
.fx-tile__star:hover { color: var(--accent); }

@media (hover: none) {
	.fx-tile__star { opacity: 0.85; }
}
.fx-tile:hover img { transform: scale(1.035); }

.fx-tile__caption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 1.6rem 0.6rem 0.45rem;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
	font-size: 0.72rem;
	line-height: 1.3;
	opacity: 0;
	transition: opacity 0.2s;
	text-align: left;
}

.fx-tile:hover .fx-tile__caption, .fx-tile:focus-visible .fx-tile__caption { opacity: 1; }

/* The title at most two lines, the EXIF line below it (static/archive.js: gearLine). */
.fx-tile__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.fx-tile__exif {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	margin-top: 0.2rem;
	overflow: hidden;
	color: var(--ink-dim);
	font-size: 0.66rem;
}

/* Touch screens: no hover - the caption is shown in the viewer instead. */
@media (hover: none) {
	.fx-tile__caption { display: none; }
}
.fx-tile__caption b { font-family: var(--mono); font-weight: 500; color: var(--accent); }

.fx-wall__status { color: var(--ink-faint); font-size: 0.85rem; text-align: center; margin: 1.5rem 0 0; }
.fx-wall__sentinel { height: 1px; }

/* --- the picture viewer ------------------------------------------------------------------------ */
.fx-viewer {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
	background: rgba(23, 23, 42, 0.97);
}

.fx-viewer[hidden] { display: none; }

.fx-viewer__figure {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 3.5rem 4.5rem;
	min-height: 0;
}

.fx-viewer__figure img { max-width: 100%; max-height: calc(100vh - 7rem); object-fit: contain; }
/* Deep zoom (IIIF, OpenSeadragon): the picture's area, with a bar of buttons below. */
.fx-viewer__figure { position: relative; }
.fx-viewer__deep { position: absolute; inset: 3.5rem 4.5rem 4.5rem; }
.fx-viewer__osd { width: 100%; height: 100%; }   /* OpenSeadragon's element (it sets its own position) */
.fx-viewer__deep[hidden], .fx-viewer__zoombar[hidden], .fx-viewer__zoom[hidden] { display: none; }
.fx-viewer__zoombar {
	position: absolute; left: 50%; bottom: 0.9rem; transform: translateX(-50%); z-index: 3;
	display: flex; gap: 0.3rem; padding: 0.3rem; border-radius: 999px;
	background: rgba(var(--shade), 0.85); backdrop-filter: blur(6px);
}
.fx-viewer__zoombar button {
	display: grid; place-items: center; min-width: 2.3rem; height: 2.3rem; padding: 0 0.6rem;
	border-radius: 999px; color: var(--ink-dim);
}
.fx-viewer__zoombar button:hover { background: var(--bg-3); color: var(--ink); }
.fx-viewer__zoombar .fx-viewer__zoomback { font-size: 0.85rem; padding: 0 0.9rem; }
@media (max-width: 900px) { .fx-viewer__deep { inset: 3.5rem 0.5rem 4rem; } }
/* The link to DigitaltMuseum's image viewer around the picture. */
.fx-viewer__zoom { display: contents; }
.fx-viewer__zoom[href] img { cursor: zoom-in; }

.fx-viewer__info {
	overflow-y: auto;
	padding: 4rem 2rem 2rem;
	border-left: 1px solid var(--rule);
	font-size: 0.9rem;
}

.fx-viewer__info h2 { margin: 0 0 0.4rem; font-family: var(--display); font-weight: 400; font-size: 1.9rem; line-height: 1.15; }
.fx-viewer__info .fx-v-year { font-family: var(--mono); color: var(--accent); }
.fx-viewer__info dl { margin: 1.5rem 0; display: grid; gap: 0.8rem; }
.fx-viewer__info dt { color: var(--ink-faint); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; }
.fx-viewer__info dd { margin: 0.1rem 0 0; color: var(--ink-dim); }
.fx-viewer__info .fx-v-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.fx-viewer__info .fx-v-tags button { padding: 0.15rem 0.6rem; border: 1px solid var(--rule); border-radius: 999px; font-size: 0.78rem; color: var(--ink-dim); }
.fx-viewer__info .fx-v-tags button:hover { border-color: var(--accent); color: var(--accent); }
.fx-viewer__info .fx-v-link { display: inline-block; margin-top: 0.5rem; }

.fx-viewer__close, .fx-viewer__nav {
	position: absolute;
	z-index: 2;
	width: 3rem;
	height: 3rem;
	border-radius: 999px;
	/* The icon in the middle of the circle (the button reset leaves text-align to inherit). */
	display: grid;
	place-items: center;
	padding: 0;
	text-align: center;
	color: var(--ink-dim);
	font-size: 1.6rem;
	line-height: 1;
}

.fx-viewer__close { top: 0.8rem; right: 0.8rem; }
.fx-viewer__close svg, .fx-viewer__nav svg { display: block; }
.fx-viewer__nav { top: 50%; transform: translateY(-50%); }
.fx-viewer__nav--prev { left: 0.6rem; }
.fx-viewer__nav--next { right: calc(min(22rem, 40vw) + 0.6rem); }
.fx-viewer__close:hover, .fx-viewer__nav:hover { color: var(--ink); background: var(--bg-3); }

/* --- footer ----------------------------------------------------------------------------------- */
.fx-footer { padding: 4rem var(--gutter) 3rem; border-top: 1px solid var(--rule); color: var(--ink-dim); font-size: 0.9rem; }
.fx-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 2.5rem; margin-bottom: 2.5rem; }
.fx-footer h3 { margin: 0 0 0.8rem; color: var(--ink); font-family: var(--display); font-weight: 400; font-size: 1.5rem; }
.fx-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.fx-footer__list li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dotted var(--rule); padding-bottom: 0.3rem; }
.fx-footer__list button:hover { color: var(--accent); }
.fx-footer__list span { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-faint); }
.fx-footer__small { color: var(--ink-faint); font-size: 0.8rem; }

/* --- small screens ----------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.fx-intro { grid-template-columns: minmax(0, 1fr); }
	.fx-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 0; border-left: 0; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
	.fx-job { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
	.fx-viewer { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
	.fx-viewer__figure { padding: 3.5rem 0.5rem 0.5rem; }
	.fx-viewer__figure img { max-height: 60vh; }
	.fx-viewer__info { border-left: 0; border-top: 1px solid var(--rule); padding: 1.2rem; max-height: 40vh; }
	.fx-viewer__nav { top: 30%; }
	.fx-viewer__nav--next { right: 0.6rem; }
}

@media (max-width: 640px) {
	.fx-top__nav { display: none; }
	.fx-hero__caption { display: none; }
	.fx-hero__name { font-size: 15vw; }
	/* A whole picture on a phone: the picture above, the text below. */
	.fx-hero__frame--whole { inset: 4.5rem var(--gutter) 48% var(--gutter); justify-content: center; }
	.fx-hero.is-whole .fx-hero__text { max-width: none; right: var(--gutter); bottom: 2.5rem; }
	.fx-hero.is-whole .fx-hero__name { font-size: 13vw; }
	.fx-tile { flex-basis: calc(var(--r) * 120px); flex-grow: calc(var(--r) * 120); }
	.fx-order { margin-left: 0; }
	/* A theme: the heading above its pictures (in one column it would otherwise
	   seem to belong to the next theme). */
	.fx-theme__label { order: -2; margin-top: 0; }
	.fx-theme__count { order: -1; margin-bottom: 0.3rem; }
	/* The archive's choices: narrower, wrapping, the search on a row of its own. The
	   values chosen are shown in the chips below the row (.fx-active) instead. */
	.fx-filters { gap: 0.5rem; padding-top: 0.6rem; padding-bottom: 0.6rem; }
	.fx-search { flex: 1 1 100%; }
	.fx-search input { width: 100%; padding-top: 0.45rem; padding-bottom: 0.45rem; }
	.fx-facets { flex-wrap: wrap; gap: 0.3rem; }
	.fx-facet { gap: 0.25rem; padding: 0.3rem 0.3rem 0.3rem 0.6rem; font-size: 0.88rem; }
	.fx-facet__chev { width: 1.1rem; height: 1.1rem; }
	.fx-facet__chev svg { width: 10px; height: 10px; }
	.fx-facet__value { display: none; }
	/* A choice made: the accent border (.fx-facet.is-active) and the chips below the row. */
	.fx-facet.is-active { box-shadow: inset 0 0 0 1px var(--accent); }
	.fx-facet--bookmarks { padding: 0.3rem 0.6rem; font-size: 0.85rem; }
	.fx-facet--bookmarks .fx-facet__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.fx-order__btn { padding: 0.2rem 0.6rem; font-size: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
	.fx-hero__frame img { animation: none; }
	.fx-hero__frame { transition: none; }
	html { scroll-behavior: auto; }
}

/* The map's clusters in the theme's colours */
/* Round clusters (the shape from MarkerCluster.Default.css, in the site's colours). */
.fx-map .marker-cluster { background: rgba(122, 162, 247, 0.35); background-clip: padding-box; border-radius: 20px; }
.fx-map .marker-cluster div { width: 30px; height: 30px; margin-left: 5px; margin-top: 5px; border-radius: 15px; text-align: center; font-size: 12px; line-height: 30px; }
.fx-map .marker-cluster div { background: var(--accent); color: var(--on-accent); font-family: var(--sans); font-weight: 600; }

/* --- Flickr: licences, the viewer's extra facts ------------------------------------------------ */
/* All rights reserved: marked in the viewer and in the footer. */
.fx-v-rights {
	margin: 0.4rem 0 0;
	padding: 0.5rem 0.7rem;
	border-left: 3px solid var(--rights);
	background: rgba(247, 160, 114, 0.08);
	color: var(--ink);
	font-size: 0.82rem;
}
.fx-footer__list button.is-rights, .fx-viewer__info .is-rights { color: var(--rights); }
.fx-viewer__info .fx-v-desc { color: var(--ink-dim); overflow-wrap: anywhere; }
.fx-viewer__info .fx-v-desc p { margin: 0 0 0.7rem; }
.fx-viewer__info .fx-v-small { font-size: 0.8rem; color: var(--ink-faint); }
.fx-viewer__info .fx-v-tags button.is-theme { border-color: var(--accent); color: var(--ink); }
.fx-viewer__info .fx-v-links { display: grid; justify-items: start; gap: 0.3rem; }
.fx-viewer__info .fx-v-links button { color: var(--accent); text-align: left; }
.fx-viewer__info .fx-v-links button:hover { color: var(--accent-hover); text-decoration: underline; }
.fx-v-flickr { font-weight: 600; }
.fx-wall__loading { color: var(--ink-faint); text-align: center; padding: 3rem 0; }

/* --- Gear: the cameras and the focal lengths as strips (the year strip's cards), the lenses as rows --- */
.fx-gear__head { margin: 2.6rem 0 1rem; color: var(--ink-bright); font-family: var(--display); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.02em; }
.fx-gear__head:first-of-type { margin-top: 0; }
.fx-gear__head span { margin-left: 0.5rem; color: var(--ink-faint); font-family: var(--sans); font-size: 0.8rem; font-weight: 400; letter-spacing: 0; }
.fx-gear__strip { display: flex; align-items: flex-end; gap: 0.5rem; overflow-x: auto; padding-bottom: 1rem; scrollbar-width: thin; scrollbar-color: var(--bg-3) transparent; }
.fx-gear__item .fx-year__img { height: 8.5rem; width: calc(8.5rem * var(--r, 1)); }
.fx-gear__label { font-size: 0.85rem; color: var(--ink); white-space: nowrap; }
.fx-gear .fx-job__title { font-size: 1.35rem; }

/* --- the map's controls: full screen and the background's visibility (from Radius) --- */
.fx-map .leaflet-bar a, .fx-map .leaflet-bar a:hover, .fx-map .leaflet-bar a:focus { background: var(--bg-2); color: var(--ink-dim); border-bottom-color: var(--rule); }
.fx-map .leaflet-bar a:hover { color: var(--ink-bright); }
.fx-map .leaflet-bar { border: 1px solid var(--rule); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }
.fx-map .leaflet-control-attribution { background: rgba(var(--shade), 0.8); color: var(--ink-faint); }
.fx-map.map--fullscreen { position: fixed !important; inset: 0; z-index: 40; width: 100vw !important; height: 100vh !important; height: 100dvh !important; margin: 0; border-radius: 0; }
.has-map-fullscreen, .has-map-fullscreen body { overflow: hidden; }
.map-fullscreen .map-fullscreen__button, .map-opacity .map-opacity__button { display: flex; align-items: center; justify-content: center; }
.map-fullscreen .map-fullscreen__button svg { pointer-events: none; }
.map-fullscreen .map-fullscreen__button[aria-pressed="true"], .map-opacity--open .map-opacity__button { color: var(--accent) !important; }
.map-opacity { position: relative; }
.map-opacity--dimmed .map-opacity__button::after { content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.map-opacity__panel { position: absolute; top: 0; right: calc(100% + 6px); display: flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.6rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--bg-2); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); color: var(--ink-dim); white-space: nowrap; font-size: 0.78rem; }
.map-opacity__panel[hidden] { display: none; }
.map-opacity__value { min-width: 2.6em; font-family: var(--mono); text-align: right; }
.map-opacity__range { width: 6.5rem; margin: 0; accent-color: var(--accent); cursor: pointer; }
.fx-map .map-base { display: flex; }
.fx-map .leaflet-bar.map-base a { width: auto; padding: 0 0.7rem; border-bottom: 0; border-right: 1px solid var(--rule); font-size: 0.78rem; font-weight: 500; line-height: 30px; }
.fx-map .leaflet-bar.map-base a:last-child { border-right: 0; }
.fx-map .leaflet-bar.map-base a[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.fx-job[hidden] { display: none; }