:root {
	--step-5: clamp(1.4092rem, 0.2709rem + 5.6914vw, 4.6818rem);
	--step-4: clamp(1.2811rem, 0.5023rem + 3.894vw, 3.5201rem);
	--step-3: clamp(1.1646rem, 0.6491rem + 2.5776vw, 2.6467rem);
	--step-2: clamp(1.0588rem, 0.7348rem + 1.6196vw, 1.99rem);
	--step-1: clamp(0.9625rem, 0.7768rem + 0.9283vw, 1.4963rem);
	--step-0: clamp(0.875rem, 0.788rem + 0.4348vw, 1.125rem);
	--step--1: clamp(0.7955rem, 0.7779rem + 0.0877vw, 0.8459rem);
	--step--2: clamp(0.636rem, 0.7535rem + -0.1516vw, 0.7231rem);

	--headline-font-family: -apple-system-ui-serif, ui-serif, "Georgia", Charter,
		"Bitstream Charter", "Sitka Text", Cambria, serif;
	font-weight: normal;
	--base-font-family: ui-rounded, "Hiragino Maru Gothic ProN", Quicksand,
		Comfortaa, Manjari, "Arial Rounded MT", "Arial Rounded MT Bold", Calibri,
		source-sans-pro, sans-serif;
}

      :where(*){
    --color-base: deeppink;

    --neutral-50:  oklch(96% 0.01 10);
    --neutral-100: oklch(93% 0.01 10);
    --neutral-150: oklch(85% 0.01 10);
    --neutral-200: oklch(80% 0.01 10);
    --neutral-300: oklch(70% 0.01 10);
    --neutral-400: oklch(60% 0.01 10);
    --neutral-500: oklch(50% 0.01 10);
    --neutral-600: oklch(40% 0.01 10);
    --neutral-700: oklch(30% 0.01 10);
    --neutral-750: oklch(25% 0.01 10);
    --neutral-800: oklch(20% 0.01 10);
    --neutral-850: oklch(15% 0.01 10);
    --neutral-900: oklch(10% 0.01 10);
    --neutral-950: oklch( 5% 0.01 10);

    --accent-50:  oklch(96% 0.2 20);
    --accent-100: oklch(93% 0.2 20);
    --accent-150: oklch(85% 0.2 20);
    --accent-200: oklch(80% 0.2 20);
    --accent-300: oklch(70% 0.2 20);
    --accent-400: oklch(60% 0.2 20);
    --accent-500: oklch(50% 0.2 20);
    --accent-600: oklch(40% 0.2 20);
    --accent-700: oklch(30% 0.2 20);
    --accent-750: oklch(25% 0.2 20);
    --accent-800: oklch(20% 0.2 20);
    --accent-850: oklch(15% 0.2 20);
    --accent-900: oklch(10% 0.2 20);
    --accent-950: oklch( 5% 0.2 20);


    --neutral-50:  oklch(from var(--color-base) 96% 0.01 h);
    --neutral-100: oklch(from var(--color-base) 93% 0.01 h);
    --neutral-150: oklch(from var(--color-base) 85% 0.01 h);
    --neutral-200: oklch(from var(--color-base) 80% 0.01 h);
    --neutral-300: oklch(from var(--color-base) 70% 0.01 h);
    --neutral-400: oklch(from var(--color-base) 60% 0.01 h);
    --neutral-500: oklch(from var(--color-base) 50% 0.01 h);
    --neutral-600: oklch(from var(--color-base) 40% 0.01 h);
    --neutral-700: oklch(from var(--color-base) 30% 0.01 h);
    --neutral-750: oklch(from var(--color-base) 25% 0.01 h);
    --neutral-800: oklch(from var(--color-base) 20% 0.01 h);
    --neutral-850: oklch(from var(--color-base) 15% 0.01 h);
    --neutral-900: oklch(from var(--color-base) 10% 0.01 h);
    --neutral-950: oklch(from var(--color-base)  5% 0.01 h);


    --accent-50:  oklch(from var(--color-base) 96% 0.2 h);
    --accent-100: oklch(from var(--color-base) 93% 0.2 h);
    --accent-150: oklch(from var(--color-base) 85% 0.2 h);
    --accent-200: oklch(from var(--color-base) 80% 0.2 h);
    --accent-300: oklch(from var(--color-base) 70% 0.2 h);
    --accent-400: oklch(from var(--color-base) 60% 0.2 h);
    --accent-500: oklch(from var(--color-base) 50% 0.2 h);
    --accent-600: oklch(from var(--color-base) 40% 0.2 h);
    --accent-700: oklch(from var(--color-base) 30% 0.2 h);
    --accent-750: oklch(from var(--color-base) 25% 0.2 h);
    --accent-800: oklch(from var(--color-base) 20% 0.2 h);
    --accent-850: oklch(from var(--color-base) 15% 0.2 h);
    --accent-900: oklch(from var(--color-base) 10% 0.2 h);
    --accent-950: oklch(from var(--color-base)  5% 0.2 h);

}

      :root {
	color-scheme: light dark;
	/* Foundational Colors */
	--color-background: var(--neutral-100);
	--color-text-normal: var(--neutral-800);
	--color-text-quiet: var(--neutral-500);
	--color-surface-raised: var(--neutral-50);
	--color-surface-normal: var(--neutral-100);
	--color-surface-lowered: var(--neutral-150);
	--icon-bright: var(--neutral-50);
	--icon-dark: var(--accent-500);
}

