/*
 * Ursa Prek: the frame every page shares, and the home page.
 *
 *  1. Values            colours, sizes
 *  2. Frame             top bar, left menu, content area
 *  3. Project timeline  the left menu, in three ways to show the years (a, b, c)
 *  4. Pages             content area of a page
 *  5. Home page         the strip of project images, the lines
 *  6. Dark pages
 *  7. Parts             headings, buttons and form fields of the theme's own pages (contact, shop)
 *  8. Contact page
 *  9. Dated lists as a timeline (the biography)
 * 10. Phone and tablet
 */

/* ---------------------------------------------------------------- 1. Values */

:root {
	--up-orange: rgba(255, 140, 0, 0.97);
	--up-orange-deep: rgb(219, 137, 29);
	--up-bg: #ffffff;
	--up-ink: rgba(0, 0, 0, 0.42);
	--up-ink-strong: rgba(0, 0, 0, 0.8);
	--up-rule: rgba(0, 0, 0, 0.14);

	--up-menu-font: nobel, "Nobel", "Futura", "Century Gothic", sans-serif;
	--up-menu-size: 14.4px;

	--up-side: clamp(250px, 25vw, 400px);   /* width of the left menu */
	--up-top: 84px;                          /* height of the top bar */
	--up-pad: 36px;
	--up-bar: 0px;                           /* height of the WordPress admin bar when logged in */
	--up-row: clamp(23px, 3.4vh, 31px);      /* height of one line in the left menu */
	--up-inset: 84px;                        /* room left and right of a page's text */
}
.admin-bar {
	--up-bar: 32px;
}
@media screen and (max-width: 782px) {
	.admin-bar {
		--up-bar: 46px;
	}
}

/* ---------------------------------------------------------------- 2. Frame */

html {
	scroll-padding-top: calc(var(--up-top) + var(--up-bar));
}
body.ursaprek {
	background: var(--up-bg);
}

.up-skip {
	position: fixed;
	top: -100px;
	left: 12px;
	z-index: 1000;
	padding: 10px 14px;
	background: var(--up-bg);
	color: var(--up-ink-strong);
}
.up-skip:focus {
	top: calc(var(--up-bar) + 8px);
}
.ursaprek .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.up-top a:focus-visible,
.up-side a:focus-visible,
.up-burger:focus-visible,
.up-strip:focus-visible,
.up-tile:focus-visible {
	outline: 2px solid var(--up-orange);
	outline-offset: 3px;
}

/* top bar: logo on the left, top menu on the right */
.up-top {
	position: fixed;
	top: var(--up-bar);
	left: 0;
	right: 0;
	z-index: 100;
	box-sizing: border-box;
	height: var(--up-top);
	padding: 0 var(--up-pad);
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--up-bg);
}
.up-logo {
	display: block;
	flex: none;
	line-height: 0;
}
.up-logo__img {
	display: block;
	width: min(240px, calc(var(--up-side) - var(--up-pad) * 2));
	height: auto;
	max-width: none;
	margin: 0;
}
.up-logo--text,
.up-logo--text:link,
.up-logo--text:visited {
	font-family: var(--up-menu-font);
	font-size: 26px;
	line-height: 1;
	color: var(--up-orange);
	text-decoration: none;
	text-transform: uppercase;
}

.up-topnav__list,
.up-side__more-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.up-topnav__list {
	display: flex;
	gap: clamp(20px, 2.6vw, 44px);
}
.up-topnav__list li,
.up-side__more-list li {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* one look for every menu link: grey, and orange on hover and for the current page. Nothing moves or flickers. */
.up-topnav__list a,
.up-side__more-list a,
.up-tl__link,
.up-topnav__list a:link,
.up-side__more-list a:link,
.up-tl__link:link,
.up-topnav__list a:visited,
.up-side__more-list a:visited,
.up-tl__link:visited {
	font-family: var(--up-menu-font);
	font-size: var(--up-menu-size);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--up-ink);
	transition: color 0.18s ease;
}
.up-topnav__list a:hover,
.up-topnav__list a:focus,
.up-topnav__list .current-menu-item > a,
.up-side__more-list a:hover,
.up-side__more-list a:focus,
.up-side__more-list .current-menu-item > a,
.up-tl__link:hover,
.up-tl__link:focus,
.up-tl__link.is-current,
.up-tl__link.is-hot {
	color: var(--up-orange);
	text-decoration: none;
}
.up-topnav__list a {
	display: block;
	padding: 10px 0;
}

