/**
 * okaidia theme for JavaScript, CSS and HTML
 * Loosely based on Monokai textmate theme by http://www.monokai.nl/
 * @author ocodia
 */

code[class*="language-"],
pre[class*="language-"] {
	color: #f8f8f2;
	background: none;
	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size: 1em;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
	border-radius: 0.3em;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: #272822;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
	white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: #8292a2;
}

.token.punctuation {
	color: #f8f8f2;
}

.token.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
	color: #f92672;
}

.token.boolean,
.token.number {
	color: #ae81ff;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #a6e22e;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
	color: #f8f8f2;
}

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
	color: #e6db74;
}

.token.keyword {
	color: #66d9ef;
}

.token.regex,
.token.important {
	color: #fd971f;
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}
/*
 * New diff- syntax
 */

pre[class*="language-diff-"] {
	--eleventy-code-padding: 1.25em;
	padding-left: var(--eleventy-code-padding);
	padding-right: var(--eleventy-code-padding);
}
.token.deleted {
	background-color: hsl(0, 51%, 37%);
	color: inherit;
}
.token.inserted {
	background-color: hsl(126, 31%, 39%);
	color: inherit;
}

/* Make the + and - characters unselectable for copy/paste */
.token.prefix.unchanged,
.token.prefix.inserted,
.token.prefix.deleted {
	-webkit-user-select: none;
	user-select: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-top: 2px;
	padding-bottom: 2px;
}
.token.prefix.inserted,
.token.prefix.deleted {
	width: var(--eleventy-code-padding);
	background-color: rgba(0,0,0,.2);
}

/* Optional: full-width background color */
.token.inserted:not(.prefix),
.token.deleted:not(.prefix) {
	display: block;
	margin-left: calc(-1 * var(--eleventy-code-padding));
	margin-right: calc(-1 * var(--eleventy-code-padding));
	text-decoration: none; /* override del, ins, mark defaults */
	color: inherit; /* override del, ins, mark defaults */
}
* { box-sizing: border-box; }
/*-------------------------------------------------------------------
*
* Variables: Defaults
* 
-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
*
* Design Tokens: Primitives
* 
-------------------------------------------------------------------*/

