/*!
Theme Name: Taeuber
Theme URI: https://animamedialab.com/
Author: Guillermo Vargas Quisoboni
Author URI: https://animamedialab.com/
Description: Portfolio theme designed to animate the Mediafolio plugin. Dark, typographic, keyboard friendly. Vertical project list with a rotating hover colour, project pages with text on the left and an image carousel on the right, and a navigation between projects.
Version: 0.1.0
Requires at least: 6.3
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: taeuber
Tags: portfolio, custom-logo, custom-menu, featured-images, translation-ready, accessibility-ready, dark

Taeuber is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
The Inter typeface (assets/fonts) is licensed under the SIL Open Font License 1.1.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS
----------------------------------------------------------------
1. Fonts
2. Design tokens
3. Base
4. Accessibility helpers
5. Header, menu, language switch
6. Content (pages, posts)
7. Project list
8. Project page
9. Carousel
10. Small screens
--------------------------------------------------------------*/

/* 1. Fonts
--------------------------------------------------------------*/
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("assets/fonts/inter-latin-300-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/inter-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("assets/fonts/inter-latin-ext-300-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/inter-latin-ext-400-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2. Design tokens
   Names describe a role, never a look: --taeuber-<category>-<role>.
   Values are estimated from the Figma captures and must be checked
   against the Figma variables once those exist.
--------------------------------------------------------------*/
:root {
	/* Colour. The hover colours are overridden from the Customizer. */
	--taeuber-color-surface-page: #000;
	--taeuber-color-surface-card: #1f1f1f;
	--taeuber-color-text-primary: #f2f2f2;
	--taeuber-color-text-on-hover: #1f1f1f;
	--taeuber-color-pill-background: #d9d9d9;
	--taeuber-color-pill-text: #1f1f1f;
	--taeuber-color-text-muted: #8f8f8f; /* labels and headings; lighter than the mock-up for contrast on #1f1f1f. */
	--taeuber-color-nav-default: #757575;
	--taeuber-color-nav-hover: #ffa4a4;
	--taeuber-color-nav-hover-ink: #1e1e1e;
	--taeuber-color-focus-ring: #fff;
	--taeuber-hover-1: #ffd400;
	--taeuber-hover-2: #ec008c;
	--taeuber-hover-3: #8fd3ff;
	--taeuber-hover-4: #b8f2a1;

	/* Space (8px base). */
	--taeuber-space-xs: 0.5rem;
	--taeuber-space-s: 1rem;
	--taeuber-space-m: 1.5rem;
	--taeuber-space-l: 2rem;
	--taeuber-space-xl: 3rem;
	--taeuber-space-2xl: 4rem;

	/* Layout. */
	--taeuber-page-margin: 3rem;
	--taeuber-container-max: 90rem;
	--taeuber-column-width: 41rem;
	--taeuber-text-measure: 54rem;
	--taeuber-gallery-width: 33rem;
	--taeuber-nav-size: 2.125rem; /* 34px, the size of the Figma buttons. */

	/* Type. */
	--taeuber-font-family-base: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--taeuber-type-title-size: 2rem;
	--taeuber-type-title-line: 1.22;
	--taeuber-type-nav-size: 1.5rem;
	--taeuber-type-nav-line: 1.2;
	--taeuber-type-body-size: 1.25rem;
	--taeuber-type-body-line: 1.35; /* The mock-up uses 1.2: too tight for paragraphs. */
	--taeuber-type-label-size: 1rem;
	--taeuber-type-label-line: 1.2;
	--taeuber-type-pair-size: 0.75rem;

	/* Motion. */
	--taeuber-motion-duration-fast: 0.2s;
	--taeuber-motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
	--taeuber-motion-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
	--taeuber-motion-duration-bounce: 0.6s;
}

/* 3. Base
--------------------------------------------------------------*/
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--taeuber-color-surface-page);
	color: var(--taeuber-color-text-primary);
	font-family: var(--taeuber-font-family-base);
	font-size: var(--taeuber-type-body-size);
	font-weight: 400;
	line-height: var(--taeuber-type-body-line);
	-webkit-font-smoothing: antialiased;
}