/* left menu: fixed, scrolls by itself when the window is too low for the whole list */
.up-side {
	position: fixed;
	top: calc(var(--up-top) + var(--up-bar));
	left: 0;
	bottom: 0;
	z-index: 90;
	box-sizing: border-box;
	width: var(--up-side);
	padding: clamp(6px, 2vh, 26px) var(--up-pad) 28px;
	background: var(--up-bg);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--up-rule) transparent;
}
.up-side__more {
	display: none;
}
/* the small links at the foot of the menu: privacy, shop information, withdrawing from a contract */
.up-side__legal {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 34px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--up-rule);
}
.up-side__legal a,
.up-side__legal a:link,
.up-side__legal a:visited,
.up-foot a,
.up-foot a:link,
.up-foot a:visited {
	font-family: var(--up-menu-font);
	font-size: 11px;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--up-ink);
	transition: color 0.18s ease;
}
.up-side__legal a:hover,
.up-side__legal a:focus,
.up-foot a:hover,
.up-foot a:focus {
	color: var(--up-orange);
}
.up-foot {
	display: none;
}

.up-burger {
	display: none;
}

.up-main {
	position: relative;
	box-sizing: border-box;
	min-height: 100vh;
	margin: 0 0 0 var(--up-side);
	padding: var(--up-top) 0 0;
	background: var(--up-bg);
	overflow-x: clip;
}

/* ---------------------------------------------------------------- 3. Project timeline */

.up-tl,
.up-tl__items {
	list-style: none;
	margin: 0;
	padding: 0;
}
.up-tl li {
	list-style: none;
	margin: 0;
	padding: 0;
}
.up-tl__link {
	display: block;
	padding: calc((var(--up-row) - 1.25em) / 2) 0;
}
.up-tl__year {
	font-family: var(--up-menu-font);
	font-size: 12px;
	line-height: var(--up-row);
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--up-orange);
}
.up-tl__inline-year {
	display: none;
}

/* a: the years in their own column, a thin line as the time axis with a tick at every year */
.up-tl-a .up-tl {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
}
.up-tl-a .up-tl__group {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: subgrid;
}
.up-tl-a .up-tl__year {
	text-align: right;
	padding-right: 14px;
}
.up-tl-a .up-tl__items {
	position: relative;
	padding: 0 0 5px 14px;
	border-left: 1px solid var(--up-rule);
}
.up-tl-a .up-tl__group:last-child .up-tl__items {
	padding-bottom: 0;
}
.up-tl-a .up-tl__items::before {
	content: "";
	position: absolute;
	top: calc(var(--up-row) / 2);
	left: -5px;
	width: 9px;
	height: 1px;
	background: var(--up-orange);
}

/* b: no grouping, the year behind every name */
.up-tl-b .up-tl__year {
	display: none;
}
.up-tl-b .up-tl__inline-year {
	display: inline;
	margin-left: 0.75em;
	font-size: 11px;
	letter-spacing: 0.02em;
	color: var(--up-orange);
	white-space: nowrap;
}

/* c: the year as a small heading above its projects */
.up-tl-c .up-tl__group + .up-tl__group {
	margin-top: 9px;
}
.up-tl-c .up-tl__year {
	display: block;
	font-size: 11px;
	line-height: 1.7;
	letter-spacing: 0.14em;
}
.up-tl-c .up-tl__link {
	padding: calc((var(--up-row) - 1.25em) / 2 - 2px) 0;
}

/* ---------------------------------------------------------------- 4. Pages */

/* Text and images of a page keep the same distance from the menu on every page, whichever of Elementor's two
   page templates the page uses. A banner (a "stretched" section) runs edge to edge and sits right under the top
   bar; anything else starts a little lower. */
.up-page--inset {
	padding: 24px var(--up-inset) 48px;
}
.up-page--inset:has(> .elementor > .elementor-section-stretched:first-child) {
	padding-top: 0;
}
/* Elementor keeps text 10px inside its columns; a page without Elementor (contact, shop, a page typed in the
   WordPress editor) gets the same 10px, so text starts on one line everywhere */