:root {
  color-scheme: light dark;

  /* Colors */
  --color-black: oklch(27.21% 0.0461 281.1);
  --color-white: oklch(96.14% 0.0018 247.9);
  --color-grey-100: oklch(83.87% 0.0103 267.3);
  --color-grey-200: oklch(76.9% 0.0153 264.5);
  --color-grey-300: oklch(61.25% 0.0162 264.4);
  --color-grey-400: oklch(51.98% 0.0237 264.3);
  --color-grey-500: oklch(41.86% 0.0184 260.7);
  --color-grey-600: oklch(33.48% 0.0179 258.4);
  --color-purple-100: oklch(84.76% 0.0768 280.6 / .4);
  --color-purple-200: oklch(84.84% 0.0767 281.4);
  --color-purple-300: oklch(77.31% 0.0771 281.1);
  --color-purple-400: oklch(70.89% 0.0773 280.9);
  --color-purple-500: oklch(59.67% 0.1108 279.5);
  --color-purple-700: oklch(44.04% 0.088 280.5);
  --color-blue-500: oklch(53.71% 0.2565 265.4);
  --color-blue-600: oklch(47.56% 0.2789 264);
  --color-lime-500: oklch(88.71% 0.1718 115.8);
  --color-lime-600: oklch(78.23% 0.1742 116.6);
  --color-magenta-800: oklch(0.3632 0.1777 316.27);
  --color-magenta-600: oklch(62.17% 0.3057 315.3);
  --color-magenta-300: oklch(82.96% 0.1354 319);
  --color-magenta-100: oklch(0.915154 0.064562 318.7611);

  /* Font Size */
  --font-size-xsmall: 0.75rem;
  --font-size-small: 0.875rem;
  --font-size-default: 1rem;
  --font-size-medium: clamp(1.2rem, 0.25vw + 1.15rem, 1.35rem);
  --font-size-large: clamp(1.44rem, 0.3vw + 1.38rem, 1.62rem);
  --font-size-xlarge: clamp(1.7281rem, 0.3594vw + 1.6562rem, 1.9438rem);
  --font-size-xxlarge: clamp(2.0737rem, 0.4313vw + 1.9875rem, 2.3325rem);

  /* Font Family */
  --font-family: 'MDSystem', -apple-system, system-ui, sans-serif;
	--font-family-monospace: 'MDSystem Mono', Menlo, Monaco, Courier New, Courier, monospace;

  /* Font Weight */
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* Line Height */
  --line-height-heading: 1.2;
  --line-height-body: 1.45;

  /* Spacing */
  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-20: 20px;
  --spacing-30: 30px;
  --spacing-40: 40px;
  --spacing-60: 60px;
  --spacing-90: 90px;

  --spacing-fluid-xs: clamp(0.5rem, 0.4167vw + 0.4167rem, 0.75rem); /* 8px -> 12px */
  --spacing-fluid-sm: clamp(0.75rem, 0.8333vw + 0.5833rem, 1.25rem); /* 12px -> 20px */
  --spacing-fluid-md: clamp(1.25rem, 1.25vw + 1rem, 2rem); /* 20px -> 32px */
  --spacing-fluid-lg: clamp(2rem, 1.6667vw + 1.6667rem, 3rem); /* 32px -> 48px */
  --spacing-fluid-xl: clamp(3rem, 2.5vw + 2.5rem, 4.5rem); /* 48px -> 72px */

  /* Border Radius */
  --border-radius-default: 0.375rem;
  --border-radius-large: 1.875rem;

  /* Breakpoints / Container Query Widths */
  --breakpoint-64: 64rem;

  /* Widths */ 
  --container-wide: 66.25rem; /* 1060px */
	--container-narrow: 43.75rem; /* 700px */

  /* Slideshow */ 
  --slide-count: 4;
  --slide-interval: 4s;

  /* Gallery */
  --gallery-dim: 0.5;
	--gallery-zoom: 1.06;
	--gallery-surface: color-mix(in oklch, var(--border-muted) 35%, var(--background-primary));

  /*-------------------------------------------------------------------
  *
  * Design Tokens: Semantic Theme
  * 
  -------------------------------------------------------------------*/
  
  /* Text */
  --text-heading: light-dark(var(--color-grey-600), var(--color-purple-200));
  --text-primary: light-dark(var(--color-grey-500), var(--color-purple-300));
  --text-secondary: light-dark(var(--color-grey-400), var(--color-purple-400));
  --text-tertiary: light-dark(var(--color-grey-300), var(--color-purple-500));
  --text-inverse: light-dark(var(--color-white), var(--color-black));
  --text-accent: light-dark(var(--color-magenta-600), var(--color-magenta-300));
  --text-link-rest: light-dark(var(--color-blue-500), var(--color-lime-500));
  --text-link-hover: light-dark(var(--color-blue-600), var(--color-lime-600));

  /* Icon */
  --icon-primary: light-dark(var(--color-grey-500), var(--color-purple-300));
  --icon-inverse: light-dark(var(--color-white), var(--color-black));

  /* Background */
  --background-primary: light-dark(var(--color-white), var(--color-black));
  --background-secondary: light-dark(var(--color-purple-100), oklch(46.22% 0.1295 287.1 / .3));
  --background-tertiary: light-dark(var(--color-purple-200), oklch(58.34% 0.1454 286.3 / .3));
  --background-selection: light-dark(var(--color-magenta-100), var(--color-magenta-800));
  --background-accent: light-dark(var(--color-magenta-600), var(--color-magenta-300));

  /* Border */
  --border-muted: light-dark(var(--color-grey-100), var(--color-purple-700));
  --border-bold: light-dark(var(--color-grey-200), var(--color-purple-500));
  --border-button-rest: light-dark(var(--color-blue-500), var(--color-lime-500));
  --border-button-focus: light-dark(var(--color-blue-600), var(--color-lime-600));
  --border-input-rest: light-dark(var(--color-grey-200), var(--color-purple-400));
  --border-input-focus: light-dark(var(--color-blue-500), var(--color-lime-500));

  /* Button */
  --button-background-rest: light-dark(var(--color-blue-500), var(--color-lime-500));
  --button-background-hover: light-dark(var(--color-blue-600), var(--color-lime-600));

  /* Nav List */
  --nav-list-text-rest: light-dark(var(--color-grey-500), var(--color-purple-300));
  --nav-list-text-active: light-dark(var(--color-blue-500), var(--color-purple-200));
  --nav-list-outline: light-dark(var(--color-grey-300), var(--color-purple-200));

  /* Gradient */
  --gradient-decorative:
    radial-gradient(circle at 92% 93%, color-mix(in oklch, var(--text-link-rest) 18%, var(--background-primary)) 11%, transparent 79%),
    radial-gradient(circle at 24% 86%, color-mix(in oklch, var(--background-selection) 65%, var(--background-primary)) 16%, transparent 83%),
    radial-gradient(circle at 11% 94%, color-mix(in oklch, var(--background-tertiary) 45%, var(--background-primary)) 16%, transparent 51%),
    radial-gradient(circle at 36% 38%, var(--background-primary) 3%, transparent 59%),
    radial-gradient(circle at 44% 9%, color-mix(in oklch, var(--text-accent) 60%, var(--background-primary)) 13%, transparent 83%);
}