img,
svg {
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-underline-offset: 0.2em;
}

h1,
h2,
h3,
h4 {
	font-weight: 400;
	margin: 0;
}

p {
	margin: 0 0 var(--taeuber-space-s);
}

button {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 3px solid var(--taeuber-color-focus-ring);
	outline-offset: 3px;
}

.site {
	max-width: var(--taeuber-container-max);
	margin-inline: auto;
	padding-inline: var(--taeuber-page-margin);
}

.site-main {
	padding-block: 6.5rem var(--taeuber-space-2xl);
}

/* 4. Accessibility helpers
--------------------------------------------------------------*/
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important; /* Needed to beat inline styles of some plugins. */
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--taeuber-color-pill-background);
	clip: auto !important;
	clip-path: none;
	color: var(--taeuber-color-pill-text);
	display: block;
	font-size: 0.875rem;
	font-weight: 400;
	height: auto;
	left: 0.5rem;
	line-height: normal;
	padding: 1rem 1.5rem;
	text-decoration: none;
	top: 0.5rem;
	width: auto;
	z-index: 100000;
}

#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* WordPress core classes. */
.alignleft {
	float: left;
	margin: 0 1.5rem 1rem 0;
}

.alignright {
	float: right;
	margin: 0 0 1rem 1.5rem;
}

.aligncenter {
	clear: both;
	display: block;
	margin-inline: auto;
}

.wp-caption {
	margin-bottom: 1.5rem;
	max-width: 100%;
}

.wp-caption-text,
.gallery-caption {
	font-size: var(--taeuber-type-label-size);
	line-height: var(--taeuber-type-label-line);
}

.sticky,
.bypostauthor {
	display: block;
}

/* 5. Header, menu, language switch
--------------------------------------------------------------*/
.site-header {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--taeuber-space-s);
	padding-top: var(--taeuber-space-xl);
}

.site-branding {
	justify-self: start;
}

.site-branding .custom-logo-link {
	display: inline-block;
}

.site-branding .custom-logo {
	display: block;
	width: auto;
	max-height: 4.5rem;
}

.site-title {
	margin: 0;
	font-size: var(--taeuber-type-nav-size);
}

.site-title a {
	text-decoration: none;
}

.main-navigation ul {
	display: flex;
	gap: var(--taeuber-space-xl);
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-navigation a {
	position: relative;
	display: inline-block;
	padding-block: var(--taeuber-space-xs);
	font-size: var(--taeuber-type-nav-size);
	font-weight: 300;
	line-height: var(--taeuber-type-nav-line);
	text-decoration: none;
}

/* Menu item states (Figma "Composantes"): default grey, hover pink, selected =
   dark text with a dot, selected + hover = pink dot. */
.main-navigation a {
	color: var(--taeuber-color-nav-default);
	transition: color 0.2s;
}

.main-navigation a:hover,
.main-navigation a:focus-visible {
	color: var(--taeuber-color-nav-hover);
}

.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a {
	color: var(--taeuber-color-text-primary);
}

/* Selected + hover: the text and the dot both turn pink. */
.main-navigation .current-menu-item > a:is(:hover, :focus-visible),
.main-navigation .current-menu-ancestor > a:is(:hover, :focus-visible) {
	color: var(--taeuber-color-nav-hover);
}

/* The dot under the current item. It is decoration: the current page is also
   announced to screen readers by WordPress through aria-current. */
.main-navigation .current-menu-item > a::after,
.main-navigation .current-menu-ancestor > a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -0.125rem;
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
	background: currentcolor;
	transform: translateX(-50%);
}

.menu-toggle {
	display: none;
}

.taeuber-lang {
	justify-self: end;
}