.up-page--inset:not(:has(> .elementor)) {
	padding-left: calc(var(--up-inset) + 10px);
	padding-right: calc(var(--up-inset) + 10px);
}
.up-main > .elementor > .elementor-section:not(.elementor-section-stretched) {
	box-sizing: border-box;
	padding-left: var(--up-inset);
	padding-right: var(--up-inset);
}
.up-main > .elementor > .elementor-section:not(.elementor-section-stretched):first-child {
	margin-top: 24px;
}
.up-main > .elementor > .elementor-section:last-child {
	margin-bottom: 48px;
}
/* Older pages stretch their text sections edge to edge as well, which put text right against the menu. In a
   stretched section that is not a banner (no fixed height) the content keeps the same distance from the menu
   as everything else. It is done on the width of the section's inner box, so a narrower centred column stays
   as it is and the section's background still runs edge to edge. */
.up-main .elementor-top-section.elementor-section-stretched:not(.elementor-section-height-min-height) > .elementor-container {
	width: calc(100% - 2 * var(--up-inset));
}

/* a page's first section never slides up behind the top bar (the script does the same for the next ones) */
.up-main .elementor > .elementor-top-section:first-child {
	margin-top: 0 !important;
}
.up-main > .elementor > .elementor-section:not(.elementor-section-stretched):first-child {
	margin-top: 24px !important;
}
.up-page--list,
.up-notfound {
	max-width: 760px;
}
/* A full-width ("stretched") Elementor section fills the content area and stops at the left menu. Elementor
   works out its position in script and gets it wrong when the section already starts at the edge of the
   content area, so that case is set here. */
.up-main > .elementor > .elementor-section-stretched,
.up-main > .elementor > .e-con.e-con-full.elementor-section-stretched {
	left: 0 !important;
	width: 100% !important;
}
/* The header of a project page (class "up-hero", set by site.js) stays in place while the rest of the page
   scrolls over it, the way Daddyland's banner always did. One element right after it ("up-ground") is the ground
   under everything that follows: without it the header would show through between and beside the blocks. The
   blocks themselves stay see-through, so a cut-out picture that hangs over the edge of its block is not cut
   off by the next one. Not on a phone or small tablet: there a page simply scrolls. */
.up-ground {
	display: none;
}
@media (min-width: 861px) {
	.up-has-hero .up-hero {
		position: sticky !important;
		top: min(var(--up-hero-top, calc(var(--up-top) + var(--up-bar))), calc(100vh - var(--up-hero-h, 0px)));
		z-index: 0;
	}
	/* A banner on a page that keeps its content inside the margins: Elementor pulls it out to the edges with
	   "left", which does nothing for an element that stays in place; the same is done with a margin here. */
	.up-has-hero .up-page--inset .up-hero.elementor-section-stretched {
		left: auto !important;
		margin-left: calc(-1 * var(--up-inset));
	}
	.up-has-hero .up-hero-box {
		position: relative;
	}
	.up-has-hero .up-ground {
		display: block;
		position: absolute;
		left: -100vw;
		right: -100vw;
		bottom: 0;
		z-index: 0;
		background: var(--up-bg);
		pointer-events: none;
	}
	/* a first picture inside a column: the ground is as wide as that column */
	.up-has-hero .elementor-widget-wrap > .up-ground {
		left: 0;
		right: 0;
	}
	.up-has-hero .up-hero ~ :not(.up-ground) {
		z-index: 1;
	}
	.up-has-hero .up-hero ~ :not(.up-ground):not(.elementor-absolute):not(.elementor-fixed) {
		position: relative;
	}
}
/* A video file from the media library is shown whole, in its own proportions. Newer versions of Elementor cut
   it to the widget's "aspect ratio" setting, which sliced the edges off the cut-out videos (Daddyland, Champion);
   the old site never did. Videos from YouTube and Vimeo keep that setting. */
.up-main .elementor-widget-video .elementor-wrapper.e-hosted-video {
	aspect-ratio: auto;
}
.up-main .elementor-widget-video .e-hosted-video video.elementor-video {
	height: auto;
	object-fit: contain;
}

.up-list-title a,
.up-list-title a:link,
.up-list-title a:visited {
	color: inherit;
	text-decoration: none;
}

/* ---------------------------------------------------------------- 5. Home page */

