/*
	STRUCTURE:
	0. Layers and imports
	1. Global custom properties
	2. Global and inherited styles
	3. Composition / Layout primitives
	4. Utility classes
	5. Blocks
	6. Exceptions
*/

/* ============ 0. LAYERS AND IMPORTS ============ */

@layer base;

@import url("https://germanfrelo.github.io/base-css-stylesheet/base.css") layer(base);

/* ============ 1. GLOBAL CUSTOM PROPERTIES ============ */

:root {
	/* Font */
	--ff-sans-fallback: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	--ff-body: "Asap", var(--ff-sans-fallback);
	--fw-body-regular: 400;
	--fw-body-medium: 500;
	--fw-body-semibold: 600;
	--fw-body-bold: 700;
	--ff-headings: "Fira Sans", var(--ff-sans-fallback);
	--fw-headings: 700;
	--ff-mono: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;

	/* Line Height */
	--lh-base: 1.7;
	--lh-medium: 1.3;
	--lh-1: calc(var(--lh-base) - 0.1);
	--lh-2: calc(var(--lh-base) - 0.2);
	--lh-3: calc(var(--lh-base) - 0.3);
	--lh-4: calc(var(--lh-base) - 0.4);
	--lh-5: calc(var(--lh-base) - 0.5);

	/* Line length */
	--page-max-inline-size: 65rem;

	/* Fluid Type Scale */

	/* @link https://www.fluid-type-scale.com/calculate?minFontSize=17&minWidth=320&minRatio=1.125&maxFontSize=19&maxWidth=1440&maxRatio=1.2&steps=-1%2C0%2C1%2C2%2C3%2C4%2C5&baseStep=0&prefix=step&decimals=4&useRems=on&remValue=16&previewFont=Asap */
	--step--1: clamp(0.9444rem, 0.0645vw + 0.9315rem, 0.9896rem);
	--step-0: clamp(1.0625rem, 0.1786vw + 1.0268rem, 1.1875rem);
	--step-1: clamp(1.1953rem, 0.3281vw + 1.1297rem, 1.425rem);
	--step-2: clamp(1.3447rem, 0.5218vw + 1.2404rem, 1.71rem);
	--step-3: clamp(1.5128rem, 0.7703vw + 1.3588rem, 2.052rem);
	--step-4: clamp(1.7019rem, 1.0864vw + 1.4846rem, 2.4624rem);
	--step-5: clamp(1.9147rem, 1.486vw + 1.6175rem, 2.9549rem);

	/* Fluid Space Scale */

	/* @link https://utopia.fyi/space/calculator/?c=320,17,1.125,1440,19,1.2,5,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,&g=s,l,xl,12 */

	/* Individual sizes */
	--space-3xs: clamp(0.25rem, 0.23rem + 0.09vw, 0.31rem);
	--space-2xs: clamp(0.56rem, 0.54rem + 0.09vw, 0.63rem);
	--space-xs: clamp(0.81rem, 0.79rem + 0.09vw, 0.88rem);
	--space-s: clamp(1.06rem, 1.03rem + 0.18vw, 1.19rem); /* base */
	--space-m: clamp(1.63rem, 1.57rem + 0.27vw, 1.81rem);
	--space-l: clamp(2.13rem, 2.05rem + 0.36vw, 2.38rem);
	--space-xl: clamp(3.19rem, 3.08rem + 0.54vw, 3.56rem);
	--space-2xl: clamp(4.25rem, 4.11rem + 0.71vw, 4.75rem);
	--space-3xl: clamp(6.38rem, 6.16rem + 1.07vw, 7.13rem);

	/* One-up pairs */
	--space-3xs-2xs: clamp(0.25rem, 0.14rem + 0.54vw, 0.63rem);
	--space-2xs-xs: clamp(0.56rem, 0.47rem + 0.45vw, 0.88rem);
	--space-xs-s: clamp(0.81rem, 0.71rem + 0.54vw, 1.19rem);
	--space-s-m: clamp(1.06rem, 0.85rem + 1.07vw, 1.81rem);
	--space-m-l: clamp(1.63rem, 1.41rem + 1.07vw, 2.38rem);
	--space-l-xl: clamp(2.13rem, 1.71rem + 2.05vw, 3.56rem);
	--space-xl-2xl: clamp(3.19rem, 2.74rem + 2.23vw, 4.75rem);
	--space-2xl-3xl: clamp(4.25rem, 3.43rem + 4.11vw, 7.13rem);

	/* Padding */
	--padding-l: 1.25em;
	--padding-m: 1em;
	--padding-s: 0.75em;
	--padding-xs: 0.5em;
	--padding-2xs: 0.25em;
	--padding-3xs: 0.125em;

	/* Border Width */
	--bw-xs: max(1px, calc(1em / 16));
	--bw-s: calc(1.5em / 16);
	--bw-m: calc(2.5em / 16);
	--bw-l: calc(5em / 16);

	/* Border Radius */
	--border-radius: calc(2.5em / 16);

	/* Link */
	--link-external-icon: "\00A0↗";

	/* Transitions */
	--tr-duration: 0.1s;
	--tr-timing-function: ease-out;

	/* Colors */
	--c-neutral-100: hsl(217deg 0% 100%);
	--c-neutral-97: hsl(217deg 20% 97%);
	--c-neutral-92: hsl(217deg 15% 92%);
	--c-neutral-85: hsl(217deg 10% 85%);
	--c-neutral-70: hsl(217deg 10% 70%);
	--c-neutral-40: hsl(217deg 10% 40%);
	--c-neutral-30: hsl(217deg 10% 30%);
	--c-neutral-20: hsl(217deg 10% 20%);
	--c-neutral-13: hsl(217deg 10% 13%);
	--c-neutral-08: hsl(217deg 10% 8%);
	--c-neutral-darker: hsl(217deg 20% 20% / 10%);
	--c-neutral-lighter: hsl(217deg 10% 100% / 10%);
	--c-blue-on-light: hsl(217deg 90% 48%);
	--c-blue-on-dark: hsl(217deg 100% 72%);
	--c-green-on-light: hsl(157deg 75% 30%);
	--c-green-on-dark: hsl(157deg 100% 50%);

	/* Colors (Light) */
	--c-tx-1: var(--c-neutral-08);
	--c-tx-1-inverse: var(--c-neutral-100);
	--c-tx-2: var(--c-neutral-40);
	--c-bg-1: var(--c-neutral-100);
	--c-bg-2: var(--c-neutral-97);
	--c-bg-a: var(--c-neutral-darker);
	--c-border: var(--c-neutral-85);
	--c-link: var(--c-blue-on-light);
	--c-success: var(--c-green-on-light);
}

