/*

This is a development CSS file that is compiled to a minified
production stylesheet in assets/built/screen.css using: npm run dev

*/

/* Lib - Local component imports
/* ---------------------------------------------------------- */

/* stylelint-disable at-rule-no-unknown */

/* stylelint-disable at-rule-no-unknown */

/* Min width. */

/* Max width. */

/* Base. */

/* stylelint-disable at-rule-no-unknown */

/* Variables
/* ---------------------------------------------------------- */

:root {
	/* Color over accent color. */
	--color-accent-foreground: #fff;
	--color-accent-text: color-mix(in srgb, var(--ghost-accent-color), var(--color-contrast) 20%);
	--color-accent-background: color-mix(in srgb, var(--ghost-accent-color), var(--color-background-content) 85%);

	/* Colors. */
	--color-contrast: #000;
	--color-background: #FAFAFA;
	--color-background-content: #fff;
	--color-background-100: #fcfcfc;
	--color-background-200: #f7f7f7;
	--color-background-300: #ededed;
	--color-background-400: #dbdbdb;
	--color-dots: #F1F1F1;
	--color-grey-translucent: rgba(224, 224, 224, 0.5);
	--color-foreground: #464646;
	--color-secondary: #646464;
	--color-mute: #a8a8a8;
	--color-border: rgba(102, 102, 102, 0.15);
	--color-success: #348f3f;
	--color-error: #ff4c4c;
	--color-white: #fff;
	--color-black: #000;

	/* Font. */
	--font-family-headings: var(--gh-font-heading, 'Geist', sans-serif);
	--font-family-body: var(--gh-font-body, 'Geist', sans-serif);
	--font-family-button: var(--gh-font-body, 'Geist', sans-serif);
	--font-large: 1.125rem; /* 18px */
	--font-medium: 0.9375rem; /* 15px */
	--font-small: 0.875rem; /* 14px */
	--font-x-small: 0.75rem; /* 12px */

	/* Headings. */
	--font-h1: 2rem; /* 32px */
	--font-h2: 1.625rem; /* 26px */
	--font-h3: 1.375rem; /* 22px */
	--font-h4: 1.25rem; /* 20px */
	--font-h5: 1.125rem; /* 18px */
	--font-h6: 1rem; /* 16px */

	/* Weights. */
	--font-weight-light: 300;
	--font-weight-regular: 400;
	--font-weight-medium: 450;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	/* Spacings. */
	--spacing-1: 0.125rem; /* 2px */
	--spacing-2: 0.25rem; /* 4px */
	--spacing-3: 0.375rem; /* 6px */
	--spacing-4: 0.5rem; /* 8px */
	--spacing-5: 0.625rem; /* 10px */
	--spacing-6: 0.75rem; /* 12px */
	--spacing-7: 1rem; /* 16px */
	--spacing-8: 1.25rem; /* 20px */
	--spacing-9: 1.875rem; /* 30px */
	--spacing-10: 2.5rem; /* 40px */
	--vertical-rhythm: 1rem; /* 12px */

	/* Border radius. */
	--radius-1: 0.375rem; /* 6px */
	--radius-2: 0.625rem; /* 10px */
	--radius-3: 0.875rem; /* 14px */

	/* Container. */
	--container--width: 600px;
	--container-small--width: 460px;

	/* Post and post card. */
	--featured-image--aspect-ratio: 16 / 9;

	/* Popup. */
	--popup--overlay--color: rgba(0, 0, 0, 0.2);

	/* Avatar. */
	--avatar--size: 1.75rem; /* 28px */
	--avatar--font-size: var(--font-x-small);
	--avatar--color: var(--color-secondary);
	--avatar--background-color: var(--color-background-300);
	--avatar-hover--background-color: var(--color-background-400);

	/* Button. */
	--button--padding-v: 0.5rem;
	--button--padding-h: 1.125rem;
	--button--min-width: auto;
	--button--min-height: 2.625rem /* 42px */;
	--button--font-size: 1rem;
	--button--font-weight: var(--font-weight-medium);
	--button--line-height: 1.3;
	--button--border-radius: var(--radius-2);
	--button--color: var(--color-accent-foreground);
	--button--background-color: var(--ghost-accent-color);
	--button--opacity: 1;
	--button--transition:
		background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
	--button-hover--color: var(--color-accent-foreground);
	--button-hover--background-color: var(--ghost-accent-color);
	--button-hover--opacity: 0.9;

	/* Button small. */
	--button-sm--padding-v: 0.5rem;
	--button-sm--padding-h: 0.75rem;
	--button-sm--min-height: 1.875rem;
	--button-sm--font-size: var(--font-small);

	/* Button extra small. */
	--button-xs--padding-v: 0.375rem;
	--button-xs--padding-h: 0.625rem;
	--button-xs--min-height: 1.625rem;
	--button-xs--font-size: var(--font-x-small);

	/* Navigation. */
	--navigation-sidebar--font-size: var(--font-large);
	--navigation-sidebar--gap: var(--spacing-2);
	--navigation-sidebar--link--padding-v: var(--spacing-5);
	--navigation-sidebar--link--padding-h: var(--spacing-6);
	--navigation-sidebar--link--gap: var(--spacing-6);
	--navigation-sidebar--icon--size: 1.5rem;

	--csstools-color-scheme--light: initial;

	color-scheme: light;
}

/* Screen sizes. */

body {
	--screen--width: calc(100vw - var(--scrollbar-width, 0px));
}

:root[data-color-scheme='dark'] {
		--ghost-accent-color: var(--color-dark-accent, var(--color-accent));
		--color-accent-foreground: var(--color-dark-accent-foreground, #fff);
		--color-contrast: #fff;
		--color-background: #1D1E20;
		--color-background-content: #242529;
		--color-dots: #2B2C30;
		--color-background-100: #2B2C30;
		--color-background-200: #2F3035;
		--color-background-300: #38383D;
		--color-background-400: #404046;
		--color-grey-translucent: rgba(81, 84, 92, 0.5);
		--color-foreground: #C7CBD5;
		--color-secondary: #9295A0;
		--color-mute: #777A88;
		--color-border: rgba(147, 148, 159, 0.4);
		--popup--overlay--color: rgba(0, 0, 0, 0.4);

		--csstools-color-scheme--light:  ;

		color-scheme: dark;
	}

@media (prefers-color-scheme: dark) {
	:root[data-color-scheme='system'] {
		--ghost-accent-color: var(--color-dark-accent, var(--color-accent));
		--color-accent-foreground: var(--color-dark-accent-foreground, #fff);
		--color-contrast: #fff;
		--color-background: #1D1E20;
		--color-background-content: #242529;
		--color-dots: #2B2C30;
		--color-background-100: #2B2C30;
		--color-background-200: #2F3035;
		--color-background-300: #38383D;
		--color-background-400: #404046;
		--color-grey-translucent: rgba(81, 84, 92, 0.5);
		--color-foreground: #C7CBD5;
		--color-secondary: #9295A0;
		--color-mute: #777A88;
		--color-border: rgba(147, 148, 159, 0.4);
		--popup--overlay--color: rgba(0, 0, 0, 0.4);

		--csstools-color-scheme--light:  ;

		color-scheme: dark;
	}
	}

/* stylelint-disable at-rule-no-unknown */

*,
*::before,
*::after {
	box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
	:root {
		scroll-behavior: smooth;
	}
}

/* Fix color for FontAwesome icons. */

:where(svg:not([stroke]):not([fill]):has(> :not([stroke]):not([fill]))) {
	fill: currentcolor;
}

body {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

	/* Resolves a problem with Geist font in Safari https://github.com/vercel/geist-font/issues/65 */
	font-synthesis-weight: none;
	-webkit-text-size-adjust: 100%;
	   -moz-text-size-adjust: 100%;
	        text-size-adjust: 100%;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

p {
	margin-top: 0;
	margin-bottom: var(--vertical-rhythm);
}

p:last-child {
		margin-bottom: 0;
	}

input,
button,
select,
textarea {
	font: inherit;
}

hr {
	margin: calc(var(--spacing-8) + var(--spacing-1)) 0;
	border: 0;
	color: var(--color-border);
	opacity: 1;
	border-top: 1px solid var(--color-border);
}

abbr[title] {
	text-decoration: underline;
	-webkit-text-decoration: underline dotted;
	        text-decoration: underline dotted;
	cursor: help;
	-webkit-text-decoration-skip-ink: none;
	        text-decoration-skip-ink: none;
}

address {
	font-style: normal;
	line-height: inherit;
}

ol,
ul {
	padding-left: 2rem;
}

dt {
	font-weight: var(--font-weight-regular);
}

dd {
	margin-left: 0;
}

b,
strong {
	font-weight: var(--font-weight-semibold);
}

small {
	font-size: var(--font-small);
}

sub,
sup {
	position: relative;
	font-size: var(--font-small);
	line-height: 0;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

pre,
code,
kbd,
samp {
	font-family:
		SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
		monospace;
	font-size: 1em;
}

pre {
	display: block;
	overflow: auto;
}

pre code {
		color: inherit;
		font-size: inherit;
		word-break: normal;
	}

code {
	word-wrap: break-word;
}

a > code {
	color: inherit;
}

kbd {
	padding: 0.1875rem 0.375rem;
	border-radius: 4px;
	background-color: var(--color-contrast);
	color: var(--color-background);
	font-size: 0.875em;
}

kbd kbd {
		padding: 0;
		font-size: 1em;
		font-weight: var(--font-weight-regular);
	}

img,
svg {
	vertical-align: middle;
}

table {
	caption-side: bottom;
	border-collapse: collapse;
}

caption {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	color: var(--color-secondary);
	text-align: left;
}

th {
	font-weight: var(--font-weight-medium);
	text-align: inherit;
	text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
	border-color: inherit;
	border-style: solid;
	border-width: 0;
}

label {
	display: inline-block;
}

button {
	border-radius: 0;
}

button:focus:not(:focus-visible) {
	outline: 0;
}

input,
button,
select,
optgroup,
textarea {
	margin: 0;
	font-family: inherit;
}

button,
select {
	text-transform: none;
}

[role='button'] {
	cursor: pointer;
}

select {
	word-wrap: normal;
}

select:disabled {
		opacity: 1;
	}

[list]:not([type='date']):not([type='datetime-local']):not([type='month']):not([type='week']):not([type='time'])::-webkit-calendar-picker-indicator {
	display: none !important;
}

button,
[type='button'],
[type='reset'],
[type='submit'],
[type='file']::file-selector-button {
	-webkit-appearance: button;
	   -moz-appearance: button;
	        appearance: button;
	color: inherit;
}

button:not(:disabled), [type='button']:not(:disabled), [type='reset']:not(:disabled), [type='submit']:not(:disabled), [type='file']::file-selector-button:not(:disabled) {
		cursor: pointer;
	}

::-moz-focus-inner {
	padding: 0;
	border-style: none;
}

textarea {
	resize: vertical;
}

fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

legend {
	width: 100%;
	margin-bottom: 0.5rem;
	padding: 0;
	font-size: 1rem;
	font-weight: var(--font-weight-medium);
	line-height: inherit;
	float: left;
}

legend + * {
		clear: left;
	}

::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
	padding: 0;
}

::-webkit-inner-spin-button {
	height: auto;
}

[type='search'] {
	outline-offset: -2px;
	-webkit-appearance: textfield;
	   -moz-appearance: textfield;
	        appearance: textfield;
}

::-webkit-search-decoration {
	-webkit-appearance: none;
	        appearance: none;
}

::-webkit-color-swatch-wrapper {
	padding: 0;
}

::file-selector-button {
	font: inherit;
	-webkit-appearance: button;
	   -moz-appearance: button;
	        appearance: button;
}

output {
	display: inline-block;
}

iframe {
	display: block;
	border: 0;
}

summary {
	display: list-item;
	cursor: pointer;
}

progress {
	vertical-align: baseline;
}

[hidden] {
	display: none !important;
}

/* stylelint-disable at-rule-no-unknown */

html {
	height: 100%;
}

body {
	display: flex;
	flex-wrap: wrap;
	min-height: 100%;
	margin: 0;
	background: var(--color-background-content);
	color: var(--color-foreground);
	font-family: var(--font-family-body);
	font-size: 16px;
	font-weight: var(--font-weight-regular);
	line-height: 1.5;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	word-break: break-word;
}

body:has(.popup-show) {
	padding-right: var(--scrollbar-width, 0);
}

/* Announcement bar. */

#announcement-bar-root {
	flex: 0 0 100%;
}

/* Hide ghost button member portal. */

#ghost-portal-root > iframe {
	display: none;
}

/* For skip buttons and more. */

.screen-reader-text {
	position: absolute !important;
	z-index: 99999;
	width: 1px !important;
	height: 1px !important;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%) !important;
}

/* stylelint-disable at-rule-no-unknown */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	color: var(--color-contrast);
}

h1 {
	font-family: var(--font-family-headings);
	font-size: var(--font-h1);
	font-weight: var(--font-weight-regular);
	line-height: 1.3;
}

h2 {
	font-family: var(--font-family-headings);
	font-size: var(--font-h2);
	font-weight: var(--font-weight-regular);
	line-height: 1.3;
}

h3 {
	font-family: var(--font-family-headings);
	font-size: var(--font-h3);
	font-weight: var(--font-weight-medium);
	line-height: 1.3;
}

h4 {
	font-family: var(--font-family-headings);
	font-size: var(--font-h4);
	font-weight: var(--font-weight-medium);
	line-height: 1.3;
}

h5 {
	font-family: var(--font-family-headings);
	font-size: var(--font-h5);
	font-weight: var(--font-weight-semibold);
	line-height: 1.3;
}

h6 {
	font-family: var(--font-family-headings);
	font-size: var(--font-h6);
	font-weight: var(--font-weight-semibold);
	line-height: 1.3;
}

/* Links. */

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

a:hover {
		color: var(--ghost-accent-color);
	}

a,
.post-content .kg-cta-sponsor-label a {
	-webkit-text-decoration: underline;
	text-decoration: underline;
	text-decoration-thickness: 0.075em;
	text-underline-offset: 0.15em;
	text-decoration-color: currentcolor;
	transition:
		color 0.1s ease, text-decoration-color 0.1s ease;
}

.post-content .kg-cta-sponsor-label a:hover {
	-webkit-text-decoration: underline;
	text-decoration: underline;
	text-decoration-thickness: 0.075em;
}

a:hover,
.post-content .kg-cta-sponsor-label a:hover {
	text-decoration-color: transparent;
}

/* Figcaption. */

figcaption {
	margin-top: var(--spacing-4);
	color: var(--color-secondary);
	font-size: var(--font-small);
	text-align: center;
}

/* Blockquote. */

blockquote {
	position: relative;
	z-index: 1;
	padding: 0 0 0 var(--spacing-7);
	color: var(--color-contrast);
}

/* Border. */

blockquote::before {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 2px;
		background-color: currentcolor;
		content: '';
	}

/* List. */

.post-content :where(ul, ol) {
	padding-left: 0;
}

.post-content :where(ul, ol) ul,
	.post-content :where(ul, ol) ol,
	.post-content :where(ul, ol) li + li {
		margin-top: 0.5em;
	}

/* Unordered list. */

.post-content :where(ul) {
	list-style: none;
}

.post-content :where(ul) > li {
		position: relative;
		padding-left: var(--spacing-8);
	}

.post-content :where(ul) > li::before {
		content: '';
		position: absolute;
		top: 0.575rem;
		left: 0.5rem;
		width: 0.188rem;
		height: 0.188rem;
		border-radius: 50%;
		background-color: currentcolor;
	}

.post-content :where(ul) ul > li::before {
		border: 1px solid;
		background-color: transparent;
	}

.post-content :where(ul) ul ul > li::before {
		border-radius: 0;
		background-color: currentcolor;
	}

/* Ordered list. */

.post-content :where(ol) {
	padding-left: var(--spacing-8);
}

.post-content :where(ol) > li::marker {
		font-size: 0.938em;
		font-weight: var(--font-weight-medium);
	}

.post-content :where(ol) ol {
		list-style: lower-alpha;
	}

.post-content :where(ol) ol ol {
			list-style: lower-roman;
		}

/* Strong. */

b, strong {
	color: var(--color-contrast);
}

/* Image. */

li > img,
p > img {
	border-radius: var(--radius-2);
}

/* Mark (highlight). */

mark {
	padding: var(--spacing-1) var(--spacing-3);
	border-radius: var(--radius-1);
}

/* Code. */

:not(pre) > code {
	padding: var(--spacing-1) var(--spacing-3);
	border-radius: var(--radius-1);
	background-color: var(--color-background-200);
	color: var(--color-contrast);
	font-size: 0.875em;
	box-shadow: inset 0 0 0 1px var(--color-border);
}

/* Pre. */

pre {
	max-height: 500px;
	padding: var(--spacing-7) var(--spacing-8);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-2);
	background-color: var(--color-background-200);
	color: var(--color-contrast);
	font-size: var(--font-small);
	clip-path: inset(0 round var(--radius-2));
}

/* Table. */

table {
	width: 100%;
	border: 1px solid var(--color-border);
	font-size: 1em;
	border-collapse: collapse;
	border-spacing: 0;
	word-break: initial;
}

table thead {
		color: var(--color-contrast);
		font-weight: var(--font-weight-medium);
		border-bottom: 1px solid var(--color-border);
	}

table tr + tr {
		border-top: 1px solid var(--color-border);
	}

table th,
	table td {
		padding: var(--spacing-5) var(--spacing-6);
	}

table th + th,
	table td + td {
		border-left: 1px solid var(--color-border);
	}

table tfoot {
		border-top: 1px solid var(--color-border);
	}

/* Responsive table. */

.responsive-table {
	overflow-x: auto;
}

/* stylelint-disable at-rule-no-unknown */

form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-7);
}

form > p {
		margin-bottom: 0;
	}

form .icon-loader,
	form .icon-check {
		display: none;
	}

/* Loading. */

form.loading {
		pointer-events: none;
	}

form.loading .icon-arrow-right {
			display: none;
		}

form.loading .icon-loader {
			display: block;
		}

/* Success. */

form.success .icon-arrow-right {
			display: none;
		}

form.success .icon-check {
			display: block;
		}

/* Label. */

label {
	display: block;
	font-size: 1rem;
}

/* Input, select, textarea. */