.up-home .up-main {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--up-bar));
	min-height: 0;
	overflow: hidden;
}
.up-strip {
	--pad-top: 2vh;
	--pad-bottom: 8vh;
	--h: calc(100vh - var(--up-bar) - var(--up-top) - var(--pad-top) - var(--pad-bottom));
	flex: 1 1 auto;
	min-height: 0;
	padding: var(--pad-top) 0 var(--pad-bottom);
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	cursor: grab;
}
.up-strip::-webkit-scrollbar {
	display: none;
}
.up-strip.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
}
.up-strip.is-dragging .up-tile {
	pointer-events: none;
}
.up-strip__track {
	display: flex;
	gap: 25px;
	width: max-content;
	height: var(--h);
	padding: 0 30vw 0 22px;   /* the script trims the room after the last image */
}
.up-group {
	flex: none;
	display: grid;
	gap: 40px;
	width: calc(var(--h) * var(--ratio));
	height: 100%;
	min-height: 0;
}
.up-group--pair {
	grid-template-rows: calc((var(--h) - 40px) * var(--split)) minmax(0, 1fr);
}
.up-tile {
	position: relative;
	display: block;
	min-height: 0;
	overflow: hidden;
	-webkit-user-drag: none;
}
.up-tile__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	-webkit-user-drag: none;
	user-select: none;
}
/* over an image: the orange veil with the project's name and year, as before */
.up-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--up-orange-deep);
	opacity: 0;
	transition: opacity 0.6s ease;
}
.up-tile__label {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	box-sizing: border-box;
	padding: 22px;
	font-family: var(--up-menu-font);
	font-weight: 200;
	line-height: 1.08;
	letter-spacing: 0.01em;
	text-align: right;
	text-transform: uppercase;
	color: #ffffff;
	opacity: 0;
	transition: opacity 0.45s ease;
}
/* the same size on every image, large or small */
.up-tile__title {
	font-size: clamp(20px, 3.4vh, 32px);
	overflow-wrap: break-word;
}
.up-tile__year {
	margin-top: 0.6em;
	font-size: clamp(12px, 1.7vh, 16px);
}
.up-tile:hover::after,
.up-tile:focus-visible::after,
.up-tile.is-active::after {
	opacity: 0.75;
}
.up-tile:hover .up-tile__label,
.up-tile:focus-visible .up-tile__label,
.up-tile.is-active .up-tile__label {
	opacity: 1;
}

/* how far along the strip you are */
.up-progress {
	position: absolute;
	left: 22px;
	right: var(--up-pad);
	bottom: 3.6vh;
	height: 1px;
	background: var(--up-rule);
}
.up-progress__bar {
	display: block;
	width: 20%;
	height: 3px;
	margin-top: -1px;
	background: var(--up-orange);
	transform-origin: left center;
}

/* the orange lines that draw themselves across the page */
.up-lines {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.up-lines--back {
	z-index: 0;
}
.up-lines--front {
	z-index: 3;
}
.up-strip,
.up-progress {
	z-index: 1;
}
.up-lines__svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.up-line {
	fill: none;
	stroke: var(--up-orange);
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: up-draw 22s linear infinite;
}
.up-line--2 {
	animation-duration: 13s;
}
.up-line--3 {
	animation-duration: 17s;
	animation-delay: 1s;
}
.up-line--4 {
	animation-duration: 15s;
	animation-delay: 3s;
}
.up-line--5 {
	animation-duration: 13s;
	animation-delay: 5s;
}
@keyframes up-draw {
	0% {
		stroke-dashoffset: 1;
	}
	45%,
	82% {
		stroke-dashoffset: 0;
	}
	100% {
		stroke-dashoffset: -1;
	}
}
@media (prefers-reduced-motion: reduce) {
	.up-line {
		animation: none;
		stroke-dashoffset: 0;
	}
	.up-tile::after,
	.up-tile__label {
		transition: none;
	}
}

/* ---------------------------------------------------------------- 6. Dark pages */

/* A page can have its own background colour (field "Background colour of this page"); it arrives here as
   --up-bg. With a dark colour the menu turns light. */
body.up-dark {
	--up-ink: rgba(255, 255, 255, 0.72);
	--up-ink-strong: #ffffff;
	--up-rule: rgba(255, 255, 255, 0.24);
}

/* ---------------------------------------------------------------- 7. Parts */

.up-heading {
	margin: 0 0 28px;
	padding: 0;
	font-family: var(--up-menu-font);
	font-size: clamp(26px, 2.4vw, 34px);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--up-orange);
}
.up-button,
.up-button:link,
.up-button:visited {
	display: inline-block;
	box-sizing: border-box;
	padding: 12px 26px;
	border: 1px solid var(--up-orange);
	border-radius: 0;
	background: transparent;
	font-family: var(--up-menu-font);
	font-size: var(--up-menu-size);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--up-ink-strong);
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}
.up-button:hover,
.up-button:focus {
	background: var(--up-orange);
	color: #ffffff;
	text-decoration: none;
}
.up-form label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--up-menu-font);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--up-ink);
}
.up-form input[type="text"],
.up-form input[type="email"],
.up-form textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid var(--up-rule);
	border-radius: 0;
	background: transparent;
	font: inherit;
	color: var(--up-ink-strong);
	transition: border-color 0.18s ease;
}
.up-form textarea {
	padding: 10px 12px;
	border: 1px solid var(--up-rule);
	resize: vertical;
}
.up-form input:focus,
.up-form textarea:focus {
	outline: none;
	border-color: var(--up-orange);
}
.up-form__field {
	margin: 0 0 22px;
	padding: 0;
}
.up-form__send {
	margin: 4px 0 0;
	padding: 0;
}
.up-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.up-form__note {
	margin: 0 0 24px;
	padding: 12px 16px;
	border-left: 2px solid var(--up-orange);
	color: var(--up-ink-strong);
}

