: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: ui-rounded, "Hiragino Maru Gothic ProN", Quicksand,
		Comfortaa, Manjari, "Arial Rounded MT", "Arial Rounded MT Bold", Calibri,
		source-sans-pro, sans-serif;
	--base-font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
}

* {
	box-sizing: border-box;
}

html,
body {
	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;
}
p:not(:last-child){
	margin: 0;
	margin-block-end: 0.3lh;
}

:where(h1,h2,h3,h4,h5,h6){
	line-height: 1.1;
	margin-block-end: 0.3lh;
	font-family: var(--headline-font-family);
	font-weight: normal;
	text-indent: -.1ch;
	letter-spacing: -0.02ch;
}
h1 {
	font-size: var(--step-4);
	font-weight: 800;
}

h2 {
	font-size: var(--step-3);
	font-weight: 800;
}

h3 {
	font-size: var(--step-2);
	font-weight: 600;
}
h4 {
	font-size: var(--step-1);
	font-weight: 600;
}

hgroup{
	margin-bottom: 1lh;
}

hgroup >h1{
	font-size: var(--step-4);
	
	
}
hgroup > p {
	font-size: var(--step-1);
	line-height: 1.5;
	font-style: italic;

	font-weight: 500;
	color: var(--color-text-quiet);
}
p:has(> relative-time) {
	font-size: var(--step-0);
	font-weight: 100;
	color: var(--color-text-quiet);
}

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

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

svg {
	height: 60vmin;
}
/* inline elements */
a {
	color: currentColor;
	text-decoration: unterline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

strong {
	font-weight: 700;
}

/* lists */
/* definition lists */
dl{}
dt {
	font-family: var(--headline-font-family);
	color: var(--color-text-quiet);
	margin: 0;
	font-weight: 800;
	&::after{
		content: ":";
	}
	&::first-letter{
		
	}
}
dd dt {
	margin-block-start: 0.5lh;
}

dd {
	padding-inline-start: 1ch;
	margin: 0;
	font-weight: 100;
	margin-inline-start: 0.5ch;
	border-inline-start: 2px solid rgb(from var(--color-text-normal) r g b / 0.3);
	padding-inline-start: 1ch;
}

.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;
}
body > header {
	color: var(--color-text-quiet);

	display: flex;
	flex-direction: column;
	align-items: center;
	margin: auto;
	max-width: 82ch;
	padding-inline: 1em;
}
body > footer {
	color: var(--color-text-quiet);
	
	border-block-start: 1px solid currentColor;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: auto;
	margin-block-start: 1ch;
	padding-block-start: 1ch;
	max-width: 82ch;
	padding-inline: 1em;
}

table {
}

code {
	tab-size: 3ch;
}
p > code {
	background-color: var(--color-surface-raised);
	border: 1px solid var(--color-text-quiet);
	padding-inline: 0.25em;
	border-radius: 0.2em;
}

.callout {
	--color-callout: white;
	background-color: rgb(from var(--color-callout) r g b / 0.3);
	border: 1px solid rgb(from var(--color-callout) r g b / 0.5);
	box-shadow: inset 0 0 10px rgb(from var(--color-callout) r g b / 0.3);
	border-radius: 0.5em;
	padding: 0.5em 1em;
	margin-block-end: 1em;
}
.note {
	--color-callout: white;
}
.success {
	--color-callout: green;
}
.warning {
	--color-callout: darkorange;
}
.danger {
	--color-callout: red;
}
    
    :where(*){
    --color-base: oklch(49.402% 0.15339 190);
    --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.05 h);
    --accent-100: oklch(from var(--color-base) 93% 0.06 h);
    --accent-150: oklch(from var(--color-base) 85% 0.07 h);
    --accent-200: oklch(from var(--color-base) 80% 0.08 h);
    --accent-300: oklch(from var(--color-base) 70% 0.09 h);
    --accent-400: oklch(from var(--color-base) 60% 0.1 h);
    --accent-500: oklch(from var(--color-base) 50% 0.11 h);
    --accent-600: oklch(from var(--color-base) 40% 0.12 h);
    --accent-700: oklch(from var(--color-base) 30% 0.13 h);
    --accent-750: oklch(from var(--color-base) 25% 0.14 h);
    --accent-800: oklch(from var(--color-base) 20% 0.15 h);
    --accent-850: oklch(from var(--color-base) 15% 0.16 h);
    --accent-900: oklch(from var(--color-base) 10% 0.17 h);
    --accent-950: oklch(from var(--color-base)  5% 0.18 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);
	}
}



    :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);
	font-weight: 900;
	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--1, 0.8rem);
	line-height: 1.35;
	 padding-inline: 3px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
	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);
    font-weight: 800;
    color: var(--color-text-quiet);
}

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

a[aria-current="page"]{
    text-decoration: none;
}
    /* Syntax Highlighting - Prism.js theme */

/* Code blocks */
pre[class*="language-"] {
  background: light-dark(oklch(0.97 0 0), oklch(0.2 0 0));
  color: light-dark(oklch(0.25 0 0), oklch(0.9 0 0));
  padding: 1.5rem;
  margin: 1.5rem 0;
  overflow: auto;
  border-radius: 0.5rem;
  border: 1px solid light-dark(oklch(0.9 0 0), oklch(0.3 0 0));
}

/* Inline code */
code[class*="language-"] {
  color: inherit;
}

:not(pre) > code[class*="language-"] {
  background: light-dark(oklch(0.95 0 0), oklch(0.25 0 0));
  padding: 0.2em 0.4em;
  border-radius: 0.25rem;
  white-space: normal;
}

/* Syntax highlighting tokens */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: light-dark(oklch(0.5 0 0), oklch(0.6 0 0));
  font-style: italic;
}

.token.punctuation {
  color: light-dark(oklch(0.4 0 0), oklch(0.7 0 0));
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  color: light-dark(oklch(0.45 0.15 25), oklch(0.75 0.15 25));
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: light-dark(oklch(0.45 0.15 150), oklch(0.7 0.15 150));
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: light-dark(oklch(0.5 0.12 200), oklch(0.65 0.12 200));
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: light-dark(oklch(0.45 0.15 280), oklch(0.7 0.15 280));
}

.token.function,
.token.class-name {
  color: light-dark(oklch(0.45 0.15 50), oklch(0.75 0.15 50));
}

.token.regex,
.token.important,
.token.variable {
  color: light-dark(oklch(0.5 0.15 30), oklch(0.7 0.15 30));
}

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

.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

/* Line highlighting */
.highlight-line {
  display: block;
  padding: 0.125em 1em;
  margin: 0 -1em;
  background-color: light-dark(oklch(0.9 0 0 / 0.5), oklch(0.3 0 0 / 0.5));
}

.highlight-line-active {
  background-color: light-dark(oklch(0.85 0 0 / 0.7), oklch(0.35 0 0 / 0.7));
}