/*
 * AOH Gallery front-end styles.
 *
 * Structure:
 *  1. Fonts and tokens       6. Single artwork layout
 *  2. Utilities              7. Image carousel and lightbox
 *  3. Header bars            8. Video
 *  4. Gallery: views         9. Written pieces
 *  5. Cards                 10. Decorative image, motion
 *
 * Most selectors use :where() or single classes so themes can override easily.
 * Spacing, sizes and the poem indents are tokens in section 1.
 */

/* ==========================================================================
   1. Fonts and tokens
   ========================================================================== */

/* AOH Serif: Charis SIL by SIL International (SIL Open Font License, see
   ../fonts/OFL.txt), trimmed to Latin characters to keep the files small.
   The licence reserves the names "Charis" and "SIL" for the full font, so the
   trimmed copy is renamed. Regular and bold, each with italic. */
@font-face {
	font-family: "AOH Serif";
	src: url("../fonts/AOHSerif-Regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "AOH Serif";
	src: url("../fonts/AOHSerif-Italic.woff") format("woff");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "AOH Serif";
	src: url("../fonts/AOHSerif-Bold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "AOH Serif";
	src: url("../fonts/AOHSerif-BoldItalic.woff") format("woff");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

:where(.aoh-gallery, .aoh-single, .aoh-lightbox) {
	/* Palette */
	--aoh-white: #ffffff;
	--aoh-black: #000000;
	--aoh-blue-dark: #051935;
	--aoh-blue: #0c4277;
	--aoh-teal-dark: #5fa3a0;
	--aoh-teal: #b4d8c2;
	--aoh-orange-dark: #f15c32;
	--aoh-orange: #f68e45;
	--aoh-gold-dark: #bb8135;
	--aoh-gold: #dda52b;
	--aoh-yellow-pale: #fde594;
	--aoh-off-white-1: #f6f5ed;
	--aoh-off-white-2: #efeada;

	/* Roles */
	--aoh-text: var(--aoh-black);
	--aoh-text-muted: #3d3d3d;   /* 11:1 on white */
	--aoh-rule: #e4e4e4;
	--aoh-focus: var(--aoh-blue);
	--aoh-written-color: var(--aoh-blue);
	--aoh-written-bg: var(--aoh-off-white-1);
	--aoh-overlay-bg: rgba(5, 25, 53, 0.72);   /* Blue Dark */
	--aoh-featured-bg: linear-gradient(135deg, var(--aoh-teal) 0%, var(--aoh-teal-dark) 100%);
	--aoh-featured-title: var(--aoh-blue-dark);

	/* Type */
	--aoh-font-body: "Lato", "Helvetica Neue", Arial, sans-serif;
	--aoh-font-display: "Paytone One", "Lato", "Helvetica Neue", Arial, sans-serif;
	--aoh-font-written: "AOH Serif", Georgia, "Times New Roman", serif;

	/* Layout (content width is set from the plugin settings) */
	--aoh-content-width: 1080px;
	--aoh-gutter: clamp(1rem, 4vw, 2.5rem);
	--aoh-gap: clamp(1rem, 2.2vw, 2rem);
	--aoh-row-gap: clamp(1rem, 3vw, 3rem);
	--aoh-radius: 8px;
	--aoh-bar-height: 3.5rem;

	/* Poems: indent per leading space, and the hanging indent for wrapped lines */
	--aoh-indent-step: 0.3em;
	--aoh-hang: 0em;

	/* Set by JavaScript: height of the site's fixed header, and of our bar */
	--aoh-sticky-top: var(--aoh-header-h, 0px);

	/* The usable screen height below the header and bar */
	--aoh-screen: calc(100vh - var(--aoh-sticky-top) - var(--aoh-bar-height));

	box-sizing: border-box;
	font-family: var(--aoh-font-body);
	color: var(--aoh-text);
}

@supports (height: 100svh) {
	:where(.aoh-gallery, .aoh-single) {
		--aoh-screen: calc(100svh - var(--aoh-sticky-top) - var(--aoh-bar-height));
	}
}

:where(.aoh-gallery, .aoh-single, .aoh-lightbox) *,
:where(.aoh-gallery, .aoh-single, .aoh-lightbox) *::before,
:where(.aoh-gallery, .aoh-single, .aoh-lightbox) *::after {
	box-sizing: inherit;
}

/* The container that lines content up with the site's content width */
:where(.aoh-container) {
	width: 100%;
	max-width: calc(var(--aoh-content-width) + 2 * var(--aoh-gutter));
	margin-inline: auto;
	padding-inline: var(--aoh-gutter);
}

/* ==========================================================================
   2. Utilities
   ========================================================================== */

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

:where(.aoh-gallery, .aoh-single, .aoh-lightbox) [hidden] {
	display: none !important;
}

:where(.aoh-gallery, .aoh-single, .aoh-lightbox) img {
	max-width: 100%;
	height: auto;
}

:where(.aoh-gallery, .aoh-single, .aoh-lightbox) :focus-visible {
	outline: 2px solid var(--aoh-focus);
	outline-offset: 2px;
}

:where(.aoh-gallery, .aoh-single, .aoh-lightbox) button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
}

.aoh-icon {
	display: inline-block;
	flex: none;
	vertical-align: middle;
}

/* ==========================================================================
   3. Header bars (gallery and artwork pages)
   ========================================================================== */

.aoh-bar {
	position: sticky;
	top: var(--aoh-sticky-top);
	z-index: 30;
	background: var(--aoh-white);
	border-block: 1px solid var(--aoh-rule);
}

.aoh-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	max-width: calc(var(--aoh-content-width) + 2 * var(--aoh-gutter));
	min-height: var(--aoh-bar-height);
	margin-inline: auto;
	padding-inline: var(--aoh-gutter);
}

/* Gallery bar: small title appears once the bar is stuck (visual only) */
.aoh-bar__title {
	margin: 0;
	font-family: var(--aoh-font-display);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.2;
	opacity: 0;
	transform: translateY(0.25rem);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.aoh-bar.is-stuck .aoh-bar__title {
	opacity: 1;
	transform: none;
}

/* View switcher: outlined icon, filled when current */
.aoh-views {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin-inline-start: auto;
}

.aoh-views__label {
	margin-inline-end: 0.25rem;
	font-size: 0.875rem;
}

.aoh-views__link {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	color: var(--aoh-black);
	border-radius: 4px;
}

.aoh-views__link .aoh-icon {
	width: 20px;
	height: 20px;
}

.aoh-views__link .aoh-icon__shape {
	fill: transparent;
	transition: fill 0.15s ease;
}

.aoh-views__link:hover .aoh-icon__shape {
	fill: rgba(0, 0, 0, 0.12);
}

.aoh-views__link[aria-current="true"] .aoh-icon__shape {
	fill: currentColor;
}

/* Artwork bar: back link and Previous | Next */
.aoh-back,
.aoh-pager__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	color: inherit;
	text-decoration: none;
}

.aoh-back__label {
	font-family: var(--aoh-font-display);
	font-size: 1rem;
	white-space: nowrap;
}

/* When the bar is too narrow for the full back link and Previous | Next, the
   back link just says "Back" (aoh.js adds .is-compact; its accessible name
   stays "Back to …"). It switches once the space between them would be less
   than --aoh-back-min-gap: raise it to switch sooner. */
.aoh-single-bar {
	--aoh-back-min-gap: 4rem;
}

.aoh-back__short,
.aoh-bar.is-compact .aoh-back__full {
	display: none;
}

.aoh-bar.is-compact .aoh-back__short {
	display: inline;
}

.aoh-pager__link {
	white-space: nowrap;
}

.aoh-back:hover .aoh-back__label,
.aoh-pager__link:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.aoh-pager {
	display: flex;
	align-items: center;
	margin: 0 0 0 auto;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	color: var(--aoh-text-muted);
}

.aoh-pager__item + .aoh-pager__item::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 1em;
	margin-inline: 0.9rem;
	vertical-align: middle;
	background: currentColor;
}

