/* ==========================================================================
   Yann Vivane — médiateur culturel & coordinateur de projet
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img,
ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure,
figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
section { display: block; }

*, *::before, *::after { box-sizing: border-box; }

ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote::before, blockquote::after,
q::before, q::after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
mark { background-color: transparent; color: inherit; }

input::-moz-focus-inner { border: 0; padding: 0; }
input[type="text"], input[type="email"], select, textarea { appearance: none; }

/* Carrd's tap-highlight suppression, kept so taps don't flash on mobile. */
button, textarea, input, select, a {
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
	--font-display: 'Bai Jamjuree', sans-serif;
	--font-form: 'Plus Jakarta Sans', sans-serif;

	--ink: #000000;
	--ink-invert: #F7F0F0;
	--ink-muted: #BFBFBF;
	--ink-muted-strong: #857F7F;
	--accent: #2BE3CD;
	--accent-mark: #60BD7B;

	--card-bg: rgba(247, 247, 247, 0.529);
	--card-border: #DEDCDC;
	--card-radius: 1.125rem;
	--card-shadow: 0.547rem 0.303rem 1rem 0rem rgba(15, 15, 15, 0.051);
	--band-shadow: 0rem 0rem 0rem 0rem rgba(0, 0, 0, 0.078);
	--rule: rgba(0, 0, 0, 0.451);

	--background-height: 100vh;
	--viewport-height: 100vh;

	--site-language-alignment: left;
	--site-language-direction: ltr;
	--site-language-indent-left: 1;
	--site-language-indent-right: 0;
}

/* Carrd scales the whole layout by moving the root font size, and every
   dimension below is expressed in rem so it follows along. */
@media (max-width: 1680px) { html { font-size: 12pt; } }
@media (max-width: 1280px) { html { font-size: 12pt; } }
@media (max-width:  980px) { html { font-size: 10pt; } }
@media (max-width:  736px) { html { font-size: 13pt; } }

/* --------------------------------------------------------------------------
   3. Page shell
   -------------------------------------------------------------------------- */

body {
	line-height: 1;
	min-height: var(--viewport-height);
	min-width: 320px;
	overflow-x: hidden;
	word-wrap: break-word;
	background-color: #FFFFFF;
	-webkit-text-size-adjust: none;
}

/* Chevron pattern, white on white — invisible at rest, but it is what keeps
   the backdrop from banding on wide gamut displays. */
body::before {
	content: '';
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: var(--background-height);
	background-attachment: scroll;
	background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20width%3D%22512%22%20height%3D%22512%22%20preserveAspectRatio%3D%22none%22%3E%20%3Cstyle%3E%20path%20%7B%20fill%3A%20none%3B%20stroke-linecap%3A%20round%3B%20stroke-width%3A%201.01px%3B%20stroke%3A%20%23FFFFFF%3B%20vector-effect%3A%20non-scaling-stroke%3B%20%7D%20%3C%2Fstyle%3E%20%3Cpath%20d%3D%22M-8%2C232L256%2C32%20M520%2C232L256%2C32%22%20%2F%3E%20%3Cpath%20d%3D%22M-8%2C488l264-200%20M520%2C488L256%2C288%22%20%2F%3E%3C%2Fsvg%3E');
	background-size: 1158px;
	background-position: center;
	background-repeat: repeat;
	pointer-events: none;
	transform: scale(1);
	z-index: 0;
}

.site-wrapper {
	-webkit-overflow-scrolling: touch;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: var(--viewport-height);
	overflow: hidden;
	position: relative;
	z-index: 2;
}

.site-main {
	--alignment: center;
	--flex-alignment: center;
	--indent-left: 1;
	--indent-right: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-grow: 0;
	flex-shrink: 0;
	max-width: 100%;
	position: relative;
	text-align: var(--alignment);
	z-index: 1;
	transition: opacity 0.75s ease-in-out 0s;
}

.site-main > .inner {
	--padding-horizontal: 9rem;
	--padding-vertical: 0rem;
	--spacing: 1.25rem;
	--width: 73rem;
	max-width: 100%;
	position: relative;
	width: var(--width);
	padding: var(--padding-vertical) var(--padding-horizontal);
	z-index: 1;
}

