:root {
	color-scheme: light dark;

	--color--pink: 0 36% 85%;
	--color--purple: 257 8% 17%;

	--color--content: light-dark(#000000, #FFFFFF);
	--color--background: light-dark(hsl(var(--color--pink)), hsl(var(--color--purple)));

	--color--action-content: light-dark(hsl(var(--color--purple)), hsl(var(--color--pink)));
	--color--action-background: light-dark(hsl(var(--color--pink) / 0.1), hsl(var(--color--purple) / 0.1));
	--color--action-background--hover: light-dark(hsl(var(--color--purple) / 0.2), hsl(var(--color--pink) / 0.2));
	--color--action-border: light-dark(hsl(var(--color--purple) / 0.4), hsl(var(--color--pink) / 0.4));
	
	--color--content--invisible: light-dark(#00000000, #FFFFFF00);
	--color--action-content--invisible: light-dark(hsl(var(--color--purple) / 0), hsl(var(--color--pink) / 0));

	--duration--interactive: 100ms;
	--duration--standard: 200ms;
	--duration--page: 300ms;

	--font-weight--light: 300;
	--font-weight--normal: 400;
	--font-weight--bold: 700;

	--line-height--normal: 1.25;
	--line-height--even: 1;

	--font-size--small: max(0.75rem, 14px);
	--font-size--normal: 1rem;
	--font-size--large: 1.5rem;
	--font-size--xlarge: 2rem;
	--font-size--xxlarge: 3rem;

	--spacing--accessible--quarterx: 0.25rem;
	--spacing--accessible--halfx: 0.5rem;
	--spacing--accessible--1x: 1rem;
	--spacing--accessible--2x: 1.5rem;
	--spacing--accessible--3x: 2rem;
	--spacing--accessible--4x: 2.5rem;
	--spacing--accessible--5x: 3rem;
	--spacing--accessible--6x: 3.5rem;
	--spacing--accessible--7x: 4rem;

	--max-inline-size: 36rem;
	--logo--max-inline-size: 15rem;
}

@view-transition {
  navigation: auto;
}

@font-face {
	font-family: "Averia Serif Libre";
	font-weight: 300;
	font-style: normal;
	src: url('/fonts/AveriaSerifLibre-Light.ttf') format('truetype');
}

@font-face {
	font-family: "Averia Serif Libre";
	font-weight: 400;
	font-style: normal;
	src: url('/fonts/AveriaSerifLibre-Regular.ttf') format('truetype');
}

@font-face {
	font-family: "Averia Serif Libre";
	font-weight: 700;
	font-style: normal;
	src: url('/fonts/AveriaSerifLibre-Bold.ttf') format('truetype');
}

@font-face {
	font-family: "Averia Serif Libre";
	font-weight: 300;
	font-style: italic;
	src: url('/fonts/AveriaSerifLibre-LightItalic.ttf') format('truetype')
}

@font-face {
	font-family: "Averia Serif Libre";
	font-weight: 400;
	font-style: italic;
	src: url('/fonts/AveriaSerifLibre-Italic.ttf') format('truetype')
}

@font-face {
	font-family: "Averia Serif Libre";
	font-weight: 700;
	font-style: italic;
	src: url('/fonts/AveriaSerifLibre-BoldItalic.ttf') format('truetype')
}

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

html {
	background-color: var(--color--background);
	font-size: clamp(16px, 1.25vw, 24px);
}

body {
	margin: 0;
	padding: var(--spacing--accessible--1x);
	display: flex;
	flex-direction: column;
	gap: var(--spacing--accessible--7x);

	font-family: "Averia Serif Libre", serif;
	font-size: var(--font-size--normal);
	font-weight: var(--font-weight--light);
	line-height: var(--line-height--normal);
	color: var(--color--content);
	background-color: var(--color--background);

	transition: padding var(--duration--standard);

	@media screen and (min-width: 48rem) {
		padding: var(--spacing--accessible--2x);
	}
}

header {
	display: flex;
	flex-direction: column;
	gap: var(--spacing--accessible--7x);

	line-height: var(--line-height--even);

	a {
		padding: 0.15em 0.25em;
		border-radius: 0.2em;

		transition: background-color var(--duration--interactive);

		&:hover,
		&:focus-visible {
			background-color: var(--color--action-background--hover);
		}
	}

	#top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		gap: var(--spacing--accessible--2x);

		#page-home & {
			justify-content: flex-end;
		}
	}

	#decor {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--spacing--accessible--7x);
	}

	h1 {
		margin: 0;
		padding: 0;
		view-transition-name: title;
	}

	#primary-navigation {
		ul {
			display: flex;
			flex-direction: row;
			gap: var(--spacing--accessible--1x);
		}
	}
}

#primary-navigation {
	view-transition-name: primary-navigation;

	#page-home & {
		font-size: var(--font-size--xlarge);
	}
}

#language-selector {
	text-align: end;

	ul {
		display: flex;
		flex-direction: column;
		gap: var(--spacing--accessible--quarterx);
	}
}

nav {
	ul, ol {
		&, & > li {
			list-style: none;
			margin: 0;
			padding: 0;
		}
	}
}

main {
	inline-size: 100%;
	max-inline-size: var(--max-inline-size);
	margin-inline: auto;

	display: flex;
	flex-direction: column;
	gap: var(--spacing--accessible--5x);
}

footer {
	max-inline-size: var(--max-inline-size);
	margin: var(--spacing--accessible--7x) auto 0;

	font-size: var(--font-size--small);
}

h1 {
	font-size: var(--font-size--large);
	font-weight: var(--font-weight--bold);
}

h2 {
	font-size: var(--font-size--large);
	font-weight: var(--font-weight--bold);
}

h3 {
	font-size: var(--font-size--normal);
	font-weight: var(--font-weight--bold);
}

a {
	color: var(--color--action-content);

	transition: text-decoration-color var(--duration--interactive);

	&:hover,
	&:focus-visible {
		text-decoration-color: var(--color--action-content--invisible);
	}

	&:visited {
		color: var(--color--action-border);
	}

	&[aria-current="page"] {
		text-decoration-color: var(--color--content);
		text-decoration-style: wavy;

		&:hover,
		&:focus-visible {
			text-decoration-color: var(--color--content--invisible);
		}
	}
}

strong {
	font-weight: var(--font-weight--bold);
}

abbr {
	cursor: help;
}

.intro {
	font-size: var(--font-size--xlarge);
}

.logo,
h1:has(.logo),
a:has(.logo) {
	display: block;
	aspect-ratio: 140 / 23;
	inline-size: 100%;
	block-size: auto;
	max-inline-size: var(--logo--max-inline-size);
}

.shoreline-photo {
	display: block;
	aspect-ratio: 600 / 140;
	inline-size: 100%;
	block-size: auto;
	max-inline-size: calc(var(--max-inline-size) * 1.75);
	max-block-size: 50vh;
	object-fit: cover;
	margin-inline: auto;
	view-transition-name: shoreline-photo;
}

@media screen and (max-width: 48rem) {
	.hide-on-mobile {
		display: none;
	}
}

#page-home {
	--logo--max-inline-size: 25rem;
}