@media (max-width: 599px) {
	.aoh-pager__item + .aoh-pager__item::before {
		margin-inline: 0.6rem;
	}
	.aoh-back,
	.aoh-pager__link {
		gap: 0.4rem;
	}
}

/* ==========================================================================
   4. Gallery: views, row arrows, load more
   ========================================================================== */

.aoh-gallery__viewport {
	position: relative;
}

.aoh-gallery__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.aoh-gallery__item {
	margin: 0;
	padding: 0;
	min-width: 0;
}

/* ----- Featured: a random selection at the start of the gallery ----- */
.aoh-featured {
	margin: 0;
	background: var(--aoh-featured-bg);
}

.aoh-featured__title {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--aoh-font-display) !important;
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem) !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-align: center;
	color: var(--aoh-featured-title) !important;
}

.aoh-featured__list {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.aoh-featured__item {
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0;
	list-style: none !important;
}

/* ----- Grid view: 1 column on phones, 2 on tablets, 3–4+ on desktops ----- */
.aoh-gallery--grid .aoh-gallery__viewport {
	max-width: calc(var(--aoh-content-width) + 2 * var(--aoh-gutter));
	margin-inline: auto;
	padding: var(--aoh-row-gap) var(--aoh-gutter);
}

.aoh-gallery--grid.aoh-layout--wide .aoh-gallery__viewport {
	max-width: none;
}

.aoh-gallery--grid .aoh-gallery__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--aoh-gap);
}