@media (prefers-color-scheme: dark) {
	:root {
		/* Foundational Colors */
		--color-background: var(--neutral-800);
		--color-text-normal: var(--neutral-100);
		--color-text-quiet: var(--neutral-200);
		--color-surface-raised: var(--neutral-750);
		--color-surface-normal: var(--neutral-800);
		--color-surface-lowered: var(--neutral-850);
		--icon-bright: var(--accent-10);
		--icon-dark: var(--neutral-800);
	}
}



      
body.centered {
    display: grid;
    place-items: center;
    margin: 0;
    min-height: 100%;
}

.centered main{
    display: grid;
    place-items: center;
    margin: 0;
}

      :root {
	--grid-min-column-size: 24ch;
	--grid-gap: 1rem;
}

.grid,
.auto-grid {
	display: grid;
	gap: var(--grid-gap);
	grid-template-columns: repeat(
		auto-fit,
		minmax(min(var(--grid-min-column-size, 20ch), 100%), 1fr)
	);
}
ul[class] {
	list-style: none;
	margin: 0;
	padding: 0;
}

      :root {
}

.card {
	display: flex;
	flex-direction: column;
	position: relative;
	margin-bottom: 1em;
	--media-aspect-ratio: 16/9;
}

.card .media {
	margin-bottom: 8px;
	border-radius: 0.4em;
	overflow: hidden;
}
.card img {
	object-fit: cover;
	height: 100%;
	width: 100%;
}

.card * {
	margin: 0;
	color: var(--color-text-quiet);
}
.card:hover * {
	color: var(--color-text-normal);
}

.card-headline {
	font-size: var(--step-0, 1rem);
	font-family: var(--headline-font-family);
	line-height: 1.35;
	margin-bottom: 0.3em;
	padding-inline: 3px;
}

.card-headline a {
	text-decoration: none;
}
.card-headline a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.card-description {
	font-size: var(--step-0, 0.8rem);
	line-height: 1.35;
	overflow: hidden;
	text-overflow: ellipsis;
	height: 3lh;
	padding-inline: 3px;
}


.card-author{
	border-top: 1px solid currentColor;
	margin-top: 0.5em;
	padding-top: 0.5em;
	font-size: var(--step--1, 0.8rem);
}

      :root {
	--media-aspect-ratio: 16/9;
}

.media {
	display: block;
	aspect-ratio: var(--media-aspect-ratio);
}

.media:empty {
	background-color: var(--color-surface-lowered);
}

.media:not(:has(*)) {
	background-color: var(--color-surface-lowered);
}

      [typeof="BreadcrumbList"]{
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 0.5em;
    font-size: var(--step--1);
}

[typeof="BreadcrumbList"] li:not(:last-child)::after {
        content: "\203A";
        padding-left: 0.5em;
}

a[aria-current="page"]{
    text-decoration: none;
}
      * {
	box-sizing: border-box;
}
html,
body {
	height: 100%;
	font-size: var(--step-0);
}

img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

body {
	font-family: var(--base-font-family);
	font-weight: normal;
	font-weight: normal;
	font-size: var(--step-0);
	line-height: 1.6;
	font-weight: 300;

	background-color: var(--color-background);
	color: var(--color-text-normal);
	padding: 0;
}
h1,
h2,
h3 {
	line-height: 1.1;
	font-family: var(--headline-font-family);
	font-weight: normal;
}

h1 {
	font-size: var(--step-3);
	font-weight: 100;
}

h2 {
	font-size: var(--step-2);
	font-weight: 100;
}

h3 {
	font-size: var(--step-1);
	font-weight: 200;
}

main {
	margin: auto;
	max-width: 82ch;
	padding-inline: 1em;
}

svg {
	height: 60vmin;
}

a {
	color: currentColor;
	text-decoration: unterline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

.h-card {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
}
.h-card img {
	width: 2em;
	height: 2em;
	border-radius: 2em;
}
.linklist {
	font-size: var(--step--1);
	display: flex;
	flex-wrap: wrap;
	width: fit-content;
	gap: 1em;
}