.taeuber-lang__list {
	display: flex;
	align-items: center;
	gap: var(--taeuber-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.taeuber-lang__item a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	font-size: var(--taeuber-type-nav-size);
	font-weight: 300;
	text-decoration: none;
}

/* Language states: not selected = grey, hover = pink text; selected = light
   filled circle, selected + hover = pink filled circle. */
.taeuber-lang__item a {
	color: var(--taeuber-color-nav-default);
	transition: background-color 0.2s, color 0.2s;
}

.taeuber-lang__item a:hover,
.taeuber-lang__item a:focus-visible {
	color: var(--taeuber-color-nav-hover);
}

.taeuber-lang__item.is-current a {
	background: var(--taeuber-color-pill-background);
	color: var(--taeuber-color-pill-text);
}

.taeuber-lang__item.is-current a:hover,
.taeuber-lang__item.is-current a:focus-visible {
	background: var(--taeuber-color-nav-hover);
	color: var(--taeuber-color-nav-hover-ink);
}

/* 6. Content (pages, posts)
--------------------------------------------------------------*/
/* Pages such as "Approach" start straight with the text: the title stays in
   the document for screen readers and search engines. */
.type-page > .entry-header {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.type-page .entry-content {
	max-width: var(--taeuber-text-measure);
	margin-block: 9rem 0;
	margin-inline: auto;
}

.entry-content > * + * {
	margin-top: var(--taeuber-space-s);
}

.entry-content h2,
.entry-content h3 {
	margin-top: var(--taeuber-space-xl);
	font-size: var(--taeuber-type-title-size);
	line-height: var(--taeuber-type-title-line);
}

.entry-content h2:first-child,
.entry-content h3:first-child {
	margin-top: 0;
}

.entry-title {
	font-size: var(--taeuber-type-title-size);
	line-height: var(--taeuber-type-title-line);
}

.hfeed .site-main > article,
.error-404,
.no-results {
	margin-bottom: var(--taeuber-space-2xl);
}

.comment-list {
	padding-left: 0;
	list-style: none;
}

/* 7. Project list
   One row per project: title (and subtitle) on top, up to two label / value
   pairs at the bottom, thumbnail on the right. Rows are 248px high and
   separated by 24px of page background, as in the Figma V0.2 page.
--------------------------------------------------------------*/
.taeuber-main ul.projects {
	display: grid;
	gap: var(--taeuber-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The plugin prints a page title: keep it for screen readers, not on screen. */
.mediafolio-archive > .page-title {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.taeuber-project {
	position: relative;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: var(--taeuber-space-m);
	padding: var(--taeuber-space-2xl) var(--taeuber-space-s);
	background: var(--taeuber-color-surface-card);
}

.taeuber-project:hover,
.taeuber-project:focus-within {
	background: var(--taeuber-hover, var(--taeuber-hover-1));
	color: var(--taeuber-hover-ink, var(--taeuber-hover-1-ink, var(--taeuber-color-text-on-hover)));
}

/* On a coloured row the grey label would lose contrast: it follows the row text. */
.taeuber-project:hover .taeuber-pair dt,
.taeuber-project:focus-within .taeuber-pair dt {
	color: inherit;
	opacity: 0.85;
}

/* The keyboard outline goes around the whole row, not around the title only. */
.taeuber-project:has(a:focus-visible) {
	outline: 3px solid var(--taeuber-color-focus-ring);
	outline-offset: 3px;
}

.taeuber-project a:focus-visible {
	outline: 0;
}

.taeuber-project__text {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--taeuber-space-m);
	min-width: 0;
	min-height: 7.5rem;
}

.taeuber-project__title {
	font-size: var(--taeuber-type-title-size);
	line-height: var(--taeuber-type-title-line);
}

.taeuber-project__title a {
	text-decoration: none;
}

/* One link per row: the title link stretches over the whole card. */
.taeuber-project__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.taeuber-project__thumb {
	flex: none;
	width: 7.5rem;
	height: 7.5rem;
}

.taeuber-project__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Label / value pairs (list and project page).
   1 pair sits on the left, 2 pairs go to both ends, more are spread out. */
.taeuber-pairs {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--taeuber-space-xs) var(--taeuber-space-m);
	margin: 0;
}

.taeuber-pair {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--taeuber-space-xs);
}

.taeuber-pair dt,
.taeuber-pair dd {
	margin: 0;
	font-size: var(--taeuber-type-pair-size);
	line-height: var(--taeuber-type-label-line);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.taeuber-pair dt {
	color: var(--taeuber-color-text-muted);
}

.taeuber-pair dd {
	color: inherit;
}

.taeuber-pair a {
	text-decoration: none;
}

.taeuber-pair a:hover {
	text-decoration: underline;
}

/* Plugin pagination: quiet text links with the same states as the menu. */
.projects-pagination,
.navigation.pagination {
	margin-top: var(--taeuber-space-l);
}

.projects-pagination .page-numbers,
.navigation.pagination .page-numbers {
	display: inline-block;
	padding: var(--taeuber-space-xs) var(--taeuber-space-s);
	text-decoration: none;
}

.projects-pagination a.page-numbers,
.navigation.pagination a.page-numbers {
	border-radius: 999px;
	transition: background-color 0.2s, color 0.2s;
}

.projects-pagination a.page-numbers:hover,
.projects-pagination a.page-numbers:focus-visible,
.navigation.pagination a.page-numbers:hover,
.navigation.pagination a.page-numbers:focus-visible {
	background: var(--taeuber-color-nav-hover);
	color: var(--taeuber-color-nav-hover-ink);
}

.projects-pagination .page-numbers.current,
.navigation.pagination .page-numbers.current {
	text-decoration: underline;
	text-underline-offset: 0.35em;
}

.navigation.pagination {
	margin-top: var(--taeuber-space-l);
}

/* Articles (single post): one column of text aligned with the project pages. */
.taeuber-article__body {
	max-width: var(--taeuber-column-width);
}

.taeuber-article__title {
	margin: 0;
}

.taeuber-article__head .taeuber-pairs {
	margin-top: var(--taeuber-space-xl);
}

.taeuber-article__content,
.taeuber-article__thumb {
	margin-top: var(--taeuber-space-2xl);
}

.taeuber-article__content img,
.taeuber-article__content video,
.taeuber-article__content iframe,
.taeuber-article__content figure {
	max-width: 100%;
}

.taeuber-article__content img,
.taeuber-article__content video {
	display: block;
	height: auto;
}

.taeuber-article__content figure {
	margin-inline: 0;
}

.taeuber-article__content figcaption {
	padding: var(--taeuber-space-xs) 0;
	color: var(--taeuber-color-text-muted);
	font-size: var(--taeuber-type-label-size);
	line-height: var(--taeuber-type-label-line);
}

/* Section headings are quiet labels, as on the project pages. */
.taeuber-article__content h2,
.taeuber-article__content h3 {
	margin: var(--taeuber-space-xl) 0 var(--taeuber-space-m);
	color: var(--taeuber-color-text-muted);
	font-size: var(--taeuber-type-nav-size);
	font-weight: 400;
	line-height: var(--taeuber-type-nav-line);
}

.taeuber-article__content > :first-child {
	margin-top: 0;
}

.taeuber-article__content a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.taeuber-article__pager {
	margin-top: var(--taeuber-space-2xl);
}

/* Comments: quiet, same states as the buttons of the theme. */
.comments-area {
	max-width: var(--taeuber-column-width);
	margin-top: var(--taeuber-space-2xl);
}

.comments-title,
.comment-reply-title {
	margin: 0 0 var(--taeuber-space-m);
	color: var(--taeuber-color-text-muted);
	font-size: var(--taeuber-type-nav-size);
	font-weight: 400;
	line-height: var(--taeuber-type-nav-line);
}

.comment-list,
.comment-list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.comment-list .children {
	margin-left: var(--taeuber-space-m);
}

.comment-body {
	padding-block: var(--taeuber-space-m);
	border-top: 1px solid var(--taeuber-color-surface-card);
}

.comment-meta,
.comment-metadata,
.comment-notes,
.logged-in-as {
	color: var(--taeuber-color-text-muted);
	font-size: var(--taeuber-type-label-size);
	line-height: var(--taeuber-type-label-line);
}

.comment-form label {
	display: block;
	margin-bottom: 0.25rem;
	color: var(--taeuber-color-text-muted);
	font-size: var(--taeuber-type-label-size);
}

.comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
	width: 100%;
	padding: var(--taeuber-space-xs) var(--taeuber-space-s);
	border: 1px solid var(--taeuber-color-nav-default);
	border-radius: 0;
	background: var(--taeuber-color-surface-card);
	color: var(--taeuber-color-text-primary);
	font: inherit;
}

.comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea):hover {
	border-color: var(--taeuber-color-nav-hover);
}

.comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea):focus-visible {
	outline: 3px solid var(--taeuber-color-focus-ring);
	outline-offset: 2px;
}