:root {
  color-scheme: light dark;
	--syntax-tab-size: 2;

	--padding-xs: 0.313rem; /* 5px */
	--padding-s: 0.625rem; /* 10px */
	--padding-m: 1.25rem; /* 20px */
	--padding-l: 1.875rem; /* 30px */
	--padding-xl: 3.75rem; /* 60px */

	--spacing-xs: 8px;
	--spacing-s: 15px;
	--spacing-m: 30px;
	--spacing-l: 60px;
	--spacing-xl: 90px;
	--spacing-xxl: 120px;
}

/*-------------------------------------------------------------------
*
* Typography
* 
-------------------------------------------------------------------*/
::selection {
	background-color: var(--background-selection);
}

@font-face {
  font-family: 'MDSystem';
	font-weight: 700;
  src: url('/fonts/MDSystem-Bold.woff2') format('woff2');
	font-display: swap;
	font-style: normal;
}

@font-face {
  font-family: 'MDSystem';
	font-weight: 400;
  src: url('/fonts/MDSystem-Regular.woff2') format('woff2');
	font-display: swap;
	font-style: normal;
}

@font-face {
  font-family: 'MDSystem';
	font-weight: 400;
  src: url('/fonts/MDSystem-Italic.woff2') format('woff2');
	font-display: swap;
	font-style: italic;
}

@font-face {
  font-family: 'MDSystem Mono';
	font-weight: 400;
  src: url('/fonts/MDSystemMono-Regular.woff2') format('woff2');
	font-display: swap;
	font-style: normal;
}

* {
	box-sizing: border-box;
}

html,
body {
	padding: 0;
	margin: 0 auto;
	height: 100vh;
	font: var(--font-size-default)/var(--line-height-body) var(--font-family);
	color: var(--text-primary);
	background-color: var(--background-primary);
	text-rendering: optimizeLegibility;
	font-variant-ligatures: common-ligatures;
}

html {
	overflow-y: scroll;
	font-size: 100%;
}

body {
	padding: 0 var(--spacing-fluid-sm);
	max-width: var(--container-wide);
}

.container-narrow {
	margin: 0 auto;
	width: var(--container-narrow);
}

/* https://www.a11yproject.com/posts/how-to-hide-content/ */
.visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

h1, h2, h3, h4, h5, strong {
	font-weight: var(--font-weight-bold);
	color: var(--text-heading);
}

h1, h2, h3, h4, h5 {
	position: relative;
	text-wrap: pretty;
	line-height: var(--line-height-heading);
	margin-bottom: var(--spacing-fluid-md);
	margin-top: 0;
}

h1 {
	font-size: var(--font-size-xxlarge);
}

h2 {
	font-size: var(--font-size-xlarge);
}

h3 {
	font-size: var(--font-size-large);
}

h5 {
	color: var(--text-accent);
	font-family: var(--font-family-monospace);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-regular);
}

p, ul, ol, blockquote, table {
	margin: 0 0 var(--spacing-fluid-md) 0;
}

p.leading {
	font-size: var(--font-size-medium);
	line-height: var(--line-height-heading);
}

p:last-child {
	margin-bottom: 0;
}

main time,
main code {
	font-family: var(--font-family-monospace);
	font-size: var(--font-size-small);
	color: var(--text-secondary);
}

section {
	margin-bottom: var(--spacing-fluid-xl);
}

.header {
	display: flex;
	align-items: center;
	margin-bottom: var(--spacing-fluid-md);

	h2 {
		margin-right: var(--spacing-fluid-xs);
		margin-bottom: 0;
	}
}

blockquote {
	position: relative;
	padding-left: var(--spacing-fluid-md);
	border-left: 1px solid var(--border-bold);

	&:after {
		content: '◇';
		position: absolute;
		width: 14px;
		height: 14px;
		top: 0;
		left: -8px;
		line-height: 1;
		color: var(--border-bold);
		background-color: var(--background-primary);
	}

	cite {
		color: var(--text-tertiary);
	}
}

ul {
	padding-left: var(--spacing-fluid-sm);
	list-style-type: circle;

	li {
		display: list-item;
		
		&::marker {
			color: var(--border-bold);
		}
		p {
			margin: 0;
		}

		p:nth-child(2) {
			color: var(--text-secondary);
		}
	}
}

figcaption {
	margin-top: var(--spacing-fluid-xs);
	color: var(--text-tertiary);
	text-align: center;
	font-size: var(--font-size-small);
}

