/* 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;
		-webkit-font-smoothing: antialiased;
		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;
	}

	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;
	}

	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;
	}

	:disabled {
		opacity: 0.8;
		cursor: not-allowed;
	}

	:focus-visible {
		outline-offset: 0.2rem;
	}
}

/* end reset */

/* @font-face here */

:root {
	--color-paper: #ffffff;
	--color-base-050: #F2F0E5;
	--color-base-300: #B3B3B3;
	--color-base-600: #5C5757;
	--color-base-900: #282726;
	--color-ink: #0F0F0F;
	--space-zero: clamp(0rem, -0.02rem + 0.11vw, 0.0625rem);
	--space-3xs: clamp(0.3125rem, 0.29rem + 0.11vw, 0.375rem);
	--space-2xs: clamp(0.5625rem, 0.49rem + 0.33vw, 0.75rem);
	--space-xs: clamp(0.875rem, 0.78rem + 0.44vw, 1.125rem);
	--space-s: clamp(1.125rem, 0.99rem + 0.67vw, 1.5rem);
	--space-m: clamp(1.6875rem, 1.48rem + 1.00vw, 2.25rem);
	--space-l: clamp(2.25rem, 1.98rem + 1.33vw, 3rem);
	--space-xl: clamp(3.375rem, 2.96rem + 2.00vw, 4.5rem);
	--space-2xl: clamp(4.5rem, 3.95rem + 2.67vw, 6rem);
	--space-3xl: clamp(6.75rem, 5.92rem + 4.00vw, 9rem);
	--space-4xl: clamp(9rem, 7.90rem + 5.33vw, 12rem);
	--space-3xs-2xs: clamp(0.3125rem, 0.15rem + 0.78vw, 0.75rem);
	--space-2xs-xs: clamp(0.5625rem, 0.36rem + 1.00vw, 1.125rem);
	--space-xs-s: clamp(0.875rem, 0.65rem + 1.11vw, 1.5rem);
	--space-s-m: clamp(1.125rem, 0.71rem + 2.00vw, 2.25rem);
	--space-m-l: clamp(1.6875rem, 1.21rem + 2.33vw, 3rem);
	--space-l-xl: clamp(2.25rem, 1.42rem + 4.00vw, 4.5rem);
	--space-xl-2xl: clamp(3.375rem, 2.41rem + 4.67vw, 6rem);
	--space-2xl-3xl: clamp(4.5rem, 2.85rem + 8.00vw, 9rem);
	--space-3xl-4xl: clamp(6.75rem, 4.83rem + 9.33vw, 12rem);
	--space-s-l: clamp(1.125rem, 0.44rem + 3.33vw, 3rem);
	--space-s-xl: clamp(1.125rem, -0.11rem + 6.00vw, 4.5rem);
	--size-step-00: clamp(0.85125rem, 0.83rem + 0.09vw, 0.9rem);
	--size-step-0: clamp(0.875rem, 0.85rem + 0.11vw, 0.9375rem);
	--size-step-1: clamp(1.175rem, 1.09rem + 0.41vw, 1.40625rem);
	--size-step-2: clamp(1.380625rem, 1.24rem + 0.67vw, 1.758125rem);
	--size-step-3: clamp(1.6225rem, 1.50rem + 0.58vw, 1.946875rem);
	--size-step-4: clamp(1.90625rem, 1.60rem + 1.49vw, 2.746875rem);
	--size-step-5: clamp(2.24rem, 1.80rem + 2.12vw, 3.433125rem);
	--leading-flat: 1;
	--leading-fine: 1.15;
	--leading-standard: 1.3;
	--leading-loose: 1.5;
	--font-base: Times,serif;
	--font-regular: 400;
	--font-medium: 500;
	--font-bold: 700;
	color-scheme: light dark;
	--color-bg: light-dark(var(--color-paper), var(--color-base-900));
	--color-text: light-dark(var(--color-ink), var(--color-base-050));
	--color-text-subtle: light-dark(var(--color-base-600), var(--color-base-300));
	--gutter: var(--space-s);
	--transition-base: 250ms ease;
	--transition-movement: 200ms linear;
	--transition-fade: 300ms ease;
	--transition-bounce: 500ms cubic-bezier(0.5, 0.05, 0.2, 1.5);
}

/*
  Global styles

  Low-specificity, global styles that apply to the whole
  project: https://cube.fyi/css.html
*/

body {
	background: var(--color-bg);
	color: var(--color-text);
	font-size: var(--size-step-0);
	font-family: var(--font-base);
	line-height: var(--leading-standard);
}