.post-content .kg-signup-card-input,
form :where(input, select, textarea) {
	display: block;
	width: 100%;
	height: auto;
	min-height: 2.625rem; /* 42px. */
	padding: 0.5rem 1rem; /* 8px 16px. */
	border: 1px solid var(--color-border);
	border-radius: var(--radius-2);
	background-color: var(--color-background-200);
	color: var(--color-contrast);
	font-size: 1rem;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
}

.post-content .kg-signup-card-input::-moz-placeholder, form :where(input, select, textarea)::-moz-placeholder {
		color: var(--color-secondary);
	}

.post-content .kg-signup-card-input::placeholder, form :where(input, select, textarea)::placeholder {
		color: var(--color-secondary);
	}

label + :where(input, select, textarea) {
	margin-top: calc(var(--spacing-3) * -1);
}

/* Button. */

form button,
form .button {
	margin-top: var(--spacing-2);
}

/* Select. */

select {
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	background-size: 10px;
	background-repeat: no-repeat;
	background-position: calc(100% - 10px) 50%;
}

/* Textarea. */

textarea {
	height: 7rem;
}

/* Checkbox. */

[type='checkbox'] {
	border-radius: 0.25rem;
}

[type='checkbox']::before {
		width: var(--font-x-small);
		height: var(--font-x-small);
		-webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.3333 4L5.99996 11.3333L2.66663 8" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
		        mask-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.3333 4L5.99996 11.3333L2.66663 8" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
		-webkit-mask-size: 100% 100%;
		        mask-size: 100% 100%;
	}

/* Radio. */

[type='radio'] {
	border-radius: 50%;
}

[type='radio']::before {
		width: 0.375rem;
		height: 0.375rem;
		border-radius: 50%;
	}

label:has([type='radio']) + label:has([type='radio']) {
	margin-top: calc(var(--spacing-5) * -1);
}

/* Checkbox and radio. */

[type='checkbox'],
[type='radio'] {
	position: relative;
	display: inline-block;
	width: 1rem;
	height: 1rem;
	min-height: auto;
	margin-right: var(--spacing-3);
	padding: 0;
	transition:
		background-color 0.15s ease, border-color 0.15s ease;
	vertical-align: -0.2em;
	outline-offset: 3px;
}

[type='checkbox']::before, [type='radio']::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		background-color: var(--color-background);
		opacity: 0;
		transform: translate(-50%, -50%);
		transition: opacity 0.15s ease;
	}

[type='checkbox']:checked, [type='radio']:checked {
		background-color: var(--color-contrast);
		border-color: var(--color-contrast);
	}

[type='checkbox']:checked::before, [type='radio']:checked::before {
			opacity: 1;
		}

[data-color-scheme='dark'] select {
		background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"%3e%3cpath fill="none" stroke="#fff" stroke-opacity="0.8" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m2 5 6 6 6-6"/%3e%3c/svg%3e');
	}

@media (prefers-color-scheme: dark) {
	[data-color-scheme='system'] select {
		background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"%3e%3cpath fill="none" stroke="#fff" stroke-opacity="0.8" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m2 5 6 6 6-6"/%3e%3c/svg%3e');
	}
	}

@media (max-width: 539px) {
	.post-content .kg-signup-card-input,
	form :where(input, select, textarea) {
		font-size: 1.025rem;
	}
}

/* Alerts. */

.form-alert {
	display: none;
	margin-top: var(--spacing-2);
	font-size: var(--font-small);
}

.form-alert > span {
		display: none;
	}

.form-alert > .success {
		color: var(--color-success);
	}

.form-alert > .error {
		color: var(--color-error);
	}

form.loading:has(.loading) :where(.form-alert, .loading),
form.success:has(.success) :where(.form-alert, .success),
form.error:has(.error) :where(.form-alert, .error) {
	display: block;
}

form.error .form-alert:has(.error:empty) {
	display: none;
}

@media (prefers-reduced-motion) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

@view-transition {
	navigation: auto;
}

::view-transition-old(*),
::view-transition-new(*) {
	mix-blend-mode: normal;
	backface-visibility: hidden;
}

@property --thoughts--view-transition--progress {
	syntax: '<number>';
	initial-value: 0;
	inherits: false;
}

@keyframes thoughts-view-transition {
	0% {
		--thoughts--view-transition--progress: 0;

		opacity: 1;
		transform: none;
	}

	100% {
		--thoughts--view-transition--progress: 1;

		opacity: 1;
		transform: none;
	}
}

::view-transition-old(root) {
	animation: thoughts-view-transition 0.6s cubic-bezier(0.35, 0, 0.4, 1);
	animation-delay: 0s;
	animation-fill-mode: both;
}

::view-transition-new(root) {
	animation: thoughts-view-transition 0.6s cubic-bezier(0.35, 0, 0.4, 1);
	animation-fill-mode: both;
	-webkit-mask-image: linear-gradient(
		270deg,
		#000 calc(-70% + (170% * var(--thoughts--view-transition--progress))),
		transparent calc(170% * var(--thoughts--view-transition--progress))
	);
	        mask-image: linear-gradient(
		270deg,
		#000 calc(-70% + (170% * var(--thoughts--view-transition--progress))),
		transparent calc(170% * var(--thoughts--view-transition--progress))
	);
	-webkit-mask-image: linear-gradient(
		270deg,
		#000 calc(-70% + calc(170% * var(--thoughts--view-transition--progress))),
		transparent calc(170% * var(--thoughts--view-transition--progress))
	);
	        mask-image: linear-gradient(
		270deg,
		#000 calc(-70% + calc(170% * var(--thoughts--view-transition--progress))),
		transparent calc(170% * var(--thoughts--view-transition--progress))
	);
}

/* Components. */

/* stylelint-disable at-rule-no-unknown */

.avatar {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--avatar--size);
	height: var(--avatar--size);
	border-radius: 50%;
	background-color: var(--avatar--background-color);
	color: var(--avatar--color);
	font-size: var(--avatar--font-size);
	font-weight: var(--font-weight-medium);
	line-height: var(--avatar--size);
	transition:
		transform 0.15s ease, background-color 0.15s ease;
	will-change: transform;
}

.avatar img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		color: transparent;
		-o-object-fit: cover;
		   object-fit: cover;
	}

.avatar[data-placeholder]::before {
		--placeholder--background-color: transparent;

		z-index: -1;
		line-height: var(--avatar--size);
		text-transform: uppercase;
	}

.avatar-member {
	--avatar--size: 32px;
}

.avatar-member > svg {
		width: 1.25em;
		height: 1.25em;
	}

button:hover > .avatar,
a:hover > .avatar,
a[aria-expanded='true'] > .avatar {
	background-color: var(--avatar-hover--background-color);
	transform: scale(1.03);
}

/* stylelint-disable at-rule-no-unknown */

.button,
button[type='submit'] {
	position: relative;
	z-index: 1;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: var(--spacing-4);
	min-width: var(--button--min-width);
	min-height: var(--button--min-height);
	padding: var(--button--padding-v) var(--button--padding-h);
	border: 0;
	border-radius: var(--button--border-radius);
	background-color: var(--button--background-color);
	color: var(--button--color);
	font-family: var(--font-family-button);
	font-size: var(--button--font-size);
	font-weight: var(--button--font-weight);
	line-height: var(--button--line-height);
	text-align: center;
	-webkit-text-decoration: none;
	text-decoration: none;
	opacity: var(--button--opacity);
	transition: var(--button--transition);
	cursor: pointer;
	outline-offset: 2px;
}

.button svg:where(:not(.icon-loader):not(.icon-check)), button[type='submit'] svg:where(:not(.icon-loader):not(.icon-check)) {
		display: block;
	}

.button span:empty, button[type='submit'] span:empty {
		display: none;
	}

.button:focus-visible, button[type='submit']:focus-visible {
		clip-path: none;
	}

.button:disabled,
	.button[disabled],
	button[type='submit']:disabled,
	button[type='submit'][disabled] {
		--button--opacity: 0.2;
		--button-hover--opacity: 0.2;

		cursor: not-allowed;
	}

.button:not(:disabled):not([disabled]):hover,
.button:not(:disabled):not([disabled]):focus-visible,
button[type='submit']:not(:disabled):not([disabled]):hover,
button[type='submit']:not(:disabled):not([disabled]):focus-visible,
.button[aria-expanded='true'] {
	background-color: var(--button-hover--background-color);
	color: var(--button-hover--color);
	opacity: var(--button-hover--opacity);
}

/* Link. */

.button-link {
	--button--padding-v: 0px;
	--button--padding-h: 0px;
	--button--min-height: none;
	--button--border-radius: 0;
	--button--color: var(--color-secondary);
	--button--background-color: transparent;
	--button-hover--color: var(--color-contrast);
	--button-hover--background-color: transparent;
	--button-hover--opacity: 1;
}

/* Pagination. */

.pagination-button > .loader {
		position: absolute;
		top: 50%;
		left: 50%;
		display: none;
		transform: translate(-50%, -50%);
	}

.pagination-button > .loader svg {
			width: 1.25em;
			height: 1.25em;
		}

.pagination-button > .complete {
		display: none;
	}

.pagination-button.loading > .loader {
			display: flex;
		}

.pagination-button.loading > .label {
			visibility: hidden;
		}

.pagination-button.complete > .label {
			display: none;
		}

.pagination-button.complete > .complete {
			display: block;
		}

.pagination-button.loading,
	.pagination-button.complete {
		--button-hover--color: var(--color-contrast);
		--button-hover--background-color: var(--color-background-100);
		--button-hover--opacity: 1;

		cursor: default;
	}

.pagination-button.loading > .icon, .pagination-button.complete > .icon {
			display: none;
		}

/* Button skip. */

.button-skip {
	--button-hover--opacity: 1;

	position: absolute;
	top: var(--spacing-4);
	left: var(--spacing-4);
	z-index: 99999;
}

.button-skip:not(:focus-visible) {
		opacity: 0;
		pointer-events: none;
	}

/* Loader. */

.icon-loader path {
	animation: format-icon-loader 0.5s infinite linear;
	transform-origin: 50% 50%;
}

@keyframes format-icon-loader {
	0% {
		transform: rotate(0);
	}

	100% {
		transform: rotate(360deg);
	}
}

:root {
	--lightbox--button--background-color: var(--color-background-400);
}

/* stylelint-disable at-rule-no-unknown */

.logo {
	position: relative;
	z-index: 1;
	display: inline-block;
	color: var(--color-contrast);
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
	-webkit-text-decoration: none;
	text-decoration: none;
}

.logo img {
		width: auto;
		height: auto;
		max-height: var(--logo--max-height, 1.75rem);
	}

/* Background on hover. */

.logo::before {
		position: absolute;
		top: 50%;
		right: calc(var(--spacing-3) * -1);
		left: calc(var(--spacing-3) * -1);
		z-index: -1;
		height: calc(100% + var(--spacing-3) * 2);
		min-height: calc(32px + var(--spacing-2) * 2);
		border-radius: var(--radius-2);
		background-color: var(--color-grey-translucent);
		opacity: 0;
		transform: scale(0.9);
		translate: 0 -50%;
		transition: opacity .15s ease, transform .15s ease;
		content: '';
	}

.logo:hover {
		color: var(--color-contrast);
	}

.logo:hover::before {
			opacity: 1;
			transform: scale(1);
		}

[data-color-scheme='dark'] .logo-light {
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		pointer-events: none;
	}

@media (prefers-color-scheme: dark) {
	[data-color-scheme='system'] .logo-light {
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		pointer-events: none;
	}
	}

[data-color-scheme='light'] .logo-dark {
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		pointer-events: none;
	}

@media (prefers-color-scheme: light) {
	[data-color-scheme='system'] .logo-dark {
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		pointer-events: none;
	}
	}

.dropdown {
	--dropdown--translate-x: 0;
	--dropdown--offset: var(--spacing-3);
	--dropdown--radius: var(--radius-3);

	top: 100%;
	right: -1px;
	width: -moz-max-content;
	width: max-content;
	min-width: 160px;
	max-width: 260px;
	margin-top: var(--dropdown--offset);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-3);
	background-color: var(--color-background-content);
	transform: translate(var(--dropdown--translate-x), -2px);
	transition:
		visibility 0.15s ease, opacity 0.15s ease, transform 0.2s ease;
	background-clip: padding-box;
	box-shadow:
		0 3px 15px rgba(0, 0, 0, 0.1);
}

/* Zone hover. */

.dropdown::before {
		content: '';
		position: absolute;
		top: calc(var(--dropdown--offset) * -1);
		right: 0;
		left: 0;
		height: var(--dropdown--offset);
	}

/* Share. */

.dropdown-share {
	position: relative;
}

.dropdown-share > .dropdown {
		top: auto;
		bottom: 100%;
		margin-top: 0;
		margin-bottom: var(--dropdown--offset);
		padding: var(--spacing-2);
	}

.dropdown-share > .dropdown::before {
			top: auto;
			bottom: calc(var(--dropdown--offset) * -1);
		}

.dropdown-share > .dropdown > ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}

.dropdown-share > .dropdown a {
			-webkit-text-decoration: none;
			text-decoration: none;
		}

.dropdown-share > .dropdown button {
			width: 100%;
			border: 0;
			background-color: transparent;
			text-align: left;
			cursor: pointer;
		}

.dropdown-share > .dropdown a,
		.dropdown-share > .dropdown button {
			display: flex;
			align-items: center;
			gap: var(--spacing-5);
			padding: var(--spacing-3) var(--spacing-5);
			border-radius: calc(var(--dropdown--radius) - var(--spacing-3));
			color: var(--color-contrast);
		}

.dropdown-share > .dropdown a > svg, .dropdown-share > .dropdown button > svg {
				width: 1rem;
				height: 1rem;
			}

.dropdown-share > .dropdown a:hover,
		.dropdown-share > .dropdown button:hover {
			background-color: var(--color-background-200);
			color: var(--color-contrast);
		}

.form-subscribe-fields {
	position: relative;
	width: 100%;
}

.form-subscribe-fields > input {
		min-height: 3.125rem; /* 50px */
		padding-right: 9.375rem; /* 150px */
		padding-left: var(--spacing-8);
		border: 0;
		border-radius: 2rem;
		background-color: var(--color-grey-translucent);
	}

.form-subscribe-fields > button {
		--button--border-radius: 2rem;

		position: absolute;
		width: auto;
		min-height: auto;
		margin-top: 0;
		top: 5px;
		right: 5px;
		bottom: 5px;
		left: auto;
	}

.form-subscribe-members {
	display: flex;
	gap: var(--spacing-5);
	margin-top: var(--spacing-6);
	font-size: var(--font-medium);
}

.form-subscribe-avatars {
	display: flex;
	align-items: center;
}

.form-subscribe-avatars > img {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		-o-object-fit: cover;
		   object-fit: cover;
	}

.form-subscribe-avatars > img + img {
		margin-left: calc(var(--spacing-2) * -1);
	}