@media (prefers-color-scheme: dark) {
	:root {
		/* Colors (Dark) */
		--c-tx-1: var(--c-neutral-97);
		--c-tx-1-inverse: var(--c-neutral-08);
		--c-tx-2: var(--c-neutral-70);
		--c-bg-1: var(--c-neutral-08);
		--c-bg-2: var(--c-neutral-13);
		--c-bg-a: var(--c-neutral-lighter);
		--c-border: var(--c-neutral-30);
		--c-link: var(--c-blue-on-dark);
		--c-success: var(--c-green-on-dark);
	}
}

/* ============ 2. GLOBAL AND INHERITED STYLES ============ */

/* All elements
   ======================================== */

*:where(:not(dialog)) {
	margin: 0;
}

/* Document
   ======================================== */

html {
	color-scheme: light dark; /* This site supports both light and dark mode */
}

/* Sections and headings
   ======================================== */

body {
	font-family: var(--ff-body);
	font-size: var(--step-0);
	font-weight: var(--fw-body-regular);
	font-variant-ligatures: no-common-ligatures;
	line-height: var(--lh-base);
	color: var(--c-tx-1);
	background-color: var(--c-bg-1);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--ff-headings);
	font-weight: var(--fw-headings);
	font-variant-ligatures: normal;
	text-wrap: balance;
}

.card :is(h1, h2, h3, h4, h5, h6) {
	text-wrap: revert;
}

h1 {
	font-size: var(--step-5);
	line-height: var(--lh-5);
}

h2 {
	font-size: var(--step-4);
	line-height: var(--lh-4);
}

h3 {
	font-size: var(--step-3);
	line-height: var(--lh-3);
}

h4 {
	font-size: var(--step-2);
	line-height: var(--lh-2);
}

h5 {
	font-size: var(--step-1);
	line-height: var(--lh-1);
}

h6 {
	font-size: var(--step-0);
}

address {
	font-style: inherit;
}

/* Grouping content
   ======================================== */

hr {
	block-size: var(--bw-m);
	background-color: var(--c-border);
	border: none;
}

