@view-transition {
  navigation: auto;
}

@keyframes fade {
  to {
    opacity: var(--to-opacity);
    scale: var(--to-scale);
    translate: var(--to-translate);
  }
}

html, body {
  margin: 0;
  padding: 0;
	scroll-behavior: smooth;
	--scroll-margin-size: calc( calc(var(--size-700) * 2) + 1.7em + calc(var(--size-300) * 2) );
}

body {
	background: white;
	color: var(--color-dark-glare);
	line-height: 1.5;
  font-family: "Work Sans", "Segoe UI", Roboto,"Helvetica Neue",Arial,sans-serif;
	letter-spacing: -.5px;
	font-size: var(--size-500);
  font-feature-settings: "kern";
  font-kerning: normal;
	letter-spacing: -.5px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.text-400 {
	letter-spacing: -.25px;
}

a:not([class]) {
	color: currentColor;
	text-decoration-color: var(--color-quinary);
}

:focus:not(:hover) {
	outline: 2px dashed var(--color-primary);
	outline-offset: 0.25rem;
}

blockquote {
	&:empty {
		display: none;
	}

	em {
		position: relative;
		z-index: 1;
		white-space: pre-line;
		
		&::before {
			content: '“';
			position: absolute;
			left: -.25ex;
			font-size: 10vw !important;
			z-index: -1;
			opacity: .1;
			line-height: .5;
		}

		&::after, &::before {
			color: var(--color-secondary-glare);
		}
	}
}
main:focus {
	outline: none !important;
}

h1,
h2,
h3,
h4 {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 900;
	font-display: swap;
	letter-spacing: initial;
	/* @include apply-utility('font', 'sans'); */
	/* @include apply-utility('leading', 'flat'); */
}

hr {
	max-width: 80rem;
	margin-inline: auto;
	border: solid currentColor;
	border-width: 1px 0 0 0;
}

/* High contrast selection because it can help visually-impaired */
/* folks read the text easier */
::selection {
	color: var(--color-light);

	/* We set this as an RGBA because that’s how you get a solid color, by using 0.99 */
	/* alpha value. Browsers are wild. */
	background: var(--color-dark-shade);
}

/* Scrollbar styles*/
::-webkit-scrollbar {
	width: .3rem;
	height: .3rem;
}

::-webkit-scrollbar-track {
	background-color: var(--color-light-shade);
	/* border: 1px solid var(--color-secondary-glare); */
	border-radius: 0;
}

::-webkit-scrollbar-thumb {
	background-color: var(--color-secondary-shade);
	border-radius: 0.15rem;
}

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