@font-face {
	font-family: 'Leafy';
	src: url('./../fonts/leafy/leafy-regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Barlow-fallback';
	size-adjust: 96.7%;
	src: local('Arial');
}

@font-face {
	font-family: 'Barlow';
	src: url('./../fonts/barlow/barlow-regular-webfont.woff2') format('woff2'),
		 url('./../fonts/barlow/barlow-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Barlow';
	src: url('./../fonts/barlow/barlow-medium-webfont.woff2') format('woff2'),
		 url('./../fonts/barlow/barlow-medium-webfont.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Barlow';
	src: url('./../fonts/barlow/barlow-italic-webfont.woff2') format('woff2'),
		 url('./../fonts/barlow/barlow-italic-webfont.woff') format('woff');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Barlow';
	src: url('./../fonts/barlow/barlow-mediumitalic-webfont.woff2') format('woff2'),
		 url('./../fonts/barlow/barlow-mediumitalic-webfont.woff') format('woff');
	font-weight: bold;
	font-style: italic;
	font-display: swap;
}

/* ---------------- */

@property --degree {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

/* ---------------- */

@keyframes set-scheme {
	from,
	50% {
		--scheme: light;
	}

	to {
		--scheme: dark;
	}
}

@keyframes set-scheme-dark-preferred {
	50% {
		--scheme: light;
	}

	from,
	to {
		--scheme: dark;
	}
}

@keyframes click-me {
	from,
	2.5% {
		transform: translate3d(0, 0, 0) rotate(0deg);
	}

	0.25%,
	2.25% {
		transform: translate3d(-1px, 0, 0) rotate(-2deg);
	}

	0.5%,
	2% {
		transform: translate3d(2px, 0, 0) rotate(3deg);
	}

	0.75%,
	1.25%,
	1.75% {
		transform: translate3d(-4px, 0, 0) rotate(-5deg);
	}

	1%,
	1.5% {
		transform: translate3d(4px, 0, 0) rotate(8deg);
	}
}

@keyframes glow {
	from {
		--degree: 0deg;
		filter: blur(4px) drop-shadow(0 0 4px var(--color-celestial-glow));
	}

	50% {
		filter: blur(2px) drop-shadow(0 0 10px var(--color-celestial-glow));
	}

	to {
		--degree: 360deg;
		filter: blur(4px) drop-shadow(0 0 4px var(--color-celestial-glow));
	}
}

@keyframes scale-clouds {
	from {
		scale: 1;
	}

	to {
		scale: 2;
	}
}

@keyframes fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes celestial {
	from {
		opacity: 0;
		--degree: -30deg;
	}

	to {
		opacity: 1;
		--degree: 0deg;
	}
}

/* ---------------- */

* {
	outline-color: darkgreen;
	outline-offset: 3px;
	transition-property: background-color, filter;
	transition-duration: 600ms;
}

html, table, input, select, textarea {
	font-family: 'Barlow', 'Barlow-fallback', Arial, Helvetica, sans-serif;
}

html {
	--scheme: light;

	--color-accent-rgb: 117, 76, 36;
	--color-sky: #d3f2f9;
	--color-celestial-body: #fff;
	--color-celestial-glow: #ffdf8d;

	@supports (color: color(display-p3 1 1 1)) {
		--color-sky: #d3f2f9;
		--color-celestial-body: color(display-p3 1 1 1);
		--color-celestial-glow: color(display-p3 1.000000 0.874510 0.552941);
	}

	margin: 0;
	padding: 0;
	accent-color: rgb(var(--color-accent-rgb));
	line-height: 1.35;
	hyphens: auto;
	hyphenate-limit-chars: 10 4 4;
	scroll-behavior: smooth;
	scrollbar-gutter: stable;
	scroll-padding-bottom: 25vw;
	timeline-scope: --head-timeline;
	animation: set-scheme 1ms steps(3);
	animation-timeline: --head-timeline;

	@media (prefers-reduced-motion: no-preference) {
		animation: set-scheme 1ms steps(3), fade-in 2s ease-out;
		animation-timeline: --head-timeline, auto;
	}

	@media (prefers-color-scheme: dark) {
		--scheme: dark;

		animation-name: set-scheme-dark-preferred;
	}
}

html::before,
html::after {
	position: fixed;
	z-index: 3;
	right: 0;
	left: 0;
	width: 100%;
	height: auto;
	pointer-events: none;
	filter: drop-shadow(0 0 2px var(--color-celestial-body));

	@container style(--scheme: dark) {
		filter: sepia(0.25) hue-rotate(147deg) brightness(0.25) drop-shadow(-1px -1px 2px rgba(255, 255, 255, 0.5));
	}
}

html::before {
	content: url('./../images/landscape-top-part.svg');
	top: 0;
}

html::after {
	content: url('./../images/landscape-bottom-part.svg');
	bottom: -7.5vw;
}

head {
	position: relative;
	z-index: 5;
	display: block;
	overflow-x: scroll;
	scroll-snap-type: x mandatory;
	scroll-timeline-name: --head-timeline;
	scroll-timeline-axis: x;
	scroll-timeline-axis: inline;
	scroll-marker-group: after;
	scroll-behavior: auto;
	margin-top: -3rem;
	opacity: 0;
	font-size: 0;
	white-space: nowrap;
}

head::scroll-marker-group {
	position: fixed;
	z-index: 5;
	top: 1rem;
	left: 50%;
	display: flex;
	gap: 0.25rem;
	transform: translateX(-50%);
}

meta::scroll-marker {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0.25rem;
	border-radius: 3px;
	font-size: 0;
	filter: drop-shadow(.5px .5px 0 #fff) drop-shadow(.5px -.5px 0 #fff) drop-shadow(-.5px .5px 0 #fff) drop-shadow(-.5px -.5px 0 #fff);

	@container style(--scheme: dark) {
		filter: invert(1) drop-shadow(.5px .5px 0 #000) drop-shadow(-.5px .5px 0 #000) drop-shadow(.5px -.5px 0 #000) drop-shadow(-.5px -.5px 0 #000);
	}
}

meta::scroll-marker:target-current {
	background: var(--color-celestial-body);
}

meta:nth-of-type(1),
meta:nth-of-type(2),
meta:nth-of-type(3) {
	display: inline-block;
	width: 100vw;
	height: 1lh;
	border: 1px solid currentColor;
	font-size: 1rem;
	text-align: center;
	scroll-snap-align: center;
}

meta:nth-of-type(1)::scroll-marker {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.5 2.52267C6.13332 2.64713 4.86254 3.27802 3.9372 4.29146C3.01186 5.3049 2.49882 6.62766 2.49882 8C2.49882 9.37234 3.01186 10.6951 3.9372 11.7085C4.86254 12.722 6.13332 13.3529 7.5 13.4773V2.52267ZM1.5 8C1.5 4.41 4.41 1.5 8 1.5C11.59 1.5 14.5 4.41 14.5 8C14.5 11.59 11.59 14.5 8 14.5C4.41 14.5 1.5 11.59 1.5 8Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E") / 'automatic light or dark mode';
}

meta:nth-of-type(2)::scroll-marker {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='2 2 20 20' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z' /%3E%3C/svg%3E") / 'light mode';
}

meta:nth-of-type(3)::scroll-marker {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z' /%3E%3C/svg%3E") / 'dark mode';
}

body {
	max-width: 40rem;
	margin: 0 auto;
	padding: 10vh 2rem 30vh;
	background: var(--color-sky);
	color: #000;

	@container style(--scheme: dark) {
		background-color: #001c40;
		color: #ddd;
	}
}

body::before,
body::after {
	content: '';
	position: fixed;
	z-index: 1;
}

body::before {
	content: 'A bright, stylized landscape with rolling green hills, trees, and a large sun in the sky. Decorative drop caps begin the paragraphs.';
	position: fixed;
	z-index: 1;
	top: 5vh;
	left: 70vw;
	width: 20vmax;
	height: 20vmax;
	background-color: var(--color-celestial-body);
	border-radius: 50%;
	box-shadow: 0 0 1vmax var(--color-celestial-glow), 0 0 50vmax var(--color-celestial-glow), 0 0 35vmax var(--color-celestial-glow);
	font-size: 0;
	transform-origin: 20vw 80vmax;
	rotate: var(--degree);

	@media (prefers-reduced-motion: no-preference) {
		animation-name: celestial;
		animation-duration: 2000ms;
		animation-timing-function: ease-out;
		animation-fill-mode: both;
	}

	@container style(--scheme: dark) {
		--color-celestial-glow: #000;
		content: 'A nighttime illustration with rolling hills, silhouetted trees, and a large glowing moon in a deep blue sky. Decorative drop caps begin the paragraphs.';
		background-image: radial-gradient(circle at 60% 60%, transparent 50%, rgba(255, 255, 255, 1) 120%),
			radial-gradient(circle at 40% 40%, transparent 50%, rgba(0, 0, 0, 1) 110%),
			radial-gradient(circle at top left, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.75) 100%),
			radial-gradient(circle at bottom, rgba(10, 35, 66, 0.4) 30%, transparent 70%),
			radial-gradient(circle at bottom, rgba(40, 62, 81, 0.15) 0%, rgba(10, 35, 66, 0.2) 100%),
			radial-gradient(circle at top left, rgba(171, 227, 255, 0.75) 0%, rgba(0, 0, 0, 0.5) 90%),
			linear-gradient(to left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 100%);
		background-size: 180%, 100%, 100%, 100%, 100%, 100%, 100%;
		background-position: 50%, 50%, 50%, 50%, 50%, 50%, 50%;
		filter: invert(1) brightness(0.7);
	}
}

body::after {
	content: url('./../images/landscape-clouds.svg');
	top: 50%;
	left: 0;
	width: 102vw;
	height: auto;
	translate: 0 -50%;
	pointer-events: none;

	@media (prefers-reduced-motion: no-preference) {
		animation-name: scale-clouds;
		animation-duration: 300s;
		animation-timing-function: ease-out;
	}

	@container style(--scheme: dark) {
		filter: brightness(0.35) contrast(1.5);
	}
}

body > * {
	position: relative;
	z-index: 2;
}

header {
	z-index: 3;
}

aside {
	margin: 1em 0;
	margin-block: 1em;
	padding: 1rem;
	background-color: rgba(var(--color-accent-rgb), 0.25);
	background-color: color-mix(in srgb, rgb(var(--color-accent-rgb)) 25%, white 90%);
	border-left: 0.5rem solid rgb(var(--color-accent-rgb));
	border-inline-start: 0.5rem solid rgb(var(--color-accent-rgb));

	@container style(--scheme: dark) {
		background-color: color-mix(in srgb, rgb(var(--color-accent-rgb)) 25%, black 90%);
	}
}

aside::after {
	content: '';
	display: block;
	clear: both;
}

aside > :first-child {
	margin-top: 0;
	margin-block-start: 0;
}

:is(h2, h2, h3, h4, h5, h6) {
	line-height: 1.2;
}

:is(h2, h2, h3, h4, h5, h6) {
	margin-top: 1.5em;
}

:is(h1, h2, h2, h3, h4, h5, h6, summary) + p:first-letter {
	float: left;
	margin-right: 0.1em;
	margin-inline-end: 0.1em;
	font-family: serif;
	font-size: 300%;
	font-size: 3lh;
	font-weight: normal;
	line-height: 1;
}

:is(h1, h2, h2, h3, h4, h5, h6, summary) + p::after {
	content: '';
	display: block;
	clear: both;
}

h1 {
	--color-contrast: #fff;
	font-family: 'Leafy', serif;
	font-size: 5rem;
	font-size: clamp(3rem, 10vw, 5rem);
	font-weight: normal;
	line-height: 1;
	text-align: center;
	text-shadow: .5px .5px 0 var(--color-contrast), -.5px .5px 0 var(--color-contrast), .5px -.5px 0 var(--color-contrast), -.5px -.5px 0 var(--color-contrast);

	@container style(--scheme: dark) {
		--color-contrast: #000;
	}
}

h1 + p {
	font-size: 1.25rem;
	font-size: clap(1rem, 1.25rem, 3vw);
	font-weight: bold;
}

p {
	clear: both;
}

img {
	max-width: 100%;
	height: auto;
	border-radius: 1rem;
}

#sessions ul {
	--sessions-img-size: 25vmin;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: flex-start;
	justify-content: space-between;
	margin: 4rem 0;
	padding: 0;
}

#sessions li {
	--sibling-index: sibling-index();

	flex: 0 0 var(--sessions-img-size);
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: 1fr;
	gap: 1rem;
	align-items: center;
	justify-content: center;
	reading-flow: grid-columns;
	min-width: 0;
}

#sessions li::before {
	content: '';
	width: calc(var(--sessions-img-size) + 1rem);
	height: calc(var(--sessions-img-size) + 1rem);
	color: var(--color-celestial-body);
	background: currentColor;
	translate: calc(cos(var(--degree)) * 0.25rem) calc(sin(var(--degree)) * 0.25rem);

	@media (prefers-reduced-motion: no-preference) {
		animation: glow 4s linear infinite;
		animation-delay: calc(var(--sibling-index) * 500ms);
	}
}

#sessions li::before,
#sessions img {
	grid-row: 1;
	grid-column: 1;
	margin: auto;
	border-radius: 50%;
}

#sessions img {
	width: var(--sessions-img-size);
	height: var(--sessions-img-size);
	object-fit: cover;
	filter: sepia(40%);
}

