/* SRFA landing page blocks — Featured Carousel, Collections Slider, Artist Index.
   Colors follow the site palette: Accent 4 grey (#686868) for secondary text,
   a darker grey for artist last names, ink #161616 for headings. */

.srfa-lp {
	--srfa-ink: #161616;
	--srfa-grey: var(--wp--preset--color--accent-4, #686868);
	--srfa-grey-dark: #3a3a3a;
	--srfa-rule: #e4e3e0;
	--srfa-sold: #c8102e;
	--srfa-gutter: 40px;
	color: var(--srfa-ink);
	font-weight: 400;
	box-sizing: border-box;
}
.srfa-lp *, .srfa-lp *::before, .srfa-lp *::after { box-sizing: border-box; }
.srfa-lp button { font: inherit; color: inherit; cursor: pointer; }
.srfa-lp a:focus-visible, .srfa-lp button:focus-visible, .srfa-lp [tabindex]:focus-visible {
	outline: 2px solid var(--srfa-ink);
	outline-offset: 3px;
}
.srfa-lp-empty { padding: 24px var(--srfa-gutter); color: var(--srfa-grey); font-size: 14px; }

/* Shared section head: label on a rule, tools at right */
.srfa-lp-inner { padding-left: var(--srfa-gutter); padding-right: var(--srfa-gutter); }
.srfa-lp-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 8px 24px;
	border-top: 1px solid var(--srfa-ink);
	padding-top: 14px;
	margin-bottom: 24px;
}
.srfa-lp-label {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.4;
}

/* ---------------- Featured Works Carousel ---------------- */