.form-subscribe-avatars > img:not(:last-child) {
		-webkit-mask-image: radial-gradient(circle 22px at 125% 50%,transparent 50%,#000 calc(50% + 1px));
		        mask-image: radial-gradient(circle 22px at 125% 50%,transparent 50%,#000 calc(50% + 1px));
	}

.navigation-popup ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

.navigation-popup ul ul {
			padding-left: var(--spacing-6);
		}

.navigation-popup ul ul .nav-link::before {
				left: calc(var(--spacing-6) * -1);
				width: calc(100% + var(--spacing-6));
				border-radius: var(--radius-2);
			}

.navigation-popup .nav-link {
		--collapse--icon: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 15L13 10L8 5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
		--collapse--icon--size: var(--font-small);
		--collapse--icon--rotate: 0deg;
    --collapse-open--icon--rotate: 90deg;

		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		gap: var(--spacing-4);
		width: 100%;
		padding: var(--spacing-3) 0;
		border: 0;
		background-color: transparent;
		color: var(--color-contrast);
		font-weight: var(--font-weight-medium);
		-webkit-text-decoration: none;
		text-decoration: none;
	}

.navigation-popup .nav-link::before {
			position: absolute;
			top: 0;
			left: calc(var(--popup--padding-left) * -1);
			z-index: -1;
			width: calc(100% + var(--popup--padding-left) + var(--popup--padding-right));
			height: 100%;
			transition: background-color .15s ease;
			content: "";
		}

.navigation-popup .nav-link::after {
			color: var(--color-secondary);
		}

.navigation-popup .nav-link:hover,
	.navigation-popup .nav-link-current {
		color: var(--color-contrast);
	}

.navigation-popup .nav-link:hover::before, .navigation-popup .nav-link-current::before {
			background-color: var(--color-background-200);
		}

.navigation-popup button.nav-link {
		cursor: pointer;
	}

/* Section. */

.navigation-popup .nav-section:not(:first-child) {
			margin-top: var(--spacing-5);
		}

.navigation-popup .nav-section-link {
		color: var(--color-secondary);
		font-size: var(--font-medium);
		font-weight: var(--font-weight-medium);
	}

.navigation-popup .nav-section-link::before {
			display: none;
		}

.navigation-popup span.nav-section-link:hover {
		color: var(--color-secondary);
	}

/* Separator. */

.navigation-popup .nav-separator {
		margin: var(--spacing-5) calc(var(--popup--padding-right) * -1) var(--spacing-5) calc(var(--popup--padding-left) * -1);
		border-top: 1px solid var(--color-border);
	}

:root {
	--navigation-mobile--icon--size: 1.25rem;
}

@media (max-width: 539px) {
	body:has(> .navigation-mobile) {
		padding-bottom: calc(var(--navigation-mobile--icon--size) + var(--spacing-5) * 2 + var(--spacing-6));
	}
}

.navigation-mobile {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 10000;
	width: calc(100% - var(--scrollbar-width, 0px));
	background-color: color-mix(in srgb, var(--color-background), transparent 20%);
	backdrop-filter: blur(10px);
	box-shadow: 0 -1px 0 0 var(--color-border);
}

@media (min-width: 540px) {

.navigation-mobile {
		display: none
}
	}

.navigation-mobile > ul {
		position: relative;
		display: flex;
		margin: 0;
		padding: 0 var(--spacing-5);
		list-style: none;
	}

.navigation-mobile > ul > li {
			flex: 1 0 0%;
		}

.navigation-mobile .nav-link {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		padding: var(--spacing-5) var(--spacing-3);
		border-radius: 50%;
		color: var(--color-contrast);
		font-size: var(--font-small);
		font-weight: var(--font-weight-medium);
	}

.navigation-mobile .nav-link::after {
			z-index: -1;
			width: calc(var(--navigation-mobile--icon--size) + var(--spacing-6));
			height: calc(var(--navigation-mobile--icon--size) + var(--spacing-6));
			margin-right: calc(var(--spacing-6) * -0.5);
			margin-left: calc(var(--navigation-mobile--icon--size) * -1 - var(--spacing-6) * 0.5);
			border-radius: 50%;
			background-color: transparent;
			transition: background-color .15s ease-in-out;
			content: "";
		}

.navigation-mobile .nav-link > .label {
			position: absolute;
			bottom: 100%;
			left: 50%;
			z-index: 1;
			width: -moz-max-content;
			width: max-content;
			max-width: calc(var(--screen--width) - var(--spacing-7));
			margin-bottom: var(--spacing-2);
			padding: var(--spacing-2) var(--spacing-5);
			border-radius: 2rem;
			background-color: var(--color-background-300);
			opacity: 0;
			transform: translateX(-50%);
			pointer-events: none;
		}

.navigation-mobile .nav-link > svg {
			width: var(--navigation-mobile--icon--size);
			height: var(--navigation-mobile--icon--size);
		}

.navigation-mobile .nav-link:hover > .label,
		.navigation-mobile .nav-link:focus-visible > .label {
			opacity: 1;
		}

.navigation-mobile .nav-link:hover::after,
	.navigation-mobile .nav-link-current::after {
		background-color: var(--color-background-300);
	}

.navigation-mobile button.nav-link {
		border: 0;
		background-color: transparent;
		cursor: pointer;
	}

/* Hide items. */

@media (max-width: 440px) and (min-width: 380px) {
	.navigation-mobile li:nth-child(n+9) {
		display: none;
	}
}

@media (max-width: 380px) and (min-width: 340px) {
	.navigation-mobile li:nth-child(n+8) {
		display: none;
	}
}

@media (max-width: 340px) {
	.navigation-mobile li:nth-child(n+7) {
		display: none;
	}
}

.popover {
	--popover--offset: var(--spacing-5);

	position: absolute;
	top: 100%;
	z-index: 100;
	width: 300px;
	margin-top: var(--popover--offset);
	margin-left: calc(var(--spacing-4) * -1);
	border-radius: var(--radius-3);
	background-color: var(--color-background-content);
	opacity: 0;
	visibility: hidden;
	transform: scale(.96);
	transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
	box-shadow: 0 4px 40px -15px rgba(0, 0, 0, 0.3);
	transform-origin: top left;
}

/* Zone hover. */

.popover::before {
		position: absolute;
		right: 0;
		bottom: 100%;
		left: 0;
		height: var(--spacing-5);
		content: '';
	}

[data-color-scheme='dark'] .popover {
		box-shadow: 0 4px 30px -12px rgb(0, 0, 0);
	}

@media (prefers-color-scheme: dark) {
	[data-color-scheme='system'] .popover {
		box-shadow: 0 4px 30px -12px rgb(0, 0, 0);
	}
	}

/* Container (with vertical scroll). */

.popover-container {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	max-height: 50vh;
	padding: var(--spacing-4) var(--spacing-4) var(--spacing-7);
	overscroll-behavior: contain;
	overflow-y: auto;
}

/* Cover. */

.popover-container > picture {
		display: block;
		-webkit-mask-image: radial-gradient(circle calc(var(--avatar--size)*.5) at calc(var(--avatar--size)*.5 + var(--spacing-5)) 100%,transparent calc(var(--avatar--size)*.5 + 3px),#000 calc(var(--avatar--size)*.5 + 3.5px));
		        mask-image: radial-gradient(circle calc(var(--avatar--size)*.5) at calc(var(--avatar--size)*.5 + var(--spacing-5)) 100%,transparent calc(var(--avatar--size)*.5 + 3px),#000 calc(var(--avatar--size)*.5 + 3.5px));
	}

.popover-container > picture > img {
			border-radius: calc(var(--radius-3) - var(--spacing-4));
			background-color: var(--color-background-200);
			aspect-ratio: 21 / 9;
			-o-object-fit: cover;
			   object-fit: cover;
		}

/* Avatar. */

.popover-container > a {
		align-self: flex-start;
		margin-top: var(--spacing-4);
		margin-left: var(--spacing-4);
	}

.popover-container > picture + a {
		margin-top: calc(var(--avatar--size) * -0.5);
		margin-left: var(--spacing-5);
	}

.popover-container > picture + a::before {
			position: absolute;
			top: var(--spacing-4);
			right: var(--spacing-4);
			left: var(--spacing-4);
			content: "";
			aspect-ratio: 21 / 9;
		}

/* Name. */

.popover-container > div {
		margin-top: var(--spacing-5);
		padding: 0 var(--spacing-5);
		color: var(--color-contrast);
		font-family: var(--font-family-headings);
		font-size: var(--font-large);
    font-weight: var(--font-weight-medium);
    line-height: 1.3;
	}

.popover-container > div > a {
			-webkit-text-decoration: none;
			text-decoration: none;
		}

/* Location. */

.popover-container > span {
		padding: 0 var(--spacing-5);
		color: var(--color-secondary);
		font-size: var(--font-small);
		font-weight: var(--font-weight-medium);
	}

/* Social Links. */

.popover-container > ul {
		gap: 0;
		margin-top: var(--spacing-3);
		margin-bottom: calc(var(--spacing-2) * -1);
		padding: 0 var(--spacing-5);
	}

.popover-container > ul a {
			padding: var(--spacing-4);
		}

.popover-container > ul .label {
			position: absolute;
			clip-path: inset(50%);
			width: 1px;
			height: 1px;
			margin: -1px;
			overflow: hidden;
		}

/* Top position (default bottom). */

.popover-top {
	top: auto;
	bottom: 100%;
	margin-top: 0;
	margin-bottom: var(--popover--offset);
	transform-origin: bottom left;
}

.popover-top::before {
		top: 100%;
		bottom: auto;
	}

/* Show. */

.popover:hover,
.popover-target:hover ~ .popover {
	height: auto;
	opacity: 1;
	visibility: visible;
	transform: scale(1);
	overflow: visible;
}

/* Hide. */

.popover-hide {
	height: 0;
	overflow: hidden;
	animation: thoughts-popover-hide .2s ease;
}

@keyframes thoughts-popover-hide {
	0%,
	99% {
		height: auto;
		overflow: visible;
	}

	100% {
		height: 0;
		overflow: hidden;
	}
}

/* Socials. */

.social-links {
	--social-links--gap-v: var(--spacing-1);
	--social-links--gap-h: var(--spacing-2);

	display: flex;
	flex-wrap: wrap;
	gap: var(--social-links--gap-v) var(--social-links--gap-h);
	margin: calc(var(--spacing-3) * -1) calc(var(--spacing-4) * -1);
	padding: 0;
	list-style: none;
}

.social-links:empty {
		display: none;
	}

.social-link {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--spacing-4);
	padding: var(--spacing-2) var(--spacing-5);
	border-radius: 2rem;
	color: var(--color-foreground);
	-webkit-text-decoration: none;
	text-decoration: none;
	transition: color .2s ease;
}

/* Zone hover. */

.social-link::before {
		content: "";
		position: absolute;
		top: calc(var(--social-links--gap-v) * -0.5);
		right: calc(var(--social-links--gap-h) * -0.5);
		bottom: calc(var(--social-links--gap-v) * -0.5);
		left: calc(var(--social-links--gap-h) * -0.5);
	}

/* Background. */

.social-link::after {
		position: absolute;
		z-index: -1;
		background-color: transparent;
		transition: background-color .2s ease, color .2s ease, clip-path .2s ease;
		content: "";
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		clip-path: inset(var(--spacing-2) round var(--radius-1));
	}

.social-link:hover {
		color: var(--color-contrast);
	}

.social-link:hover::after {
			background-color: var(--color-grey-translucent);
			clip-path: inset(0 round var(--radius-2));
		}

.social-link > svg {
		display: block;
		width: 1em;
		height: 1em;
		color: var(--color-contrast);
	}

.social-link > span {
		font-size: var(--font-medium);
		font-weight: var(--font-weight-medium);
	}

@container container (width <= 600px) {
	.toc-sticks,
	.toc-overlay {
		display: none;
	}

	.toc {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0 var(--spacing-4);
		width: 100%;
		max-width: var(--container--width);
		margin-top: calc(var(--vertical-rhythm) + var(--spacing-3));
		margin-right: auto;
		margin-left: auto;
		padding: var(--spacing-2);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-2);
		transition: height 0.3s ease;
		overflow: hidden;
	}

		.toc a {
			display: block;
			padding: var(--spacing-1) 0;
			color: var(--color-foreground);
			text-decoration-color: transparent;
		}

			.toc a:hover {
				color: var(--color-contrast);
				text-decoration-color: currentcolor;
			}

		.toc > ul {
			margin: 0;
			padding: var(--spacing-4) var(--spacing-6);
			font-size: var(--font-small);
			font-weight: var(--font-weight-medium);
			flex: 0 0 100%;
			list-style: none;
		}

		.toc > ul ul {
			padding-left: var(--spacing-4);
			list-style: none;
		}

	.toc-title {
		max-width: 100%;
		color: var(--color-contrast);
		font-size: var(--font-small);
		font-weight: var(--font-weight-medium);
		flex: 1 0 0%;
	}

	.toc-button {
		position: static;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 1.875rem; /* 30px */
		height: 1.875rem; /* 30px */
		padding: 0;
		border: 0;
		border-radius: var(--radius-1);
		background-color: var(--color-background-300);
		transition:
			background-color 0.2s ease, color 0.2s ease;
		flex: 0 0 auto;
		cursor: pointer;
	}

		.toc-button::before {
			content: '';
			position: absolute;
			top: -1px;
			right: -1px;
			bottom: -1px;
			left: -1px;
			max-height: 2.5rem; /* 40px */
		}

		.toc-button:hover {
			background-color: var(--color-background-400);
			color: var(--color-contrast);
		}

		.toc-button[aria-expanded='false'] ~ ul {
			display: none;
		}
		.toc-unlock-link a {
			display: flex;
			align-items: center;
			gap: 0.4em;
		}

		.toc-unlock-link svg {
			width: 1em;
			min-width: 1em;
			height: 1em;
		}

	.toc > .toc-unlock-link {
		display: none;
	}
}

@container container (width > 600px) {
	.toc {
		position: fixed;
		top: 50%;
		right: calc(var(--layout--offset) * 2);
		z-index: 14;
		width: 320px;
		max-height: min(340px, 60vh);
		padding: var(--spacing-5) 0;
		border-radius: var(--radius-3);
		background-color: var(--color-background-content);
		font-weight: var(--font-weight-medium);
		opacity: 0;
		transform: translateY(-50%);
		transition: clip-path .4s cubic-bezier(.32,.72,0,1), opacity .3s ease;
		background-clip: padding-box;
		overflow-y: auto;
		pointer-events: visible;
		overscroll-behavior: contain;
		clip-path: inset(calc(50% - var(--toc--sticks--height) * 0.5) 0 calc(50% - var(--toc--sticks--height) * 0.5) calc(100% - 12px - var(--spacing-8)) round var(--radius-2));
	}

		.toc > .toc-button,
		.toc > .toc-title {
			display: none;
		}

		.toc > ul {
			font-size: var(--font-medium);
			font-weight: var(--font-weight-medium);
			line-height: 1.2;
			opacity: 0;
			transition: opacity .4s ease;
		}

			.toc > ul > li > ul {
				padding-right: var(--spacing-4);
				padding-left: var(--spacing-4);
			}

		.toc ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}

			.toc ul ul {
				padding-left: var(--spacing-4);
				flex: 0 0 100%;
			}

				.toc ul ul a {
					padding-right: var(--spacing-6);
					padding-left: var(--spacing-6);
					border-radius: var(--radius-2);
				}

		.toc a {
			display: block;
			padding: var(--spacing-3) var(--spacing-8);
			color: var(--color-foreground);
			-webkit-text-decoration: none;
			text-decoration: none;
			transition: color .15s ease, background-color .15s ease;
			flex: 1 0 0%;
		}

		.toc:hover a.active,
		.toc a:hover {
			background-color: var(--color-background-200);
			color: var(--color-contrast);
		}

	/* Show toc. */
	.toc:hover,
	.toc:has(a:focus-visible),
	.toc-sticks:hover + .toc {
		clip-path: inset(0 round var(--radius-2));
		opacity: 1;
	}

		.toc:hover > ul, .toc:has(a:focus-visible) > ul, .toc-sticks:hover + .toc > ul {
			opacity: 1;
			transition-delay: .15s;
		}

	/* Hide sticks. */
	.toc-sticks:hover,
	.toc-sticks:has(+ .toc:hover) {
		opacity: 0;
		pointer-events: none;
	}

	/* Sticks. */
	.toc-sticks {
		position: fixed;
		top: 50%;
		right: var(--layout--offset);
		z-index: 15;
		display: flex;
		flex-direction: column;
		gap: var(--spacing-6);
		max-height: 150px;
		padding-right: var(--spacing-8);
		padding-left: var(--spacing-5);
		opacity: 1;
		transform: translateY(-50%);
		transition: opacity .2s ease;
		overflow-y: auto;
		scrollbar-width: none;
	}

		.toc-sticks::-webkit-scrollbar {
			display: none;
		}

		.toc-sticks:has(+ .toc-hidden) {
			display: none;
		}

		.toc-sticks > span {
			width: 10px;
			border-top: 1.5px solid color-mix(in srgb, var(--color-contrast), transparent 70%);
			transform-origin: right;
			transition: transform .2s ease, border-color .2s ease;
		}

		/* Active stick. */
		.toc-sticks:has(+ .toc a.active) > span.active {
			transform: scaleX(1.5);
			border-color: var(--color-contrast);
		}

	/* Overlay. */
	.toc-overlay {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 13;
		width: 100%;
		height: 100%;
		background-color: var(--popup--overlay--color);
		pointer-events: none;
		opacity: 0;
		transition: opacity .3s ease;
	}

		.toc-hidden + .toc-overlay {
			display: none;
		}

		.toc-sticks:hover ~ .toc-overlay,
		.toc:hover + .toc-overlay {
			opacity: 1;
		}
}

.toc-hidden {
	display: none;
}

.toc-unlock-link svg {
		vertical-align: -0.1lh;
		margin-right: var(--spacing-1);
	}

/* stylelint-disable at-rule-no-unknown */

.toggle-color-scheme-button {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	color: var(--color-secondary);
	transition:
		color 0.15s ease, background-color 0.15s ease;
	cursor: pointer;
}

.toggle-color-scheme-button:hover {
		background-color: var(--color-grey-translucent);
	}

.toggle-color-scheme-button .icon {
		position: absolute;
		display: block;
		width: 1.125em;
		height: 1.125em;
	}

.toggle-color-scheme-button .icon-sun,
	.toggle-color-scheme-button .icon-moon {
		opacity: 0;
	}

[data-color-scheme='light'] .toggle-color-scheme-button .icon-sun {
			opacity: 1;
		}

[data-color-scheme='light'] .toggle-color-scheme-button .icon-moon,
		[data-color-scheme='light'] .toggle-color-scheme-button .icon-circle-half {
			opacity: 0;
		}

[data-color-scheme='dark'] .toggle-color-scheme-button .icon-moon {
			opacity: 1;
		}

[data-color-scheme='dark'] .toggle-color-scheme-button .icon-sun,
		[data-color-scheme='dark'] .toggle-color-scheme-button .icon-circle-half {
			opacity: 0;
		}

.tooltip:not(.tooltip-mobile) {
		position: absolute;
		top: 100%;
		right: 0;
		z-index: 10;
		width: -moz-max-content;
		width: max-content;
		margin-top: var(--spacing-4);
		padding: var(--spacing-1) var(--spacing-5);
		border-radius: 2rem;
		background-color: rgba(5, 5, 5, 0.7);
		color: var(--color-white);
		font-size: var(--font-small);
		font-weight: var(--font-weight-medium);
		opacity: 0;
		transition: opacity .2s ease;
		backdrop-filter: blur(10px);
		transform-origin: top;
		pointer-events: none;
	}

.tooltip:not(.tooltip-mobile)::before {
			position: absolute;
			right: 10px;
			bottom: 100%;
			width: 0;
			height: 0;
			margin-left: -4px;
			content: "";
			border-left: 4px solid transparent;
			border-right: 4px solid transparent;
			border-bottom: 4px solid rgba(5, 5, 5, 0.7);
		}

.post-template .tooltip:not(.tooltip-mobile) {
		right: -0.5em;
	}

@container container (width <= 600px) {
		.tooltip-mobile {
		position: absolute;
		top: 100%;
		right: 0;
		z-index: 10;
		width: -moz-max-content;
		width: max-content;
		margin-top: var(--spacing-4);
		padding: var(--spacing-1) var(--spacing-5);
		border-radius: 2rem;
		background-color: rgba(5, 5, 5, 0.7);
		color: var(--color-white);
		font-size: var(--font-small);
		font-weight: var(--font-weight-medium);
		opacity: 0;
		transition: opacity .2s ease;
		backdrop-filter: blur(10px);
		transform-origin: top;
		pointer-events: none;
	}

		.tooltip-mobile::before {
			position: absolute;
			right: 10px;
			bottom: 100%;
			width: 0;
			height: 0;
			margin-left: -4px;
			content: "";
			border-left: 4px solid transparent;
			border-right: 4px solid transparent;
			border-bottom: 4px solid rgba(5, 5, 5, 0.7);
		}
		.post-template .tooltip-mobile {
		right: -0.5em;
	}
}

.tooltip-target {
	position: relative;
}

.tooltip-target:hover > .tooltip {
	opacity: 1;
}

/* Ghost components. */

/* stylelint-disable at-rule-no-unknown */

.post-content .kg-audio-card {
		position: relative;
		min-height: auto;
		padding: var(--spacing-7) var(--spacing-8);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-2);
		background-color: transparent;
		color: var(--color-contrast);
		box-shadow: none;
	}

.post-content .kg-audio-thumbnail {
		position: absolute;
		top: var(--spacing-7);
		left: var(--spacing-8);
		width: 22px;
		min-width: auto;
		height: 22px;
		margin: 0;
		border-radius: 0;
	}