#sessions a {
	order: 99;
	overflow-wrap: anywhere;
	text-align: center;
}

summary {
	clear: both;
	padding: .5rem 0;
	font-weight: bold;
	cursor: pointer;
}

summary + p {
	margin-top: -.25rem;
}

::details-content {
	transition: height 0.2s ease, content-visibility 0.5s ease allow-discrete;
	height: 0;
	overflow: clip;
}

/* Browser supports interpolate-size */
@supports (interpolate-size: allow-keywords) {
	:root {
		interpolate-size: allow-keywords;
	}

	[open]::details-content {
		height: auto;
	}
}

/* Fallback for browsers with no interpolate-size support */
@supports not (interpolate-size: allow-keywords) {
	[open]::details-content {
		height: auto;
	}
}

a {
	color: rgb(var(--color-accent-rgb));
	font-weight: bold;

	@container style(--scheme: dark) {
		filter: brightness(1.5);
	}
}

a::before {
	display: inline-block;
	width: 1.35em;
	height: 1.35em;
	margin-right: 0.25rem;
	background-color: currentColor;
	mask-size: cover;
	vertical-align: bottom;
}

a[href^="https://gath.io"] {
	display: flex;
	align-items: center;
	width: fit-content;
	margin: 2.5rem auto;
	padding: 0.25em 1em;
	background-color: rgb(var(--color-accent-rgb));
	color: #fff;
	color: color-mix(in srgb, rgb(var(--color-accent-rgb)) 10%, white 90%);
	border-radius: 0.25rem;
	font-size: 1.5em;
	font-weight: normal;
	text-decoration: none;
	box-shadow: 0 0 2rem 0.25rem rgba(255, 255, 255, 0.5);

	@media (prefers-reduced-motion: no-preference) {
		animation: click-me 16s infinite;
		animation-delay: 8s;
	}

	@container style(--scheme: dark) {
		box-shadow: 0 0 2rem 0.25rem rgba(0, 0, 0, 0.5);
	}
}