/* A gallery in a page: one tight grid of equal pictures, in colour; the one you point at turns black and white
   (only where there is a pointer: a phone has nothing to point with). A click opens the whole picture. */
.up-main .gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 18px 0 !important;
}
.up-main .gallery.gallery-columns-1 { grid-template-columns: minmax(0, 1fr); }
.up-main .gallery.gallery-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.up-main .gallery.gallery-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.up-main .gallery.gallery-columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.up-main .gallery.gallery-columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.up-main .gallery.gallery-columns-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.up-main .gallery.gallery-columns-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.up-main .gallery.gallery-columns-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
/* (a gallery's own "spacing" setting in Elementor is a padding on every picture: the grid's gap replaces it) */
.up-main .gallery .gallery-item {
	float: none;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.up-main .gallery .gallery-icon {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.up-main .gallery.gallery-columns-1 .gallery-icon {
	aspect-ratio: auto;
}
.up-main .gallery .gallery-icon a {
	display: block;
	height: 100%;
}
.up-main .gallery .gallery-icon img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0 !important;
	border-radius: 0;
	object-fit: cover;
	transition: filter 0.3s ease, transform 0.5s ease;
}
.up-main .gallery.gallery-columns-1 .gallery-icon img {
	height: auto;
}
.up-main .gallery .gallery-caption {
	margin: 6px 0 4px;
	font-size: 12px;
	line-height: 1.5;
	text-align: left;
	color: var(--up-text-soft, var(--up-ink));
}
.up-main .gallery br {
	display: none;
}
/* a gallery block is as high as its pictures: an old rule in Additional CSS gave flux's carousel (#videoflux) a fixed
   height, which left an empty band under the gallery that replaced it */
.up-main .elementor-widget-image-gallery {
	height: auto !important;
}
@media (hover: hover) and (pointer: fine) {
	.up-main .gallery .gallery-item:hover .gallery-icon img,
	.up-main .gallery .gallery-item:focus-within .gallery-icon img {
		filter: grayscale(1);
		transform: scale(1.03);
	}
}
@media (max-width: 560px) {
	.up-main .gallery:not(.gallery-columns-1) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.up-main .gallery .gallery-icon img {
		transition: none;
	}
	.up-main .gallery .gallery-item:hover .gallery-icon img {
		transform: none;
	}
}

/* the page "Shop information": plain text in a readable column */
.up-rules {
	max-width: 760px;
	font-family: var(--up-text-font, var(--up-menu-font));
	color: var(--up-text-color, rgba(0, 0, 0, 0.7));
}
.up-rules__part {
	margin: 0 0 34px;
}
.up-rules__part > :is(h3, h4):first-child {
	margin-top: 0;
}
.up-rules :is(h3, h4) {
	margin-top: 26px;
}
.up-rules p {
	margin: 0 0 12px;
}
.up-rules a:not(.up-button) {
	color: var(--up-orange-deep);
}
.up-rules__form {
	padding: 16px 18px;
	border: 1px solid var(--up-rule);
}
.up-rules__notice {
	display: block;
	width: 100%;
	max-width: 520px;
	height: auto;
	border: 1px solid var(--up-rule);
}
.up-rules__intro:empty {
	display: none;
}

/* ---------------------------------------------------------------- 8. Contact page */

.up-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 64px;
	max-width: 1100px;
}
.up-contact__intro {
	margin-bottom: 30px;
}
.up-contact__intro > :first-child {
	margin-top: 0;
	padding-top: 0;
}
.up-place__name {
	margin: 0 0 4px;
	padding: 0;
	font-family: var(--up-menu-font);
	font-size: var(--up-menu-size);
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--up-ink-strong);
}
.up-place__address {
	margin: 0 0 18px;
	padding: 0;
}
.up-map {
	position: relative;
	display: block;
	overflow: hidden;
	line-height: 0;
	border: 1px solid var(--up-rule);
}
.up-map img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	transition: filter 0.3s ease;
}
.up-map:hover img {
	filter: contrast(1.12);
}
.up-map__pin {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border-radius: 50%;
	background: var(--up-orange);
	box-shadow: 0 0 0 7px rgba(255, 140, 0, 0.25);
}
.up-map__links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin: 10px 0 0;
	padding: 0;
	font-size: 13px;
}
.up-map__links a,
.up-map__links a:link,
.up-map__links a:visited {
	color: var(--up-ink);
	text-decoration: underline;
}
.up-map__links a:hover {
	color: var(--up-orange);
}
.up-map__credit {
	margin-left: auto;
	color: var(--up-ink);
}
.up-social {
	margin-top: 36px;
	padding-top: 22px;
	border-top: 1px solid var(--up-rule);
}
.up-social__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 34px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.up-social__list li {
	list-style: none;
	margin: 0;
	padding: 0;
}
.up-social__list a,
.up-social__list a:link,
.up-social__list a:visited {
	font-family: var(--up-menu-font);
	font-size: var(--up-menu-size);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--up-ink);
	transition: color 0.18s ease;
}
.up-social__list a:hover,
.up-social__list a:focus {
	color: var(--up-orange);
}