.post-content .kg-audio-thumbnail.placeholder::before {
			content: '';
			width: 0.75rem;
			height: 0.75rem;
			background-color: var(--color-accent-foreground);
			-webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 12V3.33333L14 2V10.6667" stroke="black" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z" stroke="black" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 12.6667C13.1046 12.6667 14 11.7713 14 10.6667C14 9.56212 13.1046 8.66669 12 8.66669C10.8954 8.66669 10 9.56212 10 10.6667C10 11.7713 10.8954 12.6667 12 12.6667Z" stroke="black" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg>');
			        mask-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 12V3.33333L14 2V10.6667" stroke="black" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z" stroke="black" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 12.6667C13.1046 12.6667 14 11.7713 14 10.6667C14 9.56212 13.1046 8.66669 12 8.66669C10.8954 8.66669 10 9.56212 10 10.6667C10 11.7713 10.8954 12.6667 12 12.6667Z" stroke="black" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg>');
			-webkit-mask-size: 100% 100%;
			        mask-size: 100% 100%;
		}

.post-content .kg-audio-thumbnail.placeholder svg {
			display: none;
		}

.post-content .kg-audio-player-container {
		display: block;
	}

.post-content .kg-audio-seek-slider {
		display: block;
		flex-basis: 0;
	}

.post-content .kg-audio-title {
		display: flex;
		align-items: center;
		min-height: 22px;
		margin-top: 0;
		margin-bottom: var(--spacing-6);
		padding: 0 0 0 calc(var(--spacing-4) + 22px);
		color: var(--color-contrast);
		font-size: 1rem;
		font-weight: var(--font-weight-medium);
	}

.post-content .kg-audio-player {
		flex-wrap: wrap;
		gap: var(--spacing-3);
		padding: 0;
	}

.post-content .kg-audio-pause-icon,
	.post-content .kg-audio-play-icon {
		width: 1rem;
		height: 1rem;
		padding-right: 0;
	}

.post-content .kg-audio-pause-icon > svg, .post-content .kg-audio-play-icon > svg {
			width: var(--font-x-small);
			height: var(--font-x-small);
		}

.post-content .kg-audio-current-time {
		min-width: 2.25rem;
		padding: 0;
		font-size: var(--font-small);
		font-weight: var(--font-weight-regular);
		text-align: right;
	}

.post-content .kg-audio-time {
		width: auto;
		max-width: 3.25rem;
		color: var(--color-secondary);
		font-size: var(--font-small);
		font-weight: var(--font-weight-regular);
	}

.post-content .kg-audio-duration {
		min-width: 2.25rem;
		margin-left: var(--spacing-3);
		padding: 0;
	}

.post-content .kg-audio-playback-rate {
		justify-content: center;
		min-width: 2rem;
		padding: 0.15rem 0.25rem;
		border-radius: 0.25rem;
		font-size: var(--font-small);
		font-weight: var(--font-weight-regular);
	}

.post-content .kg-audio-playback-rate:hover {
			box-shadow: 0 0 0 1px var(--color-border);
		}

.post-content .kg-audio-volume-slider {
		width: 3.75rem;
	}

.post-content .kg-audio-unmute-icon {
		margin-right: -6px;
	}

/* stylelint-disable at-rule-no-unknown */

blockquote.kg-blockquote-alt {
	padding: var(--spacing-7);
	font-size: var(--font-h1);
	font-weight: var(--font-weight-light);
	font-style: normal;
	line-height: 1.4;
}

/* Border. */

blockquote.kg-blockquote-alt::before {
		display: none;
	}

/* stylelint-disable at-rule-no-unknown */

.post-content .kg-bookmark-card {
		position: relative;
	}

.post-content .kg-bookmark-card a.kg-bookmark-container {
		border: 0;
		border-radius: var(--radius-2);
		background-color: var(--color-background);
		transition: background-color 0.15s ease;
	}

/* Border. */

.post-content .kg-bookmark-card a.kg-bookmark-container::before {
			position: absolute;
			z-index: 1;
			border: 1px solid var(--color-border);
			border-radius: inherit;
			content: '';
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			pointer-events: none;
		}

.post-content .kg-bookmark-card a.kg-bookmark-container:hover {
			border: 0;
			border-radius: var(--radius-2);
			background-color: var(--color-background-200);
		}

.post-content .kg-bookmark-container {
		gap: var(--spacing-6);
		padding: var(--spacing-7) var(--spacing-8);
	}

.post-content .kg-bookmark-thumbnail {
		margin-top: calc(var(--spacing-7) * -1);
		margin-right: calc(var(--spacing-8) * -1);
		margin-bottom: calc(var(--spacing-7) * -1);
		background-color: var(--color-background-300);
	}

.post-content .kg-bookmark-content {
		gap: var(--spacing-4);
		padding: 0;
	}