a[href] {
	color: var(--text-link-rest);
	text-decoration: underline;
	transition: all 0.3s ease-out;

	&:focus {
		outline-offset: 2px;
		outline: 1px solid var(--border-button-rest);
		border-radius: var(--border-radius-default);
		text-decoration: none;
		background: none;
	}

	&:hover {
		color: var(--text-link-hover);
		background-color: var(--background-secondary);
	}
}

hr {
	border: none;
	background-color: var(--border-default);
	height: 1px;
	margin: var(--spacing-m) 0;
}

.link-rss {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-6);

	& svg {
		width: 12px;
		height: 12px;
		flex-shrink: 0;
	}
}

/*-------------------------------------------------------------------
*
* Table
* 
-------------------------------------------------------------------*/

table {
	width: 100%;
}

table td,
table th {
	padding-right: var(--spacing-fluid-sm);
}

table th {
	text-align: left;
	padding-bottom: var(--spacing-fluid-xs);
	border-bottom: 1px dashed var(--border-muted);
	font-weight: var(--font-weight-bold);
}

table td {
	font-size: var(--font-size--xsmall);
	padding-top: var(--spacing-fluid-xs);
}

table tr td:nth-of-type(1) {
	font-family: var(--font-family-monospace);
	font-size: var(--font-size-xsmall);
	color: var(--text-accent);
	width: 240px;
}

/*-------------------------------------------------------------------
*
* Code
* 
-------------------------------------------------------------------*/
pre,
code {
	font-family: var(--font-family-monospace);
	font-size: var(--font-size--small);
}
pre:not([class*="language-"]) {
	margin: .5em 0;
	line-height: 1.375; /* 22px /16 */
	-moz-tab-size: var(--syntax-tab-size);
	-o-tab-size: var(--syntax-tab-size);
	tab-size: var(--syntax-tab-size);
	-webkit-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	direction: ltr;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
}
code {
	word-break: break-all;
	color: var(--text-secondary);
}

/*-------------------------------------------------------------------
*
* Images & Media
* 
-------------------------------------------------------------------*/

figure {
	margin: 0 0 var(--spacing-fluid-md) 0;
}

picture, img {
	max-width: 100%;
	display: block;
}

img, video {
	margin: 0 auto;
	height: auto;
	border-radius: var(--border-radius-default);
}

iframe {
	margin: var(--spacing-fluid-md) 0;¬
}

video {
	display: block;
	width: 100%;
	max-width: 100%;
}

.profile-photo {
	background-image: var(--gradient-decorative);
  background-blend-mode: normal, normal, normal, normal, normal;
	border-radius: var(--border-radius-large);
}

/*-------------------------------------------------------------------
*
* Header
* 
-------------------------------------------------------------------*/
header {
	display: flex;
	gap: var(--spacing-s);
	flex-wrap: wrap;
	align-items: stretch;
	padding: var(--spacing-20) var(--spacing-40);
	margin-bottom: var(--spacing-fluid-xl);
	justify-content: space-between;

	a[href] {
		color: var(--nav-list-text-rest);
		display: flex;
		align-items: center;
		padding: 0 var(--spacing-8);

		&:focus {
			outline-color: currentColor;
		}

		&:hover {
			background: none;
			text-decoration: none;
		}
	}

	a[href]:hover,
	a[href][aria-current] {
		color: var(--nav-list-text-active);
	}

}

/*-------------------------------------------------------------------
*
* Main Navigation
* 
-------------------------------------------------------------------*/

.main-nav { 
	ul {
		display: flex;
		padding: 0;
		margin: 0;
		list-style: none;
	}

	a[href] {
		display: block;
		padding: var(--spacing-20) var(--spacing-8);
		position: relative;
		text-decoration: none;

		&[aria-current]::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 50%;
			width: 8px;
			height: 8px;
			margin-left: -4px;
			border-radius: 100%;
			background-color: var(--nav-list-text-active);
		}
	}
}

/*-------------------------------------------------------------------
*
* Page: Header
* 
-------------------------------------------------------------------*/

.page-header {
	margin-bottom: var(--spacing-fluid-md);

	h1 {
		margin-bottom: var(--spacing-fluid-sm);
		padding-bottom: var(--spacing-fluid-xs);
		border-bottom: 1px solid var(--border-muted);
	}

	.meta {
		color: var(--text-secondary);
		font-size: var(--font-size--small);
	}
}

.icon-diamond {
	display: inline-block;
	margin: 0 var(--spacing-4);
}

/*-------------------------------------------------------------------
*
* Containers
* 
-------------------------------------------------------------------*/
main {
	container-type: inline-size;
	margin-bottom: var(--spacing-l);
	
	ul li {
		margin-bottom: var(--spacing-fluid-sm);
	}
}

/*-------------------------------------------------------------------
*
* Footer
* 
-------------------------------------------------------------------*/