pre {
	overflow: auto;
	font-family: var(--ff-mono);
	font-size: 0.875em;
	text-align: start;
	word-break: normal;
	overflow-wrap: normal;
	white-space: pre;
	border: var(--bw-s) solid var(--c-border);
	border-radius: var(--border-radius);
}

pre:has(> :is(code, samp, kbd)) {
	padding-block: var(--padding-s);
	padding-inline: var(--padding-m);
	background-color: var(--c-bg-2);
}

blockquote {
	padding-inline: var(--padding-m);
	margin-inline: 0;
	text-align: start;
	text-wrap: balance;
	border-inline-start: var(--bw-l) solid;
}

ol,
ul,
menu {
	padding-inline-start: var(--padding-m);
}

/*
Remove list styles on `ol` and `ul` elements with an explicit ARIA list role added, which prevents VoiceOver from removing the list semantics in Safari.
*/
:is(ol, ul)[role="list"] {
	padding-inline-start: 0;
	list-style: none;
}

dt {
	font-weight: var(--fw-body-semibold);
}

dd {
	margin-inline-start: var(--space-m);
}

figure {
	display: grid;
	gap: var(--padding-s);
	padding: var(--padding-s);
	background-color: var(--c-bg-2);
	border-radius: var(--border-radius);
}

/* Text-level semantics
   ======================================== */

a {
	--color-underline: color-mix(in srgb, currentcolor 66%, transparent);
	color: var(--c-link);
	text-decoration-color: var(--color-underline);
	text-underline-offset: 0.2ex;
	transition-timing-function: var(--tr-timing-function);
	transition-duration: var(--tr-duration);
	transition-property: color, text-decoration-color, background-color, border-color;
}

/* External links */
a:where([href*="://"])::after
{
	position: relative;
	inset-block-end: 0.05em;
	display: inline-block;
	margin-inline: 0.1em;
	font-family: var(--ff-sans-fallback);
	font-size: 0.75em;
	font-style: normal;
	color: var(--color-underline);
	content: var(--link-external-icon, unset);
	transition-timing-function: var(--tr-timing-function);
	transition-duration: var(--tr-duration);
	transition-property: color;
}

:is(h1, h2, h3, h4, h5, h6) a {
	color: inherit;
}

a:is(:hover, :focus) {
	--color-underline: currentcolor;
}

b,
strong {
	font-weight: var(--fw-body-bold);
}

code,
samp,
kbd {
	font-family: var(--ff-mono);
	font-size: 0.875em;
}

pre :is(code, samp, kbd) {
	font-size: inherit;
}

code,
samp {
	padding-block: var(--padding-3xs);
	padding-inline: var(--padding-2xs);
	white-space: break-spaces;
	background-color: var(--c-bg-2);
	border: var(--bw-xs) solid var(--c-bg-a);
	border-radius: var(--border-radius);
}

:is(h1, h2, h3, h4, h5, h6) code {
	background-color: var(--c-bg-a);
	border: 0;
}

pre > :is(code, samp) {
	padding: 0;
	text-align: start;
	word-break: normal;
	overflow-wrap: normal;
	white-space: pre;
	background-color: transparent;
	border: 0;
}

kbd {
	display: inline-block;
	padding-block: var(--padding-3xs);
	padding-inline: var(--padding-xs);
	font-family: var(--ff-sans-fallback);
	line-height: var(--lh-medium);
	vertical-align: middle;
	background-color: var(--c-bg-2);
	border: var(--bw-xs) solid var(--c-border);
	border-radius: var(--border-radius);
	box-shadow:
		0 calc(var(--bw-xs) / 2) 0 var(--c-border),
		0 0 0 var(--bw-s) var(--c-bg-1) inset;
}

/* Embedded content
   ======================================== */

iframe {
	border: var(--bw-s) solid var(--c-border);
}

/* Tabular data
   ======================================== */

table {
	font-size: var(--step--1);
	line-height: var(--lh-medium);
}

*:has(> table) {
	overflow: auto;
}

th,
td {
	padding: var(--padding-s);
	border: var(--bw-xs) solid var(--c-border);
}

th,
thead {
	font-weight: var(--fw-body-semibold);
}

th,
thead,
tfoot,
td:has(+ th) {
	background-color: var(--c-bg-2);
}

caption {
	padding-block: var(--padding-2xs);
}

/* Forms
   ======================================== */