.site-main > .inner > header { margin-bottom: var(--spacing); }
.site-main > .inner > footer { margin-top: var(--spacing); }
.site-main > .inner > * > * {
	margin-top: var(--spacing);
	margin-bottom: var(--spacing);
}
.site-main > .inner > * > :first-child { margin-top: 0 !important; }
.site-main > .inner > * > :last-child { margin-bottom: 0 !important; }

/* `.full` bleeds a block past the shell's horizontal padding; `.screen` takes
   it all the way to the viewport edge. The 0.4725px guards against a subpixel
   seam on the right edge in Safari. */
.site-main > .inner > * > .full {
	margin-left: calc(var(--padding-horizontal) * -1);
	max-width: calc(100% + (var(--padding-horizontal) * 2) + 0.4725px);
	width: calc(100% + (var(--padding-horizontal) * 2) + 0.4725px);
}
.site-main > .inner > * > .full.screen {
	border-radius: 0 !important;
	position: relative;
	left: 50%;
	right: auto;
	margin-left: -50vw;
	max-width: 100vw;
	width: 100vw;
}
.site-main > .inner > header > .full:first-child { margin-top: 0rem !important; }
.site-main > .inner > footer > .full:last-child { margin-bottom: 0rem !important; }

#header { margin-bottom: 0rem !important; }
#footer { margin-top: 5.625rem !important; }

@media (max-width: 736px) {
	.site-main > .inner {
		--padding-horizontal: 1rem;
		--padding-vertical: 0rem;
		--spacing: 1.25rem;
	}
	#footer { margin-top: 2.625rem !important; }
}

@media (max-width: 360px) {
	.site-main > .inner {
		--padding-horizontal: 0.75rem;
		--padding-vertical: 0rem;
		--spacing: 1.09375rem;
	}
}

/* --------------------------------------------------------------------------
   4. Section routing
   Each nav entry swaps one <section> for another rather than scrolling, so the
   sections cross-fade while their height is animated between the two.
   -------------------------------------------------------------------------- */

.site-main > .inner > header,
.site-main > .inner > footer {
	transition: opacity 0.25s ease-in-out 0.375s, visibility 0.25s linear 0.375s;
}

.site-main > .inner > section {
	transition: opacity 0.5s ease-in-out 0.25s,
	            min-height 0.25s ease-in-out,
	            max-height 0.25s ease-in-out;
}
.site-main > .inner > section.inactive {
	opacity: 0;
	transition: opacity 0.25s ease-in-out;
}

body.is-loading { pointer-events: none; }
body.is-loading .site-main { opacity: 0; }

/* --------------------------------------------------------------------------
   5. Deferred images
   Photos hold a flat-colour SVG placeholder until they scroll into range.
   -------------------------------------------------------------------------- */