footer {
	position: relative;
	overflow: clip;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-40);
	padding: var(--spacing-30) var(--spacing-40);
	background-color: var(--background-secondary);
	border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;

	.top, .bottom {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		a[href] {
			color: inherit;
		}

		a[href]:hover {
			text-decoration: none;
		}
	}

	.top {
		align-items: flex-start;
		gap: var(--spacing-40);

		.acknowledgment {
			max-width: 23rem; 
			margin: 0;
			text-wrap: balance;
		}
	}

	.bottom {
		align-items: flex-end;
		gap: var(--spacing-20);
		color: var(--text-secondary);

		p {
			margin: 0;
		}
	}

	nav {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: var(--spacing-90);
	}

	ul {
		padding: 0;
		margin: 0;
	}

	li {
		margin-bottom: var(--spacing-6);
		list-style: none;
	}
}

.flourish {
	position: absolute;
	right: 12%;
	bottom: -17%;
	margin: 0;
	opacity: 0.5;
	color: var(--text-primary);
	user-select: none;
	cursor: pointer;
	transition: opacity 0.3s ease-out, bottom 0.3s ease-out;

	& svg {
		display: block;
		width: 100%;
		height: auto;
	}

	&:hover {
		opacity: 1;
		bottom: -8%;
	}

	
}

/*-------------------------------------------------------------------
*
* Journal Article
* 
-------------------------------------------------------------------*/

hr {
	background: url("/img/divider.svg") center center no-repeat;
	height: 12px;
	margin: var(--spacing-fluid-lg) 0;
}

.next-prev {
	padding: var(--spacing-fluid-sm) 0 var(--spacing-fluid-md) 0;
	display: flex;
	border-top: 1px dashed var(--border-muted);

	&:has(.link-prev, .link-next) {
		justify-content: space-between;
	}

	&:has(.link-next:only-child) {
		justify-content: flex-end;
	}

	&:has(.link-prev:only-child) {
		justify-content: flex-start;
	}

	p {
		margin: 0;
	}
}

.link-prev,
.link-next {
	position: relative;
}

.link-prev {
	padding-left: var(--spacing-fluid-md);
}

.link-next {
	padding-right: var(--spacing-fluid-md);
	text-align: right;
}

.link-next::after,
.link-prev::after {
	position: absolute;
	top: 0;
}

.link-prev::after {
	content: '←';
	left: 0;
}

.link-next::after {
	content: '→';
	right: 0;
}

/*-------------------------------------------------------------------
*
* Callouts
* 
-------------------------------------------------------------------*/

.callout {
	border-radius: var(--border-radius-large) 0 var(--border-radius-large) 0;
	padding: var(--spacing-30);
	background-color: var(--background-secondary);
	position: relative;

	&.muted {
		border: 1px dashed var(--border-bold);
		background-color: transparent;
		background-image: 
			radial-gradient(circle at 95% -20%, var(--background-selection) 0%, var(--background-primary) 30%);
    background-blend-mode: screen;

		h5 {
			margin-bottom: var(--spacing-4);
		}

		h5:not(:first-of-type) {
			margin-top: var(--spacing-fluid-md);
		}

		p {
			margin: 0;
		}
	}

	.grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	ul {
		margin-bottom: 0;

		li {
			margin-bottom: var(--spacing-fluid-xs);
		}

		li:last-of-type {
			margin-bottom: 0;
		}

		h5 {
			display: inline-block;
		}
	}

	svg {
		position: absolute;
		top: 25px;
		right: 25px;
	}
}

.case-study-promo {
	display: flex;
	margin-top: var(--spacing-fluid-lg);
	gap: var(--spacing-fluid-md);
	align-items: center;
	padding: var(--spacing-fluid-sm);
	border: 1px dashed var(--border-muted);
	border-radius: var(--border-radius-default);

	figure {
		flex: 0 0 60%;
		min-width: 0;
		margin: 0;
	}

	.cutout {
		flex: 1 1 auto;
		min-width: 0;
	}

	h3 {
		margin-bottom: var(--spacing-fluid-xs);
	}
}

/*-------------------------------------------------------------------
*
* Forms
* 
-------------------------------------------------------------------*/

label {
	display: block;
	font-weight: var(--font-weight-bold);
	color: var(--text-heading);
}

input::placeholder {
	color: var(--text-secondary);
}

input, button, a[href].button {
	font-size: inherit;
	padding: var(--spacing-12);
	border-radius: var(--border-radius-default);

	&:focus {
		outline: 2px solid var(--border-input-focus);
		outline-offset: 2px;
	}
}

input[type=email] {
	color: inherit;
	border: 1px solid var(--border-input-rest);
	background: var(--background-primary);
}