@media (min-width: 700px) {
	.aoh-gallery--grid .aoh-gallery__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.aoh-gallery--grid .aoh-gallery__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1600px) {
	.aoh-gallery--grid.aoh-layout--wide .aoh-gallery__list {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

.aoh-gallery--grid .aoh-gallery__item--more {
	display: none;
}

/* With Featured, its band spans the full width of the gallery, so the content
   width moves from the viewport to the band's contents and the grid */
.aoh-gallery--grid.aoh-gallery--has-featured .aoh-gallery__viewport {
	max-width: none;
	padding: 0 0 var(--aoh-row-gap);
}

.aoh-gallery--grid.aoh-gallery--has-featured .aoh-gallery__list,
.aoh-gallery--grid .aoh-featured__title,
.aoh-gallery--grid .aoh-featured__list {
	box-sizing: border-box;
	max-width: calc(var(--aoh-content-width) + 2 * var(--aoh-gutter));
	margin-inline: auto !important;
	padding-inline: var(--aoh-gutter) !important;
}

.aoh-gallery--grid.aoh-layout--wide.aoh-gallery--has-featured .aoh-gallery__list,
.aoh-gallery--grid.aoh-layout--wide .aoh-featured__title,
.aoh-gallery--grid.aoh-layout--wide .aoh-featured__list {
	max-width: none;
}

.aoh-gallery--grid .aoh-featured {
	margin-bottom: var(--aoh-row-gap);
	padding: calc(var(--aoh-row-gap) * 0.9) 0 calc(var(--aoh-row-gap) * 1.25);
}

.aoh-gallery--grid .aoh-featured__title {
	margin-bottom: calc(var(--aoh-row-gap) * 0.75) !important;
}

/* The same columns as the grid, showing only as many as fill one row */
.aoh-gallery--grid .aoh-featured__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--aoh-gap);
}

.aoh-gallery--grid .aoh-featured__item:nth-child(n + 3) {
	display: none;
}

@media (min-width: 700px) {
	.aoh-gallery--grid .aoh-featured__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.aoh-gallery--grid .aoh-featured__item:nth-child(3) {
		display: block;
	}
}

@media (min-width: 1024px) {
	.aoh-gallery--grid .aoh-featured__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.aoh-gallery--grid .aoh-featured__item:nth-child(4) {
		display: block;
	}
}

@media (min-width: 1600px) {
	.aoh-gallery--grid.aoh-layout--wide .aoh-featured__list {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
	.aoh-gallery--grid.aoh-layout--wide .aoh-featured__item:nth-child(5) {
		display: block;
	}
}

/* ----- Focused view: one row of large cards, edge to edge ----- */
.aoh-gallery--focused {
	/* Space before the first card lines up with the content edge */
	--aoh-row-start: max(var(--aoh-gutter), calc((100cqw - var(--aoh-content-width)) / 2));
	/* Space between cards, generous like works hung on a wall */
	--aoh-wall-gap: clamp(1.25rem, 5vw, 5rem);
	/* Card height fills the screen below the bars, up to a maximum (set in Settings) */
	--aoh-card-h: clamp(18rem, calc(var(--aoh-screen) - 2 * var(--aoh-row-gap) - 0.5rem), var(--aoh-card-max, 600px));
}

/* The row area always fills the screen below the bars; when the cards reach
   their maximum height they sit in the middle of it */
.aoh-gallery--focused .aoh-gallery__viewport {
	container-type: inline-size; /* Lets the row's spacing be measured from its full width */
	display: flex;
	flex-direction: column;
	min-height: var(--aoh-screen);
}

/*
 * The scroller fills the whole area, with the row of cards centred in it, so a
 * visible scrollbar sits at the very bottom of the gallery. The row inside is
 * as wide as its cards plus equal space at each end; because that space is part
 * of the row itself, every browser scrolls all the way to it.
 */
.aoh-gallery--focused .aoh-gallery__scroller {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.aoh-gallery--focused .aoh-gallery__list {
	display: flex;
	flex: none;
	width: max-content;
	gap: var(--aoh-wall-gap);
	/* Vertical space gives focus outlines room; the extra at the bottom keeps a
	   visible scrollbar clear of the cards */
	padding: var(--aoh-row-gap) var(--aoh-row-start) calc(var(--aoh-row-gap) + 0.5rem) !important;
	margin: 0 !important;
}

.aoh-gallery--focused .aoh-gallery__item {
	flex: 0 0 auto;
	/* As large as fits, at 2:3; on phones capped so the next card peeks in */
	width: min(calc(var(--aoh-card-h) * 2 / 3), 82vw);
	/* Cards settle in the centre of the row (the first and last sit at the ends) */
	scroll-snap-align: center;
}

.aoh-gallery--focused .aoh-gallery__more {
	display: none;
}

/*
 * Focused view with Featured: a band at the start of the row, holding the
 * "Featured" title and one card, that scrolls with the rest. Room for the
 * title is taken from every card's height, and the same space is added above
 * the other cards, so all the cards line up.
 */
.aoh-gallery--focused.aoh-gallery--has-featured {
	--aoh-featured-head: 3.5rem;
	--aoh-card-h: clamp(18rem, calc(var(--aoh-screen) - 2 * var(--aoh-row-gap) - 0.5rem - var(--aoh-featured-head)), var(--aoh-card-max, 600px));
}

.aoh-gallery--focused.aoh-gallery--has-featured .aoh-gallery__list {
	padding-top: calc(var(--aoh-row-gap) + var(--aoh-featured-head)) !important;
	padding-left: var(--aoh-wall-gap) !important;
}

.aoh-gallery--focused .aoh-featured {
	flex: none;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--aoh-row-gap) var(--aoh-wall-gap) calc(var(--aoh-row-gap) + 0.5rem);
}

.aoh-gallery--focused .aoh-featured__title {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--aoh-featured-head);
	padding-bottom: 0.35rem !important;
}

