.sv-section {
	position: relative;
	isolation: isolate;
	padding-block: var(--sv-section-space-lg, var(--sv-space-lg));
	padding-inline: var(--sv-gutter);
}

/* Background photo: covers the whole section, behind its content. */
.sv-section__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.sv-section__bg-img {
	display: block;
	inline-size: 100%;
	max-inline-size: none;
	block-size: 100%;
	object-fit: cover;
}

/* A layer over the photo: light (the page color, dark text) or dark (85%, light text); a tablet's or phone's own picture takes the same (--ov-*, ADR 0163). */
.sv-section__bg::after {
	position: absolute;
	inset: 0;
	background: var(--sv-color-inverse);
	content: "";
	opacity: 0.85;
}

.sv-section__bg--light::after,
.sv-section__bg--ov-light::after {
	background: var(--sv-color-background);
	opacity: 0.78;
}

/* None: just the photo. */
.sv-section__bg--none::after,
.sv-section__bg--ov-none::after {
	content: none;
}

/* Where the picture sits, and Contain: the whole picture, with the background's color around it (ADR 0074). */
.sv-section__bg--at-top :is(.sv-section__bg-img, .sv-section__bg-video) {
	object-position: 50% 0;
}

.sv-section__bg--at-bottom :is(.sv-section__bg-img, .sv-section__bg-video) {
	object-position: 50% 100%;
}

.sv-section__bg--at-left :is(.sv-section__bg-img, .sv-section__bg-video) {
	object-position: 0 50%;
}

.sv-section__bg--at-right :is(.sv-section__bg-img, .sv-section__bg-video) {
	object-position: 100% 50%;
}

.sv-section__bg--contain :is(.sv-section__bg-img, .sv-section__bg-video) {
	object-fit: contain;
}