@keyframes loading-spinner {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.deferred::before {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 4rem;
	height: 4rem;
	margin: -2rem 0 0 -2rem;
	animation: loading-spinner 1s infinite linear;
	transition: opacity 0.25s ease;
	transition-delay: 0.5s;
	opacity: 0;
	z-index: -1;
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iOTZweCIgaGVpZ2h0PSI5NnB4IiB2aWV3Qm94PSIwIDAgOTYgOTYiIHpvb21BbmRQYW49ImRpc2FibGUiPjxzdHlsZT5jaXJjbGUge2ZpbGw6IHRyYW5zcGFyZW50OyBzdHJva2U6ICNmZmY7IHN0cm9rZS13aWR0aDogMS41cHg7IH08L3N0eWxlPjxkZWZzPjxjbGlwUGF0aCBpZD0iY29ybmVyIj48cG9seWdvbiBwb2ludHM9IjAsMCA0OCwwIDQ4LDQ4IDk2LDQ4IDk2LDk2IDAsOTYiIC8+PC9jbGlwUGF0aD48L2RlZnM+PGcgY2xpcC1wYXRoPSJ1cmwoI2Nvcm5lcikiPjxjaXJjbGUgY3g9IjQ4IiBjeT0iNDgiIHI9IjMyIi8+PC9nPjwvc3ZnPg==');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 3rem;
}
.deferred.loading::before { opacity: 0.35; z-index: 0; }

/* --------------------------------------------------------------------------
   6. Containers
   One set of layout rules; each style only supplies its own measurements.
   -------------------------------------------------------------------------- */

.container-component {
	--alignment: center;
	--flex-alignment: center;
	--indent-left: 1;
	--indent-right: 1;
	position: relative;
}

.container-component > .wrapper {
	position: relative;
	max-width: 100%;
	vertical-align: top;
	border-radius: inherit;
}

.container-component > .wrapper > .inner {
	position: relative;
	max-width: 100%;
	vertical-align: top;
	text-align: var(--alignment);
	padding: var(--padding-vertical) var(--padding-horizontal);
	border-radius: inherit;
}

/* -- stacked children -- */
.container-component.default > .wrapper > .inner > * {
	margin-top: var(--spacing);
	margin-bottom: var(--spacing);
}
.container-component.default > .wrapper > .inner > :first-child { margin-top: 0 !important; }
.container-component.default > .wrapper > .inner > :last-child { margin-bottom: 0 !important; }

/* -- side-by-side children -- */
.container-component.columns > .wrapper > .inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.container-component.columns > .wrapper > .inner > * {
	flex-grow: 0;
	flex-shrink: 0;
	max-width: 100%;
	text-align: var(--alignment);
	padding: 0 0 0 var(--gutters);
}
.container-component.columns > .wrapper > .inner > :first-child {
	margin-left: calc(var(--gutters) * -1);
}
.container-component.columns > .wrapper > .inner > * > * {
	margin-top: var(--spacing);
	margin-bottom: var(--spacing);
}
.container-component.columns > .wrapper > .inner > * > :first-child { margin-top: 0 !important; }
.container-component.columns > .wrapper > .inner > * > :last-child { margin-bottom: 0 !important; }

/* Every column pair on the site is an even split; the half-gutter keeps the
   two inner edges meeting on the container's centre line. */
.container-component.columns > .wrapper > .inner > :nth-child(1),
.container-component.columns > .wrapper > .inner > :nth-child(2) {
	width: calc(50% + (var(--gutters) / 2));
}

/* Stacked, the gutter has to move from between the columns to between the
   rows — split in half above and below each one, and trimmed at both ends. */
@media (max-width: 736px) {
	.container-component.columns > .wrapper > .inner {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
	}
	.container-component.columns > .wrapper > .inner > :nth-child(1),
	.container-component.columns > .wrapper > .inner > :nth-child(2) {
		width: 100% !important;
		min-height: 100% !important;
	}
	.container-component.columns > .wrapper > .inner > * {
		padding: calc(var(--gutters) * 0.5) 0 !important;
	}
	.container-component.columns > .wrapper > .inner > :first-child {
		margin-left: 0 !important;
		padding-top: 0 !important;
	}
	.container-component.columns > .wrapper > .inner > :last-child {
		padding-bottom: 0 !important;
	}
}

/* -- style-2: white full-bleed band (nav bar, contact form) ---------------- */

.container-component.style-2 {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	background-color: #FFFFFF;
}
.container-component.style-2 > .wrapper {
	max-width: var(--width);
	width: 100%;
}
.container-component.style-2 > .wrapper > .inner {
	--gutters: 1.5rem;
	--padding-horizontal: 3.875rem;
	--padding-vertical: 3.25rem;
}

@media (max-width: 736px) {
	.container-component.style-2 > .wrapper > .inner {
		--gutters: 1.5rem;
		--padding-horizontal: 0.375rem;
		--padding-vertical: 1.75rem;
	}
}
@media (max-width: 360px) {
	.container-component.style-2 > .wrapper > .inner {
		--gutters: 1.125rem;
		--padding-horizontal: 0.28125rem;
		--padding-vertical: 1.3125rem;
	}
}

/* -- style-6: hero band ---------------------------------------------------- */

.container-component.style-6 {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	background-color: #FFFFFF;
	border-color: #FFFFFF;
	border-style: solid;
	border-top-width: 9px;
	border-bottom-width: 9px;
	box-shadow: var(--band-shadow);
}
.container-component.style-6 > .wrapper {
	max-width: var(--width);
	width: 100%;
}
.container-component.style-6 > .wrapper > .inner {
	--gutters: 8.625rem;
	--spacing: 2rem;
}

@media (max-width: 736px) {
	.container-component.style-6 > .wrapper > .inner {
		--gutters: 6rem;
		--padding-horizontal: 0.25rem;
		--padding-vertical: 2rem;
		--spacing: 0.5rem;
	}
}
@media (max-width: 480px) {
	.container-component.style-6 > .wrapper > .inner { --spacing: 0.5rem; }
}
@media (max-width: 360px) {
	.container-component.style-6 > .wrapper > .inner {
		--gutters: 4.5rem;
		--padding-horizontal: 0.1875rem;
		--padding-vertical: 1.5rem;
		--spacing: 0.4375rem;
	}
}

/* -- style-8: two-column intro text --------------------------------------- */

.container-component.style-8 {
	display: flex;
	width: 100%;
	min-height: 22rem;
	align-items: flex-start;
	justify-content: center;
	background-color: #FFFFFF;
	border-color: #FFFFFF;
	border-style: solid;
	border-top-width: 9px;
	border-bottom-width: 9px;
	box-shadow: var(--band-shadow);
}
.container-component.style-8 > .wrapper {
	max-width: var(--width);
	width: 100%;
}
.container-component.style-8 > .wrapper > .inner {
	--gutters: 3.25rem;
	--spacing: 1rem;
}

@media (max-width: 736px) {
	.container-component.style-8 { min-height: 16.5rem; }
	.container-component.style-8 > .wrapper > .inner {
		--gutters: 3.25rem;
		--padding-horizontal: 1.5rem;
		--padding-vertical: 1.5rem;
		--spacing: 1rem;
	}
}
@media (max-width: 480px) {
	.container-component.style-8 > .wrapper > .inner { --spacing: 0.875rem; }
}
@media (max-width: 360px) {
	.container-component.style-8 { min-height: 11rem; }
	.container-component.style-8 > .wrapper > .inner {
		--gutters: 2.4375rem;
		--padding-horizontal: 1.125rem;
		--padding-vertical: 1.125rem;
		--spacing: 0.75rem;
	}
}

/* -- style-1: section heading plate --------------------------------------- */

.container-component.style-1:not(:last-child) { margin-bottom: 0rem !important; }
.container-component.style-1 > .wrapper {
	display: inline-block;
	width: 91rem;
	background-color: #FFFFFF;
	border-color: #FFFFFF;
	border-style: solid;
	border-top-width: 9px;
	border-bottom-width: 9px;
	box-shadow: var(--band-shadow);
	border-radius: 1rem;
}
.container-component.style-1 > .wrapper > .inner {
	--gutters: 8.625rem;
	--spacing: 2rem;
	border-radius: calc(1rem - 9px);
}

@media (max-width: 736px) {
	.container-component.style-1 > .wrapper > .inner {
		--gutters: 6rem;
		--spacing: 2rem;
	}
}
@media (max-width: 480px) {
	.container-component.style-1 > .wrapper > .inner { --spacing: 1.75rem; }
}
@media (max-width: 360px) {
	.container-component.style-1 > .wrapper > .inner {
		--gutters: 4.5rem;
		--spacing: 1.5rem;
	}
}

/* -- style-4 / .card: the entry cards used throughout the CV ---------------- */

.container-component.style-4:not(:first-child),
.container-component.card:not(:first-child) { margin-top: 1.375rem !important; }

.container-component.style-4 > .wrapper,
.container-component.card > .wrapper {
	display: block;
	margin: 0 auto;
	width: 53rem;
	background-color: var(--card-bg);
	border: solid 1px var(--card-border);
	box-shadow: var(--card-shadow);
	border-radius: var(--card-radius);
}
.container-component.style-4 > .wrapper > .inner,
.container-component.card > .wrapper > .inner {
	--gutters: 5.25rem;
	--padding-vertical: 2rem;
	border-radius: calc(var(--card-radius) - 1px);
}

/* The five cards that carry a photo breathe more at top and bottom. */
.container-component.card.tall > .wrapper > .inner { --padding-vertical: 6.625rem; }

@media (max-width: 736px) {
	.container-component.style-4:not(:first-child),
	.container-component.card:not(:first-child) { margin-top: 1.03125rem !important; }
	.container-component.style-4 > .wrapper > .inner,
	.container-component.card > .wrapper > .inner {
		--gutters: 2.125rem;
		--padding-vertical: 2rem;
	}
	.container-component.card.tall > .wrapper > .inner { --padding-vertical: 3.5rem; }
}
@media (max-width: 360px) {
	.container-component.style-4 > .wrapper > .inner,
	.container-component.card > .wrapper > .inner {
		--gutters: 2.125rem;
		--padding-vertical: 1.5rem;
	}
	.container-component.card.tall > .wrapper > .inner { --padding-vertical: 2.625rem; }
}

/* --------------------------------------------------------------------------
   7. Text
   -------------------------------------------------------------------------- */

.text-component {
	position: relative;
	direction: var(--site-language-direction);
	color: var(--ink);
	font-family: var(--font-display);
}
.text-component span.p { display: block; position: relative; }
.text-component span[style], .text-component strong, .text-component a,
.text-component code, .text-component mark {
	-webkit-text-fill-color: currentcolor;
}
.text-component a { text-decoration: underline; }
.text-component a:hover { text-decoration: none; }
.text-component mark { color: var(--accent-mark); background-color: transparent; }
.text-component span.p:nth-child(n + 2) { margin-top: 1rem; }

/* style-2 — section titles */
.text-component.style-2 {
	text-align: center;
	text-transform: uppercase;
	width: 100%;
	font-size: 4.5em;
	line-height: 1;
	font-weight: 700;
	letter-spacing: -0.2rem;
}
.text-component.style-2 u {
	text-decoration: none;
	box-shadow: inset 0 -0.625em 0 0 rgba(43, 227, 205, 0.149);
}
.text-component.style-2 span.p:nth-child(n + 2) { margin-top: 0.5rem; }

/* style-3 — the wide-tracked eyebrow ("BRUXELLES") */
.text-component.style-3,
.text-component.instance-60 {
	text-transform: uppercase;
	width: calc(100% + 0.5rem);
	font-size: 0.75em;
	line-height: 2;
	font-weight: 300;
	letter-spacing: 0.5rem;
}
/* The footer email keeps the eyebrow's metrics but stays sentence case. It is
   a real mailto link here, styled to read as the plain text it replaces. */
.text-component.instance-60 { text-transform: none; }
.text-component.instance-60 a { color: inherit; text-decoration: none; }
.text-component.instance-60 a:hover { text-decoration: underline; }

/* style-4 — the two intro paragraphs */
.text-component.style-4 {
	text-align: justify;
	width: calc(100% + 0.05rem);
	font-size: 1.125em;
	line-height: 2;
	font-weight: 300;
	letter-spacing: 0.05rem;
}

/* style-5 — the year on each card */
.text-component.style-5 {
	text-transform: uppercase;
	width: calc(100% + 0.05rem);
	font-size: 1.25em;
	line-height: 1.625;
	font-weight: 700;
	letter-spacing: 0.05rem;
}

/* style-6 — hero headline */
.text-component.style-6 {
	text-align: center;
	width: 100%;
	font-size: 4.5em;
	line-height: 0.875;
	font-weight: 700;
	text-indent: 0.125rem;
	letter-spacing: -0.025rem;
}
.text-component.style-6 span.p:nth-child(n + 2) { margin-top: 0.5rem; }

/* style-11 / style-12 — the language list in the footer */
.text-component.style-11 {
	text-transform: uppercase;
	width: calc(100% + 0.05rem);
	font-size: 0.875em;
	line-height: 1.125;
	font-weight: 700;
	letter-spacing: 0.05rem;
}
.text-component.style-12 {
	text-transform: uppercase;
	width: calc(100% + 0.5rem);
	font-size: 0.75em;
	line-height: 1.5;
	font-weight: 300;
	letter-spacing: 0.5rem;
}

/* style-13 — card body copy */
.text-component.style-13 {
	text-align: center;
	width: calc(100% + 0.05rem);
	font-size: 1.125em;
	line-height: 1.375;
	font-weight: 200;
	letter-spacing: 0.05rem;
}

@media (max-width: 736px) {
	.text-component.style-2 { font-size: 2.75em; letter-spacing: -0.175rem; }
	.text-component.style-3,
	.text-component.instance-60 {
		width: calc(100% + 0.4375rem);
		letter-spacing: 0.4375rem;
	}
	.text-component.style-4,
	.text-component.style-5,
	.text-component.style-11,
	.text-component.style-13 {
		width: calc(100% + 0.04375rem);
		letter-spacing: 0.04375rem;
	}
	.text-component.style-6 {
		font-size: 2.125em;
		text-indent: 0.09375rem;
		letter-spacing: -0.021875rem;
	}
	.text-component.style-12 {
		width: calc(100% + 0.4375rem);
		letter-spacing: 0.4375rem;
	}
}

/* --------------------------------------------------------------------------
   8. Buttons
   -------------------------------------------------------------------------- */

.buttons-component {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: var(--flex-alignment);
	cursor: default;
	letter-spacing: 0;
	padding: 0;
}
.buttons-component > li { max-width: 100%; text-align: var(--alignment); }

.buttons-component > li > a {
	display: inline-block;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	height: 2.5rem;
	line-height: 2.5rem;
	padding: 0 0.5rem 0 calc(0.275rem + 0.5rem);
	vertical-align: middle;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	direction: var(--site-language-direction);
	font-family: var(--font-display);
	font-size: 0.625em;
	font-weight: 500;
	letter-spacing: 0.275rem;
	border-radius: 0.875rem;
	background-color: var(--ink);
	color: var(--ink-invert);
	transition: transform 0.25s ease, color 0.25s ease,
	            background-color 0.25s ease, border-color 0.25s ease;
}
.buttons-component > li > a:hover { transform: scale(0.975); }

/* style-2 — the top navigation */
.buttons-component.style-2 { gap: 0.625rem; }
.buttons-component.style-2:not(:first-child) { margin-top: 6rem !important; }
.buttons-component.style-2:not(:last-child) { margin-bottom: 6rem !important; }
.buttons-component.style-2 > li > a { width: 9.25rem; }

/* style-1 — the outbound link on each card */
.buttons-component.style-1 { gap: 0rem; }
.buttons-component.style-1:not(:first-child) { margin-top: 0.25rem !important; }
.buttons-component.style-1:not(:last-child) { margin-bottom: 0.25rem !important; }
.buttons-component.style-1 > li > a { width: 13.625rem; }

@media (max-width: 736px) {
	.buttons-component.style-2 { gap: 0.5rem; }
	.buttons-component.style-2:not(:first-child) { margin-top: 2.625rem !important; }
	.buttons-component.style-2:not(:last-child) { margin-bottom: 2.625rem !important; }
	.buttons-component.style-1 { gap: 0.5rem; }
	.buttons-component.style-1:not(:first-child) { margin-top: 0.1875rem !important; }
	.buttons-component.style-1:not(:last-child) { margin-bottom: 0.1875rem !important; }
}
@media (max-width: 360px) {
	.buttons-component.style-2, .buttons-component.style-1 { gap: 0.375rem; }
}

/* --------------------------------------------------------------------------
   9. Images
   -------------------------------------------------------------------------- */

.image-component {
	display: block;
	line-height: 0;
	max-width: 100%;
	position: relative;
}
.image-component > .frame {
	display: inline-block;
	color: inherit;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	vertical-align: top;
	backface-visibility: hidden;
	transform: translate3d(0, 0, 0);
	border-radius: 0.875rem;
	transition: none;
}
.image-component > .frame > img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100%;
	object-fit: cover;
	object-position: center;
	vertical-align: top;
	border-radius: 0 !important;
	transition: none;
}