fieldset {
	border: var(--bw-s) solid var(--c-border);
	border-radius: var(--border-radius);
}

legend {
	padding-inline: var(--padding-2xs);
	font-weight: var(--fw-body-semibold);
}

label {
	display: inline-block;
}

input,
textarea,
select,
button {
	padding-block: var(--padding-xs);
	padding-inline: var(--padding-s);
	line-height: var(--lh-medium);
	color: inherit;
	background-color: var(--c-bg-1);
	border: var(--bw-s) solid var(--c-border);
	border-radius: var(--border-radius);
	transition-timing-function: var(--tr-timing-function);
	transition-duration: var(--tr-duration);
	transition-property: color, background-color, border-color;
}

[type="image"] {
	padding: revert;
	background-color: revert;
	border: revert;
}

[type="color"] {
	inline-size: 3em;
	block-size: 1.5em;
	padding: var(--padding-2xs);
}

[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}

[type="color"]:is(::-webkit-color-swatch, ::-moz-color-swatch) {
	border: var(--bw-xs) solid var(--c-border);
	border-radius: calc(var(--border-radius) - var(--padding-2xs));
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
	display: inline-flex;
	gap: var(--padding-xs);
	align-items: center;
	justify-content: center;
	font-weight: var(--fw-body-medium);
	text-align: center;
	background-color: var(--c-bg-2);
}

[type="submit"] {
	color: var(--c-tx-1-inverse);
	background-color: var(--c-tx-1);
	border-color: var(--c-tx-1);
}

:is(input, textarea, select, button):is(:hover, :focus) {
	border-color: currentcolor;
}

:is(button, [type="button"], [type="reset"], [type="submit"]):is(:hover, :focus) {
	background-color: var(--c-bg-a);
	border-color: var(--c-border);
}

[type="submit"]:is(:hover, :focus) {
	color: var(--c-tx-1);
	background-color: var(--c-tx-1-inverse);
	border-color: var(--c-tx-1);
}

:disabled,
[aria-disabled],
[aria-disabled="true"] {
	opacity: 0.333;
}

/* Interactive elements
   ======================================== */

details {
	border: var(--bw-s) solid var(--c-border);
	border-radius: var(--border-radius);
}

summary {
	padding-block: var(--padding-2xs);
	padding-inline: var(--padding-s);
	transition-timing-function: var(--tr-timing-function);
	transition-duration: var(--tr-duration);
	transition-property: background-color;
}

summary:hover {
	background-color: var(--c-bg-a);
}

details[open] {
	padding: var(--padding-s);
	padding-block-start: 0;
}

details[open] > summary {
	margin-inline: calc(-1 * var(--padding-s));
	font-weight: var(--fw-body-semibold);
	border-block-end: var(--bw-s) solid var(--c-border);
}

/* Scripting
   ======================================== */

canvas {
	border: var(--bw-s) solid var(--c-border);
}

/* ============ 3. COMPOSITION / LAYOUT PRIMITIVES ============ */

/* Center
   ======================================== */

.center {
	box-sizing: content-box;
	max-inline-size: var(--page-max-inline-size, 70ch);
	padding-inline: var(--space-s-m, 1rem);
	margin-inline: auto;
}

/* Cluster
   ======================================== */

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

.cluster > * {
	margin: 0;
}

/* Flow
   ======================================== */

.flow > :is(h1, h2, h3, h4, h5, h6) {
	--flow-space: calc(var(--lh-base) * 1em);
}

.flow > * {
	margin-block: 0;
}

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

/* Grid
   ======================================== */

.grid {
	display: grid;
	grid-template-columns: repeat(var(--grid-placement, auto-fit), minmax(min(100%, var(--grid-min-item-size, 16rem)), 1fr));
	gap: var(--gutter, var(--flow-space, 1em));
}

.grid[data-layout="auto-fill"] {
	--grid-placement: auto-fill;
}

/* Repel
   ======================================== */

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

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

.repel > * {
	margin: 0;
}

/* Sidebar
   ======================================== */

[class*="with-sidebar-"] {
	--contentMin: 66.666%;
	display: flex;
	flex-wrap: wrap;
}

[class*="with-sidebar-"] > * {
	flex-grow: 1;
}

[class*="with-sidebar-"][data-contentMin="66.666"] {
	--contentMin: 66.666%;
}

[class*="with-sidebar-"][data-contentMin="50%"] {
	--contentMin: 50%;
}

