:root {
	/* Color primitives ---------------------- */
	--color-base-100: #f4f4f1;
	--color-base-150: #ecece9;
	--color-base-200: #e4e4e1;
	--color-base-250: #dadad7;
	--color-base-300: #cfcfcc;
	--color-base-350: #c5c5c2;
	--color-base-400: #babab7;
	--color-base-500: #a1a19e;
	--color-base-600: #848482;
	--color-base-700: #6a6a68;
	--color-base-800: #3d3d3b;
	--color-base-900: #2e2e2c;

	/* Layout sizing - for padding and margins */
	--size-2-1: 0.125rem;
	--size-2-2: 0.25rem;
	--size-2-3: 0.375rem;
	--size-4-1: 0.25rem;
	--size-4-2: 0.5rem;
	--size-4-3: 0.75rem;
	--size-4-4: 1rem;
	--size-4-5: 1.25rem;
	--size-4-6: 1.5rem;
	--size-4-8: 2rem;
	--size-4-9: 2.25rem;
	--size-4-10: 2.5rem;
	--size-4-12: 3rem;
	--size-4-16: 4rem;
	--size-4-18: 4.5rem;

	/* Typography primitives ----------------- */
	/* Font sizes */
	--font-xxs: 0.8rem;
	--font-xs: 0.875rem;
	--font-s: 0.933rem;
	--font-base-serif: 0.9rem;
	--font-base-sans: 0.784375rem;

	/* Font weights */
	--font-light: 200;
	--font-normal: 400;
	--font-bold: 700;

	/* Color mappings ------------------------ */
	/* Text */
	--text-normal: var(--color-base-900);
	--text-muted: var(--color-base-700);
	--text-faint: var(--color-base-500);

	/* Backgrounds */
	--background-primary: var(--color-base-100);
	--background-primary-alt: var(--color-base-200);

	/* Layout definitions */
	--main-min-width: 40rem;
	--panel-min-width: 50ch;
	--layout-padding: 1rem;
}
/* Vale's CSS Reset https://vale.rocks/posts/css-reset */
@layer {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
		background-repeat: no-repeat;
	}

	* {
		padding: 0;
		margin: 0;
	}

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

	body {
		min-block-size: 100%;
	}

	img,
	iframe,
	audio,
	video,
	canvas {
		display: block;
		max-inline-size: 100%;
		block-size: auto;
	}

	svg {
		max-inline-size: 100%;
	}

	svg:not([fill]) {
		fill: currentColor;
	}

	input,
	button,
	textarea,
	select {
		font: inherit;
		hanging-punctuation: none;
	}

	textarea {
		resize: vertical;
	}

	fieldset,
	iframe {
		border: none;
	}

	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		overflow-wrap: break-word;
	}

	p {
		text-wrap: pretty;
		font-variant-numeric: proportional-nums;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-variant-numeric: lining-nums;
	}

	p,
	blockquote,
	q,
	figcaption,
	li {
		hanging-punctuation: first allow-end last;
	}

	button {
		cursor: pointer;
	}

	input,
	label,
	button,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		line-height: 1.1;
	}

	math,
	time,
	table {
		font-variant-numeric: tabular-nums lining-nums slashed-zero;
	}

	code {
		font-variant-numeric: slashed-zero;
	}

	table {
		border-collapse: collapse;
	}

	abbr {
		font-variant-caps: all-small-caps;
		text-decoration: none;

		&[title] {
			cursor: help;
			-webkit-text-decoration: underline dotted;
			        text-decoration: underline dotted;
		}
	}

	sup,
	sub {
		line-height: 0;
	}

	summary {
		cursor: pointer;
	}

	:disabled {
		opacity: 0.8;
		cursor: not-allowed;
	}
}
/* end reset */
/* @import 'global/variables.css'; */
body {
	position: relative;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-bottom: var(--layout-padding);

	font-family: "Times New Roman", Times, serif;
	font-size: var(--font-base-serif);
}

a {
	color: inherit;
	text-decoration: none;
}

.projects-list {
	flex: 1;
	min-height: 0;
	justify-content: flex-end;
	margin: 1rem 0;
	display: flex;
	flex-direction: column;
	transition: margin 0.2s ease-out;
}

.projects-list .folder {
	min-height: 1.5lh;
	transition: 0.2s ease-out;
}