h1 {
	font-size: var(--size-step-0);
	font-weight: normal;
}

a {
	color: var(--color-text);
}

::-moz-selection {
	background: #4990e825;
}

::selection {
	background: #4990e825;
}

time {
	color: var(--color-text-subtle);
	font-style: italic;
}

.prose {
  --flow-space: var(--space-m);
}

/*
CLUSTER
More info: https://every-layout.dev/layouts/cluster/
A layout that lets you distribute items with consitent
spacing, regardless of their size

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-s-m)): This defines the space
between each item.

--cluster-horizontal-alignment (flex-start) How items should align
horizontally. Can be any acceptable flexbox aligmnent value.

--cluster-vertical-alignment How items should align vertically.
Can be any acceptable flexbox alignment value.
*/

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s-m));
  justify-content: var(--cluster-horizontal-alignment, flex-start);
  align-items: var(--cluster-vertical-alignment, center);
}

/* 
FLOW COMPOSITION 
Like the Every Layout stack: https://every-layout.dev/layouts/stack/
Info about this implementation: https://piccalil.li/quick-tip/flow-utility/ 
*/

.flow > * + * {
  margin-top: var(--flow-space, 1em);
}

/* AUTO GRID
Related Every Layout: https://every-layout.dev/layouts/grid/
More info on the flexible nature: https://piccalil.li/tutorial/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/
A flexible layout that will create an auto-fill grid with
configurable grid item sizes

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-s-m)): This defines the space
between each item.

--grid-min-item-size (14rem): How large each item should be
ideally, as a minimum.

--grid-placement (auto-fill): Set either auto-fit or auto-fill
to change how empty grid tracks are handled */

.grid {
  display: grid;
  grid-template-columns: repeat(
    var(--grid-placement, auto-fill),
    minmax(var(--grid-min-item-size, 16rem), 1fr)
  );
  gap: var(--gutter, var(--space-s-l));
}

/* A split 50/50 layout */

.grid[data-layout='halves'] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 50vw, 33rem);
}

/* Three column grid layout */

.grid[data-layout='thirds'] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 33%, 20rem);
}

/*
REPEL
A little layout that pushes items away from each other where
there is space in the viewport and stacks on small viewports

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-s-m)): This defines the space
between each item.

--repel-vertical-alignment How items should align vertically.
Can be any acceptable flexbox alignment value.
*/

.repel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: var(--repel-vertical-alignment, center);
  gap: var(--gutter, var(--space-s-m));
}

.repel[data-nowrap] {
  flex-wrap: nowrap;
}

/* 
SIDEBAR
More info: https://every-layout.dev/layouts/sidebar/
A layout that allows you to have a flexible main content area
and a "fixed" width sidebar that sits on the left or right.
If there is not enough viewport space to fit both the sidebar
width *and* the main content minimum width, they will stack
on top of each other

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-size-1)): This defines the space
between the sidebar and main content.

--sidebar-target-width (20rem): How large the sidebar should be

--sidebar-content-min-width(50%): The minimum size of the main content area

EXCEPTIONS
.sidebar[data-direction='rtl']: flips the sidebar to be on the right 
*/

.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s-l));
}

.sidebar > :first-child {
  flex-basis: var(--sidebar-target-width, 20rem);
  flex-grow: 1;
}

.sidebar > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--sidebar-content-min-width, 50%);
}

/*
SWITCHER
More info: https://every-layout.dev/layouts/switcher/
A layout that allows you to lay **2** items next to each other
until there is not enough horizontal space to allow that.

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-size-1)): This defines the space
between each item

--switcher-target-container-width (40rem): How large the container
needs to be to allow items to sit inline with each other

--switcher-vertical-alignment How items should align vertically.
Can be any acceptable flexbox alignment value.
*/

.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s-l));
  align-items: var(--switcher-vertical-alignment, flex-start);
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-target-container-width, 40rem) - 100%) * 999);
}

/* Max 2 items,
so anything greater than 2 is full width */

.switcher > :nth-child(n + 3) {
  flex-basis: 100%;
}

/*
WRAPPER COMPOSITION
A common wrapper/container
*/

.wrapper {
	max-width: 50ch;
	padding: var(--space-s-l) var(--gutter);
	position: relative;
}

/* 
REGION UTILITY
Consistent block padding for page sections
*/

.region {
  padding-block: var(--region-space, var(--space-xl-2xl));
}

/* 
VISUALLY HIDDEN UTILITY
Info: https://piccalil.li/quick-tip/visually-hidden/ 
*/

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.block {
	display: block;
}

.inline {
	display: inline;
}