.with-sidebar-left > :nth-child(2) {
	flex-grow: 999;
	flex-basis: 0;
	min-inline-size: var(--contentMin);
}

.with-sidebar-right > :nth-child(1) {
	flex-grow: 999;
	flex-basis: 0;
	min-inline-size: var(--contentMin);
}

/* Stack
   ======================================== */

.stack {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.stack > * {
	margin-block: 0;
}

.stack > * + * {
	margin-block-start: var(--gutter, var(--space-s, 1rem));
}

/* Switcher
   ======================================== */

.switcher {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gutter, var(--space-s, 1em));
}

.switcher > * {
	flex-grow: 1;
	flex-basis: calc((30rem - 100%) * 999);
	margin: 0;
}

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

/* ============ 4. UTILITY CLASSES ============ */

/* Standard utility classes
   ======================================== */

.visually-hidden {
	position: absolute !important;
	inline-size: 1px !important;
	block-size: 1px !important;
	overflow: hidden !important;
	white-space: nowrap !important;
	clip-path: inset(50%) !important;
}

/* Design tokens utility classes
   ======================================== */

.flex-justify-center {
	justify-content: center;
}

.gutter-2xs {
	--gutter: var(--space-3xs);
}

.gutter-xs {
	--gutter: var(--space-2xs);
}

.gutter-s {
	--gutter: var(--space-xs);
}

.gutter-m {
	--gutter: var(--space-s);
}

.gutter-l {
	--gutter: var(--space-m);
}

.gutter-xl {
	--gutter: var(--space-l);
}

.gutter-2xl {
	--gutter: var(--space-xl);
}

.gutter-3xl {
	--gutter: var(--space-2xl);
}

.gutter-4xl {
	--gutter: var(--space-3xl);
}

.my-2xs {
	margin-block: var(--space-3xs);
}

.my-xs {
	margin-block: var(--space-2xs);
}

.my-s {
	margin-block: var(--space-xs);
}

.my-m {
	margin-block: var(--space-s);
}

.my-l {
	margin-block: var(--space-m);
}

.my-xl {
	margin-block: var(--space-l);
}

.my-2xl {
	margin-block: var(--space-xl);
}

.my-3xl {
	margin-block: var(--space-2xl);
}

.balanced {
	text-wrap: balance;
	white-space: unset;
}

.font-regular {
	font-weight: var(--fw-body-regular);
}

.font-medium {
	font-weight: var(--fw-body-medium);
}

.font-semibold {
	font-weight: var(--fw-body-semibold);
}

.font-bold {
	font-weight: var(--fw-body-bold);
}

.text-step--1 {
	font-size: var(--step--1);
	line-height: var(--lh-base);
}

.text-step-0 {
	font-size: var(--step-0);
	line-height: var(--lh-base);
}

.text-step-1 {
	font-size: var(--step-1);
	line-height: var(--lh-1);
}

.text-step-2 {
	font-size: var(--step-2);
	line-height: var(--lh-2);
}

.text-step-3 {
	font-size: var(--step-3);
	line-height: var(--lh-3);
}

.text-step-4 {
	font-size: var(--step-4);
	line-height: var(--lh-4);
}

.text-step-5 {
	font-size: var(--step-5);
	line-height: var(--lh-5);
}

/* ============ 5. BLOCKS ============ */

/* About intro
   ======================================== */

.about-intro {
	container: about-intro / inline-size;
}

.about-intro img {
	inline-size: 100%;
	max-inline-size: 9rem;
	border-radius: var(--border-radius);
	transition-timing-function: var(--tr-timing-function);
	transition-duration: var(--tr-duration);
	transition-property: border-radius;
}

@container about-intro (width > 38ch) {
	.about-intro {
		display: flow-root;
	}

	.about-intro img {
		float: right;
		margin-block-end: 0.5em;
		margin-inline-start: 1.5em;
		border-radius: 50%;
		shape-outside: circle();
	}

	.about-intro img + p {
		--flow-space: 0;
	}
}

/* Card
   ======================================== */

.card {
	display: flex;
	flex-direction: column;
	gap: var(--padding-s);
	align-items: flex-start;
	padding: var(--padding-l);
	text-align: start;
	background-color: var(--c-bg-2);
	border-radius: var(--border-radius);
}

/* Icon
   ======================================== */

.icon {
	display: inline-block;
	inline-size: 1em;
	block-size: 1em;
}

/* Link only icon
   ======================================== */