/* A custom layer: its own color at its own strength; the text color is chosen with it. */
.sv-section__bg--custom::after,
.sv-section__bg--ov-custom::after {
	background: var(--sv-overlay-color, #000);
	opacity: var(--sv-overlay-strength, 50%);
}

/*
 * A fading layer (ADR 0162): at its full strength on the side where reading starts and gone on the other (Across;
 * the right on right-to-left sites), on the other side (Across, reversed), or at the foot and gone at the top (Upward),
 * so the words read and the picture shows. A mask fades it: its color, strength
 * and the text colors chosen with it stay as they are.
 */
.sv-section__bg--fade-start::after {
	mask-image: linear-gradient(to right, #000 var(--sv-fade-solid, 25%), transparent var(--sv-fade-clear, 75%));
}

:where([dir="rtl"]) .sv-section__bg--fade-start::after {
	mask-image: linear-gradient(to left, #000 var(--sv-fade-solid, 25%), transparent var(--sv-fade-clear, 75%));
}

.sv-section__bg--fade-end::after {
	mask-image: linear-gradient(to left, #000 var(--sv-fade-solid, 25%), transparent var(--sv-fade-clear, 75%));
}

:where([dir="rtl"]) .sv-section__bg--fade-end::after {
	mask-image: linear-gradient(to right, #000 var(--sv-fade-solid, 25%), transparent var(--sv-fade-clear, 75%));
}

/*
 * Middle: an oval solid around centred words, gone towards every side and corner. Its width is in lengths, not
 * percentages (solid 400px either side of the middle, gone 300px further), so wide screens show the picture around
 * it and on narrow ones (where the words fill the width) it covers the width; its height is a share of the section's.
 */
.sv-section__bg--fade-center::after {
	mask-image: radial-gradient(ellipse calc(var(--sv-fade-band, 400px) + 300px) var(--sv-fade-tall, 70%) at 50% 50%, #000 var(--sv-fade-band, 400px), transparent calc(var(--sv-fade-band, 400px) + 300px));
}

.sv-section__bg--fade-bottom::after {
	mask-image: linear-gradient(to top, #000 var(--sv-fade-solid, 25%), transparent var(--sv-fade-clear, 75%));
}

/* Solid area: how far the solid part reaches before it fades — Small or Large (Medium, unset, is the values above). */
.sv-section__bg--solid-sm {
	--sv-fade-solid: 10%;
	--sv-fade-clear: 50%;
	--sv-fade-band: 250px;
	--sv-fade-tall: 60%;
}

.sv-section__bg--solid-lg {
	--sv-fade-solid: 45%;
	--sv-fade-clear: 95%;
	--sv-fade-band: 550px;
	--sv-fade-tall: 85%;
}

/* A video over the picture (ADR 0074): on larger screens, for visitors who don't ask for less motion;
   the <source>'s media attribute keeps phones from downloading it. */
.sv-section__bg-video {
	position: absolute;
	inset: 0;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

@media (max-width: 767px), (prefers-reduced-motion: reduce) {
	.sv-section__bg-video {
		display: none;
	}
}

/* A gradient between two colors (ADR 0074): down, across (in the reading direction), diagonal or from the middle. */
.sv-section__bg--gradient {
	background: linear-gradient(180deg, var(--sv-gradient-from), var(--sv-gradient-to));
}

.sv-section__bg--gradient::after {
	content: none;
}

.sv-section__bg--to-across {
	background: linear-gradient(90deg, var(--sv-gradient-from), var(--sv-gradient-to));
}

.sv-section__bg--to-diagonal {
	background: linear-gradient(135deg, var(--sv-gradient-from), var(--sv-gradient-to));
}

:where([dir="rtl"]) .sv-section__bg--to-across {
	background: linear-gradient(270deg, var(--sv-gradient-from), var(--sv-gradient-to));
}

:where([dir="rtl"]) .sv-section__bg--to-diagonal {
	background: linear-gradient(225deg, var(--sv-gradient-from), var(--sv-gradient-to));
}

.sv-section__bg--to-center {
	background: radial-gradient(ellipse at 50% 45%, var(--sv-gradient-from), var(--sv-gradient-to));
}

/*
 * A saved or ready-made gradient (ADR 0105): the site's `--sv-gradient-<id>`, so changing it in Your colors changes
 * every section using it; its first and last colors stay as From and To in case it is gone.
 */
.sv-section__bg.sv-section__bg--saved {
	background: var(--sv-gradient-fill, linear-gradient(180deg, var(--sv-gradient-from), var(--sv-gradient-to)));
}

/* Light text over the dark layer (zero specificity: a chosen Text color wins). */
:where(.sv-section:has(> .sv-section__bg--dark)) {
	color: var(--sv-color-on-inverse);
}

/*
 * More pictures (ADR 0107): the section's picture and up to four more take turns behind it. Without the script
 * (the editor, no JavaScript) the first one shows. With it (slides.js, visitors' pages) each new picture fades in
 * over the one before — which stays until it is covered, so there is never a darker moment between them — and is
 * shown 5, 7 or 10 seconds; with Slow zoom each grows a little while it shows. The pause button stops both.
 */
.sv-section__bg--slides > .sv-section__bg-img {
	position: absolute;
	inset: 0;
}

.sv-section__bg--slides > .sv-section__bg-img ~ .sv-section__bg-img {
	opacity: 0;
}

.sv-section__bg--slides::after {
	z-index: 3;
}

.sv-section__bg--slides.sv-section__bg--turning > .sv-section__bg-img {
	opacity: 0;
	transition: opacity 1.5s ease-in-out;
}

.sv-section__bg--slides.sv-section__bg--turning > .sv-section__bg-img[data-current] {
	z-index: 2;
	opacity: 1;
}

.sv-section__bg--slides.sv-section__bg--turning > .sv-section__bg-img[data-previous] {
	z-index: 1;
	opacity: 1;
	transition: none;
}

[data-sv-slides="5"] { --sv-slide-time: 5s; }
[data-sv-slides="7"] { --sv-slide-time: 7s; }
[data-sv-slides="10"] { --sv-slide-time: 10s; }

.sv-section__bg--zoom.sv-section__bg--turning > .sv-section__bg-img:is([data-current], [data-previous]) {
	animation: sv-section-zoom calc(var(--sv-slide-time, 7s) + 1.5s) linear both;
}

.sv-section__bg--zoom.sv-section__bg--turning[data-paused] > .sv-section__bg-img:is([data-current], [data-previous]) {
	animation-play-state: paused;
}

@keyframes sv-section-zoom {
	from {
		scale: 1;
	}

	to {
		scale: 1.08;
	}
}

/* The pause button (added by slides.js): small and quiet in the section's lower end corner, above an overlapping box's room. */
.sv-section__pause {
	position: absolute;
	inset-block-end: calc(var(--sv-overlap-room, 0px) + 1rem);
	inset-inline-end: 1rem;
	z-index: 2;
	display: grid;
	place-items: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, #000 35%, transparent);
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(8px);
}

.sv-section__pause::before {
	inline-size: 0.7rem;
	block-size: 0.8rem;
	border-inline: 0.22rem solid currentcolor;
	content: "";
}

.sv-section__pause[aria-pressed="true"]::before {
	inline-size: 0.75rem;
	border: 0;
	background: currentcolor;
	clip-path: polygon(15% 0, 100% 50%, 15% 100%);
}

[dir="rtl"] .sv-section__pause[aria-pressed="true"]::before {
	clip-path: polygon(85% 0, 0 50%, 85% 100%);
}

.sv-section__pause:hover {
	background: color-mix(in srgb, #000 55%, transparent);
}

.sv-section__pause:focus-visible {
	outline: 2px solid var(--sv-focus, #fff);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.sv-section__bg--slides.sv-section__bg--turning > .sv-section__bg-img {
		transition: none;
	}

	.sv-section__bg--zoom.sv-section__bg--turning > .sv-section__bg-img:is([data-current], [data-previous]) {
		animation: none;
	}
}

/*
 * A tablet's and a phone's own background (ADR 0163): a layer for that screen after the desktop's, drawn only there.
 * On that screen the desktop's layers (and the pause button of More pictures) step aside and the layer covers the
 * section's own color: None is the page's color, Color a look of the Background setting or a custom color (over the
 * page's, for see-through ones), Image a picture under the section's Overlay, Gradient one of the site's.
 */
.sv-section__bg--device {
	display: none;
}

.sv-section__bg--fill::after {
	content: none;
}

.sv-section__bg--c-background { background: var(--sv-color-background); }
.sv-section__bg--c-surface { background: var(--sv-color-surface); }
.sv-section__bg--c-primary { background: var(--sv-color-primary); }
.sv-section__bg--c-inverse { background: var(--sv-color-inverse); }

.sv-section__bg--c-surface-custom,
.sv-section__bg--c-inverse-custom {
	background: linear-gradient(var(--sv-device-bg), var(--sv-device-bg)), var(--sv-color-background);
}

/*
 * Its words take the colors that read on it, as with the desktop's looks: the page's (Page, Soft, a light layer, no
 * layer), the Accent color's, the Dark look's, or white / near-black on a custom color, a custom layer or a gradient.
 * Every rule here has one specificity, above the desktop's, so the phone's (later) win over the tablet's.
 */
@media (max-width: 1024px) {
	.sv-section:has(> .sv-section__bg--on-t) > :is(.sv-section__bg:not(.sv-section__bg--on-t, .sv-section__bg--on-m), .sv-section__pause) {
		display: none;
	}

	.sv-section__bg--on-t {
		display: block;
	}

	.sv-section:has(> .sv-section__bg--on-t:is(.sv-section__bg--c-background, .sv-section__bg--c-surface, .sv-section__bg--ov-light, .sv-section__bg--ov-none)) {
		--sv-color-text: inherit;
		--sv-color-muted: inherit;
		--sv-color-border: inherit;
		--sv-accent: inherit;
		--sv-accent-dark: inherit;
		--sv-button-main-bg: inherit;
		--sv-button-main-text: inherit;
		--sv-button-edge: var(--sv-button-edge-page);
		color: var(--sv-color-text);
	}

	.sv-section:has(> .sv-section__bg--on-t:is(.sv-section__bg--c-surface)) {
		--sv-button-edge: var(--sv-button-edge-soft);
	}

	.sv-section:has(> .sv-section__bg--on-t:is(.sv-section__bg--ov-light)) {
		--sv-button-edge: var(--sv-button-edge-photo-light);
	}

	.sv-section:has(> .sv-section__bg--on-t:is(.sv-section__bg--c-primary)) {
		--sv-color-text: var(--sv-color-on-primary);
		--sv-color-muted: var(--sv-color-on-primary);
		--sv-color-border: color-mix(in srgb, var(--sv-color-on-primary) 25%, transparent);
		--sv-accent: var(--sv-color-on-primary);
		--sv-accent-dark: initial;
		--sv-button-main-bg: var(--sv-color-on-primary);
		--sv-button-main-text: var(--sv-button-fill, var(--sv-color-primary));
		--sv-button-edge: initial;
		color: var(--sv-color-text);
	}

	.sv-section:has(> .sv-section__bg--on-t:is(.sv-section__bg--c-inverse, .sv-section__bg--ov-dark)) {
		--sv-color-text: var(--sv-color-on-inverse);
		--sv-color-muted: color-mix(in srgb, var(--sv-color-on-inverse) 76%, transparent);
		--sv-color-border: color-mix(in srgb, var(--sv-color-on-inverse) 12%, transparent);
		--sv-accent: var(--sv-color-on-inverse);
		--sv-accent-dark: var(--sv-color-primary);
		--sv-button-main-bg: inherit;
		--sv-button-main-text: inherit;
		--sv-button-edge: var(--sv-button-edge-dark);
		color: var(--sv-color-text);
	}

	.sv-section:has(> .sv-section__bg--on-t:is(.sv-section__bg--ov-dark)) {
		--sv-button-edge: var(--sv-button-edge-photo);
	}

	.sv-section:has(> .sv-section__bg--on-t:is(.sv-section__bg--c-inverse-custom, .sv-section__bg--ov-text-light, .sv-section__bg--g-text-light)) {
		--sv-color-text: #fff;
		--sv-color-muted: color-mix(in srgb, #fff 78%, transparent);
		--sv-color-border: color-mix(in srgb, #fff 12%, transparent);
		--sv-accent: #fff;
		--sv-accent-dark: var(--sv-color-primary);
		--sv-button-main-bg: #fff;
		--sv-button-main-text: #10131c;
		--sv-button-edge: initial;
		color: var(--sv-color-text);
	}

	.sv-section:has(> .sv-section__bg--on-t:is(.sv-section__bg--c-surface-custom, .sv-section__bg--ov-text-dark, .sv-section__bg--g-text-dark)) {
		--sv-color-text: #10131c;
		--sv-color-muted: color-mix(in srgb, #10131c 72%, transparent);
		--sv-color-border: color-mix(in srgb, #10131c 14%, transparent);
		--sv-accent: initial;
		--sv-accent-dark: initial;
		--sv-button-main-bg: initial;
		--sv-button-main-text: initial;
		--sv-button-edge: initial;
		color: var(--sv-color-text);
	}
}

@media (max-width: 767px) {
	.sv-section:has(> .sv-section__bg--on-m) > :is(.sv-section__bg:not(.sv-section__bg--on-m), .sv-section__pause) {
		display: none;
	}

	.sv-section__bg--on-m {
		display: block;
	}

	.sv-section:has(> .sv-section__bg--on-m:is(.sv-section__bg--c-background, .sv-section__bg--c-surface, .sv-section__bg--ov-light, .sv-section__bg--ov-none)) {
		--sv-color-text: inherit;
		--sv-color-muted: inherit;
		--sv-color-border: inherit;
		--sv-accent: inherit;
		--sv-accent-dark: inherit;
		--sv-button-main-bg: inherit;
		--sv-button-main-text: inherit;
		--sv-button-edge: var(--sv-button-edge-page);
		color: var(--sv-color-text);
	}

	.sv-section:has(> .sv-section__bg--on-m:is(.sv-section__bg--c-surface)) {
		--sv-button-edge: var(--sv-button-edge-soft);
	}

	.sv-section:has(> .sv-section__bg--on-m:is(.sv-section__bg--ov-light)) {
		--sv-button-edge: var(--sv-button-edge-photo-light);
	}

	.sv-section:has(> .sv-section__bg--on-m:is(.sv-section__bg--c-primary)) {
		--sv-color-text: var(--sv-color-on-primary);
		--sv-color-muted: var(--sv-color-on-primary);
		--sv-color-border: color-mix(in srgb, var(--sv-color-on-primary) 25%, transparent);
		--sv-accent: var(--sv-color-on-primary);
		--sv-accent-dark: initial;
		--sv-button-main-bg: var(--sv-color-on-primary);
		--sv-button-main-text: var(--sv-button-fill, var(--sv-color-primary));
		--sv-button-edge: initial;
		color: var(--sv-color-text);
	}

	.sv-section:has(> .sv-section__bg--on-m:is(.sv-section__bg--c-inverse, .sv-section__bg--ov-dark)) {
		--sv-color-text: var(--sv-color-on-inverse);
		--sv-color-muted: color-mix(in srgb, var(--sv-color-on-inverse) 76%, transparent);
		--sv-color-border: color-mix(in srgb, var(--sv-color-on-inverse) 12%, transparent);
		--sv-accent: var(--sv-color-on-inverse);
		--sv-accent-dark: var(--sv-color-primary);
		--sv-button-main-bg: inherit;
		--sv-button-main-text: inherit;
		--sv-button-edge: var(--sv-button-edge-dark);
		color: var(--sv-color-text);
	}

	.sv-section:has(> .sv-section__bg--on-m:is(.sv-section__bg--ov-dark)) {
		--sv-button-edge: var(--sv-button-edge-photo);
	}

	.sv-section:has(> .sv-section__bg--on-m:is(.sv-section__bg--c-inverse-custom, .sv-section__bg--ov-text-light, .sv-section__bg--g-text-light)) {
		--sv-color-text: #fff;
		--sv-color-muted: color-mix(in srgb, #fff 78%, transparent);
		--sv-color-border: color-mix(in srgb, #fff 12%, transparent);
		--sv-accent: #fff;
		--sv-accent-dark: var(--sv-color-primary);
		--sv-button-main-bg: #fff;
		--sv-button-main-text: #10131c;
		--sv-button-edge: initial;
		color: var(--sv-color-text);
	}

	.sv-section:has(> .sv-section__bg--on-m:is(.sv-section__bg--c-surface-custom, .sv-section__bg--ov-text-dark, .sv-section__bg--g-text-dark)) {
		--sv-color-text: #10131c;
		--sv-color-muted: color-mix(in srgb, #10131c 72%, transparent);
		--sv-color-border: color-mix(in srgb, #10131c 14%, transparent);
		--sv-accent: initial;
		--sv-accent-dark: initial;
		--sv-button-main-bg: initial;
		--sv-button-main-text: initial;
		--sv-button-edge: initial;
		color: var(--sv-color-text);
	}
}