.comment-form .submit {
	min-height: 2.75rem;
	padding: 0 var(--taeuber-space-m);
	border: 1px solid currentcolor;
	border-radius: 999px;
	background: none;
	color: var(--taeuber-color-nav-default);
	cursor: pointer;
	font: inherit;
}

.comment-form .submit:hover,
.comment-form .submit:focus-visible {
	border-color: var(--taeuber-color-nav-hover);
	color: var(--taeuber-color-nav-hover);
}

/* 8. Project page
   Two columns on wide screens, in two rows:
   text | images, then navigation | image buttons.
--------------------------------------------------------------*/
.taeuber-single__body {
	display: grid;
	grid-template-columns: minmax(0, var(--taeuber-column-width)) minmax(0, 1fr);
	grid-template-areas:
		"text media"
		"pager controls";
	column-gap: 6rem;
	row-gap: var(--taeuber-space-2xl);
	align-items: start;
}

.taeuber-single__text {
	grid-area: text;
	min-width: 0;
}

.taeuber-single__media {
	grid-area: media;
	min-width: 0;
}

.taeuber-single__pager {
	grid-area: pager;
	align-self: center;
}

.taeuber-single__controls {
	grid-area: controls;
	align-self: center;
	max-width: var(--taeuber-gallery-width);
}