.aoh-gallery--focused .aoh-featured__item {
	width: min(calc(var(--aoh-card-h) * 2 / 3), 82vw);
	scroll-snap-align: center;
}

.aoh-gallery--focused .aoh-featured__item:nth-child(n + 2) {
	display: none;
}

/* Row arrows (shown by JavaScript in the focused view only) */
.aoh-row-nav {
	position: absolute;
	inset: 0;
	z-index: 10; /* Above the cards and their hover overlays */
	pointer-events: none;
}

.aoh-gallery--grid .aoh-row-nav {
	display: none;
}

.aoh-row-nav__button {
	position: absolute;
	top: calc(50% - 0.25rem); /* Centred on the cards */
	display: grid !important;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	color: var(--aoh-black) !important;
	background: rgba(255, 255, 255, 0.92) !important;
	border-radius: 50% !important;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25) !important;
	pointer-events: auto;
	transition: opacity 0.2s ease;
}

.aoh-row-nav__button .aoh-icon {
	width: 10px;
	height: 12px;
}

.aoh-row-nav__button--prev {
	left: max(0.5rem, calc(var(--aoh-row-start) / 2 - 22px));
}

.aoh-row-nav__button--next {
	right: max(0.5rem, calc(var(--aoh-row-start) / 2 - 22px));
}

.aoh-row-nav__button[hidden] {
	display: none !important;
}

/* "Show more" as the final card in the focused row */
.aoh-more-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	aspect-ratio: 2 / 3;
	padding: 2rem;
	text-align: center;
	color: var(--aoh-blue-dark);
	text-decoration: none;
	background: var(--aoh-off-white-1);
	border: 1px dashed var(--aoh-gold-dark);
	border-radius: var(--aoh-radius);
}

.aoh-more-card__label {
	font-family: var(--aoh-font-display);
	font-size: 1.25rem;
}

.aoh-more-card__count {
	font-size: 0.875rem;
}

.aoh-more-card:hover .aoh-more-card__label {
	text-decoration: underline;
}

.aoh-gallery.is-loading .aoh-more-card,
.aoh-gallery.is-loading .aoh-gallery__more-link {
	opacity: 0.6;
	pointer-events: none;
}

/* "Load more" below the grid */
.aoh-gallery {
	margin-bottom: 0 !important;
}

.aoh-gallery__more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 0 var(--aoh-gutter) var(--aoh-row-gap);
	text-align: center;
}

.aoh-gallery__count {
	margin: 0;
	font-size: 0.875rem;
}

.aoh-button {
	display: inline-block;
	min-height: 44px;
	padding: 0.7em 1.6em;
	font-size: 0.95rem;
	line-height: 1.4;
	color: var(--aoh-blue-dark);
	text-decoration: none;
	background: transparent;
	border: 1px solid var(--aoh-gold-dark);
	border-radius: 3px;
	transition: background-color 0.15s ease;
}

.aoh-button:hover {
	background: var(--aoh-off-white-1);
}

.aoh-gallery__empty {
	padding: var(--aoh-row-gap) var(--aoh-gutter);
	text-align: center;
}

/* ==========================================================================
   5. Cards
   ========================================================================== */

.aoh-card {
	position: relative;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	container-type: inline-size;
	border-radius: var(--aoh-radius);
	background: var(--aoh-off-white-2);
}

.aoh-card__media {
	position: absolute;
	inset: 0;
}

.aoh-card__image,
.aoh-card__placeholder {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

/* Overlay: title and artist over a blurred Blue Dark wash, on hover or keyboard focus */
.aoh-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	padding: 11cqi 10cqi;
	color: var(--aoh-white);
	background: var(--aoh-overlay-bg);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity 0.25s ease;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.aoh-card__overlay {
		background: rgba(5, 25, 53, 0.88);
	}
}

.aoh-card:hover .aoh-card__overlay,
.aoh-card:focus-within .aoh-card__overlay {
	opacity: 1;
}

/* Touch screens have no hover: tapping goes straight to the artwork */
@media (hover: none) {
	.aoh-card:hover .aoh-card__overlay {
		opacity: 0;
	}
	.aoh-card:focus-within .aoh-card__overlay {
		opacity: 1;
	}
}

.aoh-card__title {
	margin: 0 !important;
	padding: 0 !important;
	/* Same pairing as the artwork page: display font title, light artist name
	   at about 0.65 of the title's size */
	font-family: var(--aoh-font-display) !important;
	font-size: max(1.4rem, 10.5cqi) !important;
	font-weight: 400 !important;
	line-height: 1.12 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: inherit !important;
}