input[type=submit],
button,
a[href].button {
	height: 45px;
	cursor: pointer;
	color: var(--text-inverse);
	text-decoration: none;
	border: none;
	background-color: var(--button-background-rest);

	&:hover {
		background-color: var(--button-background-hover);
	}
}

.form-buttondown {
	input[type=email] {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}

	input[type=submit] {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		margin-left: -4px;
	}
}

/*-------------------------------------------------------------------
*
* Badge
* 
-------------------------------------------------------------------*/

.badge {
	display: inline-block;
	padding: var(--spacing-2) var(--spacing-4);
	border: 1px dashed var(--border-bold);
	color: var(--text-secondary);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-regular);
	border-top-right-radius: var(--border-radius-default);
	border-bottom-left-radius: var(--border-radius-default);
}

/*-------------------------------------------------------------------
*
* Tooltip
* 
-------------------------------------------------------------------*/

:where(.has-tooltip) {
	position: relative;

	--tooltip-gap: var(--spacing-8);
	--tooltip-arrow: var(--spacing-8);
	--tooltip-arrow-inset: 50%;
	--tooltip-max-width: 20rem;
}

.tooltip-bubble {
	position: absolute;
	inset-block-end: calc(100% + var(--tooltip-gap));
	inset-inline-start: 50%;
	translate: calc(-1 * var(--tooltip-arrow-inset));
	z-index: 1;
	inline-size: max-content;
	max-inline-size: var(--tooltip-max-width);
	padding: var(--spacing-6) var(--spacing-10);
	font-size: var(--font-size-small);
	line-height: var(--line-height-body);
	color: var(--text-primary);
	text-wrap: pretty;
	background: var(--background-primary);
	border-radius: var(--border-radius-default);
	box-shadow: 0 2px 8px color-mix(in oklch, var(--color-black) 15%, transparent);

	display: none;
	opacity: 0;
	transition: opacity 0.2s ease-out, display 0.2s allow-discrete;

	&::after {
		content: "";
		position: absolute;
		inset-block-start: 100%;
		inset-inline-start: var(--tooltip-arrow-inset);
		translate: -50% -50%;
		rotate: 45deg;
		inline-size: var(--tooltip-arrow);
		aspect-ratio: 1;
		background: inherit;
	}

	&::before {
		content: "";
		position: absolute;
		inset-block-start: 100%;
		inset-inline: 0;
		block-size: var(--tooltip-gap);
	}
}

:is(
	.has-tooltip:hover,
	.has-tooltip:focus-visible,
	.has-tooltip:has(:focus-visible)
) > .tooltip-bubble {
	display: block;
	opacity: 1;

	@starting-style {
		opacity: 0;
	}
}

/*-------------------------------------------------------------------
*
* Journal: Post List
* 
-------------------------------------------------------------------*/

.postlist {
	list-style: none;
	padding: 0;
}

.postlist-item {
	display: flex;
	justify-content: space-between;
	padding: var(--spacing-12) 0;
	margin: 0;
	border-bottom: 1px dashed var(--border-muted);

	&:last-of-type {
		border-bottom: none;
	}

	time {
		padding-left: var(--spacing-20);
		text-wrap: nowrap;
	}
}

/*-------------------------------------------------------------------
*
* Tags
* 
-------------------------------------------------------------------*/
.tags-list li {
	display: inline-block;
	margin-right: var(--spacing-xs);
	margin-bottom: var(--spacing-s);
}

/*-------------------------------------------------------------------
*
* Header Links
* 
-------------------------------------------------------------------*/
a[href].header-anchor {
	position: absolute;
	left: -40px;
	top: 0;
	opacity: 0;
	height: 100%;
	width: 40px;
	text-align: center;

	&:hover {
		background: none;
	}

	path {
		stroke: var(--text-heading);
	}
}

a[href].header-anchor:focus,
:hover > a[href].header-anchor {
	opacity: 1;

	path:hover {
		stroke: var(--text-link-hover);
	}
}

/*-------------------------------------------------------------------
*
* Media: Avatars
* 
-------------------------------------------------------------------*/
.avatar {
	display: inline-block;
	border: 1px solid var(--border-default);

	&.avatar-default {
		width: 160px;
		height: 160px;
		background-color: var(--background-secondary);
    background-image: var(--gradient-decorative);
    background-blend-mode: normal, normal, normal, normal, normal;
		border-radius: 100%;
		overflow: hidden;
	}

	&.avatar-small {
		width: 44px;
		height: 44px;
	}
}

.avatar picture {
	border-radius: var(--border-radius-default);
}