/* Each photo is cropped to its own band, and the band gets shorter as the
   layout narrows so the crop never swallows the card. */
.image-component.style-1:not(:first-child) { margin-top: 2.75rem !important; }
.image-component.style-1:not(:last-child) { margin-bottom: 2.75rem !important; }
.image-component.style-1 > .frame { width: 68.75rem; height: 27.5rem; }

.image-component.instance-1,
.image-component.instance-2,
.image-component.instance-3 { text-align: left; }

.image-component.instance-1 > .frame { width: 92.625rem; height: 9.25rem; }
.image-component.instance-2 > .frame { width: 92.625rem; height: 21.5rem; }
.image-component.instance-3 > .frame { width: 97.5rem; height: 15.875rem; }

@media (max-width: 736px) {
	.image-component.style-1:not(:first-child) { margin-top: 2.125rem !important; }
	.image-component.style-1:not(:last-child) { margin-bottom: 2.125rem !important; }
	.image-component.style-1 > .frame { height: 34.375rem !important; }
	.image-component.instance-1 > .frame { height: 11.5625rem !important; }
	.image-component.instance-2 > .frame { height: 12.65625rem !important; }
	.image-component.instance-3 > .frame { height: 9.6875rem !important; }
}
@media (max-width: 480px) {
	.image-component.style-1 > .frame { height: 27.5rem !important; }
	.image-component.instance-1 > .frame { height: 9.25rem !important; }
	.image-component.instance-2 > .frame { height: 10.125rem !important; }
	.image-component.instance-3 > .frame { height: 7.75rem !important; }
}
@media (max-width: 360px) {
	.image-component.style-1 > .frame { height: 24.0625rem !important; }
	.image-component.instance-1 > .frame { height: 8.09375rem !important; }
	.image-component.instance-2 > .frame { height: 8.859375rem !important; }
	.image-component.instance-3 > .frame { height: 6.78125rem !important; }
}