.aoh-card__artist {
	margin: 0.4em 0 0 !important;
	padding: 0 !important;
	font-size: max(1rem, 6.8cqi) !important;
	font-weight: 300;
	line-height: 1.15 !important;
	color: inherit;
}

.aoh-card__link {
	color: inherit !important;
	text-decoration: none !important;
}

/* Focus from a mouse click or tap: no ring, even if the theme or browser adds
   one to :focus. Keyboard focus (:focus-visible) always keeps its ring. */
:where(.aoh-gallery, .aoh-single, .aoh-lightbox) :focus:not(:focus-visible) {
	outline: none !important;
}

:where(.aoh-gallery, .aoh-single, .aoh-lightbox) button::-moz-focus-inner {
	border: 0;
}

/* Focus moved by the script after a mouse or touch action: no ring (see aoh.js) */
:where(.aoh-gallery, .aoh-single, .aoh-lightbox) .aoh-quiet-focus:focus,
:where(.aoh-gallery, .aoh-single, .aoh-lightbox) .aoh-quiet-focus:focus-visible {
	outline: none !important;
}

/* The title link covers the whole card */
.aoh-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.aoh-card__link:focus-visible {
	outline: none;
}

.aoh-card:has(.aoh-card__link:focus-visible:not(.aoh-quiet-focus)) {
	outline: 2px solid var(--aoh-focus);
	outline-offset: 2px;
}

/* Fallback for browsers without :has() */
@supports not selector(:has(*)) {
	.aoh-card:focus-within {
		outline: 2px solid var(--aoh-focus);
		outline-offset: 2px;
	}
}

/* Written cards: everything is sized in cqi (a share of the card's width), so
   the text scales with the card like a picture would. aoh.js cuts the text
   where the card runs out of room and ends it with "…"; without JS it's
   simply clipped. */
.aoh-card--written {
	background: var(--aoh-written-bg);
}

.aoh-card--written .aoh-card__media {
	padding: 10cqi 10cqi 8cqi;
	overflow: hidden;
}

.aoh-card--written .aoh-written {
	font-size: 7.05cqi;
	line-height: 1.42;
}

.aoh-card--written .aoh-written p {
	margin: 0 0 0.6em;
}

/* ==========================================================================
   6. Single artwork layout
   ========================================================================== */

/* Themes often add spacing to <main> and <article>; remove it so the artwork
   area meets the footer (or next section) with no gap */
.aoh-page {
	margin-bottom: 0;
	padding-bottom: 0;
}

.aoh-single {
	position: relative;
	margin-top: 0;
	margin-bottom: 0;
	padding-bottom: 0;
	overflow: clip;
}

.aoh-single {
	/* Space between groups in the details (location, statement, links) */
	--aoh-detail-space: 1.5rem;
	/* A little more room at the sides on small screens */
	--aoh-gutter: clamp(1.5rem, 6vw, 2.5rem);
}

/* Space between the details and the decorative image */
.aoh-single__details {
	padding-bottom: calc(var(--aoh-gap) * 2);
}

.aoh-single__layout {
	display: grid;
	gap: calc(var(--aoh-gap) * 1.5) calc(var(--aoh-gap) * 1.5);
	max-width: calc(var(--aoh-content-width) + 2 * var(--aoh-gutter));
	margin-inline: auto;
	padding: var(--aoh-gap) var(--aoh-gutter) var(--aoh-end-space);
	/* Space below the content before the footer. With a decorative image the
	   layout itself has none, so the image sits flush with the footer; the
	   media column gets the space instead (see below). */
	--aoh-end-space: calc(var(--aoh-gap) * 2);
}

/* Small screens: more breathing room between the bar and the artwork */
@media (max-width: 899px) {
	.aoh-single__layout {
		padding-top: calc(var(--aoh-gap) * 2);
	}
}

.aoh-single--has-decor .aoh-single__layout {
	padding-bottom: 0;
}

.aoh-single.aoh-layout--wide .aoh-single__layout {
	max-width: none;
}

/* Phones and tablets: media first (visually); the H1 stays first for screen readers */
.aoh-single__media {
	order: -1;
	min-width: 0;
}

/*
 * The left column ("aside") holds the details and, below them, the space for
 * the decorative image. On desktop it stretches to the media's height and
 * pushes the decorative image space to its bottom; on phones it simply
 * follows the media. The decorative image's space is its own, so it can never
 * overlap the details, however long they are.
 *
 *   [ details ] [ media ]
 *   [         ] [       ]
 *   [ decor   ] [       ]
 */
/* Ignore anything a page builder or paragraph formatting inserts between the
   layout's parts (such as empty <p> or <br> tags), which would add stray gaps */