.post-content .kg-bookmark-title {
		display: -webkit-box;
		color: var(--color-contrast);
		font-size: 1rem;
		font-weight: var(--font-weight-medium);
		overflow: hidden;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

.post-content .kg-bookmark-description {
		-webkit-line-clamp: 3;
		max-height: none;
		margin-top: 0;
		color: var(--color-foreground);
		font-size: var(--font-small);
		line-height: inherit;
		opacity: 1;
	}

.post-content .kg-bookmark-metadata {
		margin-top: var(--spacing-2);
		color: var(--color-contrast);
		font-size: var(--font-small);
		font-weight: var(--font-weight-medium);
	}

.post-content .kg-bookmark-icon {
		margin-right: var(--spacing-4);
	}

.post-content .kg-bookmark-metadata > span:nth-of-type(2)::before {
		content: '-';
	}

.post-content .kg-bookmark-metadata > :not(img) {
		opacity: 1;
	}

.kg-btn,
.kg-cta-button,
.kg-header-card-button,
.kg-signup-card-button,
.kg-product-card-button {
	display: inline-flex;
	justify-content: center;
	min-width: var(--button--min-width);
	height: auto !important;
	min-height: var(--button--min-height) !important;
	padding: var(--button--padding-v) var(--button--padding-h) !important;
	border-radius: var(--button--border-radius) !important;
	font-family: var(--font-family-button) !important;
	font-size: var(--button--font-size) !important;
	font-weight: var(--button--font-weight) !important;
	line-height: var(--button--line-height) !important;
	text-align: center;
	opacity: var(--button--opacity) !important;
	transition: var(--button--transition) !important;
	outline-offset: 2px;
}

.kg-btn:hover, .kg-cta-button:hover, .kg-header-card-button:hover, .kg-signup-card-button:hover, .kg-product-card-button:hover {
		opacity: var(--button-hover--opacity) !important;
	}

.stop-transition .kg-btn, .stop-transition .kg-cta-button, .stop-transition .kg-header-card-button, .stop-transition .kg-signup-card-button, .stop-transition .kg-product-card-button {
		transition-duration: 0s !important;
	}

.kg-btn,
.kg-product-card-button {
	background-color: var(--button--background-color) !important;
	color: var(--button--color) !important;
}

.kg-btn:hover, .kg-product-card-button:hover {
		background-color: var(--button-hover--background-color) !important;
		color: var(--button-hover--color) !important;
	}

/* stylelint-disable at-rule-no-unknown */

.post-content .kg-callout-card {
		position: relative;
		gap: var(--spacing-4);
		padding: var(--spacing-7) var(--spacing-8);
		color: var(--color-contrast);
		border-radius: var(--radius-2);
	}

.post-content .kg-callout-card div.kg-callout-emoji {
		display: flex;
		align-self: flex-start;
		align-items: center;
		justify-content: center;
		padding-right: 0;
		border-radius: 50%;
	}

.post-content .kg-callout-card-accent {
		color: var(--color-accent-foreground);
	}

.kg-code-card pre {
	margin-bottom: 0;
}

.post-content {

	/*
	 * Colors.
	 */

	/*
	 * Button colors.
	 */
}

.post-content .kg-cta-card {
		border-radius: var(--radius-2);
	}

/* Sponsored. */

.post-content .kg-cta-sponsor-label-wrapper {
		margin: 0 var(--spacing-8);
		padding: var(--spacing-7) 0;
	}

.post-content .kg-cta-sponsor-label {
		font-family: inherit;
		font-size: var(--font-x-small);
		font-weight: var(--font-weight-semibold);
	}

/* Image. */

.post-content .kg-cta-image-container img {
		border-radius: var(--radius-1);
	}

/* Content. */

.post-content .kg-cta-content {
		gap: var(--spacing-8);
		padding: var(--spacing-7) var(--spacing-8) var(--spacing-8);
	}

.post-content .kg-cta-has-img .kg-cta-content {
		padding-top: var(--spacing-8);
	}

/* Content inner. */

.post-content .kg-cta-content-inner {
		gap: var(--spacing-8);
	}

/* Text. */

.post-content .kg-cta-text p {
		line-height: inherit;
	}

/* Button. */

.post-content .kg-cta-has-img .kg-cta-button {
		margin-bottom: var(--spacing-2);
	}

.post-content .kg-cta-button {
		align-self: flex-start;
		width: auto;
	}

.post-content .kg-cta-button:hover {
			opacity: var(--button-hover--opacity);
		}

/* White. */

.post-content .kg-cta-bg-white {
		border: 1px solid var(--color-border);
		background-color: var(--color-background);
		box-shadow: none;
	}

.post-content .kg-cta-bg-white .kg-cta-sponsor-label-wrapper {
			border-color: var(--color-border);
		}

.post-content .kg-cta-bg-white .kg-cta-sponsor-label {
			color: var(--color-contrast);
		}

.post-content .kg-cta-bg-white .kg-cta-sponsor-label a:hover {
				color: var(--ghost-accent-color);
				opacity: 1;
			}

.post-content .kg-cta-bg-white .kg-cta-sponsor-label span:not(a span) {
			color: var(--color-secondary);
		}

/* Grey. */

.post-content .kg-cta-bg-grey {
		background-color: var(--color-background-200);
	}

.post-content .kg-cta-bg-grey .kg-cta-sponsor-label {
			color: var(--color-contrast);
		}

/* Black. */

.post-content .kg-cta-button[style='background-color: #000000; color: #FFFFFF;'] {
		background-color: var(--color-contrast) !important;
		color: var(--color-background) !important;
	}

/* Grey. */

.post-content .kg-cta-button[style='background-color: #F0F0F0; color: #000000;'] {
		background-color: var(--color-background-300) !important;
		color: var(--color-contrast) !important;
	}

/* Accent. */

.post-content .kg-cta-button.kg-style-accent {
		color: var(--color-accent-foreground) !important;
	}

.post-content .kg-embed-card {

	/*
		Adds responsive styles for specific providers only to prevent layout issues.
		Previously applied to all embeds, caused layout problems.
		For instance, Spotify embeds require fixed heights without aspect ratios.
	*/
}

.post-content .kg-embed-card > :where(
			iframe[src*='player.vimeo.com'],
			iframe[src*='youtube.com'],
			iframe[src*='youtube-nocookie.com']
		) {
		background-color: var(--color-background-300);
	}

.post-content .kg-embed-card > iframe {
		border-radius: 0;
	}

.post-content .kg-embed-card > iframe[src*='player.vimeo.com'],
	.post-content .kg-embed-card > iframe[src*='youtube.com'],
	.post-content .kg-embed-card > iframe[src*='youtube-nocookie.com'],
	.post-content .kg-embed-card > iframe[src*='kickstarter.com'][src*='video.html'] {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}

/* Twitter. */

.kg-embed-card > .twitter-tweet {
	margin: 0 auto;
}

/* stylelint-disable at-rule-no-unknown */

.post-content .kg-file-card {
		position: relative;
	}

.post-content .kg-file-card a.kg-file-card-container {
		gap: var(--spacing-6);
		min-height: auto;
		padding: var(--spacing-7) var(--spacing-8);
		border: 0;
		border-radius: var(--radius-2);
		background-color: transparent;
		color: var(--color-foreground);
		transition: background-color 0.15s ease;
		box-shadow: inset 0 0 0 1px var(--color-border);
	}

.post-content .kg-file-card a.kg-file-card-container:hover {
			border: 0;
			background-color: var(--color-background-200);
		}

.post-content .kg-file-card-contents {
		justify-content: space-evenly;
		gap: var(--spacing-4);
		margin: 0;
	}

/* Title. */

.post-content .kg-file-card-title {
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		color: var(--color-contrast);
		font-size: 1rem;
		font-weight: var(--font-weight-medium);
	}

/* Caption. */

.post-content .kg-file-card-caption {
		margin-top: 0;
		font-size: var(--font-small);
		line-height: inherit;
		opacity: 1;
	}

.post-content .kg-file-card-caption:empty {
			display: none;
		}

.post-content .kg-file-card-title + .kg-file-card-caption {
		margin-top: var(--spacing-1);
	}

/* Meta data. */

.post-content .kg-file-card-metadata {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		gap: 0 var(--spacing-sm);
		margin-top: 0;
		color: var(--color-mute);
		font-size: var(--font-x-small);
		font-weight: var(--font-weight-medium);
		line-height: inherit;
	}

.post-content .kg-file-card-filename {
		font-weight: inherit;
	}

.post-content .kg-file-card-filesize {
		margin-left: auto;
		font-size: 1em;
		opacity: 1;
	}

.post-content .kg-file-card-filesize::before {
			display: none;
		}

/* Icon. */

.post-content .kg-file-card-icon {
		flex: 0 0 auto;
		min-width: auto;
		border-radius: var(--radius-1);
		background-color: var(--ghost-accent-color);
	}

.post-content .kg-file-card-icon::before {
			display: none;
		}

.post-content .kg-file-card-icon svg {
			width: 1rem;
			height: 1rem;
			color: var(--color-accent-foreground);
		}

.post-content .kg-gallery-card {
		--gap: var(--spacing-5);
	}

.post-content .kg-gallery-image img {
		-o-object-fit: cover;
		   object-fit: cover;
		background-color: var(--color-background-300);
	}

.post-content .kg-gallery-card:not(.kg-card-hascaption) + .kg-gallery-card,
	.post-content .kg-gallery-card:not(.kg-card-hascaption) + .kg-image-card,
	.post-content .kg-image-card:not(.kg-card-hascaption) + .kg-gallery-card,
	.post-content .kg-image-card:not(.kg-card-hascaption) + .kg-image-card {
		margin-top: calc(var(--spacing-4) * -1 + var(--gap));
	}

/* Wrapper text. */

.kg-header-card-text {
	padding: var(--header--text--padding) !important;
}

/* Heading. */

.kg-header-card-heading {
	font-size: var(--header--heading--font-size) !important;
	font-weight: var(--header--heading--font-weight) !important;
	line-height: var(--header--heading--line-height, 1.2) !important;
	letter-spacing: var(--header--heading--letter-spacing, inherit) !important;
}

/* Subheading. */

.kg-header-card-subheading {
	margin: var(--header--subheading--margin, 0) !important;
	font-size: var(--header--subheading--font-size) !important;
	font-weight: var(--header--subheading--font-weight) !important;
	line-height: var(--header--subheading--line-height, inherit) !important;
}

/* Button. */

.kg-header-card-button {
	margin: var(--header--button--margin, 0) !important;
	letter-spacing: inherit !important;
	outline: revert !important;
}

/* Layout split. */

.kg-header-card.kg-layout-split .kg-header-card-content {
	grid-template-columns: minmax(0, 1fr);
}

/* Image cover. */

.kg-header-card.kg-layout-split:not(.kg-content-wide) picture {
	aspect-ratio: 16/9;
}

/* Image contain. */

.kg-header-card.kg-layout-split.kg-content-wide .kg-header-card-image {
	height: auto !important;
	padding: var(--layout--gap) !important;
	aspect-ratio: 16/9;
	-o-object-fit: cover !important;
	   object-fit: cover !important;
}

/*
 * Change colors for toggle color scheme.
 */

/* Background grey. */

.kg-header-card[data-background-color="#F0F0F0"] {
	background-color: var(--color-background-200) !important;
}

.kg-header-card[data-background-color="#F0F0F0"] .kg-header-card-heading {
		color: var(--color-contrast) !important;
	}

.kg-header-card[data-background-color="#F0F0F0"] .kg-header-card-subheading {
		color: var(--color-foreground) !important;
	}

/* Background accent. */

.kg-header-card[data-background-color="accent"].kg-layout-split,
.kg-header-card[data-background-color="accent"]:not(.kg-layout-split):not(:has(> picture)) {
	background-color: var(--ghost-accent-color) !important;
}

.kg-header-card[data-background-color="accent"].kg-layout-split .kg-header-card-heading, .kg-header-card[data-background-color="accent"]:not(.kg-layout-split):not(:has(> picture)) .kg-header-card-heading {
		color: var(--color-accent-foreground) !important;
	}

.kg-header-card[data-background-color="accent"].kg-layout-split .kg-header-card-subheading, .kg-header-card[data-background-color="accent"]:not(.kg-layout-split):not(:has(> picture)) .kg-header-card-subheading {
		color: color-mix(in srgb, var(--color-accent-foreground), transparent 10%) !important;
	}

/* White colors when background image. */

.kg-header-card:not(.kg-layout-split):has(> picture) .kg-header-card-heading,
	.kg-header-card:not(.kg-layout-split):has(> picture) .kg-header-card-subheading {
		color: var(--color-white) !important;
	}

/* Button white. */

.kg-header-card[data-background-color="#F0F0F0"] [data-button-color="#ffffff"][data-button-text-color="#000000"] {
	background-color: var(--color-background) !important;
	color: var(--color-contrast) !important;
}

/* Button black. */

.kg-header-card[data-background-color="#F0F0F0"] [data-button-color="#000000"][data-button-text-color="#FFFFFF"] {
	background-color: var(--color-contrast) !important;
	color: var(--color-background) !important;
}

/* Button accent. */

.kg-header-card .kg-style-accent {
	color: var(--color-accent-foreground) !important;
}

.kg-header-card {
	--header--text--padding: calc(var(--spacing-10) * 2) var(--layout--gap);

	/* Heading. */
	--header--heading--font-size: clamp(18px, 13.9286px + 1.0714vw, 30px);
	--header--heading--font-weight: var(--font-weight-semibold);

	/* Subheading. */
	--header--subheading--margin: var(--spacing-7) 0 0;
	--header--subheading--font-size: clamp(15px, 14.3214px + 0.1786vw, 17px);
	--header--subheading--line-height: 1.5;

	/* Button. */;
	--header--button--margin: var(--spacing-8) 0 0;

	border-radius: var(--radius-3);
	overflow: hidden;
}

.kg-header-card.kg-width-full {
		border-radius: 0;
	}

.kg-header-card.kg-layout-split:has(picture:first-child) {
		--header--text--padding: var(--spacing-8) calc(var(--spacing-10) * 2) calc(var(--spacing-10) * 2) var(--layout--gap);
	}

/* Overlay. */

.kg-header-card:not(.kg-layout-split)::before {
		position: absolute;
		z-index: 1;
		background-color: color-mix(in srgb, var(--color-black), transparent 70%);
		content: "";
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

.kg-header-card .kg-header-card-content {
		position: relative;
		z-index: 1;
	}

.kg-gallery-image img,
.kg-image-card img {
	position: relative;
	width: 100%;
	border-radius: var(--radius-2);
	background-color: var(--color-background-300);
}

/* Placeholder icon. */

.kg-gallery-image img::after, .kg-image-card img::after {
		top: 50%;
		left: 50%;
		width: 24px;
		height: 24px;
		margin-top: -12px;
		margin-left: -12px;
		-webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.75 19.5H3.75C3.55109 19.5 3.36032 19.421 3.21967 19.2803C3.07902 19.1397 3 18.9489 3 18.75V5.25C3 5.05109 3.07902 4.86032 3.21967 4.71967C3.36032 4.57902 3.55109 4.5 3.75 4.5H20.25C20.4489 4.5 20.6397 4.57902 20.7803 4.71967C20.921 4.86032 21 5.05109 21 5.25V8.25L16.5 9.75L15 13.5L11.25 15L9.75 19.5Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12.9121 19.5L13.6565 17.2687L17.3127 15.8081L18.7734 12.1518L21.0046 11.4075V18.75C21.0046 18.9489 20.9256 19.1396 20.7849 19.2803C20.6443 19.421 20.4535 19.5 20.2546 19.5H12.9121Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M3 15.8147L8.09437 10.7194C8.16403 10.6496 8.24675 10.5943 8.33779 10.5566C8.42884 10.5188 8.52644 10.4994 8.625 10.4994C8.72356 10.4994 8.82116 10.5188 8.91221 10.5566C9.00325 10.5943 9.08597 10.6496 9.15563 10.7194L12.8119 14.3756" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
		        mask-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.75 19.5H3.75C3.55109 19.5 3.36032 19.421 3.21967 19.2803C3.07902 19.1397 3 18.9489 3 18.75V5.25C3 5.05109 3.07902 4.86032 3.21967 4.71967C3.36032 4.57902 3.55109 4.5 3.75 4.5H20.25C20.4489 4.5 20.6397 4.57902 20.7803 4.71967C20.921 4.86032 21 5.05109 21 5.25V8.25L16.5 9.75L15 13.5L11.25 15L9.75 19.5Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12.9121 19.5L13.6565 17.2687L17.3127 15.8081L18.7734 12.1518L21.0046 11.4075V18.75C21.0046 18.9489 20.9256 19.1396 20.7849 19.2803C20.6443 19.421 20.4535 19.5 20.2546 19.5H12.9121Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M3 15.8147L8.09437 10.7194C8.16403 10.6496 8.24675 10.5943 8.33779 10.5566C8.42884 10.5188 8.52644 10.4994 8.625 10.4994C8.72356 10.4994 8.82116 10.5188 8.91221 10.5566C9.00325 10.5943 9.08597 10.6496 9.15563 10.7194L12.8119 14.3756" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
		-webkit-mask-size: 100% 100%;
		        mask-size: 100% 100%;
		background-color: var(--color-secondary);
	}

.kg-image-card.kg-width-full img {
	border-radius: 0;
}

/* stylelint-disable at-rule-no-unknown */

.post-content .kg-product-card-container {
		gap: var(--spacing-6);
		max-width: 440px;
		padding: var(--spacing-7);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-2);
		background-color: transparent;
		color: var(--color-foreground);
		box-shadow: none;
	}

/* Image. */

.post-content .kg-product-card-image {
		width: 100%;
		margin-bottom: var(--spacing-2);
		border-radius: var(--radius-1);
		background-color: var(--color-background-300);
	}

/* Title. */

.post-content .kg-product-card h4.kg-product-card-title {
		font-family: inherit;
		font-size: 1.0625rem;
		font-weight: var(--font-weight-semibold);
	}

/* Rating. */

.post-content .kg-product-card-rating {
		padding-left: 0;
		color: var(--color-contrast);
	}

.post-content .kg-product-card-rating svg {
			width: var(--font-small);
			height: var(--font-small);
		}

.post-content .kg-product-card-rating-star {
		width: 18px;
	}

/* Description. */

.post-content .kg-product-card-description:empty {
		display: none;
	}

.post-content .kg-product-card .kg-product-card-description ol,
	.post-content .kg-product-card .kg-product-card-description p,
	.post-content .kg-product-card .kg-product-card-description ul {
		color: var(--color-foreground);
		font-family: inherit;
		font-size: inherit;
		line-height: inherit;
		opacity: 1;
	}

.post-content .kg-product-card .kg-product-card-description p:first-of-type {
		margin-top: 0;
	}

/* Button. */

.post-content .kg-product-card a.kg-product-card-button {
		margin-top: var(--spacing-2);
	}

/* Text wrapper. */

.kg-signup-card-text  {
	padding: var(--signup--text--padding) !important;
}

/* Heading. */

.kg-signup-card-heading {
	font-size: var(--signup--heading--font-size) !important;
	font-weight: var(--signup--heading--font-weight) !important;
	line-height: var(--signup--heading--line-height, 1.2) !important;
	letter-spacing: var(--signup--heading--letter-spacing, inherit) !important;
}

/* Subheading. */

.kg-signup-card-subheading {
	margin: var(--signup--subheading--margin, 0) !important;
	font-size: var(--signup--subheading--font-size) !important;
	font-weight: var(--signup--subheading--font-weight) !important;
	line-height: var(--signup--subheading--line-height, inherit) !important;
}

/* Form. */

.kg-signup-card-form {
	margin: var(--signup--form--margin, 0) !important;
}

.kg-signup-card .kg-signup-card-fields {
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
}

.kg-signup-card .kg-signup-card-fields > .kg-signup-card-input {
		margin: 0;
		outline: revert;
	}

.kg-signup-card .kg-signup-card-fields > .kg-signup-card-button {
		margin: 0;
		outline: revert;
	}

/* Disclaimer. */

.kg-signup-card-disclaimer {
	margin: var(--signup--disclaimer--margin, 0) !important;
}

/* Layout split. */

.kg-signup-card.kg-layout-split .kg-signup-card-content {
	grid-template-columns: minmax(0, 1fr);
}

/* Image cover. */

.kg-signup-card.kg-layout-split:not(.kg-content-wide) picture {
	aspect-ratio: 16/9;
}

/* Image contain. */

.kg-signup-card.kg-layout-split.kg-content-wide .kg-signup-card-image {
	height: auto !important;
	padding: var(--layout--gap) !important;
	aspect-ratio: 16/9;
	-o-object-fit: cover !important;
	   object-fit: cover !important;
}

/* Form alerts. */

.kg-signup-card-form.success .kg-signup-card-success {
	height: auto !important;
	min-height: 2.75rem;
	font-size: inherit !important;
	font-weight: var(--font-weight-medium) !important;
	line-height: inherit !important;
}

/*
 * Change colors for toggle color scheme.
 */

/* Background grey. */

.kg-signup-card[style="background-color: rgb(240, 240, 240);"] {
	background-color: var(--color-background-200) !important;
}

.kg-signup-card[style="background-color: rgb(240, 240, 240);"] .kg-signup-card-heading {
		color: var(--color-contrast) !important;
	}

.kg-signup-card[style="background-color: rgb(240, 240, 240);"] .kg-signup-card-subheading {
		color: var(--color-foreground) !important;
	}

.kg-signup-card[style="background-color: rgb(240, 240, 240);"] .kg-signup-card-disclaimer {
		color: var(--color-secondary) !important;
	}

/* Background accent. */

.kg-signup-card.kg-style-accent .kg-signup-card-heading,
	.kg-signup-card.kg-style-accent .kg-signup-card-subheading,
	.kg-signup-card.kg-style-accent .kg-signup-card-disclaimer {
		color: var(--color-accent-foreground) !important;
	}

/* Button accent. */

.kg-signup-card .kg-style-accent {
	color: var(--color-accent-foreground) !important;
}

/* Button black. */

.kg-signup-card .kg-signup-card-button[style="background-color: #000000;color: #FFFFFF;"] {
	background-color: var(--color-contrast) !important;
	color: var(--color-background) !important;
}

/* Button white. */

.kg-signup-card .kg-signup-card-button[style="background-color: #ffffff;color: #000000;"] {
	background-color: var(--color-background) !important;
	color: var(--color-contrast) !important;
}

.kg-signup-card {
	--signup--text--padding: calc(var(--spacing-10) * 2) var(--layout--gap);

	/* Heading. */
	--signup--heading--font-size: clamp(18px, 14.6071px + 0.8929vw, 28px);
	--signup--heading--font-weight: var(--font-weight-semibold);

	/* Subheading. */
	--signup--subheading--margin: var(--spacing-7) 0 0;
	--signup--subheading--font-size: 1rem;

	/* Form. */
	--signup--form--margin: var(--spacing-9) 0 0;

	/* Disclaimer. */
	--signup--disclaimer--margin: var(--spacing-5) 0 0;

	border-radius: var(--radius-3);
	overflow: hidden;
}

.kg-signup-card.kg-width-full {
		border-radius: 0;
	}

.kg-signup-card.kg-layout-split:has(picture:first-child) {
		--signup--text--padding: var(--spacing-8) calc(var(--spacing-10) * 2) calc(var(--spacing-10) * 2) var(--layout--gap);
	}

/* Overlay. */

.kg-signup-card:not(.kg-layout-split):has(.kg-signup-card-image)::before {
		position: absolute;
		z-index: 1;
		background-color: color-mix(in srgb, var(--color-black), transparent 70%);
		content: "";
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

.kg-signup-card .kg-signup-card-content {
		position: relative;
		z-index: 1;
	}

/* Subheading. */

.kg-signup-card-subheading {
	width: 100%;
	max-width: var(--container--width) !important;
}

/* Form. */

.kg-signup-card-fields {
	position: relative;
	max-width: 340px !important;
	border-radius: 2rem !important;
}

.kg-align-center .kg-signup-card-fields {
		margin-right: auto;
		margin-left: auto;
	}

.kg-signup-card-fields > .kg-signup-card-input {
		min-height: 3.125rem; /* 50px */
    border-radius: 2rem;
	}

.kg-signup-card-fields > .kg-signup-card-button {
		--button--min-height: auto;
		--button--border-radius: 2rem;

		position: absolute;
		top: var(--spacing-2);
		right: var(--spacing-2);
		bottom: var(--spacing-2);
		left: auto;
		width: auto;
	}

/* Alerts. */

.kg-align-center .kg-signup-card-success,
.kg-align-center .kg-signup-card-error {
	margin-right: auto;
	margin-left: auto;
}

.footnote-item > p {
	margin-bottom: var(--spacing-1);
}

/* stylelint-disable at-rule-no-unknown */

.post-content .kg-toggle-card {
		padding: var(--spacing-5) var(--spacing-6);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-2);
		box-shadow: none;
	}

.post-content .kg-toggle-card + .kg-toggle-card {
		margin-top: calc(var(--vertical-rhythm) * -1);
	}

/* Heading. */

.post-content .kg-toggle-card h4.kg-toggle-heading-text {
		font-size: 1rem;
		font-weight: var(--font-weight-medium);
	}

/* Content. */

.post-content .kg-toggle-content {
		transition:
			opacity 0.2s ease, top 0.2s ease;
	}

/* Icon. */

.post-content .kg-toggle-card-icon {
		width: 1rem;
		height: 1rem;
		flex: 0 0 auto;
		margin-top: .1em;
		border-radius: calc(var(--radius-1) - 2px);
		background-color: var(--color-background-300);
	}

.post-content .kg-toggle-card-icon svg {
			width: 0.475em;
			height: 0.475em;
			color: var(--color-foreground);
		}

.post-content .kg-toggle-card-icon path {
			stroke-width: 4px;
		}

.post-content .kg-toggle-card .kg-toggle-content > * {
		margin-top: var(--spacing-4);
		font-size: inherit;
		line-height: inherit;
	}

.post-content .kg-toggle-card[data-kg-toggle-state='close'] .kg-toggle-content {
		visibility: hidden;
	}

.kg-video-card {
	position: relative;
	z-index: 1;
}

.kg-video-card video {
		border-radius: 0;
		background-color: var(--color-background-300);
	}

.kg-video-card .kg-video-hide-animated > button {
		visibility: hidden;
	}

.kg-video-card.kg-width-full .kg-video-container {
		border-radius: 0;
	}

.kg-video-card .kg-video-large-play-icon {
		width: 3.125rem; /* 50px */
		height: 3.125rem;
	}

.kg-video-card .kg-video-large-play-icon svg {
			width: var(--font-small);
		}

/* Layout. */

.container {
	--layout--width: 1240px;
	--layout--offset: 10px;
	--layout--padding: 3.75rem; /* 60px */
	--layout--gap: 3.75rem; /* 60px */

	/* Navbar. */
	--layout--navbar--height: 54px;

	/* Sidebar. */
	--layout--sidebar--width: 42%;
	--layout--sidebar--padding-v: var(--spacing-6);
	--layout--sidebar--padding-h: var(--spacing-9);
	--layout--sidebar--max-width: min(550px, calc(100% - 32px));

	/* Content. */
	--layout--content--padding-v: var(--layout--padding);
	--layout--content--padding-h: max(var(--spacing-9), min(3.4vw, calc(var(--spacing-9) * 2)));

	display: grid;
	grid-template-columns: var(--layout--sidebar--width) minmax(0, 1fr);
	grid-template-rows: var(--layout--navbar--height) 1fr;
	width: 100%;
	max-width: 100%;
	margin-right: auto;
	margin-left: auto;
	container: container / inline-size;
}

/* Without sidebar content (the same as responsive). */

.container:not(:has(> .sidebar .sidebar-content)) {
	/* Sidebar. */
	--layout--sidebar--padding-v: 0px;
	--layout--sidebar--max-width: calc(100% - var(--layout--offset) * 2);

	/* Content. */
	--layout--content--padding-v: var(--spacing-10);
	--layout--content--padding-h: var(--spacing-10);

	display: flex;
	flex-direction: column;
	gap: var(--layout--gap);
	max-width: var(--container--width);
}

/* Responsive. */

@media (min-width: 860px) {
	body:has(.container > .sidebar .sidebar-content) {
		background: var(--color-background);
		background-image: radial-gradient(var(--color-dots) 1px, transparent 0);
		background-size: 10px 10px;
		background-attachment: fixed;
	}
}

@media (max-width: 859px) {
	.container {
		--layout--offset: 1rem;

		/* Sidebar. */
		--layout--sidebar--padding-v: 0px;
		--layout--sidebar--max-width: calc(100% - 2rem);

		/* Content. */
		--layout--content--padding-v: var(--spacing-10);
		--layout--content--padding-h: var(--spacing-10);

		display: flex;
		flex-direction: column;
		gap: var(--layout--gap);
		max-width: var(--container--width);
	}
}

.navbar {
	position: sticky;
	top: 0;
	z-index: 13;
	padding-top: calc(var(--layout--sidebar--padding-v) + var(--layout--offset));
	padding-right: calc(var(--layout--offset) + 1rem);
	padding-left: calc(var(--layout--offset) + 1rem);
	grid-column: 1;
	grid-row: 1;
}

.navbar-container {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}

.navigation-toggle {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	margin-left: auto;
	padding: 0;
	border: 0;
	background-color: transparent;
	color: var(--color-contrast);
	cursor: pointer;
}

/* Background. */

.navigation-toggle::before {
		clip-path: inset(var(--spacing-2) var(--spacing-2) var(--spacing-2) calc(100% - 1rem - var(--spacing-2) - var(--spacing-4) * 2) round 16px);
	}

.navigation-toggle > .icon {
		color: var(--color-secondary);
	}

.navigation-toggle:hover::before, .navigation-toggle[aria-expanded="true"]::before {
			clip-path: inset(0 round var(--radius-2));
		}

.navigation-toggle:hover > .icon, .navigation-toggle[aria-expanded="true"] > .icon {
			color: var(--color-contrast);
		}

@container container (width <= 600px) {
	.navbar {
		padding: 0.5rem 0 0;
	}

	.navbar-container {
		max-width: min(100%, calc(var(--screen--width) - 1rem));
		padding: var(--spacing-4) var(--spacing-4) var(--spacing-4) var(--spacing-7);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-3);
		background-color: var(--color-background-content);
		background-clip: padding-box;
	}
		[data-color-scheme='dark'] .navbar-container:has(> .logo > img.logo-dark) {
			padding-left: var(--spacing-5);
		}

	@media (prefers-color-scheme: dark) {
		[data-color-scheme='system'] .navbar-container:has(> .logo > img.logo-dark) {
			padding-left: var(--spacing-5);
		}
	}
		[data-color-scheme='light'] .navbar-container:has(> .logo > img.logo-light) {
			padding-left: var(--spacing-5);
		}

	@media (prefers-color-scheme: light) {
		[data-color-scheme='system'] .navbar-container:has(> .logo > img.logo-light) {
			padding-left: var(--spacing-5);
		}
	}
}

.footer {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	margin: auto calc(var(--layout--offset) + 1px) calc(var(--layout--offset) + 1px);
	padding: var(--spacing-9) var(--layout--content--padding-h);
	background-color: var(--color-background-200);
}

.footer > .footer-copyright {
		margin-top: auto;
		margin-bottom: auto;
		flex: 1 0 200px;
	}

.footer > .toggle-color-scheme-button {
		flex: 0 0 auto;
	}

@container container (width <= 600px) {
	.footer {
		z-index: 1;
		margin-right: 0;
		margin-left: 0;
		padding-right: 1rem;
		padding-left: 1rem;
		background-color: transparent;
	}

		.footer::before {
			position: absolute;
			top: 0;
			left: calc(-50vw + 50%);
			z-index: -1;
			width: var(--screen--width);
			height: 100%;
			background-color: var(--color-background-200);
			content: "";
		}
}

/* Navigation popup. */