.taeuber-single__text .taeuber-pairs {
	margin-top: var(--taeuber-space-xl);
}

.taeuber-single__text .entry-content {
	margin-top: var(--taeuber-space-2xl);
}

/* Section headings typed in the editor (Context, Challenge, Approach) are quiet labels. */
.taeuber-single__text .entry-content h2,
.taeuber-single__text .entry-content h3,
.taeuber-single__details-title {
	margin: var(--taeuber-space-xl) 0 var(--taeuber-space-m);
	color: var(--taeuber-color-text-muted);
	font-size: var(--taeuber-type-nav-size);
	line-height: var(--taeuber-type-nav-line);
}

.taeuber-single__text .entry-content > :first-child {
	margin-top: 0;
}

.taeuber-subtitle {
	font-weight: inherit;
}

/* Secondary details close the text: a quiet heading, then label above value. */
.taeuber-single__details {
	margin-top: var(--taeuber-space-xl);
}

.taeuber-single__details-title {
	font-weight: 400;
}

.taeuber-single__text .taeuber-pairs--stacked {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--taeuber-space-s);
	margin-top: 0;
}

.taeuber-pairs--stacked .taeuber-pair {
	flex-direction: column;
	gap: 0.25rem;
}

/* Head of a category page. */
.taeuber-archive-head {
	margin-bottom: var(--taeuber-space-l);
}

.taeuber-archive-head__description {
	max-width: var(--taeuber-column-width);
	margin: var(--taeuber-space-m) 0 0;
	color: var(--taeuber-color-text-muted);
}

/* Wide and tall screens: the page is one screen high. The header and both bars
   stay in view, only the text scrolls. Small or short screens scroll normally. */