.aoh-single > :not(.aoh-bar, .aoh-single__layout),
.aoh-single__layout > :not(.aoh-single__aside, .aoh-single__media),
.aoh-single__aside > :not(.aoh-single__details, .aoh-single__decor),
.aoh-single__details > p:empty,
.aoh-single__details > br,
.aoh-single__media > :not(.aoh-carousel, .aoh-video, .aoh-written, .aoh-notice),
.aoh-carousel > :not(.aoh-carousel__track, .aoh-carousel__controls, .aoh-sr),
.aoh-video > :not(.aoh-video__stage, .aoh-video__caption),
.aoh-video__stage > :not(.aoh-video__frame),
.aoh-gallery__viewport > :not(.aoh-gallery__scroller, .aoh-row-nav),
.aoh-gallery__scroller > :not(.aoh-gallery__list, .aoh-featured),
.aoh-featured > :not(.aoh-featured__title, .aoh-featured__list),
.aoh-featured__list > :not(.aoh-featured__item),
.aoh-gallery__list > :not(.aoh-gallery__item) {
	display: none !important;
}

.aoh-single__aside {
	display: flex;
	flex-direction: column;
	gap: calc(var(--aoh-gap) * 2); /* Space between the details and the decorative image */
	min-width: 0;
}

.aoh-single__aside > .aoh-single__decor {
	margin-top: auto;
}

@media (min-width: 900px) {
	.aoh-single__layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		align-items: stretch;
		padding-top: calc(var(--aoh-gap) * 1.25);
		/* Fill at least the screen below the sticky bars, so short pieces
		   (videos, brief texts) still fill the view, with the decorative image
		   at the bottom of the screen */
		min-height: var(--aoh-screen);
	}
	.aoh-single__media {
		order: 0;
	}
	.aoh-single--has-decor .aoh-single__media {
		padding-bottom: var(--aoh-end-space);
	}
}

.aoh-single__title {
	margin: 0 0 0.6rem !important;
	padding: 0 !important;
	font-family: var(--aoh-font-display) !important;
	font-size: clamp(1.75rem, 2.6vw, 2.25rem) !important;
	font-weight: 400 !important;
	line-height: 1.15 !important;
	color: var(--aoh-black) !important;
}

.aoh-single__artist {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 1.375rem;
	font-weight: 300;
	line-height: 1.3;
}

.aoh-single__meta {
	margin: 0.25rem 0 0 !important;
	padding: 0 !important;
	font-size: 0.9375rem;
	line-height: 1.45;
}

.aoh-single__meta > span {
	display: block;
}

.aoh-single__country {
	display: flex !important;
	align-items: center;
	gap: 0.35em;
	margin-top: var(--aoh-detail-space);
}

.aoh-single__country .aoh-icon {
	display: block;
	width: 0.8em;
	height: 0.8em;
	flex: none;
}

.aoh-single__statement {
	margin-top: var(--aoh-detail-space);
	font-size: 1rem;
	line-height: 1.55;
}

.aoh-single__statement p {
	margin: 0 0 1em !important;
	padding: 0 !important;
}

.aoh-single__statement p:last-child {
	margin-bottom: 0 !important;
}

.aoh-single__statement a {
	color: var(--aoh-blue);
	text-decoration: underline;
}

.aoh-single__links {
	display: block;
	margin: var(--aoh-detail-space) 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
	font-size: 0.9375rem;
	line-height: 1.3 !important;
}

/* One link per line */
.aoh-single__links li {
	display: block;
	margin: 0 0 0.35rem !important;
	padding: 0 !important;
	list-style: none !important;
	line-height: inherit !important;
}

.aoh-single__links li:last-child {
	margin-bottom: 0 !important;
}

.aoh-single__links li::before,
.aoh-single__links li::after {
	content: none !important;
}

/* Line breaks a page builder may insert into short labels would add stray space */
.aoh-single__links br,
.aoh-single__title br,
.aoh-single__artist br,
.aoh-single__meta br,
.aoh-bar br,
.aoh-carousel__controls br {
	display: none !important;
}

.aoh-single__links a {
	color: var(--aoh-black);
	text-decoration: none;
}

.aoh-single__links a:hover,
.aoh-single__links a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.aoh-single__links .aoh-icon {
	width: 0.7em;
	height: 0.7em;
	margin-inline-start: 0.25em;
	vertical-align: baseline;
}

/* ==========================================================================
   7. Image carousel and lightbox
   ========================================================================== */

/* The image area's height: screen height below the bars, minus the page's top
   padding, the carousel controls (about 3.5rem) and breathing room below them.
   Adjust the last value to taste. Written pieces size their page from it too. */
.aoh-single,
.aoh-carousel {
	--aoh-stage-h: clamp(14rem, calc(var(--aoh-screen) - 2.5 * var(--aoh-gap) - 3.5rem - 2rem), 48rem);
}

.aoh-carousel {
	position: relative;
}

.aoh-carousel__track {
	display: flex;
	margin: 0 !important;
	padding: 0 !important;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	list-style: none !important;
	scrollbar-width: none;
	/* A little white between images as they're swiped */
	gap: var(--aoh-gap);
}

.aoh-carousel__track::-webkit-scrollbar {
	display: none;
}