.link-only-icon {
	--link-external-icon: none;
	display: block;
	padding: var(--padding-2xs);
	font-size: var(--step-1);
	line-height: 0;
	color: inherit;
	text-decoration-line: none;
	border-radius: var(--border-radius);
}

.link-only-icon:hover {
	background-color: var(--c-bg-a);
}

/* Link with icon
   ======================================== */

.link-with-icon {
	--link-external-icon: none;
	display: flex;
	gap: var(--padding-xs);
	align-items: center;
	justify-content: center;
	padding-block: var(--padding-xs);
	padding-inline: var(--padding-s);
	font-weight: var(--fw-body-medium);
	line-height: var(--lh-medium);
	text-decoration-color: transparent;
	border: var(--bw-s) solid var(--c-border);
	border-radius: var(--border-radius);
}

.link-with-icon > .icon {
	flex: none;
	color: var(--c-tx-1);
}

.link-with-icon:hover {
	text-decoration-color: revert;
}

.link-with-icon[data-style="alt"]:hover {
	text-decoration-color: transparent;
	border-color: currentcolor;
}

/* Logo
   ======================================== */

.logo {
	display: inline-block;
	font-family: var(--ff-headings);
	font-size: 1.0625em;
	font-weight: var(--fw-headings);
	line-height: var(--lh-medium);
}

a.logo {
	color: inherit;
	text-decoration-line: none;
}

/* Site layout
   ======================================== */

.site-layout {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
}

.site-layout > * {
	min-inline-size: 0;
}

/* Site header
   ======================================== */

.site-header {
	padding-block: var(--space-m);
	line-height: var(--lh-medium);
	background-color: var(--c-bg-2);
}

/* Site header layout
   ======================================== */

.site-header-layout {
	display: flex;
	flex-wrap: wrap;
	row-gap: var(--space-s);
	column-gap: var(--space-m-l);
	align-items: baseline;
	justify-content: space-between;
}

/* Site nav layout
   ======================================== */

.site-nav-layout {
	display: flex;
	flex-wrap: wrap;
	row-gap: var(--space-s);
	column-gap: var(--space-s-m);
	align-items: center;
}

/* Site nav link
   ======================================== */

.site-nav-link {
	display: block;
	font-weight: var(--fw-body-medium);
	line-height: var(--lh-medium);
	color: var(--c-tx-2);
	text-decoration-line: none;
}

.site-nav-link:hover {
	color: var(--c-tx-1);
}

.site-nav-link[aria-current="page"] {
	font-weight: var(--fw-body-semibold);
	color: var(--c-tx-1);
}

/* Site main
   ======================================== */

.site-main {
	padding-block-start: var(--space-l-xl);
	padding-block-end: var(--space-2xl-3xl);
}

/* Site footer
   ======================================== */

.site-footer {
	padding-block: var(--space-l);
	font-size: var(--step--1);
	color: var(--c-tx-2);
	text-align: center;
	text-wrap: balance;
	background-color: var(--c-bg-2);
}

.site-footer a {
	color: inherit;
}

.site-footer a:hover {
	color: var(--c-link);
}

/* Status success
   ======================================== */

.status-success {
	--flow-space: 2em;
	display: flex;
	gap: 1.25ch;
	align-items: center;
	max-inline-size: max-content;
	padding-block: 0.5em;
	padding-inline-start: 1.5ch;
	padding-inline-end: 2.5ch;
	font-size: var(--step--1);
	font-weight: var(--fw-body-medium);
	line-height: var(--lh-medium);
	color: var(--c-success);
	text-transform: uppercase;
	background-color: transparent;
	border: var(--bw-s) solid var(--c-success);
	border-radius: calc(infinity * 1px);
}

.status-success::before {
	display: inline-block;
	block-size: 1cap;
	aspect-ratio: 1;
	content: "";
	background-color: var(--c-success);
	border-radius: 50%;
	animation: fade-in-out 2s linear infinite;
}

@keyframes fade-in-out {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0.25;
	}

	100% {
		opacity: 1;
	}
}

/* Tag
   ======================================== */

.tag {
	display: inline-block;
	padding-block: var(--padding-3xs);
	padding-inline: var(--padding-xs);
	font-size: 0.875em;
	line-height: var(--lh-medium);
	background-color: var(--c-bg-a);
	border-radius: var(--border-radius);
}

/* ============ 6. EXCEPTIONS ============ */