/* --------------------------------------------------------------------------
   10. Lists
   -------------------------------------------------------------------------- */

.list-component {
	display: block;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 1em;
	line-height: 1.25;
	font-weight: 200;
	letter-spacing: 0.1rem;
}
.list-component > ul {
	display: inline-block;
	width: 22rem;
	max-width: 100%;
	text-align: var(--site-language-alignment);
	vertical-align: middle;
}
.list-component > ul > li {
	display: flex;
	position: relative;
	direction: var(--site-language-direction);
	margin-top: 0.5rem;
}
.list-component > ul > li:first-child { margin-top: 0 !important; }

/* The bullet is drawn as a background so it can sit on the text's optical
   centre (60%) rather than the line box's. */
.list-component > ul > li::before {
	content: '';
	display: block;
	order: 1;
	flex-grow: 0;
	flex-shrink: 0;
	position: relative;
	height: 1.25rem;
	line-height: 1.25rem;
	min-width: 0.5859375rem;
	background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2040%2040%22%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2210%22%20fill%3D%22%23000000%22%20%2F%3E%3C%2Fsvg%3E');
	background-position: left 60%;
	background-repeat: no-repeat;
	background-size: contain;
	border-radius: 0.5rem;
	font-variant: normal !important;
	letter-spacing: 0 !important;
}
.list-component > ul > li::after {
	content: '';
	display: block;
	order: 2;
	flex-grow: 0;
	flex-shrink: 0;
	width: 0.625rem;
	pointer-events: none;
}
.list-component > ul > li > p { order: 3; flex-grow: 1; flex-shrink: 1; }