/* Without JavaScript the scrollbar is the only cue, so keep it */
.aoh-carousel--multi:not(.is-enhanced) .aoh-carousel__track {
	scrollbar-width: thin;
}

.aoh-carousel__slide {
	display: flex;
	flex: 0 0 100%;
	align-items: center;
	justify-content: center;
	height: var(--aoh-stage-h);
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

/* Small screens: the image area hugs the tallest image in the series (so the
   controls stay put between slides), up to the usual screen-height limit */
@media (max-width: 899px) {
	.aoh-carousel[style*="--aoh-stage-aspect"] .aoh-carousel__slide {
		height: auto;
		aspect-ratio: var(--aoh-stage-aspect);
		max-height: var(--aoh-stage-h);
	}
}

.aoh-carousel__zoom {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	cursor: zoom-in;
}

.aoh-carousel__image {
	display: block;
	width: auto !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: 100% !important;
	object-fit: contain;
}

.aoh-carousel__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	min-height: 2.75rem;
	margin-top: 0.75rem;
}

.aoh-carousel__arrow {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0 !important;
	line-height: 0 !important;
	vertical-align: middle;
}

/* Icons as blocks, so theme line-heights can't shift them off-centre */
.aoh-carousel__arrow .aoh-icon,
.aoh-row-nav__button .aoh-icon,
.aoh-lightbox__close .aoh-icon {
	display: block;
}

.aoh-carousel__arrow[disabled] {
	opacity: 0.3;
	cursor: default;
}

.aoh-carousel__counter {
	min-width: 4.5em;
	margin: 0 !important;
	font-size: 0.9375rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* Lightbox */
.aoh-lightbox {
	width: 100vw;
	max-width: 100vw;
	height: 100vh;
	max-height: 100vh;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--aoh-black);
	background: transparent;
	overflow: hidden;
}

@supports (height: 100dvh) {
	.aoh-lightbox {
		height: 100dvh;
		max-height: 100dvh;
	}
}

.aoh-lightbox::backdrop {
	background: rgba(5, 25, 53, 0.92);
}

.aoh-lightbox__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(96vw, 110rem);
	height: calc(100% - 4vh);
	margin: 2vh auto;
	padding: 3.5rem 1rem 1rem;
	background: var(--aoh-white);
	border-radius: 4px;
}

.aoh-lightbox__figure {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	min-height: 0;
	margin: 0;
}

.aoh-lightbox__image {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
}

.aoh-lightbox__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	display: grid !important;
	place-items: center;
	width: 44px;
	height: 44px;
}

.aoh-lightbox__close .aoh-icon {
	width: 28px;
	height: 28px;
}

.aoh-lightbox__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding-top: 0.75rem;
}

.aoh-lightbox__controls .aoh-carousel__counter {
	min-width: 5em;
}

html.aoh-lightbox-open {
	overflow: hidden;
}

/* ==========================================================================
   8. Video
   ========================================================================== */

.aoh-video {
	margin: 0 !important;
	padding: 0 !important;
}

/* Desktop: the video sits (nearly) centred in an area the same height as the
   image area on image pages. Rather than centring it in a box (which would
   push the transcript link far below it), the space above it is worked out
   from the column width and the video's shape, so the transcript link sits
   just under the video, and opening the transcript doesn't move the video. */
@media (min-width: 900px) {
	.aoh-single--video .aoh-single__media {
		container-type: inline-size;
	}
	.aoh-video__stage {
		--aoh-frame-h: min(calc(100cqw / var(--aoh-ratio, 1.7778)), var(--aoh-stage-h));
		padding-top: max(0px, calc((var(--aoh-stage-h) - var(--aoh-frame-h)) / 2));
	}
	.aoh-video--portrait .aoh-video__stage {
		padding-top: 0;
	}
}

.aoh-video__frame {
	position: relative;
	width: 100%;
	max-width: 100%;
	max-height: var(--aoh-stage-h);
	aspect-ratio: var(--aoh-ratio, 1.7778);
	margin-inline: auto;
	overflow: hidden;
	background: var(--aoh-blue-dark);
	border-radius: 2px;
}

/* Portrait videos are sized by height instead, centred in the column */
.aoh-video--portrait .aoh-video__frame {
	width: auto;
	height: max(20rem, var(--aoh-stage-h));
}

.aoh-video__start {
	position: absolute;
	inset: 0;
	display: block;
	margin: 0;
	padding: 0;
	line-height: 0;
	font-size: 0;
}

/* The poster fills the frame regardless of theme text styles */
.aoh-video__poster {
	position: absolute !important;
	inset: 0;
	display: block;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	margin: 0 !important;
	object-fit: cover;
}

.aoh-video__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
}

.aoh-video__play .aoh-icon {
	width: clamp(3.5rem, 18%, 7.5rem);
	height: auto;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
	transition: transform 0.2s ease;
}

.aoh-video__start:hover .aoh-video__play .aoh-icon,
.aoh-video__start:focus-visible .aoh-video__play .aoh-icon {
	transform: scale(1.06);
}