@media (min-width: 56.3125rem) and (min-height: 36rem) {
	body.single-project .site {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
		height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
	}

	body.single-project .site-header {
		flex: none;
	}

	body.single-project .taeuber-single {
		flex: 1 1 auto;
		min-height: 0;
		padding-block: var(--taeuber-space-xl) var(--taeuber-space-l);
	}

	body.single-project .taeuber-single__article,
	body.single-project .taeuber-single__body {
		height: 100%;
	}

	.taeuber-single__body {
		grid-template-rows: minmax(0, 1fr) auto;
		row-gap: var(--taeuber-space-l);
	}

	.taeuber-single__text,
	.taeuber-single__media {
		align-self: stretch;
		min-height: 0;
	}

	/* The head (title and primary details) stays still; only the text scrolls. */
	.taeuber-single__text {
		display: flex;
		flex-direction: column;
	}

	.taeuber-single__head {
		flex: none;
		padding-bottom: var(--taeuber-space-l);
	}

	.taeuber-single__text .entry-content {
		margin-top: 0;
	}

	.taeuber-single__scroll {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		padding-right: var(--taeuber-space-m);
		overscroll-behavior: contain;
		scrollbar-color: var(--taeuber-color-nav-default) transparent;
		scrollbar-width: thin;
	}

	/* The images use the height that is left, never more. */
	.taeuber-single__media {
		overflow: hidden;
	}

	.taeuber-single__media .taeuber-carousel,
	.taeuber-single__media .taeuber-carousel__track,
	.taeuber-single__media .taeuber-carousel__slide,
	.taeuber-single__media .taeuber-carousel__figure {
		height: 100%;
	}

	.taeuber-single__media .taeuber-carousel__figure {
		display: flex;
		flex-direction: column;
	}

	.taeuber-single__media .taeuber-carousel__img {
		flex: 1 1 auto;
		min-height: 0;
		height: 100%;
		max-height: none;
	}
}

/* Navigation between projects: round buttons, the label opens on hover or focus
   and pushes the buttons after it to the right. */
.taeuber-nav {
	display: flex;
	gap: var(--taeuber-space-m);
}

.taeuber-nav__slot {
	flex: none;
	height: var(--taeuber-nav-size);
}

.taeuber-nav__link,
.taeuber-square {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	height: var(--taeuber-nav-size);
	min-width: var(--taeuber-nav-size);
	padding: 0;
	border: 1px solid currentcolor;
	background: none;
	color: var(--taeuber-color-nav-default);
	font-size: var(--taeuber-type-label-size);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

.taeuber-nav__link {
	overflow: hidden;
	border-radius: 999px;
}

.taeuber-nav__icon {
	flex: none;
	margin: -1px;
}

.taeuber-nav__label {
	max-width: 0;
	padding-right: 0;
	overflow: hidden;
	opacity: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.taeuber-nav__link:hover,
.taeuber-nav__link:focus-visible {
	color: var(--taeuber-color-nav-hover);
}

.taeuber-nav__link:hover .taeuber-nav__label,
.taeuber-nav__link:focus-visible .taeuber-nav__label {
	max-width: min(28rem, 60vw);
	padding-right: var(--taeuber-space-s);
	opacity: 1;
}

/* With JavaScript the width of each label is measured (--taeuber-label-w) so it
   can be animated with a bounce: a max-width cannot overshoot its content. */
.taeuber-nav__link.has-label-width .taeuber-nav__label {
	width: 0;
	max-width: none;
}

.taeuber-nav__link.has-label-width:hover .taeuber-nav__label,
.taeuber-nav__link.has-label-width:focus-visible .taeuber-nav__label {
	width: var(--taeuber-label-w);
}

.taeuber-nav__link.is-disabled {
	opacity: 0.35;
	cursor: default;
}

/* Square buttons of the image bar. */
.taeuber-square:hover:not(:disabled),
.taeuber-square:focus-visible:not(:disabled) {
	border-color: var(--taeuber-color-nav-hover-ink);
	background: var(--taeuber-color-nav-hover);
	color: var(--taeuber-color-nav-hover-ink);
}

.taeuber-square:disabled {
	opacity: 0.35;
	cursor: default;
}

.taeuber-gallerybar {
	display: flex;
	align-items: center;
	justify-content: center;
}

.taeuber-gallerybar__count {
	min-width: 4.3rem;
	margin: 0;
	color: var(--taeuber-color-text-muted);
	font-size: var(--taeuber-type-label-size);
	line-height: 1;
	text-align: center;
}

.taeuber-logos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--taeuber-space-s);
	margin: var(--taeuber-space-xl) 0 0;
	padding: 0;
	list-style: none;
}