.name-and-photo {
	display: flex;
	flex-wrap: wrap-reverse;
	justify-content: center;
	text-align: center;
	padding: var(--spacing-fluid-md) 0;

	figure {
		margin: 0 auto var(--spacing-fluid-md) auto;
	}

	* {
		width: 100%;
	}

	.introduction h3 {
		margin: 0;
	}
}

/*-------------------------------------------------------------------
*
* Webring
* 
-------------------------------------------------------------------*/

.webring-container {
	display: flex;
	gap: var(--spacing-fluid-sm);
	flex-direction: row;
}

.webring {
	flex-grow: 1;
	border: 1px dashed var(--border-bold);
	border-radius: var(--border-radius-default);
	padding: var(--spacing-fluid-sm) var(--spacing-fluid-md);
	text-align: center;

	h4 {
		margin-bottom: var(--spacing-fluid-xs);
		color: inherit;
	}

	ul {
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	li {
		margin: 0;
		list-style: none;
	}

	.icon-diamond {
		margin: 0 var(--spacing-fluid-xs);
	}
}

/*-------------------------------------------------------------------
*
* Testimonials
* 
-------------------------------------------------------------------*/

.testimonial-container {
	margin-top: var(--spacing-fluid-md);
}

.testimonial {
	display: flex;
	flex-direction: row;
	gap: var(--spacing-fluid-md);
	align-content: space-between;
	padding: var(--spacing-fluid-md) 0;

	&:not(:last-of-type) {
		border-bottom: 1px dashed var(--border-muted);
	}


	.leading {
		flex: 1 1 40%;
	}

	div {
		flex: 1 1 60%;
	}

	.author p:first-child {
		margin: 0;
	}

	.author p:nth-child(2) {
		color: var(--text-secondary);
	}

	.author {
		display: flex;
	}

	figure {
		margin: 0 var(--spacing-fluid-xs) 0 0;
	}
}

/*-------------------------------------------------------------------
*
* Table of Contents
* 
-------------------------------------------------------------------*/

.toc {

	ol {
		counter-reset: toc;
		list-style-type: none;
		padding: 0;
	}

	li {
		display: flex;
		align-items: baseline;
		margin-bottom: var(--spacing-xs);
	}

	li::after {
		counter-increment: toc;
		content: counter(toc);
		font-feature-settings: "onum", "tnum" ;
		color: var(--text-tertiary);
	}
	
	li span {
		display: inline-block;
		margin: 0 var(--spacing-fluid-xs);
		flex-grow: 4;
		border-bottom: 2px dotted var(--border-bold);
	}
}

/*-------------------------------------------------------------------
*
* Media: Gallery
* 
-------------------------------------------------------------------*/
.gallery {
	--gallery-columns: 6;

	display: grid;
	gap: var(--spacing-fluid-xs);
	grid-template-columns: repeat(var(--gallery-columns), 1fr);
}

.container-narrow .gallery {
	inline-size: 100cqi;
	margin-inline: calc((100% - 100cqi) / 2);
}

.tile {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-fluid-xs);
	grid-column: span var(--span);
	grid-row: span var(--rows);
	margin: 0;
	min-inline-size: 0;
}

.tile-media {
	flex: 1 1 auto;
	min-block-size: 0;
	aspect-ratio: var(--box);
	overflow: hidden;
	border-radius: var(--border-radius-default);

	picture,
	img {
		block-size: 100%;
		inline-size: 100%;
	}

	img {
		border-radius: 0;
		object-fit: contain;
	}
}

.tile[data-crop] img {
	object-fit: cover;
	object-position: var(--position, center);
}

.tile figcaption {
	margin-top: 0;
	text-align: start;
}

@media (hover: hover) {
	.tile {
		transition: opacity 0.3s ease-out;
	}

	.gallery:has(.tile:hover) .tile:not(:hover) {
		opacity: var(--gallery-dim);
	}

	/* Only a cropped tile has overflow to scale into. */
	.tile[data-crop] img {
		transition: scale 0.3s ease-out;
	}

	.tile[data-crop]:hover img {
		scale: var(--gallery-zoom);
	}
}

/*-------------------------------------------------------------------
*
* Library
* 
-------------------------------------------------------------------*/

.year-navigation {
	margin-bottom: var(--spacing-fluid-md);

	ul {
		padding: 0;
	}

	li {
		display: inline-block;
		list-style: none;
		margin-bottom: var(--spacing-4);
		margin-right: var(--spacing-8);
		color: var(--text-secondary);

		&:first-child {
			display: block;
		}
	}

	a {

		&.current {
			color: var(--text-accent);
		}
	}
}

.books-grid {
	padding-top: var(--spacing-fluid-md);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: var(--spacing-fluid-md);
}