/* ---------------------------------------------------------------- 9. Dated lists as a timeline */

/* A list item that starts with a year is printed as a row: the year in its own column, a thin line as the time
   axis and a tick at every new year, like the left menu. inc/cv.php recognises the rows. */
.up-main .up-cv {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
}
.up-main .up-cv__row {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	text-align: left;
}
.up-main .elementor-widget .up-cv__year {
	padding: 0 14px 0 0;
	font-family: var(--up-menu-font) !important;
	font-size: 12px !important;
	line-height: 27px !important;
	letter-spacing: 0.02em !important;
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
	color: var(--up-orange);
}
.up-main .up-cv__what {
	position: relative;
	min-width: 0;
	padding: 0 0 9px 16px;
	border-left: 1px solid var(--up-rule);
}
.up-main .up-cv__row:not(.up-cv__row--same) > .up-cv__what::before {
	content: "";
	position: absolute;
	top: 13px;
	left: -5px;
	width: 9px;
	height: 1px;
	background: var(--up-orange);
}
.up-main .up-cv__row--same > .up-cv__year {
	visibility: hidden;
}
/* a line under an entry (a role, a note) */
.up-main .up-cv__what ul {
	list-style: none;
	margin: 2px 0 0;
	padding: 0;
	color: var(--up-text-soft, var(--up-ink));
}
.up-main .up-cv__what ul li {
	list-style: none;
	margin: 0;
	padding: 0;
}
.up-main .up-cv__what a,
.up-main .up-cv__what a span,
.up-main .up-cv__what span {
	text-decoration: none !important;
}
.up-main .up-cv__what a:hover,
.up-main .up-cv__what a:hover span {
	text-decoration: underline !important;
}
/* the heading above such a list, in line with the entries */
.up-main .elementor-widget .up-cv__heading {
	margin: 34px 0 12px;
	padding: 0 0 0 100px;
	font-family: var(--up-menu-font) !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	color: var(--up-ink-strong);
}
.up-main .elementor-widget .elementor-widget-container > .up-cv__heading:first-child {
	margin-top: 0;
}
.up-main .elementor-widget .elementor-toggle-title.up-cv__heading {
	margin: 0;
	padding: 0;
}