.aoh-video__start:focus-visible {
	outline: 2px solid var(--aoh-white);
	outline-offset: -5px;
}

.aoh-icon__disc {
	fill: rgba(255, 255, 255, 0.88);
}

.aoh-icon__triangle {
	fill: var(--aoh-blue-dark);
}

.aoh-video__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.aoh-video__caption {
	margin: 0;
}

.aoh-transcript {
	margin-top: 0.25rem;
	font-size: 0.9375rem;
	line-height: 1.55;
}

/* "Read transcript": a quiet link with a small icon */
.aoh-transcript__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 44px;
	padding: 0;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.2;
	color: var(--aoh-text-muted);
	list-style: none;
	cursor: pointer;
}

.aoh-transcript__toggle::-webkit-details-marker,
.aoh-transcript__toggle::marker {
	display: none;
	content: "";
}

.aoh-transcript__toggle:hover span {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.aoh-transcript__toggle .aoh-icon {
	flex: none;
	width: 12px;
	height: 14px;
}

.aoh-transcript__hide,
.aoh-transcript[open] .aoh-transcript__show {
	display: none;
}

.aoh-transcript[open] .aoh-transcript__hide {
	display: inline;
}

/* A loaded video can be taller than the screen is wide on phones; keep the
   button's text from wrapping awkwardly */
.aoh-transcript__toggle span {
	white-space: nowrap;
}

.aoh-transcript__body {
	max-width: 40em;
	padding: 1rem 0 0;
}

.aoh-transcript__body p {
	margin: 0 0 1em !important;
}

/* ==========================================================================
   9. Written pieces
   ========================================================================== */

.aoh-written {
	font-family: var(--aoh-font-written);
	font-weight: 400;
	color: var(--aoh-written-color);
}

.aoh-written p {
	margin: 0 0 1.1em !important;
	padding: 0 !important;
	font: inherit;
	color: inherit;
}

.aoh-written p:last-child {
	margin-bottom: 0 !important;
}

.aoh-written strong {
	font-weight: 700;
}

.aoh-written em {
	font-style: italic;
}

/* Every poem line is its own row; indent comes from leading spaces */
.aoh-written--poetry .aoh-line {
	display: block;
	padding-inline-start: calc(var(--aoh-indent, 0) * var(--aoh-indent-step) + var(--aoh-hang));
	text-indent: calc(var(--aoh-hang) * -1);
	white-space: pre-wrap;
}

.aoh-more {
	white-space: nowrap;
}

/* On the artwork page: the piece sits on a "page" like the gallery card,
   centred in the image area. The page is at least photo-shaped (3:4, as tall
   as the image area on desktop) and grows taller for longer pieces. */
.aoh-single__media > .aoh-written {
	--aoh-page-pad: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	box-sizing: border-box;
	width: min(100%, max(24rem, calc(var(--aoh-stage-h) * 3 / 4)));
	/* 3:4 at whatever width it ends up (and as tall as the image area when the
	   width comes from it); taller only when the text needs more room */
	aspect-ratio: 3 / 4;
	margin: 0 auto;
	padding: var(--aoh-page-pad) var(--aoh-page-pad) calc(var(--aoh-page-pad) * 1.2);
	background: var(--aoh-written-bg);
	border-radius: 0;
	font-size: clamp(1rem, 0.85rem + 0.6vw, 1.3rem);
	line-height: 1.6;
}

/* ==========================================================================
   10. Decorative image, motion
   ========================================================================== */

.aoh-single--has-decor {
	--aoh-decor-h: clamp(7rem, 16vw, 15rem);
}

/* Stacked layout: the decorative image now has the full width to itself, so
   it's larger, keeping similar proportions to the side-by-side layout, and
   still scales down with the screen */
@media (max-width: 899px) {
	.aoh-single--has-decor {
		--aoh-decor-h: clamp(7rem, 30vw, 15rem);
	}
}

/*
 * The decorative image is pinned to the bottom-left corner of the artwork area,
 * so it sits tight against the screen's left edge and the footer (or next
 * section), shown in full with nothing cropped.
 *
 * Its grid cell (bottom of the left column; last on phones) is an empty
 * placeholder the same height as the image, reserving its space so it can
 * never overlap the details however long they are.
 */
.aoh-single__decor {
	flex: none;
	height: var(--aoh-decor-h);
	pointer-events: none;
}

.aoh-single__decor img {
	position: absolute; /* Relative to .aoh-single */
	left: 0;
	bottom: 0;
	z-index: 0;
	display: block;
	width: auto !important;
	max-width: none !important;
	height: var(--aoh-decor-h) !important;
	margin: 0 !important;
	object-fit: contain;
	object-position: left bottom;
}

@media (prefers-reduced-motion: reduce) {
	:where(.aoh-gallery, .aoh-single, .aoh-lightbox) *,
	:where(.aoh-gallery, .aoh-single, .aoh-lightbox) *::before {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}