.book-card {
 
	p {
		margin-bottom: 0;
		font-size: var(--font-size--small);
	}

	p:last-of-type {
		color: var(--text-secondary);
	}

	figure {
		position: relative;
		margin: 0 0 var(--spacing-fluid-sm) 0;
		padding: var(--spacing-fluid-md);
		border-radius: var(--border-radius-default);
		background-color: var(--background-secondary);
    background-image: var(--gradient-decorative);
    background-blend-mode: normal, normal, normal, normal, normal;
	}

	img {
		margin: 0 auto;
		aspect-ratio: 2 / 3;
		border-radius: 0;
		width: 120px;
		height: auto;
	}

	.favourite {
		display: block;
		position: absolute;
		bottom: calc(var(--spacing-fluid-md) + var(--spacing-fluid-sm));
		right: calc(50% - 80px); 

		&:hover {
			cursor: help;
		}

		--tooltip-arrow-inset: var(--spacing-20);
	}
}

/*-------------------------------------------------------------------
*
* Page: CV
* 
-------------------------------------------------------------------*/

.page-cv {

	h3 {
		margin-bottom: 0;
	}

}

/*-------------------------------------------------------------------
*
* Slideshow
* 
-------------------------------------------------------------------*/

.slideshow {
  display: grid; 
  aspect-ratio: var(--slide-ratio, 3 / 2);
  overflow: clip;
  border-radius: var(--border-radius-default);
  background: var(--background-tertiary);
}

.slideshow > * {
  grid-area: 1 / 1;
  min-height: 0; 
  min-width: 0;
  opacity: 0;
  animation: crossfade calc(var(--slide-count) * var(--slide-interval)) ease-in-out infinite;
  animation-delay: calc(var(--i) * var(--slide-interval));
}

.slideshow picture { display: block; height: 100%; }

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


@keyframes crossfade {
  0%             { opacity: 0; z-index: 2; }
  6.25%          { opacity: 1; z-index: 2; }
  12.5%, 31.25%  { opacity: 1; z-index: 1; animation-timing-function: step-end; }
  31.26%, 100%   { opacity: 0; z-index: 1; }
}

/*-------------------------------------------------------------------
*
* Media Queries
*
-------------------------------------------------------------------*/

@media (max-width: 60rem) {
	table tr td:nth-of-type(1) {
		width: auto;
		padding-right: var(--padding-m);
	}
}

@media screen and (min-width: 64rem) {

	.main-nav li:not(:first-child) {
		padding-left: var(--spacing-20);
	}

	.name-and-photo {
		flex-wrap: nowrap;
		justify-content: space-betwen;
		text-align: left;
		align-items: center;

		figure {
			margin: 0;
		}

		div:has(figure) {
			text-align: right;
		}
	}
}

@media screen and (max-width: 64rem) {
	header {
		padding: var(--spacing-20) 0;
	}

	main {
		margin: 0;
	}

	footer {
		padding: var(--spacing-30) var(--spacing-20) var(--spacing-60) var(--spacing-20);

		nav {
			justify-content: center;
			gap: var(--spacing-60);
		}

		.top, .bottom {
			flex-direction: column;
			text-align: center;
			align-items: center;
		}

		.bottom p:first-of-type {
			margin-bottom: var(--spacing-12);
		}

		.acknowledgment {
			max-width: none;
		}

		.flourish {
			position: absolute;
			bottom: -8%;
			width: 18rem;
			right: 50%;
			margin-right: -9rem;

			&:hover {
				bottom: -4%;
			}
		}
	}

	.webring-container {
		flex-direction: column;
	}

	.case-study-promo {
		flex-direction: column;
	}
}

@media (prefers-reduced-motion: reduce) {
	.flourish {
		transition: none;
	}

	.tooltip-bubble {
		transition-duration: 0s;
	}

	.tile,
	.tile img {
		transition: none;
	}

	.tile[data-crop]:hover img {
		scale: 1;
	}

	.slideshow > * {
		animation: none;
	}

	.slideshow > :first-child {
		opacity: 1;
	}
}

@media screen and (max-width: 48rem) {

	.tile {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.tile-media {
		aspect-ratio: var(--ar);
	}

	.testimonial {
		width: 100%;
	}

	.form-buttondown {
		input {
			width: 100%;
			margin-bottom: var(--spacing-12);
		}

		input[type=email],
		input[type=submit] {
			border-radius: var(--border-radius-default);
		}

		input[type=submit] {
			margin-left: 0;
		}
	}

	.postlist-item {
		flex-direction: column;

		time {
			padding: 0;
			margin-top: var(--spacing-12);
		}
	}

	.testimonial {
		flex-direction: column;
		gap: var(--spacing-fluid-sm);
	}

	.container-narrow {
		width: 100%;
	}
}