.list-component mark { color: var(--accent-mark); background-color: transparent; }
.list-component u { text-decoration-color: rgba(43, 227, 205, 0.149); }
.list-component a { color: var(--ink-muted); text-decoration: none; }
.list-component a:hover { color: #0D0D0D; }

/* the KiosKup credit line runs narrower than the rest */
.list-component.instance-31 > ul { width: 14rem; }

@media (max-width: 736px) {
	.list-component {
		letter-spacing: 0.0875rem;
		padding-left: calc(2.5rem * var(--indent-left));
		padding-right: calc(2.5rem * var(--indent-right));
	}
}

/* --------------------------------------------------------------------------
   11. Dividers
   -------------------------------------------------------------------------- */

.divider-component {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	min-height: 1rem;
	padding: 0;
	position: relative;
	width: 100%;
}
.divider-component::before {
	content: '';
	background-color: var(--rule);
	border-radius: 0;
}

/* style-2 / instance-38 — the short vertical tick between cards */
.divider-component.style-2::before,
.divider-component.instance-38::before { width: 1px; height: 1rem; }
.divider-component.instance-38:not(:first-child) { margin-top: 2.25rem !important; }
.divider-component.instance-38:not(:last-child) { margin-bottom: 2.25rem !important; }

/* style-3 — the horizontal rule inside a card */
.divider-component.style-3::before { width: 12rem; height: 1px; }
.divider-component.style-3:not(:first-child) { margin-top: 3.125rem !important; }
.divider-component.style-3:not(:last-child) { margin-bottom: 3.125rem !important; }

/* style-1 — the long drop into the footer */
.divider-component.style-1::before { width: 1px; height: 7rem; }
.divider-component.style-1:not(:first-child) { margin-top: 4rem !important; }
.divider-component.style-1:not(:last-child) { margin-bottom: 4rem !important; }

@media (max-width: 736px) {
	.divider-component.style-3:not(:first-child),
	.divider-component.style-1:not(:first-child),
	.divider-component.instance-38:not(:first-child) { margin-top: 2rem !important; }
	.divider-component.style-3:not(:last-child),
	.divider-component.style-1:not(:last-child),
	.divider-component.instance-38:not(:last-child) { margin-bottom: 2rem !important; }
}

/* --------------------------------------------------------------------------
   12. Social icons
   -------------------------------------------------------------------------- */

.icons-component {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--flex-alignment);
	font-size: 1.375em;
	gap: 1rem;
	letter-spacing: 0;
	padding: 0;
}
.icons-component > li { position: relative; z-index: 1; }
.icons-component > li > a {
	display: flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	width: 2em;
	height: 2em;
	border: solid 1px rgba(0, 0, 0, 0.122);
	border-radius: 100%;
	transition: transform 0.25s ease, color 0.25s ease,
	            background-color 0.25s ease, border-color 0.25s ease;
}
.icons-component > li > a > svg {
	display: block;
	width: 60%;
	height: 60%;
	position: relative;
	fill: var(--ink);
	pointer-events: none;
	transition: fill 0.25s ease;
}
.icons-component > li > a > .label { display: none; }
.icons-component > li > a:hover { transform: translateY(-20%); }