.popup-navigation {
	--popup--padding-left: var(--spacing-8);
	--popup--padding-right: var(--layout--sidebar--padding-v);

	display: flex;
	background-color: transparent;
	opacity: 0;
	visibility: visible;
	transition: opacity .3s ease;
	pointer-events: none;
	transition-delay: .2s;
	padding-right: var(--scrollbar-width, 0);
}

/* Show popup. */

.popup-navigation.popup-show {
		pointer-events: visible;
		opacity: 1;
		transition: opacity .001s;
	}

.popup-navigation.popup-show .popup-wrapper {
			pointer-events: none;
		}

.popup-navigation.popup-show .popup-container {
			pointer-events: visible;
			opacity: 1;
		}

.popup-wrapper {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--layout--sidebar--width);
	margin-left: calc((var(--popup--padding-right) - var(--popup--padding-left)) * 0.5);
	padding: var(--layout--offset);
}

.popup-wrapper nav:last-of-type {
		margin-bottom: var(--spacing-8);
	}

/* Button member. */

.popup-wrapper .popup-button-member {
		position: sticky;
		bottom: var(--popup--padding-right);
		z-index: 2;
		margin-top: -2rem;
		margin-bottom: 1px;
		margin-left: auto;

		/* Fixes overflow bug when hovering. */
		transform: translateY(-1px);
	}

/* Button close. */

.popup-navigation .button.popup-close {
	--button--padding-v: 0;
	--button--padding-h: 0;
	--button--min-height: auto;
	--button--color: var(--color-contrast);
	--button--background-color: transparent;
	--button-hover--color: var(--color-contrast);
	--button-hover--background-color: transparent;

	position: sticky;
	top: var(--spacing-6);
	z-index: 2;
	margin-bottom: -2rem;
	margin-left: auto;
}

.popup-navigation .button.popup-close::before {
		opacity: 0;
		transition: opacity .2s ease;
	}

.popup-navigation .button.popup-close:hover::before {
		opacity: 1;
	}

/* Container. */

.popup-container {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	margin-right: auto;
	margin-left: auto;
	padding: 0 var(--popup--padding-right) 0 var(--popup--padding-left);
	flex: 0 0 100%;
	overflow-x: hidden;
	overflow-y: scroll;
	overflow: hidden scroll;
	border-radius: var(--radius-2);
	scrollbar-width: none;
}

.popup-container::-webkit-scrollbar {
		display: none;
	}

/* Head. */

.popup-head {
	display: flex;
	align-items: center;
	min-height: calc(var(--layout--navbar--height) - var(--layout--offset));
	margin: 0 calc(var(--popup--padding-right) * -1) var(--spacing-6) calc(var(--popup--padding-left) * -1);
	padding: var(--spacing-6) var(--popup--padding-right) 0 var(--popup--padding-left);
}

.popup-head > .logo {
		margin-right: auto;
	}

/* Recommendations. */

.popup-recommendations {
	margin-top: auto;
}

.popup-recommendations + .popup-footer {
		margin-top: 0;
	}

.popup-recommendations > span {
		display: block;
		margin-bottom: var(--spacing-6);
		color: var(--color-secondary);
		font-size: var(--font-medium);
		font-weight: var(--font-weight-medium);
	}

.popup-recommendations > div {
		display: flex;
		gap: var(--spacing-5);
		margin-right: calc(var(--popup--padding-right) * -1);
		margin-left: calc(var(--popup--padding-left) * -1);
		padding-right: var(--popup--padding-right);
		padding-left: var(--popup--padding-left);
		overflow-x: auto;
	}

.popup-recommendations .recommendation-card {
		position: relative;
		flex: 0 0 260px;
		padding: var(--spacing-6) var(--spacing-6) var(--spacing-6) var(--spacing-7);
		border-radius: var(--radius-2);
		background-color: var(--color-background-200);
		transition: background-color .15s ease;
	}

.popup-recommendations .recommendation-card:hover {
			background-color: var(--color-background-300);
		}

.popup-recommendations .recommendation-card > a {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}

.popup-recommendations .recommendation-card > h3 {
			display: flex;
			gap: var(--spacing-4);
			font-size: 1rem;
			font-weight: var(--font-weight-medium);
		}

.popup-recommendations .recommendation-card > h3::after {
				content: "";
				width: 1.125em;
				height: 1lh;
				flex: 0 0 auto;
				margin-left: auto;
				background-color: var(--color-mute);
				-webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.66667 4.6665H11.3333M11.3333 4.6665V11.3332M11.3333 4.6665L4.66667 11.3332" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/></svg>');
				        mask-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.66667 4.6665H11.3333M11.3333 4.6665V11.3332M11.3333 4.6665L4.66667 11.3332" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/></svg>');
				-webkit-mask-size: 100% 100%;
				        mask-size: 100% 100%;
			}

.popup-recommendations .recommendation-card > h3 > picture {
			display: none;
		}

.popup-recommendations .recommendation-card > p {
			margin-top: var(--spacing-3);
			font-size: var(--font-small);
		}

/* Footer. */

.popup-footer {
	display: flex;
	align-items: center;
	gap: var(--spacing-4) var(--spacing-8);
	margin-top: auto;
	margin-right: calc(var(--popup--padding-right) * -1);
	margin-left: calc(var(--popup--padding-left) * -1);
	padding: var(--popup--padding-right) var(--popup--padding-right) var(--popup--padding-right) var(--popup--padding-left);
}

.popup-footer > .social-links {
		flex: 1 0 0%;
	}

.popup-footer > .toggle-color-scheme-button {
		flex: 0 0 auto;
	}

.popup-footer:has(+ .popup-button-member) {
		padding-right: calc(var(--popup--padding-right) + var(--spacing-2) + 2rem);
	}

/* Overlay. */

.popup-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background-color: transparent;
}

/*
 * Animations.
 */

/* Toggle and close buttons. */

.navigation-toggle,
.popup-close.button {
	gap: var(--spacing-3);
	font-size: var(--font-medium);
	font-weight: var(--font-weight-medium);
}

/* Background. */

.navigation-toggle::before, .popup-close.button::before {
		position: absolute;
		z-index: -1;
		border-radius: var(--radius-2);
		background-color: var(--color-grey-translucent);
		content: "";
		top: calc(var(--spacing-2) * -1);
		right: calc(var(--spacing-2) * -1);
		bottom: calc(var(--spacing-2) * -1);
		left: calc(var(--spacing-4) * -1);
		transition: clip-path .5s cubic-bezier(.2, 1, .2, 1);
	}

.navigation-toggle > .label, .popup-close.button > .label {
		display: block;
		transition: transform .2s ease;
	}

.navigation-toggle > .icon, .popup-close.button > .icon {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;
		width: 32px;
		height: 32px;
		transition: background-color .15s ease;
	}

.navigation-toggle > .icon::before,
		.navigation-toggle > .icon::after,
		.popup-close.button > .icon::before,
		.popup-close.button > .icon::after {
			width: 12px;
			height: 1.5px;
			border-radius: 2px;
			background-color: currentcolor;
			content: "";
			transition: transform .3s ease;
		}

.navigation-toggle > .icon::before, .popup-close.button > .icon::before {
			transform-origin: top left;
		}

.navigation-toggle > .icon::after, .popup-close.button > .icon::after {
			transform-origin: bottom left;
		}

.navigation-toggle > .label-open, .popup-close.button > .label-open {
		clip-path: inset(0);
	}

.navigation-toggle > .label-close, .popup-close.button > .label-close {
		position: absolute;
		left: 0;
		opacity: 0;
	}

.navigation-toggle[aria-expanded="true"] > .label-open, .popup-show .button.popup-close > .label-open {
		opacity: 0;
	}

.navigation-toggle[aria-expanded="true"] > .label-close, .popup-show .button.popup-close > .label-close {
		opacity: 1;
	}

.navigation-toggle[aria-expanded="true"] > .icon::before, .popup-show .button.popup-close > .icon::before {
			transform: rotate(45deg) scaleX(1.2) translateY(-2px);
		}

.navigation-toggle[aria-expanded="true"] > .icon::after, .popup-show .button.popup-close > .icon::after {
			transform: rotate(-45deg) scaleX(1.2) translateY(2px);
		}

.navigation-toggle:hover > .label, .button.popup-close:hover > .label, .container:has(.navigation-toggle:hover) .button.popup-close > .label, .popup-show .button.popup-close > .label {
		transform: translateX(var(--spacing-2));
	}

/* Popup clip-path. */

.popup-container {
	border-radius: var(--radius-3);
	background-color: var(--color-background-300);
	transition: clip-path .5s cubic-bezier(.32,.72,0,1), background-color .3s ease;
	clip-path: inset(8px calc(var(--popup--padding-right) - 4px) calc(100% - 3rem) calc(100% - 6rem) round var(--radius-3));
}

.popup-show .popup-container {
		background-color: var(--color-background-content);
		clip-path: inset(0 round var(--radius-2));
		transition: clip-path .5s cubic-bezier(.32,.72,0,1), background-color .5s ease;
	}

/* Fade content. */

.popup-container :where(.navigation-popup, .popup-recommendations, .popup-footer, .popup-button-member) {
	opacity: 0;
	transition: opacity .0s;
}

.popup-show .popup-container :where(.navigation-popup, .popup-recommendations, .popup-footer, .popup-button-member) {
		opacity: 1;
		transition: opacity .6s ease;
		transition-delay: .15s;
	}

/* Fade overlay. */

.popup-overlay {
	background-color: transparent;
	transition: background-color .5s ease;
}

.popup-show .popup-overlay {
		background-color: var(--popup--overlay--color);
	}

/*
 * Responsive.
 */

@container container (width <= 600px) {
	.popup-navigation {
		--popup--padding-right: calc(var(--spacing-4) + 1px);
		--popup--padding-left: calc(1rem + 1px);

		justify-content: center;
	}

	.popup-navigation .button.popup-close {
		top: calc(var(--spacing-4) + 1px);
	}

	.popup-wrapper {
		width: calc(100% - 1rem);
		max-width: 600px;
		margin-right: auto;
		margin-left: auto;
		padding: 0.5rem 0 0;
	}

		.popup-wrapper::before {
			top: 0.5rem;
			width: 100%;
			height: calc(100% - 1rem);
		}

	.popup-container {
		width: 100%;
		max-width: 100%;
		height: calc(100% - 0.5rem);
		clip-path: inset(5px calc(var(--popup--padding-right) - 4px) calc(100% - 45px) calc(100% - 6rem) round var(--radius-2));
	}

		.popup-show .popup-container {
			clip-path: inset(0 round var(--radius-2));
		}

	.popup-head {
		min-height: calc(32px + 2px + var(--spacing-4) * 2);
		margin-bottom: 0;
		padding-top: var(--spacing-4);
		padding-bottom: var(--spacing-4);
	}
}

.sidebar {
	position: sticky;
	top: calc(var(--layout--navbar--height) + var(--layout--offset));
	left: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-9);
	width: 100%;
	height: calc(100vh - var(--layout--navbar--height) - var(--layout--offset));
	margin-top: var(--layout--offset);
	padding: var(--spacing-5);
	align-self: start;
	overflow-y: auto;
	grid-row: 2;
	grid-column: 1;
	scrollbar-width: none;
}

.sidebar::-webkit-scrollbar {
		display: none;
	}

.sidebar:not(:has(.sidebar-content)) {
		display: none;
	}

@container container (width <= 600px) {
		.sidebar {
			position: relative;
			top: 0;
			width: 100%;
			max-width: var(--container--width);
			height: auto;
			margin-top: 0;
			margin-right: auto;
			margin-left: auto;
			padding: 0;
			overflow: visible;
		}

		.post-template .sidebar,
		.author-template .sidebar,
		.tag-template .sidebar {
			gap: var(--spacing-7);
		}
	}

/* Container. */

.sidebar-container {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-9);
	width: 100%;
	max-width: var(--layout--sidebar--max-width);
	margin: auto auto 0;
}

.sidebar-container:last-child {
		margin-bottom: auto;
		padding-bottom: var(--spacing-10);
	}

/* Content. */

.sidebar-content {
	width: 100%;
	max-width: var(--container-small--width);
}

.post-template .sidebar-content > div {
			display: flex;
			gap: var(--spacing-7);
		}

.post-template .sidebar-content > h1 {
			margin-top: var(--spacing-4);
		}

/* Title. */

.sidebar-content > h1 {
		font-size: clamp(2rem, 1.9152rem + 0.3571vw, 2.25rem);
		font-weight: var(--font-weight-light);
		line-height: 1.2;
	}

/* Description. */

.sidebar-content > p {
		margin-top: var(--spacing-7);
	}

/* Form subscribe. */

.sidebar-content > form {
		margin-top: calc(var(--spacing-8) * 2);
	}

/* Footer. */

.sidebar-footer {
	margin-top: auto;
	padding-right: 1rem;
	padding-bottom: var(--layout--sidebar--padding-v);
	padding-left: 1rem;
}

.post-template .sidebar-footer {
		display: flex;
		align-items: center;
		gap: var(--spacing-7);
		font-size: var(--font-medium);
		font-weight: var(--font-weight-medium);
	}

.post-template .sidebar-footer > .dropdown-share {
			margin-right: calc(var(--spacing-6) * -1);
			margin-left: auto;
		}

.post-template .sidebar-footer .dropdown-toggle {
			position: relative;
			display: flex;
			align-items: center;
			gap: var(--spacing-4);
			padding: 0;
			padding: var(--spacing-3) var(--spacing-6);
			border: 0;
			border-radius: var(--radius-2);
			background-color: transparent;
			transition: color .2s ease;
			cursor: pointer;
		}

/* Background. */

.post-template .sidebar-footer .dropdown-toggle::before {
				position: absolute;
				z-index: -1;
				background-color: transparent;
				transition: background-color .2s ease, color .2s ease, clip-path .2s ease;
				content: "";
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				clip-path: inset(var(--spacing-2) round var(--radius-1));
			}

.post-template .sidebar-footer .dropdown-toggle > svg {
				width: 1rem;
				height: 1rem;
				color: var(--color-contrast);
			}

.post-template .sidebar-footer .dropdown-toggle:hover,
			.post-template .sidebar-footer .dropdown-toggle[aria-expanded='true'] {
				color: var(--color-contrast);
			}

.post-template .sidebar-footer .dropdown-toggle:hover::before, .post-template .sidebar-footer .dropdown-toggle[aria-expanded='true']::before {
					background-color: var(--color-grey-translucent);
					clip-path: inset(0 round var(--radius-2));
				}

.content-wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	grid-column: 2;
	grid-row: span 2;
}

.content {
	position: relative;
	padding: calc(var(--layout--content--padding-v) + var(--layout--offset)) calc(var(--layout--content--padding-h) + var(--layout--offset));
}