/* A fixed height and a white tile keep any logo tidy, whatever its size. */
.taeuber-logos__item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 5rem;
	padding: var(--taeuber-space-xs);
	background: #fff;
}

.taeuber-logos__img {
	display: block;
	width: auto;
	max-width: 8rem;
	height: 100%;
	object-fit: contain;
}

/* 9. Carousel
   The images only: the buttons live in the bar below (.taeuber-gallerybar).
--------------------------------------------------------------*/
.taeuber-carousel {
	max-width: var(--taeuber-gallery-width);
}

.taeuber-carousel__track {
	position: relative;
	display: flex;
	gap: var(--taeuber-space-2xl);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

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

/* Without JavaScript the bar does nothing, so keep a scrollbar for mouse users. */
.taeuber-carousel:not(.is-ready) .taeuber-carousel__track {
	scrollbar-width: thin;
}

.taeuber-carousel:not(.is-ready) .taeuber-carousel__track::-webkit-scrollbar {
	display: block;
}

.taeuber-carousel__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
}

.taeuber-carousel__figure {
	margin: 0;
}

.taeuber-carousel__img {
	display: block;
	width: 100%;
	max-height: 75vh;
	height: auto;
	object-fit: contain;
	object-position: left top;
}

.taeuber-carousel__caption {
	padding: var(--taeuber-space-xs) 0;
	font-size: var(--taeuber-type-label-size);
	line-height: var(--taeuber-type-label-line);
}

/* 10. Small screens
--------------------------------------------------------------*/
@media (max-width: 56.25rem) {
	:root {
		--taeuber-page-margin: 1.5rem;
	}

	.site-header {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"brand lang"
			"nav nav";
	}

	.site-branding {
		grid-area: brand;
	}

	.taeuber-lang {
		grid-area: lang;
	}

	.main-navigation {
		grid-area: nav;
	}

	.menu-toggle {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
		padding: 0 var(--taeuber-space-s);
		border: 1px solid currentcolor;
		border-radius: 999px;
		background: none;
		color: var(--taeuber-color-nav-default);
		cursor: pointer;
		transition: background-color 0.2s, color 0.2s, border-color 0.2s;
	}

	.menu-toggle:hover,
	.menu-toggle:focus-visible {
		border-color: var(--taeuber-color-nav-hover);
		color: var(--taeuber-color-nav-hover);
	}

	.menu-toggle[aria-expanded="true"] {
		background: var(--taeuber-color-pill-background);
		border-color: var(--taeuber-color-pill-background);
		color: var(--taeuber-color-pill-text);
	}

	.menu-toggle[aria-expanded="true"]:hover,
	.menu-toggle[aria-expanded="true"]:focus-visible {
		background: var(--taeuber-color-nav-hover);
		border-color: var(--taeuber-color-nav-hover);
		color: var(--taeuber-color-nav-hover-ink);
	}

	.main-navigation ul {
		display: none;
		flex-direction: column;
		gap: 0;
		margin-top: var(--taeuber-space-s);
	}

	.main-navigation.toggled ul {
		display: flex;
	}

	.site-main {
		padding-top: var(--taeuber-space-xl);
	}

	.taeuber-single__body {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"text"
			"media"
			"controls"
			"pager";
		row-gap: var(--taeuber-space-l);
	}

	.taeuber-single__controls {
		max-width: none;
	}

	/* The project navigation stays at the bottom of the screen. */
	.taeuber-single__pager {
		position: sticky;
		bottom: 0;
		z-index: 5;
		padding-block: var(--taeuber-space-s);
		background: var(--taeuber-color-surface-page);
	}

	.taeuber-project {
		padding-block: var(--taeuber-space-l);
	}

	.taeuber-project__thumb {
		width: 5rem;
		height: 5rem;
	}

	.taeuber-project__text {
		min-height: 5rem;
	}

	.type-page .entry-content {
		margin-top: var(--taeuber-space-l);
	}

	:root {
		--taeuber-type-title-size: 1.75rem;
		--taeuber-type-body-size: 1.125rem;
	}
}