@media (max-width: 360px) { .icons-component { gap: 0.75rem; } }

/* --------------------------------------------------------------------------
   13. Footer credit link
   -------------------------------------------------------------------------- */

.links-component {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: var(--flex-alignment);
	gap: 0.5rem;
	line-height: 1.5;
	padding: 0;
	font-family: var(--font-display);
	font-size: 1em;
	font-weight: 200;
	letter-spacing: 0.1rem;
	margin-right: -0.1rem;
}
/* The credit keeps its bottom margin even as the last element on the page —
   it collapses out of the footer and becomes the page's closing space. */
.links-component:not(:first-child) { margin-top: 5.125rem !important; }
.site-main > .inner > footer > .links-component { margin-bottom: 5.125rem !important; }
.links-component > li { position: relative; text-align: var(--alignment); }
.links-component > li > a {
	display: block;
	direction: var(--site-language-direction);
	color: var(--ink-muted-strong);
	text-decoration: none;
	transition: color 0.25s ease;
}
.links-component > li > a:hover { color: var(--ink); }

@media (max-width: 736px) {
	.links-component { letter-spacing: 0.0875rem; margin-right: -0.0875rem; }
	.links-component:not(:first-child) { margin-top: 2.625rem !important; }
	.site-main > .inner > footer > .links-component { margin-bottom: 2.625rem !important; }
}
@media (max-width: 360px) { .links-component { gap: 0.375rem; } }

/* --------------------------------------------------------------------------
   14. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}