/* the biography page: both halves use the same two columns, so the lists start on one line */
@media (min-width: 768px) {
	.up-page-biography .elementor-inner-section > .elementor-container > .elementor-column:first-child {
		width: 38.444% !important;
	}
	.up-page-biography .elementor-inner-section > .elementor-container > .elementor-column:last-child {
		width: 61.556% !important;
	}
}
/* the logos of the funds in one quiet row instead of four large blocks */
.up-page-biography .elementor-widget-wrap > .elementor-widget-image {
	width: auto !important;
	max-width: 46%;
	margin: 14px 28px 0 0;
}
.up-page-biography .elementor-widget-image img {
	width: auto;
	max-width: 100%;
	max-height: 46px;
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter 0.2s ease, opacity 0.2s ease;
}
.up-page-biography .elementor-widget-image img:hover {
	filter: none;
	opacity: 1;
}

/* ---------------------------------------------------------------- 10. Phone and tablet */

@media (max-width: 1100px) {
	:root {
		--up-inset: 40px;
	}
}

@media (max-width: 860px) {
	:root {
		--up-top: 68px;
		--up-pad: 20px;
		--up-row: 38px;
		--up-menu-size: 16px;
		--up-inset: 20px;
	}
	.up-logo__img {
		width: 190px;
	}
	.up-topnav {
		display: none;
	}
	.up-burger {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 7px;
		width: 44px;
		height: 44px;
		margin-right: -6px;
		padding: 0 6px;
		border: 0;
		background: none;
		cursor: pointer;
	}
	.up-burger__bar {
		display: block;
		height: 2px;
		background: var(--up-orange);
		transition: transform 0.25s ease, opacity 0.2s ease;
	}
	.up-nav-open .up-burger__bar:nth-child(2) {
		transform: translateY(9px) rotate(45deg);
	}
	.up-nav-open .up-burger__bar:nth-child(3) {
		opacity: 0;
	}
	.up-nav-open .up-burger__bar:nth-child(4) {
		transform: translateY(-9px) rotate(-45deg);
	}

	/* the left menu becomes a panel that slides over the page */
	.up-side {
		width: 100%;
		padding: 10px var(--up-pad) 48px;
		visibility: hidden;
		transform: translateX(-100%);
		transition: transform 0.28s ease, visibility 0s linear 0.28s;
	}
	.up-nav-open .up-side {
		visibility: visible;
		transform: none;
		transition: transform 0.28s ease;
	}
	.up-nav-open,
	.up-nav-open body {
		overflow: hidden;
	}
	.up-side__more {
		display: block;
		margin-top: 18px;
		padding-top: 12px;
		border-top: 1px solid var(--up-rule);
	}
	.up-side__more-list a {
		display: block;
		padding: calc((var(--up-row) - 1.25em) / 2) 0;
	}

	.up-main {
		margin-left: 0;
	}
	.up-foot {
		display: flex;
		flex-wrap: wrap;
		gap: 8px 20px;
		margin: 8px 0 0;
		padding: 18px 20px 30px;
		border-top: 1px solid var(--up-rule);
	}
	/* on a phone Elementor's own columns already keep text off the edge */
	.up-main > .elementor > .elementor-section:not(.elementor-section-stretched) {
		padding-left: 10px;
		padding-right: 10px;
	}
	.up-page--inset {
		padding-left: 10px;
		padding-right: 10px;
	}

	/* home page: the images under each other, name and year always shown */
	.up-home .up-main {
		display: block;
		height: auto;
		overflow: visible;
	}
	.up-strip {
		padding: 6px 10px 28px;
		overflow: visible;
		cursor: auto;
	}
	.up-strip__track {
		display: block;
		width: auto;
		height: auto;
		padding: 0;
	}
	.up-group {
		display: block;
		width: auto;
		height: auto;
	}
	.up-tile {
		height: 66vw;
		margin-bottom: 14px;
	}
	.up-tile::after {
		background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 60%);
		opacity: 1;
	}
	.up-tile__label {
		justify-content: flex-end;
		padding: 18px;
		font-weight: 300;
		opacity: 1;
	}
	.up-tile__title {
		font-size: 30px;
	}
	.up-tile__year {
		margin-top: 0.35em;
		font-size: 15px;
	}
	.up-lines,
	.up-progress {
		display: none;
	}

	.up-contact__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 44px;
	}

	.up-main .up-cv__row {
		grid-template-columns: 82px minmax(0, 1fr);
	}
	.up-main .elementor-widget .up-cv__year {
		padding-right: 12px;
		font-size: 11px !important;
		letter-spacing: 0 !important;
	}
	.up-main .elementor-widget .up-cv__heading {
		padding-left: 98px;
	}
}