@container container (width > 600px) {
	/* Background overlay. */
	.content-overlay {
		--content--overlay--compensate-clip: 1px;

		position: sticky;
		top: 0;
		left: var(--layout--offset);
		z-index: 10;
		width: calc(100% - var(--layout--offset) * 2);
		height: 0;
		margin-left: var(--layout--offset);
		pointer-events: none;
	}

		/* Disable compensate for Safari. */
		@supports (-webkit-backdrop-filter: blur(1px)) {
	.content-overlay {
			--content--overlay--compensate-clip: 0px
	}
		}

		/* Top overlay. */
		.content-overlay::before {
			-webkit-mask-image:
				/* Top. */
				linear-gradient(180deg, #000 100%, transparent),
				linear-gradient(90deg, transparent, #000 0%, #000 100%, transparent),
				/* Top radius. */
				radial-gradient(circle var(--radius-3) at var(--radius-3) calc(var(--layout--offset) + var(--radius-3)), #000 calc(100% - 0.1px), transparent),
				radial-gradient(circle var(--radius-3) at calc(100% - var(--radius-3)) calc(var(--layout--offset) + var(--radius-3)), #000 calc(100% - 0.1px), transparent);
			        mask-image:
				/* Top. */
				linear-gradient(180deg, #000 100%, transparent),
				linear-gradient(90deg, transparent, #000 0%, #000 100%, transparent),
				/* Top radius. */
				radial-gradient(circle var(--radius-3) at var(--radius-3) calc(var(--layout--offset) + var(--radius-3)), #000 calc(100% - 0.1px), transparent),
				radial-gradient(circle var(--radius-3) at calc(100% - var(--radius-3)) calc(var(--layout--offset) + var(--radius-3)), #000 calc(100% - 0.1px), transparent);
			-webkit-mask-size:
				/* Top. */
				100% calc(var(--layout--offset) + var(--radius-3)),
				calc(100% - var(--radius-3) * 2) calc(var(--radius-3) + var(--content--overlay--compensate-clip)),
				/* Top radius. */
				var(--radius-3) calc(var(--layout--offset) + var(--radius-3) + 1px),
				var(--radius-3) calc(var(--layout--offset) + var(--radius-3) + 1px);
			        mask-size:
				/* Top. */
				100% calc(var(--layout--offset) + var(--radius-3)),
				calc(100% - var(--radius-3) * 2) calc(var(--radius-3) + var(--content--overlay--compensate-clip)),
				/* Top radius. */
				var(--radius-3) calc(var(--layout--offset) + var(--radius-3) + 1px),
				var(--radius-3) calc(var(--layout--offset) + var(--radius-3) + 1px);
			-webkit-mask-position:
				/* Top. */
				0 0,
				var(--radius-3) var(--layout--offset),
				/* Top radius. */
				0 0,
				100% 0;
			        mask-position:
				/* Top. */
				0 0,
				var(--radius-3) var(--layout--offset),
				/* Top radius. */
				0 0,
				100% 0;
			-webkit-mask-repeat: no-repeat;
			        mask-repeat: no-repeat;
			-webkit-mask-composite: source-out, source-over, source-over;
			        mask-composite: subtract, add, add;
		}

		/* Bottom overlay. */
		.content-overlay::after {
			-webkit-mask-image:
				/* Bottom. */
				linear-gradient(180deg, #000 100%, transparent),
				linear-gradient(90deg, transparent, #000 0%, #000 100%, transparent),
				/* Bottom radius. */
				radial-gradient(circle var(--radius-3) at var(--radius-3) 0%, #000 calc(100% - 0.1px), transparent),
				radial-gradient(circle var(--radius-3) at calc(100% - var(--radius-3)) 0%, #000 calc(100% - 0.1px), transparent);
			        mask-image:
				/* Bottom. */
				linear-gradient(180deg, #000 100%, transparent),
				linear-gradient(90deg, transparent, #000 0%, #000 100%, transparent),
				/* Bottom radius. */
				radial-gradient(circle var(--radius-3) at var(--radius-3) 0%, #000 calc(100% - 0.1px), transparent),
				radial-gradient(circle var(--radius-3) at calc(100% - var(--radius-3)) 0%, #000 calc(100% - 0.1px), transparent);
			-webkit-mask-size:
				/* Bottom. */
				100% calc(var(--layout--offset) + var(--radius-3)),
				calc(100% - var(--radius-3) * 2) calc(var(--radius-3) + var(--content--overlay--compensate-clip)),
				/* Bottom radius. */
				var(--radius-3) calc(var(--layout--offset) + var(--radius-3) + 1px),
				var(--radius-3) calc(var(--layout--offset) + var(--radius-3) + 1px);
			        mask-size:
				/* Bottom. */
				100% calc(var(--layout--offset) + var(--radius-3)),
				calc(100% - var(--radius-3) * 2) calc(var(--radius-3) + var(--content--overlay--compensate-clip)),
				/* Bottom radius. */
				var(--radius-3) calc(var(--layout--offset) + var(--radius-3) + 1px),
				var(--radius-3) calc(var(--layout--offset) + var(--radius-3) + 1px);
			-webkit-mask-position:
				/* Bottom. */
				0 100%,
				var(--radius-3) calc(100% - var(--layout--offset)),
				/* Bottom radius. */
				0 calc(100% + 1px),
				100% calc(100% + 1px);
			        mask-position:
				/* Bottom. */
				0 100%,
				var(--radius-3) calc(100% - var(--layout--offset)),
				/* Bottom radius. */
				0 calc(100% + 1px),
				100% calc(100% + 1px);
			-webkit-mask-repeat: no-repeat;
			        mask-repeat: no-repeat;
			-webkit-mask-composite: source-out, source-over, source-over;
			        mask-composite: subtract, add, add;
		}

		.content-overlay::before,
		.content-overlay::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			background-color: var(--color-background);
			background-image: radial-gradient(var(--color-dots) 1px, transparent 0);
			background-size: 10px 10px;
			background-attachment: fixed;
		}

	/* Frame. */
	.content-frame {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 10;
		height: 0;
		pointer-events: none;
	}

		.content-frame::before {
			position: absolute;
			top: var(--layout--offset);
			left: var(--layout--offset);
			width: calc(100% - var(--layout--offset) * 2);
			height: calc(100vh - var(--layout--offset) * 2);
			border: 1px solid var(--color-border);
			border-radius: var(--radius-3);
			content: "";
			pointer-events: none;
			box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
		}

	/* Background. */
	.content-background {
		position: sticky;
		top: 0;
		left: 0;
		height: 0;
	}

		.content-background::before {
			position: absolute;
			top: var(--layout--offset);
			left: var(--layout--offset);
			z-index: -1;
			width: calc(100% - var(--layout--offset) * 2);
			height: calc(100vh - var(--layout--offset) * 2);
			border-radius: var(--radius-3);
			background-color: var(--color-background-content);
			content: "";
		}
}

@container container (width <= 600px) {
	.content {
		margin-bottom: var(--layout--gap);
		padding-right: 1rem;
		padding-left: 1rem;
	}

	.content-wrapper {
		--layout--content--padding-v: 0px;
		--layout--content--padding-h: calc(50vw - 50%);
		--layout--offset: 0px;
	}
}

.scroll-progress-wrapper {
	--scroll-progress--size: 30px;

	position: sticky;
	bottom: calc(var(--spacing-9) + var(--scroll-progress--size) * 0.5);
	left: 0;
	z-index: 12;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
	height: 0;
	margin-top: auto;
	padding: 0 var(--layout--offset);
	padding-right: var(--spacing-9);
	align-self: center;
	pointer-events: none;
}

.scroll-progress-wrapper > .scroll-progress {
		height: var(--scroll-progress--size);
	}

.scroll-progress {
	position: relative;
	border-radius: 50%;
	color: var(--color-contrast);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.2s ease, visibility 0.2s ease;
}

.scroll-progress circle {
		stroke-dasharray: 300%;
		stroke-dashoffset: calc(300% + var(--scroll-progress) * 3);
		stroke-linecap: round;
		stroke-width: 1.5px;
		transform: rotate(-90deg) translateX(-100%);

		/* 0.75px - stroke-width="1.5" */
		r: calc(var(--scroll-progress--size) * 0.5 - 0.75px);
	}

.scroll-progress > svg {
		position: relative;
		z-index: 1;
		display: block;
		width: var(--scroll-progress--size);
		height: var(--scroll-progress--size);
		opacity: 1;
		transform: scaleX(-1);
		transition: opacity 0.2s ease;
		pointer-events: none;
	}

.scroll-progress-button {
	position: absolute;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	background-color: var(--color-background-100);
	background-clip: padding-box;
	transition:
		color 0.1s ease, background-color 0.1s ease, border-color 0.1s ease, transform 0.2s ease;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	cursor: pointer;
	outline-offset: 3px;
	pointer-events: visible;
}

.scroll-progress-button > svg {
		width: 0.875em;
		height: 0.875em;
	}

.scroll-progress-button:hover {
		background-color: var(--color-contrast);
		color: var(--color-background);
		border-color: var(--color-contrast);
	}

.scroll-progress-button:hover + svg {
			opacity: 0;
		}

.scroll-progress-show {
	opacity: 1;
	visibility: visible;
}

@container container (width <= 600px) {
	.scroll-progress-wrapper {
		bottom: calc(1rem + var(--scroll-progress--size) * 0.5);
		width: var(--screen--width);
		padding-right: 1rem;
	}
}

/* Sections. */

.section-cards > div {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}

.section-cards .card {
	position: relative;
	z-index: 1;
}

.section-cards .card + .card {
		padding-top: var(--spacing-8);
	}

/* Border. */

.section-cards .card + .card::after {
		position: absolute;
		top: 0;
		left: 50%;
		width: 100%;
		max-width: var(--container--width);
		transform: translateX(-50%);
		transition: opacity .15s ease;
		content: "";
		border-top: 1px solid var(--color-border);
	}

/* Background. */

.section-cards .card::before {
		position: absolute;
		top: 0;
		left: calc(var(--layout--content--padding-h) * -1 + 1px);
		z-index: -1;
		width: calc(100% + var(--layout--content--padding-h) * 2 - 2px);
		height: calc(100% + var(--spacing-8));
		transition: background-color .15s ease;
		content: "";
	}

/* Show background. */

.section-cards .card:hover::before {
		background-color: var(--color-background-200);
	}

/* Hide border. */

.section-cards .card:hover::after,
	.section-cards .card:hover + .card::after {
		opacity: 0;
	}

/* Link. */

.section-cards .card > a {
		position: absolute;
		top: 0;
		left: calc(var(--layout--content--padding-h) * -1);
		z-index: 1;
		width: calc(100% + var(--layout--content--padding-h) * 2);
		height: calc(100% + var(--spacing-8));
	}

.section-cards .card:first-child::before,
	.section-cards .card:first-child > a {
		top: calc(var(--spacing-8) * -1);
		height: calc(100% + var(--spacing-8) * 2);
	}

.author-card {
	--author--image--size: 3.75rem;

	/* Set container. */
}

/* Biography. */

.author-card > p {
		margin-top: var(--spacing-7);
		margin-bottom: 0;
	}

/* No image. */

.author-card div.author-card-image {
		display: flex;
		justify-content: center;
		align-items: center;
	}

/* Image. */

.author-card .author-card-image {
		--placeholder--color: var(--color-accent-text);
		--placeholder--background-color: var(--color-accent-background);

		position: absolute;
		top: 0;
		left: 0;
		width: var(--author--image--size);
		height: var(--author--image--size);
		margin: 0;
		border-radius: var(--radius-2);
		overflow: hidden;
		font-size: var(--font-h4);
		transition: transform .2s ease;
	}

/* 60px. */

.author-card > a:hover + .author-card-head > .author-card-image {
		transform: scale(1.03);
	}

/* Head. */

.author-card > .author-card-head {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: var(--spacing-1);
		min-height: var(--author--image--size);
		padding-left: calc(var(--author--image--size) + var(--spacing-7));
	}

.author-card > .author-card-head > h1,
		.author-card > .author-card-head > h3 {
			font-size: var(--font-large);
			font-weight: var(--font-weight-medium);
		}

.author-card > .author-card-head img {
			width: 100%;
			height: 100%;
			-o-object-fit: cover;
			   object-fit: cover;
		}

/* Subtitle. */

.author-card .author-card-subtitle {
		display: flex;
		flex-wrap: wrap;
		gap: 0 var(--spacing-4);
		color: var(--color-secondary);
		font-size: var(--font-medium);
		font-weight: var(--font-weight-medium);
	}

.author-card .author-card-subtitle > span + span {
			display: flex;
			align-items: center;
			gap: inherit;
		}

.author-card .author-card-subtitle > span + span::before {
				width: 2px;
				height: 2px;
				border-radius: 50%;
				background-color: var(--color-secondary);
				content: "";
			}

/* Social links. */

.author-card > .author-card-socials {
		position: relative;
		z-index: 2;
		margin-top: var(--spacing-6);
	}

.author-card > .author-card-socials:not(:has(> ul > li)) {
			display: none;
		}

.author-card > .author-card-socials > ul {
			margin-right: calc(var(--spacing-5) * -1);
			margin-left: calc(var(--spacing-5) * -1);
		}

.author-card > p,
	.author-card > .author-card-head,
	.author-card > .author-card-socials {
		width: 100%;
		max-width: var(--container--width);
		margin-right: auto;
		margin-left: auto;
	}

.section-comments {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-2) var(--spacing-8);
	width: 100%;
	max-width: var(--container--width);
	margin-top: var(--layout--gap);
	margin-right: auto;
	margin-left: auto;
}

.section-comments > h2 {
		flex: 1 0 200px;
		font-size: var(--font-large);
		font-weight: var(--font-weight-medium);
	}

.section-comments > span {
		color: var(--color-secondary);
		font-size: var(--font-small);
		flex: 0 0 auto;
	}

.section-comments > div {
		flex: 0 0 100%;
		margin-top: var(--spacing-7);
		overflow: hidden;
		border: 1px solid var(--color-border);
		border-radius: var(--radius-3);
	}

.section-comments:has(> span) > div {
		padding: var(--spacing-8);
	}

.section-comments:has(> span) > div > iframe {
			display: block;
			margin-bottom: -52px;
		}

.section-hero + .post,
	.section-hero + .section-tags,
	.section-hero + .section-authors,
	.section-hero + .section-recommendations {
		margin-top: var(--spacing-6);
	}

.section-hero > .post-media {
		margin-top: calc(var(--spacing-3) * -1);
		margin-bottom: var(--spacing-8);
	}

.section-hero > p {
		margin-top: var(--vertical-rhythm);
		margin-bottom: 0;
	}

/* Card. */

.post-card + .post-card {
		margin-top: var(--layout--gap);
	}

/* Content. */

.post-card-content {
	position: relative;
	margin-top: var(--vertical-rhythm);
}

/* Excerpt. */

.post-card-content > p {
		color: var(--color-contrast);
		font-weight: 500;
	}

.post-card-content > .post-media:has(> :first-child) + p {
		margin-top: var(--vertical-rhythm);
	}

/* Button. */

.post-card-content > .post-button {
		margin-top: var(--vertical-rhythm);
	}

.post-card-content > .post-button > .button {
			--button--padding-v: var(--spacing-4);
			--button--padding-h: var(--spacing-7);
			--button--min-height: auto;
			--button--color: var(--color-contrast);
			--button--font-size: var(--font-medium);
			--button--background-color: var(--color-background-300);
			--button--border-radius: var(--radius-2);
		}

.post-card-content > .post-button > .button > svg {
				width: 1em;
				height: 1em;
			}

@container container (width <= 600px) {
		.post-card-content {
			display: flex;
			flex-direction: column;
		}
	}

/* Head. */

.post-card-head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-2) var(--spacing-6);
	width: 100%;
	max-width: var(--container--width);
}

/* Title. */

.post-card-head > h2 {
		position: relative;
		flex: 0 0 100%;
		max-width: 100%;
		margin-top: var(--spacing-5);
		font-size: 1.75rem; /* 28px */
		font-weight: var(--font-weight-regular);
	}

.post-card-head > h2 > a {
			--underline-opacity: 100%;

			display: inline;
			background-image:
				linear-gradient(
					to top,
					color-mix(in srgb, var(--color-contrast), transparent 85%) 0%,
					color-mix(in srgb, var(--color-contrast), transparent 85%) 100%
				);
			background-position: 100% 100%;
			background-repeat: no-repeat;
			background-size: 100% 0;
			-webkit-text-decoration: none;
			text-decoration: none;
			transition: background-size 0.2s ease;
		}

.post-card-head > h2 > a::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

.post-card-head > h2 > a:hover {
				background-size: 100% 2px;
				color: var(--color-contrast);
			}

/* Status icons. */

.post-card-head > .post-status-icons {
		gap: var(--spacing-3);
		margin-left: auto;
	}

.post-card-head > .post-status-icons > span {
			padding: var(--spacing-1) var(--spacing-5) var(--spacing-1) var(--spacing-4);
			border-radius: 2rem;
			background-color: var(--color-background-200);
		}

@container container (width <= 600px) {
			.post-card-head::after {
				margin-top: var(--spacing-4);
				padding: var(--spacing-1) var(--spacing-5);
				border-radius: 2rem;
				background-color: var(--color-background-200);
				font-size: var(--font-medium);
				font-weight: var(--font-weight-medium);
				content: attr(data-post-mobile-date);
			}
				.post-card-head > .post-status-icons > span {
					justify-content: center;
					min-width: var(--avatar--size);
					min-height: var(--avatar--size);
					padding: var(--spacing-1);
				}

				.post-card-head > .post-status-icons .label {
					display: none;
				}
	}

/* Footer. */

.post-card-footer {
	position: absolute;
	top: 0;
	left: calc(var(--layout--content--padding-h) * -1);
	z-index: 11;
	height: 100%;
}

:has(.post-media > :first-child) .post-card-footer {
		padding-top: var(--spacing-3);
	}

.post-card-footer > time {
		position: sticky;
		top: var(--layout--gap);
		left: 0;
		padding: var(--spacing-7) var(--spacing-2);
		border: 1px solid var(--color-border);
		border-radius: 2rem;
		background-color: var(--color-background-100);
		background-clip: padding-box;
		font-size: var(--font-small);
		font-weight: var(--font-weight-medium);
		line-height: normal;
		white-space: nowrap;
		transform: rotate(180deg) translateX(50%);
    writing-mode: vertical-rl;
	}

@container container (width <= 600px) {
		.post-card-footer {
			display: none;
		}
	}

/* Set container. */

.post-card-head,
.post-card-content > p,
.post-card-content > .post-head,
.post-card-content > .post-button {
	width: 100%;
	max-width: var(--container--width);
	margin-right: auto;
	margin-left: auto;
}

/* Pagination. */

.section-posts-pagination:not(:has(> .button)) {
		display: none;
	}

.section-posts-pagination > .button {
		--button--color: var(--color-contrast);
		--button--background-color: var(--color-background-100);

		border: 1px solid var(--color-border);
	}

.section-posts-pagination-prev {
	width: 100%;
	max-width: var(--container--width);
	margin-right: auto;
	margin-bottom: var(--layout--gap);
	margin-left: auto;
}

.section-posts-pagination-next {
	display: flex;
	align-items: center;
	margin-top: var(--layout--gap);
}

.section-posts-pagination-next::before,
	.section-posts-pagination-next::after {
		content: "";
		flex: 1 0 0%;
		border-top: 1px solid var(--color-border);
	}

.section-posts-pagination-next::before {
		margin-right: var(--spacing-8);
	}

.section-posts-pagination-next::after {
		margin-left: var(--spacing-8);
	}

/* Card. */

.section-recommendations .recommendation-card {

	/* Set container. */
}

.section-recommendations .recommendation-card > h3 {
		display: block;
		font-size: var(--font-large);
		font-weight: var(--font-weight-medium);
	}

.section-recommendations .recommendation-card > h3 > picture {
			display: inline;
			float: left;
			margin-right: var(--spacing-4);
			margin-bottom: calc(var(--spacing-1) * -1);
		}

.section-recommendations .recommendation-card > h3 > picture > img {
				--placeholder--content: "";
				--placeholder--padding: 0;
				--placeholder--background-color: var(--color-background-300);

				position: relative;
				width: 22px;
				height: 22px;
				-o-object-fit: cover;
				   object-fit: cover;
				border-radius: var(--radius-1);
			}

.section-recommendations .recommendation-card > p {
		margin-top: var(--spacing-4);
	}

.section-recommendations .recommendation-card > h3,
	.section-recommendations .recommendation-card > p {
		width: 100%;
		max-width: var(--container--width);
		margin-right: auto;
		margin-left: auto;
	}

.tag-card {
	--tag--image--size: 3.75rem; /* 60px. */

	/* Set container. */
}

/* Description. */

.tag-card > p {
		margin-top: var(--spacing-7);
		margin-bottom: 0;
	}

.tag-card > p,
	.tag-card > .tag-card-head {
		width: 100%;
		max-width: var(--container--width);
		margin-right: auto;
		margin-left: auto;
	}

.tag-card-head {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--spacing-1);
	min-height: var(--tag--image--size);
	padding-left: calc(var(--tag--image--size) + var(--spacing-7));
}

.tag-card-head > div {
		display: flex;
		align-items: center;
		background-color: var(--color-accent-background);
		color: var(--color-accent-text);
	}

.tag-card-head > div,
	.tag-card-head > figure {
		--placeholder--color: var(--color-accent-text);
		--placeholder--background-color: var(--color-accent-background);
	}

.tag-card-head > div::before,
	.tag-card-head > figure img::before {
		justify-content: flex-start;
		padding-left: var(--spacing-8);
		font-size: var(--font-h4);
		font-weight: var(--font-weight-medium);
		white-space: nowrap;
	}

.tag-card-head[style] > div,
	.tag-card-head[style] > figure {
		--placeholder--background-color: color-mix(in srgb, var(--tag--color), var(--color-background-content) 85%);
		--placeholder--color: color-mix(in srgb, var(--tag--color), var(--color-contrast) 20%);
	}

.tag-card-head > figure,
	.tag-card-head > div {
		position: absolute;
		top: 0;
		left: 0;
		width: var(--tag--image--size);
		height: var(--tag--image--size);
		margin: 0;
		border-radius: var(--radius-2);
		overflow: hidden;
		transition: transform .2s ease;
	}

.tag-card > a:hover + .tag-card-head > div,
	.tag-card > a:hover + .tag-card-head > figure {
		transform: scale(1.03);
	}

.tag-card-head > h1,
	.tag-card-head > h3 {
		font-size: var(--font-large);
		font-weight: var(--font-weight-medium);
	}

.tag-card-head > span {
		color: var(--color-secondary);
		font-size: var(--font-medium);
		font-weight: var(--font-weight-medium);
	}

.tag-card-head img {
		width: 100%;
		height: 100%;
		-o-object-fit: cover;
		   object-fit: cover;
	}

/* Pages. */

.author-template .sidebar-footer {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--spacing-7);
	}

.author-template .author-card-head {
		padding-top: calc(var(--author--image--size) + var(--spacing-8) + var(--spacing-1));
		padding-left: 0;
	}

.author-template .author-total-posts {
		margin-left: auto;
		color: var(--color-secondary);
		font-size: var(--font-medium);
		font-weight: var(--font-weight-medium);
	}

@container container (width <= 600px) {
		.author-template .author-socials:has(> ul > :first-child) {
			margin-right: auto;
		}

		.author-template .author-socials:not(:has(> ul > :first-child)) {
			display: none;
		}

		.author-template .author-total-posts {
			margin-left: 0;
		}
	}

/* stylelint-disable at-rule-no-unknown */

.post-content > .post:not(.custom-page) > .section-hero {
		margin-bottom: var(--spacing-8);
	}

/* Excerpt. */

.post-content > .post:not(.custom-page) > p {
		margin-top: var(--vertical-rhythm);
		margin-bottom: 0;
	}

/* Content. */

.post-content > .post:not(.custom-page) > .post-content-wrapper {
		margin-top: var(--vertical-rhythm);
	}

.post {
	display: flex;
	flex-direction: column;
}

/* Primary tag. */

.post-tag {
	display: inline-flex;
	align-items: center;
	padding: var(--spacing-2) var(--spacing-5);
	border-radius: 2rem;
	background-color: color-mix(in srgb, var(--tag--color, var(--ghost-accent-color)), transparent 85%);
	color: color-mix(in srgb, var(--tag--color, var(--ghost-accent-color)), var(--color-contrast) 20%);
	font-size: var(--font-medium);
	font-weight: var(--font-weight-medium);
	line-height: 1.3;
	-webkit-text-decoration: none;
	text-decoration: none;
	transition: color .15s ease, background-color .15s ease;
}

.post-tag:hover {
		background-color: var(--ghost-accent-color);
		color: var(--color-accent-foreground);
	}

.post-tag[style]:hover {
		background-color: var(--tag--color);
		color: var(--color-white);
	}

/* Authors. */

.post-authors {
	display: flex;
}

.post-author {
	position: relative;
}

.post-author + .post-author {
		margin-left: calc(var(--spacing-3) * -1);
	}

.post-author + .post-author > a > .avatar {
			-webkit-mask-image: radial-gradient(circle calc(var(--avatar--size) + 2px) at -25% 50%,transparent 50%,#000 calc(50% + 1px));
			        mask-image: radial-gradient(circle calc(var(--avatar--size) + 2px) at -25% 50%,transparent 50%,#000 calc(50% + 1px));
		}

.post-author:nth-child(1) {
		z-index: 4;
	}

.post-author:nth-child(2) {
		z-index: 3;
	}

.post-author:nth-child(3) {
		z-index: 2;
	}

.post-author:nth-child(4) {
		z-index: 1;
	}

.post-author:nth-child(5) {
		z-index: 0;
	}

/* Featured wrapper. */

.post-media {
	--post--media--radius: var(--radius-2);

	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--container--width);
	margin: 0 auto;
	padding: var(--spacing-3) 0;

	/* Set video radius. */
}

/* Hide block when no featured image or video. */

.post-media:not(:has(> :first-child)) {
		display: none;
	}

/* Set visual frame. */

.post-media::before {
		content: "";
		position: absolute;
		top: calc(var(--spacing-3) * 2);
		left: var(--spacing-3);
		width: calc(100% - var(--spacing-3) * 2);
		aspect-ratio: var(--featured-image--aspect-ratio);
		outline: 1px solid var(--color-border);
		outline-offset: var(--spacing-3);
		border-radius: calc(var(--post--media--radius) - 1px);
		pointer-events: none;
	}

/* Set background under the frame. */

.post-media::after {
		position: absolute;
		top: calc(var(--spacing-3) * 2);
		left: var(--spacing-3);
		z-index: -1;
		width: calc(100% - var(--spacing-3) * 2);
		border-radius: calc(var(--post--media--radius) - 1px);
		background-color: var(--color-background-100);
		content: "";
		aspect-ratio: var(--featured-image--aspect-ratio);
		outline: var(--spacing-3) solid var(--color-background-100);
		pointer-events: none;
	}

.post-media > .post-featured-image,
	.post-media > .post-featured-video {
		display: block;
		width: calc(100% - var(--spacing-3) * 2);
		height: auto;
		margin: var(--spacing-3);
	}

/* Image. */

.post-media > .post-featured-image > picture {
			display: block;
			border-radius: var(--post--media--radius);
		}

.post-media > .post-featured-image img {
			border-radius: var(--post--media--radius);
			background-color: var(--color-background-300);
		}

/* Video. */

.post-media > .post-featured-video {

		/* For visible featured image. */
	}

.post-media > .post-featured-video > iframe,
		.post-media > .post-featured-video > .kg-video-container {
			width: 100%;
			height: auto;
		}

.post-media > .post-featured-video video,
		.post-media > .post-featured-video iframe:not([src*='player.vimeo.com']) {
			background-color: transparent;
		}

/* Set aspect ratio. */

.post-media > .post-featured-image img,
	.post-media > iframe.post-featured-video,
	.post-media > video.post-featured-video,
	.post-media > .post-featured-video video,
	.post-media > .post-featured-video iframe,
	.post-media > .post-featured-video .kg-video-container {
		aspect-ratio: var(--featured-image--aspect-ratio);
	}

/* Set object fit. */

.post-media > .post-featured-image img,
	.post-media > video.post-featured-video,
	.post-media > .post-featured-video video {
		-o-object-fit: cover;
		   object-fit: cover;
	}

/* Has video. */

/* Hide figcaption for featured image. */

.post-media:has(> .post-featured-video) > .post-featured-image figcaption {
			display: none;
		}

/* Position absolute for image. */

.post-media:has(> .post-featured-video) > .post-featured-image {
			position: absolute;
			top: var(--spacing-3);
			left: 0;
		}

/* Hide trigger lightbox. */

.post-media:has(> .post-featured-video) .lightbox-trigger {
			display: none;
		}

.post-media > iframe.post-featured-video,
	.post-media > .post-featured-video iframe,
	.post-media > video.post-featured-video,
	.post-media > .post-featured-video > .kg-video-container {
		clip-path: inset(0 round var(--post--media--radius));
	}

/* Status icons. */

.post-status-icons {
	display: flex;
	gap: var(--spacing-7);
}

.post-status-icons:not(:has(> :first-child)) {
		display: none;
	}

.post-status-icons > span {
		display: flex;
		align-items: center;
		gap: var(--spacing-3);
		color: var(--color-foreground);
		font-size: var(--font-medium);
		font-weight: var(--font-weight-medium);
	}

.post-status-icons svg {
		display: block;
		width: 1em;
		height: 1em;
	}

/* Breadcrumbs. */

.post-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-1);
	width: 100%;
	max-width: var(--container--width);
	margin: 0 auto var(--spacing-9) auto;
	font-size: var(--font-medium);
	font-weight: var(--font-weight-medium);
}

.post-breadcrumbs > a {
		position: relative;
		z-index: 1;
		margin-top: calc(var(--spacing-3) * -1);
		margin-bottom: calc(var(--spacing-3) * -1);
		border-radius: 2rem;
		color: var(--color-foreground);
		line-height: normal;
		-webkit-text-decoration: none;
		text-decoration: none;
		transition: color .2s ease;
	}

/* Background. */

.post-breadcrumbs > a::before {
			position: absolute;
			z-index: -1;
			background-color: transparent;
			transition: background-color .2s ease, color .2s ease, clip-path .2s ease;
			content: "";
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			clip-path: inset(var(--spacing-2) round var(--radius-1));
		}

.post-breadcrumbs > a:first-child {
			margin-left: calc(var(--spacing-5) * -1);
		}

.post-breadcrumbs > a:hover {
			color: var(--color-contrast);
		}

.post-breadcrumbs > a:hover::before {
				background-color: var(--color-grey-translucent);
				clip-path: inset(0 round var(--radius-2));
			}

.post-breadcrumbs > span {
		color: var(--color-secondary);
	}

.post-breadcrumbs > a,
	.post-breadcrumbs > span {
		padding: var(--spacing-3) var(--spacing-5);
	}

/* Breadcrumbs mobile. */

.container > .post-breadcrumbs {
	margin-top: calc(var(--layout--gap) * -1 + var(--spacing-8));
	margin-bottom: 0;
	padding: 0 1rem;
}

@container container (width > 600px) {

.container > .post-breadcrumbs {
		display: none
}
	}

.content > .post-breadcrumbs {
	order: -1;
}

@container container (width <= 600px) {

.content > .post-breadcrumbs {
		display: none
}
	}

/* Footer. */

.post-footer {
	position: absolute;
	top: calc(var(--layout--content--padding-v) + var(--layout--offset));
	left: 0;
	z-index: 11;
	height: calc(100% - var(--layout--content--padding-v) - var(--layout--offset));
	margin-top: calc(1lh + var(--spacing-9));
	padding: 0 var(--layout--offset);
	line-height: normal;
}

.post-footer > time {
		position: sticky;
		top: var(--layout--gap);
		left: 0;
		padding: var(--spacing-7) var(--spacing-2);
		border: 1px solid var(--color-border);
		border-radius: 2rem;
		background-color: var(--color-background-100);
		background-clip: padding-box;
		font-size: var(--font-small);
		font-weight: var(--font-weight-medium);
		transform: rotate(180deg) translateX(50%);
    writing-mode: vertical-rl;
	}

@container container (width <= 600px) {
		.post-footer {
			position: static;
			z-index: 0;
			display: flex;
			height: auto;
			margin-top: 0;
			margin-bottom: var(--spacing-7);
			padding: 0;
			order: -1;
			line-height: inherit;
		}

			.post-footer > time {
				position: static;
				display: block;
				padding: var(--spacing-1) var(--spacing-5);
				border: 0;
				background-color: var(--color-background-200);
				font-size: var(--font-medium);
				transform: none;
				writing-mode: initial;
			}
	}

/* Content. */

.post-content {
	container: content / inline-size;
}

.post-content:not(:first-child) {
		margin-top: calc(var(--vertical-rhythm) + var(--spacing-3));
	}

.post-content:not(:has(> :first-child)) {
		display: none;
	}

.post-content > * {
		max-width: min(var(--container--width), 100%);
		margin-top: var(--vertical-rhythm);
		margin-right: auto;
		margin-left: auto;
	}

.post-content > *:first-child {
			margin-top: 0;
		}

.post-content > *:last-child {
			margin-bottom: 0;
		}

.post-content > :where(h1, h2, h3, h4, h5, h6) {
		margin-top: calc(var(--vertical-rhythm) * 3);
		scroll-margin-top: var(--vertical-rhythm);
	}

.post-content > h1 + :where(h2, h3, h4, h5, h6), .post-content > h2 + :where(h3, h4, h5, h6), .post-content > h3 + :where(h4, h5, h6), .post-content > h4 + :where(h5, h6), .post-content > h5 + :where(h6) {
		margin-top: var(--vertical-rhythm);
	}

.post-content > :where(.kg-card) {
		margin-top: calc(var(--vertical-rhythm) + var(--spacing-3));
		margin-bottom: calc(var(--vertical-rhythm) + var(--spacing-3));
	}

.post-content > :where(hr) {
		margin-top: calc(var(--vertical-rhythm) * 2);
		margin-bottom: calc(var(--vertical-rhythm) * 2);
	}

.post-content > .kg-width-wide,
	.post-content > .kg-blockquote-alt {
		max-width: calc(100% + var(--layout--content--padding-h));
		margin-right: calc(var(--layout--content--padding-h) * -0.5);
		margin-left: calc(var(--layout--content--padding-h) * -0.5);
	}

.post-content > .kg-width-full {
		max-width: calc(100% + var(--layout--content--padding-h) * 2);
		margin-right: calc(var(--layout--content--padding-h) * -1);
		margin-left: calc(var(--layout--content--padding-h) * -1);
	}

/* Content teaser. */

.post-content-teaser {
	position: relative;
}

.post-content-teaser::before {
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
		width: calc(100% + var(--layout--content--padding-h) * 2);
		height: 150px;
		max-height: 100%;
		margin-right: calc(var(--layout--content--padding-h) * -1);
    margin-left: calc(var(--layout--content--padding-h) * -1);
		background-image: linear-gradient(
			180deg,
			transparent 0%,
			var(--color-background-content) 100%
		);
		content: '';
		pointer-events: none;
	}

/* Upgrade cta. */

.post-upgrade-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-6);
	width: 100%;
	max-width: var(--container--width);
	margin-top: var(--spacing-7);
	margin-right: auto;
	margin-left: auto;
	padding: var(--layout--gap) var(--spacing-9);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-3);
	text-align: center;
	scroll-margin-top: var(--spacing-7);
}

.post-upgrade-cta > h2,
	.post-upgrade-cta > p {
		max-width: var(--container-small--width);
	}

.post-upgrade-cta > h2 {
		margin-bottom: 0;
		font-size: var(--font-h4);
		font-weight: var(--font-weight-medium);
	}

.post-upgrade-cta > p {
		margin-bottom: 0;
	}

.post-upgrade-cta .button {
		margin: var(--spacing-2) 0;
	}

/* Navigation (older and newest posts). */

.section-post-navigation {
	margin-top: var(--layout--gap);
}

.section-post-navigation:not(:has(> .post-navigation > article)) {
		display: none;
	}

.section-post-navigation > h2 {
		width: 100%;
		max-width: var(--container--width);
		margin-right: auto;
		margin-bottom: var(--spacing-4);
		margin-left: auto;
		font-size: var(--font-large);
		font-weight: var(--font-weight-medium);
	}

.post-navigation {
	display: flex;
	flex-direction: column;
}

.post-navigation-newer + .post-navigation-older > div {
	border-top: 1px solid var(--color-border);
}

.post-navigation-older:hover > div,
.post-navigation-newer:hover + .post-navigation-older > div {
	border-color: transparent;
}

.post-navigation-newer,
.post-navigation-older {
	position: relative;
	z-index: 1;
	gap: var(--spacing-7);
	grid-template-rows: auto auto;
}

.post-navigation-newer > a, .post-navigation-older > a {
		position: absolute;
		top: 0;
		right: calc(var(--layout--content--padding-h) * -1);
		bottom: 0;
		left: calc(var(--layout--content--padding-h) * -1);
		z-index: 1;
	}

.post-navigation-newer::before, .post-navigation-older::before {
		content: "";
		position: absolute;
		top: 0;
		right: calc(var(--layout--content--padding-h) * -1);
		bottom: 0;
		left: calc(var(--layout--content--padding-h) * -1);
		z-index: -1;
		transition: background-color .15s ease;
	}

.post-navigation-newer:hover::before, .post-navigation-older:hover::before {
		background-color: var(--color-background-200);
	}

.post-navigation-newer > div, .post-navigation-older > div {
		display: flex;
		gap: var(--spacing-7);
		width: 100%;
		max-width: var(--container--width);
		min-height: calc(60px + var(--spacing-8) * 2);
		margin-right: auto;
		margin-left: auto;
		padding: var(--spacing-8) 0;
		transition: border-color .15s ease;
	}

.post-navigation-newer h3, .post-navigation-older h3 {
		font-size: var(--font-large);
		font-weight: var(--font-weight-medium);
	}

.post-navigation-newer img, .post-navigation-older img {
		width: 100%;
		height: 100%;
		-o-object-fit: cover;
		   object-fit: cover;
	}

.post-navigation-newer figure, .post-navigation-older figure {
		flex: 0 0 auto;
		width: 60px;
		height: 60px;
		margin: 0;
		order: -1;
		border-radius: var(--radius-2);
		overflow: hidden;
	}

.post-navigation-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--spacing-1);
	flex: 1 0 0%;
}

.post-navigation-content > span {
		display: flex;
		align-items: center;
		gap: var(--spacing-2);
		color: var(--color-secondary);
		font-size: var(--font-medium);
		font-weight: var(--font-weight-medium);
	}

/* stylelint-disable at-rule-no-unknown */

.page-error .container {
		min-height: 100vh;
	}

.page-error:has(.gh-announcement-bar-content) .container {
		min-height: calc(100vh - 48px);
	}

.page-error .footer {
		margin-bottom: 0;
	}

.page-error-card {
	margin-top: auto;
	text-align: center;
}

.page-error-card > p {
		margin-top: var(--spacing-6);
		margin-bottom: 0;
	}

.page-error-card > .button {
		margin-top: var(--spacing-8);
	}

.tag-template .sidebar-footer {
		display: flex;
	}

.tag-template .tag-card-head {
		padding-top: calc(var(--tag--image--size) + var(--spacing-8) + var(--spacing-1));
		padding-left: 0;
	}

.tag-template .tag-total-posts {
		margin-left: auto;
		color: var(--color-secondary);
		font-size: var(--font-medium);
		font-weight: var(--font-weight-medium);
	}

@container container (width <= 600px) {
		.tag-template .tag-total-posts {
			margin-left: 0;
		}
	}

/* Fixed. */

/* Fixed :view-transition. */

/* Audio. */

.post-content .kg-audio-thumbnail {
		clip-path: inset(0 round var(--radius-2));
	}

/* Video. */

.post-content .kg-video-container {
		clip-path: inset(0 round var(--radius-2));
	}

/* Embed. */

.post-content .kg-embed-card > iframe {
		clip-path: inset(0 round var(--radius-2));
	}