/* .is-open, not [open]: the class drops when a close starts, so this eases back
   out during the collapse rather than after it (see ../../_components/projectCard/script.js) */
.projects-list:has(> .folder.is-open) {
	& .folder {
		min-height: 1.3lh;
		transition: 0.2s ease-out;
	}
	margin-bottom: 0.5rem;
	transition: margin-bottom 0.2s ease-out;
}
.wrapper {
	max-width: 60ch;
}
.wrapper > * {
	margin-bottom: 1lh;
}
.internal {
	border: none;
	border-radius: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12.55px;
	background-color: rgba(162, 162, 162, 0.20);
}

.external {
	font-size: 12.55px;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: oklch(0.3389 0.0425 228.11);
	border: dashed 1px oklch(0.7121 0.07 227.3 / 50%);
	background-color: oklch(0.7121 0.07 227.3 / 7.5%);
}

.external:hover {
	color: oklch(0.4 0.06 227.3);
	border: dashed 1.5px oklch(0.7 0.10 235.3 / 70%);
	background-color: oklch(0.8 0.10 235.3 / 15%);
	transition: 0.2s;
}

.popover {
	color: oklch(0.3389 0 228.11);
	border: dashed 1px oklch(0.7121 0 227.3 / 50%);
	background-color: oklch(0.7121 0 227.3 / 7.5%);
}

.popover:hover {
	color: oklch(0.4 0 227.3);
	border: dashed 1.5px oklch(0.7 0 235.3 / 70%);
	background-color: oklch(0.8 0 235.3 / 15%);
	transition: 0.2s;
}

.intro {
  padding: var(--layout-padding);
  flex-direction: column;
  gap: .4lh;
  display: flex;
}

.pronouns {
  color: #666;
}

.self-links {
  gap: .5rem;
  list-style-type: none;
  display: flex;
}

.self-links li:not(:last-child):after {
  content: ",";
}

@property --folder-bg {
  syntax: "<color>";
  inherits: true;
  initial-value: #fff;
}

.folder {
  --folder-bg: #fff;
  --folder-margin: var(--layout-padding);
  --folder-padding: .5rem;
  --open-easing: cubic-bezier(0, .63, 0, 1.07);
  --open-timing: .4s;
  background-color: var(--folder-bg);
  min-height: 1.5lh;
  transition: --folder-bg var(--open-timing) var(--open-easing);
  position: relative;
}

.folder-tab {
  background-color: var(--folder-bg);
  width: 100%;
  height: 1px;
  transition: height var(--open-timing) var(--open-easing);
  border-top: 1px solid #000;
  display: block;
  position: absolute;
  bottom: 100%;
}

.folder-tab h2 {
  font-size: inherit;
  font-weight: inherit;
  text-box-trim: trim-end;
  text-box-edge: text alphabetic;
  user-select: none;
  background-color: var(--folder-bg);
  width: fit-content;
  bottom: 100%;
  left: var(--folder-margin);
  padding: 5px 15px 0px var(--folder-padding);
  border: 1px solid #000;
  border-bottom: 1px solid var(--folder-bg);
  border-radius: 10px 10px 0 0;
  position: absolute;
}

.folder-body {
  --body-padding: calc(var(--folder-margin) + var(--folder-padding) + 1px);
  background-color: var(--folder-bg);
  padding: 0 var(--body-padding);
  padding-top: var(--size-4-4);
  max-height: var(--folder-max, none);
  overscroll-behavior: contain;
  flex-direction: column;
  display: flex;
  overflow-y: auto;
}

.folder-body .fit {
  align-self: start;
  min-height: 6rem;
}

picture:has( > .fit) {
  display: contents;
}

.folder-details {
  gap: var(--size-4-1);
  margin-bottom: var(--size-4-4);
  flex-direction: column;
  display: flex;
}

.folder-details time {
  opacity: .6;
}

.project-links {
  gap: var(--size-4-3);
  list-style-type: none;
  display: flex;
}

.project-links:before {
  content: "❧";
}

.project-links a {
  text-decoration: underline;

  &:after {
    content: " →";
  }
}

.folder-body > :last-child {
  margin-bottom: var(--size-4-6);
}

.folder:not(.is-open):hover {
  --folder-bg: #f5f5f5;
  cursor: pointer;

  & .folder-tab {
    height: 5px;
    transition: height var(--open-timing) var(--open-easing);
  }
}

.folder.is-open .folder-tab {
  height: 1px;
}