.srfa-lp-carousel { margin-top: 0; }
.srfa-lp-stage { position: relative; height: clamp(360px, 47vw, 720px); overflow: hidden; }
.srfa-lp-viewport {
	position: relative;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
.srfa-lp-viewport::-webkit-scrollbar { display: none; }
.srfa-lp-carousel.is-stopped .srfa-lp-viewport,
.srfa-lp-carousel:not(.is-ready) .srfa-lp-viewport { scroll-snap-type: x mandatory; }
.srfa-lp-track { display: flex; height: 100%; }
.srfa-lp-slide {
	position: relative;
	flex: 0 0 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
	scroll-snap-align: start;
}
.srfa-lp-slide-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
}
.srfa-lp-cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 150px 170px 28px var(--srfa-gutter);
	color: #ffffff;
	background: linear-gradient(to top, rgba(10,10,10,0.62) 0%, rgba(10,10,10,0.26) 48%, rgba(10,10,10,0) 100%);
	text-shadow: 0 1px 14px rgba(0,0,0,0.25);
	pointer-events: none;
}
.srfa-lp-cap-artist { font-size: 28px; font-weight: 500; letter-spacing: -0.4px; line-height: 1.15; }
.srfa-lp-cap-title { font-size: 20px; font-weight: 300; line-height: 1.3; }
.srfa-lp-cap-title em { font-style: italic; }
.srfa-lp-cap-meta { font-size: 13px; font-weight: 400; opacity: 0.9; margin-top: 4px; }
.srfa-lp-cap-links { display: flex; gap: 20px; margin-top: 12px; font-size: 13px; font-weight: 500; pointer-events: auto; }
.srfa-lp-cap-links a { color: #ffffff; text-decoration: underline; text-underline-offset: 4px; }
.srfa-lp-cap-links a:hover { text-decoration-thickness: 2px; }

.srfa-lp-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 1px solid rgba(17,17,17,0.12);
	background: rgba(255,255,255,0.92);
	color: var(--srfa-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.srfa-lp-arrow[hidden] { display: none; }
.srfa-lp-arrow.is-prev { left: 28px; }
.srfa-lp-arrow.is-next { right: 28px; }
.srfa-lp-ctrl {
	position: absolute;
	right: 32px;
	bottom: 26px;
	display: flex;
	align-items: center;
	gap: 4px;
	color: #ffffff;
	text-shadow: 0 1px 10px rgba(0,0,0,0.3);
}
.srfa-lp-ctrl[hidden] { display: none; }
.srfa-lp-counter { font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.srfa-lp-toggle {
	width: 44px;
	height: 44px;
	border: none;
	background: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: #ffffff;
}
.srfa-lp-toggle .srfa-lp-icon-play { display: none; }
.srfa-lp-carousel.is-stopped .srfa-lp-toggle .srfa-lp-icon-play { display: block; }
.srfa-lp-carousel.is-stopped .srfa-lp-toggle .srfa-lp-icon-pause { display: none; }

.srfa-lp-progress {
	display: flex;
	gap: 6px;
	padding: 10px var(--srfa-gutter) 0;
}
.srfa-lp-progress[hidden] { display: none; }
.srfa-lp-progress button {
	flex: 1 1 0;
	height: 22px;
	border: none;
	background: none;
	padding: 0;
	display: flex;
	align-items: center;
}
.srfa-lp-progress span { display: block; width: 100%; height: 2px; background: #d6d5d1; transition: background-color 300ms ease; }
.srfa-lp-progress button[aria-current="true"] span { background: var(--srfa-ink); }

/* ---------------- Collections Slider ---------------- */

.srfa-lp-collections { margin-top: 88px; }
.srfa-lp-colnav { display: flex; gap: 8px; }
.srfa-lp-colnav[hidden] { display: none; }
.srfa-lp-round {
	width: 44px;
	height: 44px;
	border: 1px solid #d9d8d4;
	border-radius: 50%;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: var(--srfa-ink);
}
.srfa-lp-round:disabled { opacity: 0.35; cursor: default; }
.srfa-lp-colview {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 48px) / 3);
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.srfa-lp-colview::-webkit-scrollbar { display: none; }
.srfa-lp-card { scroll-snap-align: start; min-width: 0; }
.srfa-lp-card a { display: flex; flex-direction: column; gap: 14px; color: inherit; text-decoration: none; }
.srfa-lp-card-frame { display: block; aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; background: #efeeeb; }
.srfa-lp-card-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.srfa-lp-card a:hover .srfa-lp-card-img { transform: scale(1.03); }
.srfa-lp-card-text { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.srfa-lp-card-name { font-size: 22px; font-weight: 500; letter-spacing: -0.3px; }
.srfa-lp-card-count { font-size: 13px; color: var(--srfa-grey); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------------- Artist Index ---------------- */

.srfa-lp-artists { margin-top: 88px; margin-bottom: 88px; }
.srfa-lp-headtools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.srfa-lp-az { display: flex; flex-wrap: wrap; font-size: 13px; font-weight: 400; }
.srfa-lp-az a, .srfa-lp-az span { min-width: 20px; text-align: center; padding: 4px 0; }
.srfa-lp-az a { color: var(--srfa-ink); text-decoration: none; }
.srfa-lp-az a:hover { text-decoration: underline; text-underline-offset: 3px; }
.srfa-lp-az span { color: #b9b8b4; }
.srfa-lp-names-toggle {
	font-size: 12px;
	color: var(--srfa-grey);
	background: none;
	border: none;
	min-height: 44px;
	padding: 0 0 0 12px;
}
.srfa-lp-names-toggle[hidden] { display: none; }
.srfa-lp-namesview {
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: #c9c9c9 transparent;
	padding-bottom: 14px;
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
}
.srfa-lp-names {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0 48px 0 0;
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(var(--srfa-rows, 8), auto);
	grid-auto-columns: max-content;
	column-gap: 36px;
	width: max-content;
	font-size: 12px;
	line-height: 1.33;
	letter-spacing: 0;
}
.srfa-lp-name { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.srfa-lp-name a { text-decoration: none; color: inherit; }
.srfa-lp-name .fn { color: var(--srfa-grey); font-weight: 350; }
.srfa-lp-name .ln { color: var(--srfa-grey-dark); font-weight: 500; }
.srfa-lp-name a:hover .ln { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.srfa-lp-count { font-size: 9px; color: var(--srfa-grey); font-variant-numeric: tabular-nums; position: relative; top: -0.5em; }
.srfa-lp-sold { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--srfa-sold); position: relative; top: -0.55em; }
.srfa-lp-key { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; margin: 14px 0 0; font-size: 12px; color: var(--srfa-grey); }
.srfa-lp-key .srfa-lp-sold { top: 0; margin-right: 7px; }

/* ---------------- Gallery "Slider" style (catalog plates) ----------------
   Same carousel as the home page, but images are shown whole (never cropped),
   on the page background, with the caption in ink under the image. */

.srfa-lp-carousel.is-catalog { margin-block: 28px 44px; }
.srfa-lp-carousel.is-catalog .srfa-lp-stage { height: clamp(380px, 52vw, 680px); }
.srfa-lp-carousel.is-catalog .srfa-lp-slide { display: flex; flex-direction: column; }
.srfa-lp-carousel.is-catalog .srfa-lp-slide-frame { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 84px; }
.srfa-lp-carousel.is-catalog .srfa-lp-slide-img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.srfa-lp-carousel.is-catalog .srfa-lp-cap {
	position: static;
	display: block;
	padding: 14px 84px 0;
	min-height: 64px;
	color: var(--srfa-grey-dark);
	background: none;
	text-shadow: none;
	font-size: 14px;
	line-height: 1.45;
	text-align: center;
}
.srfa-lp-carousel.is-catalog .srfa-lp-ctrl { color: var(--srfa-grey-dark); text-shadow: none; bottom: 0; right: 0; }
.srfa-lp-carousel.is-catalog .srfa-lp-toggle { color: var(--srfa-grey-dark); }
.srfa-lp-carousel.is-catalog .srfa-lp-arrow { top: calc(50% - 32px); }
.srfa-lp-carousel.is-catalog .srfa-lp-arrow.is-prev { left: 0; }
.srfa-lp-carousel.is-catalog .srfa-lp-arrow.is-next { right: 0; }

/* ---------------- Home carousel "strip" (2026-10-28) ----------------
   Works shown whole (never cropped), all at the same height, 100px of white
   between them. Caption stays on the image, lower left. Counter and pause sit
   under the strip, beside the progress bars. */

.srfa-lp-carousel.is-strip .srfa-lp-stage {
	height: clamp(360px, 42vw, 640px);
	background: var(--wp--preset--color--base, #ffffff);
}
.srfa-lp-carousel.is-strip .srfa-lp-track {
	gap: 100px;
	padding-inline: var(--srfa-gutter);
}
.srfa-lp-carousel.is-strip .srfa-lp-slide {
	flex: 0 0 auto;
	height: 100%;
	scroll-snap-align: center;
}
.srfa-lp-carousel.is-strip .srfa-lp-slide-img {
	width: auto;
	height: 100%;
	max-width: none;
	object-fit: contain;
}
.srfa-lp-carousel.is-strip .srfa-lp-cap { padding: 120px 24px 20px; }
.srfa-lp-carousel.is-strip .srfa-lp-cap-artist { font-size: 22px; }
.srfa-lp-carousel.is-strip .srfa-lp-cap-title { font-size: 17px; }
.srfa-lp-under {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 10px var(--srfa-gutter) 0;
}
.srfa-lp-under .srfa-lp-progress { flex: 1 1 auto; padding: 0; }
.srfa-lp-under .srfa-lp-ctrl {
	position: static;
	color: var(--srfa-grey-dark);
	text-shadow: none;
}
.srfa-lp-under .srfa-lp-toggle { color: var(--srfa-grey-dark); }

/* ---------------- Phone ---------------- */

@media (max-width: 640px) {
	.srfa-lp { --srfa-gutter: 20px; }
	.srfa-lp-stage { height: 440px; }
	.srfa-lp-arrow { display: none; }
	.srfa-lp-cap { padding: 90px 110px 16px var(--srfa-gutter); }
	.srfa-lp-cap-artist { font-size: 20px; }
	.srfa-lp-cap-title { font-size: 16px; }
	.srfa-lp-cap-meta { font-size: 12px; }
	.srfa-lp-ctrl { right: 8px; bottom: 8px; }
	.srfa-lp-colview { grid-auto-columns: 72%; gap: 16px; }
	.srfa-lp-colnav { display: none; }
	.srfa-lp-az { display: none; }
	.srfa-lp-names { column-gap: 28px; }
	.srfa-lp-collections, .srfa-lp-artists { margin-top: 64px; }
	.srfa-lp-carousel.is-catalog .srfa-lp-stage { height: 420px; }
	.srfa-lp-carousel.is-catalog .srfa-lp-slide-frame, .srfa-lp-carousel.is-catalog .srfa-lp-cap { padding-left: 0; padding-right: 0; }
	.srfa-lp-carousel.is-catalog .srfa-lp-cap { font-size: 13px; padding-bottom: 36px; }
	.srfa-lp-carousel.is-strip .srfa-lp-stage { height: 400px; }
	.srfa-lp-carousel.is-strip .srfa-lp-track { gap: 56px; }
	.srfa-lp-carousel.is-strip .srfa-lp-cap { padding: 80px 16px 14px; }
	.srfa-lp-carousel.is-strip .srfa-lp-cap-artist { font-size: 18px; }
	.srfa-lp-carousel.is-strip .srfa-lp-cap-title { font-size: 15px; }
	.srfa-lp-under .srfa-lp-ctrl { right: auto; bottom: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.srfa-lp-colview { scroll-behavior: auto; }
	.srfa-lp-card-img, .srfa-lp-progress span { transition: none; }
}

/* ---------------- Featured stories in the carousel (2026-10-28) ---------------- */

.srfa-lp-cap-kind {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 4px;
}

/* ---------------- Featured Index (Featured page, 2026-10-28) ----------------
   Repeats every six items: one wide item, a row of two, a row of three.
   Image above the text on every card. Works are shown whole on white, never cropped. */

.srfa-lp-findex { margin-top: 48px; margin-bottom: 96px; }
.srfa-lp-findex .srfa-lp-label { font-family: inherit; }
.srfa-lp-fi-filters { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.srfa-lp-fi-filters button {
	border: 0;
	background: none;
	padding: 4px 0;
	font-size: 13px;
	color: var(--srfa-grey);
	border-bottom: 1px solid transparent;
}
.srfa-lp-fi-filters button[aria-pressed="true"] { color: var(--srfa-ink); border-bottom-color: var(--srfa-ink); }
.srfa-lp-fi-filters button:hover { color: var(--srfa-ink); }

.srfa-lp-fi-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 72px 40px;
}
.srfa-lp-fi-item { grid-column: span 2; min-width: 0; margin: 0; }
.srfa-lp-fi-item.is-half { grid-column: span 3; }
.srfa-lp-fi-item.is-wide { grid-column: 1 / -1; }
.srfa-lp-fi-item[hidden] { display: none; }

.srfa-lp-fi-link { display: flex; flex-direction: column; gap: 18px; color: inherit; text-decoration: none; }
.srfa-lp-fi-frame { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.srfa-lp-fi-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	object-position: left bottom;
	transition: opacity 300ms ease;
}
.srfa-lp-fi-link:hover .srfa-lp-fi-img { opacity: 0.86; }
.srfa-lp-fi-text { display: flex; flex-direction: column; gap: 4px; max-width: 34em; }
.srfa-lp-fi-kind {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--srfa-grey);
	margin-bottom: 4px;
}
.srfa-lp-fi-title { font-size: 22px; font-weight: 500; letter-spacing: -0.3px; line-height: 1.2; color: var(--srfa-ink); }
.srfa-lp-fi-sub { font-size: 17px; font-weight: 300; line-height: 1.35; color: var(--srfa-grey-dark); }
.srfa-lp-fi-excerpt { font-size: 15px; line-height: 1.55; color: var(--srfa-grey-dark); margin-top: 6px; }
.srfa-lp-fi-more {
	font-size: 13px;
	font-weight: 500;
	margin-top: 10px;
	text-decoration: underline;
	text-underline-offset: 4px;
	color: var(--srfa-ink);
}
.srfa-lp-fi-link:hover .srfa-lp-fi-more { text-decoration-thickness: 2px; }

/* Wide item: full width, image above the text like the other cards (CR 2026-10-28) */
.srfa-lp-fi-item.is-wide .srfa-lp-fi-frame { aspect-ratio: auto; height: clamp(360px, 42vw, 640px); }
.srfa-lp-fi-item.is-wide .srfa-lp-fi-title { font-size: 34px; letter-spacing: -0.6px; }
.srfa-lp-fi-item.is-wide .srfa-lp-fi-sub { font-size: 20px; }
.srfa-lp-fi-item.is-third .srfa-lp-fi-title { font-size: 19px; }

/* While a filter is on, every shown item is a third */
.srfa-lp-findex.is-filtered .srfa-lp-fi-item { grid-column: span 2; }
.srfa-lp-findex.is-filtered .srfa-lp-fi-item.is-wide .srfa-lp-fi-link { display: flex; gap: 18px; align-items: stretch; }
.srfa-lp-findex.is-filtered .srfa-lp-fi-item.is-wide .srfa-lp-fi-frame { order: 0; aspect-ratio: 3 / 2; height: auto; }
.srfa-lp-findex.is-filtered .srfa-lp-fi-item.is-wide .srfa-lp-fi-img { object-position: left bottom; }
.srfa-lp-findex.is-filtered .srfa-lp-fi-item.is-wide .srfa-lp-fi-title { font-size: 19px; }

@media (max-width: 900px) {
	.srfa-lp-fi-item, .srfa-lp-fi-item.is-half { grid-column: span 3; }
	.srfa-lp-findex.is-filtered .srfa-lp-fi-item { grid-column: span 3; }
}
@media (max-width: 640px) {
	.srfa-lp-findex { margin-top: 32px; margin-bottom: 64px; }
	.srfa-lp-fi-grid { gap: 56px; }
	.srfa-lp-fi-item, .srfa-lp-fi-item.is-half, .srfa-lp-findex.is-filtered .srfa-lp-fi-item { grid-column: 1 / -1; }
	.srfa-lp-fi-item.is-wide .srfa-lp-fi-frame { height: auto; aspect-ratio: 4 / 3; }
	.srfa-lp-fi-item.is-wide .srfa-lp-fi-title { font-size: 26px; }
	.srfa-lp-fi-frame { aspect-ratio: 4 / 3; }
	.srfa-lp-cap-kind { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
	.srfa-lp-fi-img { transition: none; }
}