a[href^="https://gath.io"]::before {
	content: '';
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E\n  %3Cpath fill-rule='evenodd' d='M1.5 6.375c0-1.036.84-1.875 1.875-1.875h17.25c1.035 0 1.875.84 1.875 1.875v3.026a.75.75 0 0 1-.375.65 2.249 2.249 0 0 0 0 3.898.75.75 0 0 1 .375.65v3.026c0 1.035-.84 1.875-1.875 1.875H3.375A1.875 1.875 0 0 1 1.5 17.625v-3.026a.75.75 0 0 1 .374-.65 2.249 2.249 0 0 0 0-3.898.75.75 0 0 1-.374-.65V6.375Zm15-1.125a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-1.5 0V6a.75.75 0 0 1 .75-.75Zm.75 4.5a.75.75 0 0 0-1.5 0v.75a.75.75 0 0 0 1.5 0v-.75Zm-.75 3a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-1.5 0v-.75a.75.75 0 0 1 .75-.75Zm.75 4.5a.75.75 0 0 0-1.5 0V18a.75.75 0 0 0 1.5 0v-.75ZM6 12a.75.75 0 0 1 .75-.75H12a.75.75 0 0 1 0 1.5H6.75A.75.75 0 0 1 6 12Zm.75 2.25a.75.75 0 0 0 0 1.5h3a.75.75 0 0 0 0-1.5h-3Z' clip-rule='evenodd' /%3E\n%3C/svg%3E");
}

a[href^="mailto:"]::before {
	content: '';
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E\n  %3Cpath d='M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z' /%3E\n  %3Cpath d='M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z' /%3E\n%3C/svg%3E");
}