/* 11. Custom cursor
   A circle that replaces the arrow on devices with a mouse. It is added by
   taeuber.js only when it is allowed (see there), so without JavaScript the
   normal cursor stays. mix-blend-mode: difference makes it react to the
   background: light on dark, dark on light.
--------------------------------------------------------------*/
.taeuber-cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999999;
	width: 1.25rem;
	height: 1.25rem;
	margin: -0.625rem 0 0 -0.625rem;
	opacity: 0;
	pointer-events: none;
	mix-blend-mode: difference;
	will-change: transform;
}

.taeuber-cursor__dot {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: #fff;
	transform: scale(1);
}

.taeuber-cursor__dot {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* The arrow is cut out of the circle (black does not invert the background). */
.taeuber-cursor__arrow {
	width: 60%;
	height: 60%;
	fill: #000;
	opacity: 0;
	transform: rotate(0deg);
}

.taeuber-cursor.is-scroll .taeuber-cursor__dot {
	transform: scale(2.4);
}

.taeuber-cursor.is-scroll .taeuber-cursor__arrow {
	opacity: 1;
}

.taeuber-cursor.is-scroll-up .taeuber-cursor__arrow {
	transform: rotate(180deg);
}

/* Rest mode: after two seconds without moving only the triangle stays, in the
   contrast colour (white with the difference blend inverts the background). */
.taeuber-cursor.is-scroll.is-rest .taeuber-cursor__dot {
	background: transparent;
	transform: scale(2);
}

.taeuber-cursor.is-scroll.is-rest .taeuber-cursor__arrow {
	fill: #fff;
}

.taeuber-cursor.is-scroll.is-pressed .taeuber-cursor__dot {
	transform: scale(2);
}

.taeuber-cursor.is-visible {
	opacity: 1;
}

.taeuber-cursor.is-active:not(.is-idle) .taeuber-cursor__dot {
	transform: scale(2.8);
}

.taeuber-cursor.is-pressed .taeuber-cursor__dot {
	transform: scale(0.8);
}

.taeuber-cursor.is-active:not(.is-idle).is-pressed .taeuber-cursor__dot {
	transform: scale(2.2);
}

/* The real arrow disappears only once the circle is running. Text fields keep their own cursor. */
html.taeuber-cursor-on,
html.taeuber-cursor-on * {
	cursor: none !important;
}

html.taeuber-cursor-on :is(input:not([type="submit"], [type="button"], [type="checkbox"], [type="radio"]), textarea, select, [contenteditable="true"]) {
	cursor: auto !important;
}

/* Transitions only for visitors who have not asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
	.taeuber-project {
		transition: background-color var(--taeuber-motion-duration-fast) var(--taeuber-motion-ease-standard);
	}

	.taeuber-nav__label {
		transition: max-width var(--taeuber-motion-duration-bounce) var(--taeuber-motion-ease-bounce), width var(--taeuber-motion-duration-bounce) var(--taeuber-motion-ease-bounce), padding var(--taeuber-motion-duration-bounce) var(--taeuber-motion-ease-bounce), opacity 0.3s linear;
	}

	.taeuber-cursor__dot,
	.taeuber-cursor__arrow {
		transition: transform var(--taeuber-motion-duration-bounce) var(--taeuber-motion-ease-bounce), opacity 0.2s linear, background-color 0.4s linear, fill 0.4s linear;
	}
}