@charset "UTF-8";

@layer font-faces{
@font-face{
	font-display:swap;
	font-family:"Marek Slab";
	font-style:normal;
	font-weight:300;
	src:url("/static/frontend/fonts/marek-slab/marek_slab_light-webfont.a56583bb91a4.woff2") format("woff2"), url("/static/frontend/fonts/marek-slab/marek_slab_light-webfont.9b7ce339e240.woff") format("woff");
}
}

@layer color-properties{

@property --color-light-shades-1{
	inherits:false;
	initial-value:hsl(50deg 33% 96%);
	syntax:"<color>";
}

@property --color-light-shades-2{
	inherits:false;
	initial-value:hsl(51deg 33% 96%);
	syntax:"<color>";
}

@property --color-light-shades-3{
	inherits:false;
	initial-value:hsl(51deg 30% 95%);
	syntax:"<color>";
}

@property --color-light-shades-4{
	inherits:false;
	initial-value:hsl(50deg 8% 85%);
	syntax:"<color>";
}

@property --color-light-shades-5{
	inherits:false;
	initial-value:hsl(48deg 4% 74%);
	syntax:"<color>";
}

@property --color-light-accent-1{
	inherits:false;
	initial-value:hsl(36deg 55% 60%);
	syntax:"<color>";
}

@property --color-light-accent-2{
	inherits:false;
	initial-value:hsl(37deg 54% 55%);
	syntax:"<color>";
}

@property --color-light-accent-3{
	inherits:false;
	initial-value:hsl(37deg 53% 50%);
	syntax:"<color>";
}

@property --color-light-accent-4{
	inherits:false;
	initial-value:hsl(37deg 52% 45%);
	syntax:"<color>";
}

@property --color-light-accent-5{
	inherits:false;
	initial-value:hsl(37deg 51% 39%);
	syntax:"<color>";
}

@property --color-main-brand-1{
	inherits:false;
	initial-value:hsl(187deg 20% 66%);
	syntax:"<color>";
}

@property --color-main-brand-2{
	inherits:false;
	initial-value:hsl(188deg 20% 62%);
	syntax:"<color>";
}

@property --color-main-brand-3{
	inherits:false;
	initial-value:hsl(188deg 21% 58%);
	syntax:"<color>";
}

@property --color-main-brand-4{
	inherits:false;
	initial-value:hsl(188deg 15% 52%);
	syntax:"<color>";
}

@property --color-main-brand-5{
	inherits:false;
	initial-value:hsl(187deg 14% 46%);
	syntax:"<color>";
}

@property --color-dark-accent-1{
	inherits:false;
	initial-value:hsl(14deg 30% 54%);
	syntax:"<color>";
}

@property --color-dark-accent-2{
	inherits:false;
	initial-value:hsl(13deg 31% 49%);
	syntax:"<color>";
}

@property --color-dark-accent-3{
	inherits:false;
	initial-value:hsl(13deg 38% 43%);
	syntax:"<color>";
}

@property --color-dark-accent-4{
	inherits:false;
	initial-value:hsl(13deg 37% 39%);
	syntax:"<color>";
}

@property --color-dark-accent-5{
	inherits:false;
	initial-value:hsl(13deg 36% 35%);
	syntax:"<color>";
}

@property --color-dark-shades-1{
	inherits:false;
	initial-value:hsl(236deg 9% 35%);
	syntax:"<color>";
}

@property --color-dark-shades-2{
	inherits:false;
	initial-value:hsl(233deg 13% 27%);
	syntax:"<color>";
}

@property --color-dark-shades-3{
	inherits:false;
	initial-value:hsl(234deg 18% 20%);
	syntax:"<color>";
}

@property --color-dark-shades-4{
	inherits:false;
	initial-value:hsl(233deg 18% 18%);
	syntax:"<color>";
}

@property --color-dark-shades-5{
	inherits:false;
	initial-value:hsl(236deg 18% 17%);
	syntax:"<color>";
}
}

@layer misc-properties{

@property --color-scheme{
	inherits:true;
	initial-value:light dark;
	syntax:"*";
}

@property --tab-size{
	inherits:true;
	initial-value:4;
	syntax:"<number>";
}
}

@layer root-variables{
:root{
	--px-em:0.0625em;
	--px-rem:0.0625rem;
	--body-padding-h:4vw;
	--body-padding-v:3vh;
	--body-padding:var(--body-padding-v) var(--body-padding-h);
	--section-padding-h:2rem;
	--section-padding-v:1rem;
	--section-padding:var(--section-padding-v) var(--section-padding-h);
	--layout-gap:3rem;
	--element-gap:1.5rem;
	--mini-gap:0.5rem;
	--outline-width:0.125rem;
	--outline-style:dotted;
	--border-radius:0.5rem;
	--border-radius-small:0.25rem;
	--copy-max-width:54ch;
	--input-choice-size:0.75em;
	--input-choice-gap:1ch;
	--body-font-size:1rem;
	--body-line-height:1.65;
	--heading-line-height:1.35;
	--heading-letter-spacing:0.0625rem;
	--h1-font-size:2.986rem;
	--h2-font-size:2.488rem;
	--h3-font-size:2.074rem;
	--h4-font-size:1.728rem;
	--h5-font-size:1.44rem;
	--h6-font-size:1.2rem;
	--small-font-size:0.833rem;
	--smaller-font-size:0.694rem;
	--font-body:400 var(--body-font-size) / var(--body-line-height) -apple-system, blinkmacsystemfont, avenir next, avenir, segoe ui, helvetica neue, adwaita sans, cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif;
	--font-heading:300 var(--body-font-size) / var(--heading-line-height) "Marek Slab", iowan old style, apple garamond, baskerville, times new roman, droid serif, times, source serif pro, serif, apple color emoji, segoe ui emoji, segoe ui symbol;
	--font-mono:400 var(--body-font-size) / var(--body-line-height) "Courier New", courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
	--animation-duration:200ms;
	--transition-duration:200ms;
	--shadow-color:light-dark(rgb(207 207 201), rgb(21 22 31));
	--body-background-color:light-dark(var(--color-light-shades-1), var(--color-dark-shades-5));
	--body-text-color:light-dark(var(--color-dark-shades-3), var(--color-light-shades-3));
	--accent-background-color:light-dark(var(--color-light-shades-3), var(--color-dark-shades-3));
	--accent-border-color:light-dark(var(--color-light-shades-4), var(--color-dark-shades-2));
	--accent-border-color-2:light-dark(var(--color-light-shades-5), var(--color-dark-shades-1));
	--outline-color:var(--body-text-color);
	--message-background-color:var(--color-light-shades-5);
	--message-background-offset-color:var(--color-light-shades-4);
	--message-text-color:var(--color-dark-shades-5);
	--message-background-color-info:var(--color-dark-shades-1);
	--message-text-color-info:var(--color-light-shades-1);
	--message-background-color-success:var(--color-main-brand-1);
	--message-text-color-success:var(--message-text-color);
	--message-background-color-warning:var(--color-light-accent-1);
	--message-text-color-warning:var(--message-text-color);
	--message-background-color-danger:var(--color-dark-accent-3);
	--message-text-color-danger:var(--color-light-shades-1);
	--button-background-color:var(--color-light-shades-5);
}
}

@layer primer{
@media screen and (prefers-reduced-motion: reduce), (update: slow){
	*{
		animation-duration:0.001ms !important;
		animation-iteration-count:1 !important;
		transition-duration:0.001ms !important;
	}
}

[hidden],
body.no-js .js-only{
	display:none !important;
}

body{
	background-color:var(--body-background-color);
	box-sizing:border-box;
	color-scheme:var(--color-scheme);
	margin:0;
	min-block-size:100svh;
	padding:0;
	-webkit-text-size-adjust:none;
	   -moz-text-size-adjust:none;
	        text-size-adjust:none;

	@media screen and (forced-colors: none){
		&[data-theme="light"]{
			--color-scheme:light;
		}

		&[data-theme="dark"]{
			--color-scheme:dark;
		}
	}

	@media screen and (prefers-reduced-motion: no-preference){
		scroll-behavior:smooth;
	}
}
*,
*::before,
*::after{
	box-sizing:inherit;
}

a:not([class]){
	color:currentcolor;
	-webkit-text-decoration-skip:ink;
	        text-decoration-skip-ink:auto;
}

img,
picture{
	display:block;
	max-inline-size:100%;
}

img[width][height]{
	block-size:auto;
}

svg{
	inline-size:100%;
}

button,
input,
select,
textarea{
	font-family:inherit;
	font-size:inherit;
	letter-spacing:inherit;
	line-height:inherit;
}

:target{
	scroll-margin-block:5ex;
}
.visually-hidden:not(:focus, :active){
	block-size:1px;
	clip-path:inset(50%);
	inline-size:1px;
	overflow:hidden;
	position:absolute;
	white-space:nowrap;
}
}

@layer content-flow{

p,
pre,
blockquote,
ul,
ol,
li,
figure{
	margin:0;
}
:where(main section, .article__content) > *:not(.visually-hidden) + *{
	margin-block-start:var(--element-gap);
}
}

@layer horizontal-rules{
hr{
	border:var(--px-rem) solid var(--accent-border-color);
	display:block;
	inline-size:2rem;
	margin-block:calc(var(--layout-gap) / 2);
	margin-inline:0;
	transform:translateX(-50%);
}
}

@layer text{

body{
	color:var(--body-text-color);
	font:var(--font-body);
}

h1,
h2,
h3,
h4,
h5,
h6,
.layout__navigation{
	font:var(--font-heading);
	letter-spacing:var(--heading-letter-spacing);
}

code{
	font:var(--font-mono);
}

h1,
h2,
h3,
h4,
h5,
h6{
	margin-block:0 0.65em;
	margin-inline:0;
	text-wrap:balance;

	&:not(:first-child){
		margin-block-start:1.15em;
	}
}

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

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

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

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

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

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

p.note{
	font-style:italic;
}

blockquote{
	border-inline-start:calc(2 * var(--px-rem)) solid var(--accent-border-color);
	font-style:italic;
	padding-block:0;
	padding-inline:2.5em 0;
	position:relative;

	&::before{
		content:open-quote;
		display:block;
		font-size:2em;
		inset-block-start:0;
		inset-inline-start:0;
		line-height:1;
		padding:0.125em;
		position:absolute;
	}

	&:first-child{
		margin-block-start:0;
	}

	&:last-child{
		margin-block-end:0;
	}
}

a{
	color:var(--body-text-color);
	-webkit-text-decoration-skip:ink;
	        text-decoration-skip-ink:auto;

	&:focus{
		outline:var(--outline-width) var(--outline-style) var(--outline-color);
		outline-offset:var(--outline-width);
		z-index:1;
	}
}

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

@layer code{

pre{
	background-color:var(--accent-background-color);
	-moz-tab-size:var(--tab-size);
	  -o-tab-size:var(--tab-size);
	     tab-size:var(--tab-size);
	white-space:pre-wrap;

	& code{
		display:block;
		padding-block:0.5em;
		padding-inline:0.75em;
	}
}

.highlight{
	border:2px solid var(--accent-border-color);
	overflow:auto;
	padding-block:0.5rem;
	resize:both;

	& :is(code, pre){
		background-color:transparent;
	}

	& pre{
		margin:0;
	}
}

body[data-code-wrap="false"]{
	& .highlight{
		& :is(code, pre){
			inline-size:-moz-max-content;
			inline-size:max-content;
		}

		& code > span{
			white-space:pre;
		}
	}
}

.cp_embed_wrapper{
	--cp-min-height:20em;

	min-block-size:var(--cp-min-height);
	overflow:hidden;
	resize:both;

	& > iframe{
		block-size:100%;
		min-block-size:var(--cp-min-height);
	}
}
}

@layer lists{
ol,
ul{
	padding-block:0;
	padding-inline:2.5em 0;

	&:not([class]){
		& li + li{
			margin-block-start:var(--mini-gap);
		}
	}

	&.tags{
		background-color:var(--accent-background-color);
		display:flex;
		flex-wrap:wrap;
		list-style-type:"";
		padding:var(--element-gap);

		& li::after{
			content:",\00a0";
		}

		& li:last-child::after{
			content:".";
		}
	}
}
}

@layer forms{

form{
	background-color:var(--accent-background-color);
	border-radius:var(--border-radius-small);
	display:grid;
	gap:var(--element-gap);
	padding:var(--element-gap);

	& .form__field{
		label{
			display:block;
		}

		& .note--help{
			font-size:var(--small-font-size);
			margin-block:0;
		}
	}

	& .form__field--checkbox{
		align-items:center;
		display:flex;
		gap:var(--input-choice-gap);
	}

	& .form__actions{
		display:flex;
		flex-wrap:wrap;
		gap:1ch;
	}
}

fieldset{
	border:var(--px-rem) solid var(--accent-border-color);
	display:grid;
	gap:var(--element-gap);
}

legend{
	font-weight:700;
	white-space:nowrap;
}

input:not([type="checkbox"], [type="radio"]),
textarea,
select{
	background-color:var(--body-background-color);
	border:var(--px-rem) solid var(--accent-border-color-2);
	border-radius:var(--border-radius-small);
	color:var(--body-text-color);
	inline-size:100%;
	margin-block-start:0.125rem;
	padding-block:0.5rem;
	padding-inline:0.75rem;

	&:focus{
		outline:var(--outline-width) var(--outline-style) var(--outline-color);
		outline-offset:var(--outline-width);
		z-index:1;
	}
}

button{
	display:inline-block;
	&:focus{
		outline:var(--outline-width) var(--outline-style) var(--outline-color);
		outline-offset:var(--outline-width);
		z-index:1;
	}

	&[type="submit"]{
		--button-background-color:var(--color-light-accent-1);
	}
}

a.button{
	display:inline-block;
}

button:not(.button--as-link),
a.button{
	background-color:var(--button-background-color);
	border:calc(2 * var(--px-rem)) solid var(--button-border-color, var(--button-background-color));
	border-radius:var(--border-radius);
	color:var(--button-text-color, rgb(0 0 0));
	padding-block:0.5em;
	padding-inline:1.5em;
	transition-duration:var(--transition-duration);
	transition-property:background-color, border-color, color;

	&:hover,
	&:active{
		--button-background-color:var(--color-dark-accent-5);
		--button-text-color:hsl(0deg 0% 100%);
	}

	&:focus{
		outline:var(--outline-width) var(--outline-style) var(--outline-color);
		outline-offset:var(--outline-width);
	}
}
}

@layer dialogs{
dialog{
	--v-padding:clamp(1rem, 6vh, 1.5rem);

	background-color:var(--body-background-color);
	inline-size:var(--content-width);
	max-inline-size:calc(100% - var(--col-gap) * 2);
	padding-block:var(--v-padding);
	padding-inline:clamp(1rem, 6vw, 2.5rem);

	& form{
		margin-block-start:calc(-1 * var(--element-gap));
	}

	& .form__actions{
		background-color:var(--accent-background-color);
		border-block-start:var(--px-rem) solid currentcolor;
		inset-block-end:0;
		justify-content:end;
		margin-block-start:calc(-1 * var(--v-padding));
		padding-block:var(--element-gap) var(--v-padding);
		position:sticky;
		transform:translateY(var(--v-padding));
	}
}
}

@layer blog-article-components{

article:is(.article--preview, .article--full){
	& .article__meta__updated-at{
		font-style:italic;
	}
}

article.article--preview{
	& .article__summary{
		margin-block-start:var(--mini-gap);
	}
}

article.article--full{
	& .article__series{
		& :is(details, p, ol){
			margin-block-start:var(--element-gap);
		}
	}

	& .article__content > *:not(.highlight){
		max-inline-size:var(--content-width);
	}

	& .article__footer{
		& p{
			font-style:italic;
		}

		& ul{
			display:flex;
			flex-wrap:wrap;
			gap:0.5rem;
			list-style-type:"";
			margin-block-start:var(--mini-gap);
			padding:0;
		}

		& a{
			background-color:var(--accent-background-color);
			border:var(--px-rem) solid var(--accent-border-color);
			border-radius:var(--border-radius-small);
			display:inline-block;
			padding-inline:0.5rem;
			text-decoration:none;
			transition-duration:var(--transition-duration);
			transition-property:border-color;

			&:hover,
			&:active,
			&:focus{
				border-color:var(--color-main-brand-1);
			}
		}
	}
}
}

@layer pagination-component{
.pagination{
	& ul{
		display:flex;
		flex-wrap:wrap;
		gap:0.25rem;
		justify-content:center;
		list-style-type:"";
		padding:0;
	}

	& .pagination__item{
		background-color:var(--accent-background-color);
		border:var(--px-rem) solid var(--pagination-border-color, transparent);
		text-align:center;

		& > :is(a, span){
			display:inline-block;
			min-inline-size:calc(1em * var(--body-line-height) + 0.5rem);
			padding-block:0.25rem;
			padding-inline:calc(0.25em + 0.25rem);
		}

		& > a{
			text-decoration:none;
		}
	}

	& .pagination__item--first,
	& .pagination__item--last{
		display:none;
	}

	& .pagination__item--number{
		&:has(a[aria-current]){
			--pagination-border-color:currentcolor;
		}
	}
}
}

@layer reference-article-components{
article.reference{
	--reference-indent:1.5em;

	padding-inline-start:var(--reference-indent);
	text-indent:calc(-1 * var(--reference-indent));

	& .reference--annotation{
		margin-block-start:var(--mini-gap);
	}
}
}

@layer messages-entity{
ul.messages{
	display:grid;
	gap:var(--element-gap);
	list-style-type:"";
	padding-inline-start:0;

	& .messages__message{
		background-color:var(--message-background-color);
		color:var(--message-text-color);
		inline-size:100%;
		padding-block:0.75em;
		padding-inline:1.5em;
	}

	& .messages__message--info{
		--message-background-color:var(--message-background-color-info);
		--message-text-color:var(--message-text-color-info);
	}

	& .messages__message--success{
		--message-background-color:var(--message-background-color-success);
		--message-text-color:var(--message-text-color-success);
	}

	& .messages__message--warning{
		--message-background-color:var(--message-background-color-warning);
		--message-text-color:var(--message-text-color-warning);
	}

	& .messages__message--danger{
		--message-background-color:var(--message-background-color-danger);
		--message-text-color:var(--message-text-color-danger);
	}

	& a{
		color:currentcolor;
	}
}
}

@layer settings-form-entity{
.form--settings{
	& > .form__field + .form__field{
		border-block-start:var(--px-rem) solid var(--accent-border-color-2);
		padding-block-start:var(--element-gap);
	}
}
}

@layer search-form-entity{

.search-form-container{
	container-name:search;
	container-type:inline-size;
}

.form--search{
	gap:0;
	grid-template-areas:"search-label" "search-input" "search-button";

	& > *{
		border-radius:var(--border-radius-small);
		padding-block:0.5rem;
		padding-inline:0.75rem;
	}

	& label.form--search__label{
		grid-area:search-label;

		&::after{
			content:":";
		}
	}

	& input.form--search__input{
		grid-area:search-input;
		margin:0;
		overflow:hidden;
		text-overflow:ellipsis;
	}

	& button.form--search__submit{
		align-items:center;
		display:flex;
		grid-area:search-button;
		justify-content:center;

		& svg{
			inline-size:1.5em;
		}

		& path{
			fill:currentcolor;
		}
	}
}

@container search (width <= 11em){
	.form--search{
		& input.form--search__input{
			border-end-end-radius:0;
			border-end-start-radius:0;
		}

		& button.form--search__submit{
			border-start-end-radius:0;
			border-start-start-radius:0;
		}
	}
}

@container search (width > 11em){
	.form--search{
		grid-template-areas:"search-label search-label" "search-input search-button";
		grid-template-columns:1fr min-content;

		& input.form--search__input{
			border-end-end-radius:0;
			border-start-end-radius:0;
		}

		& button.form--search__submit{
			border-end-start-radius:0;
			border-start-start-radius:0;
		}
	}
}

@container search (width > 23em){
	.form--search{
		grid-template-areas:"search-label search-input search-button";
		grid-template-columns:max-content 1fr min-content;

		& label.form--search__label{
			background-color:var(--accent-border-color);
			border:var(--px-rem) solid var(--accent-border-color-2);
			border-end-end-radius:0;
			border-inline-end:0;
			border-start-end-radius:0;
		}

		& input.form--search__input{
			border-radius:0;
		}
	}
}
}

@layer outline-links{

button.settings-toggle{
	align-items:center;
	aspect-ratio:1 / 1;
	background-color:var(--accent-background-color);
	border:calc(2 * var(--px-rem)) solid var(--color-main-brand-1);
	border-radius:100%;
	display:inline-flex;
	inline-size:2.5rem;
	inset-block-end:1rem;
	inset-inline-end:0.75rem;
	justify-content:center;
	line-height:1;
	padding:0;
	position:fixed;
	transition:transform 80ms ease-in;
	white-space:nowrap;

	&:where(:hover, :focus){
		transform:scale(1.1);
	}

	svg{
		inline-size:55%;
	}

	path{
		fill:var(--body-text-color);
	}
}

.skip-link{
	background-color:var(--body-background-color);
	inset-inline-start:50%;
	padding:0.25rem;
	position:absolute;
	transform:translateX(-50%) translateY(-100%);
	transition:transform var(--transition-duration);
	white-space:nowrap;

	&:focus{
		transform:translateX(-50%);
	}
}
}

@layer site-footer{

.layout__footer{
	border-block-start:var(--px-rem) solid var(--body-text-color);
	container:site-footer / inline-size;

	& .footer__copyright{
		-moz-column-gap:1ch;
		     column-gap:1ch;
		display:flex;
		font-size:var(--small-font-size);
		text-align:center;
	}
}

@container site-footer (width <= 24rem){
	.footer__copyright{
		flex-direction:column;

		& span[role="separator"]{
			display:none;
		}
	}
}
}

@layer site-navigation{
.layout__navigation{
	--nav-deco-accent-height:0;
	--nav-deco-accent-height-expanded:15%;
	--nav-deco-line-color:var(--color-main-brand-1);
	--nav-deco-line-color-current:var(--color-light-accent-1);
	--nav-deco-line-color-hover:var(--color-dark-accent-1);
	--nav-deco-line-width:0.375rem;

	font-size:var(--h6-font-size);

	& ul{
		display:flex;
		gap:var(--element-gap) 1ch;
		list-style-type:"";
		padding:0;
		white-space:nowrap;
	}

	& a{
		border-block-end:var(--nav-deco-line-width) solid var(--nav-deco-line-color);
		display:inline-block;
		margin:calc(2 * var(--outline-width));
		padding-block:1em calc(1em - var(--nav-deco-line-width));
		padding-inline:1.25em;
		position:relative;
		text-decoration:none;
		transition-duration:var(--transition-duration);
		transition-property:background-color, block-size, border-color;

		&::before,
		&::after{
			background-color:var(--nav-deco-line-color);
			block-size:var(--nav-deco-accent-height);
			content:"";
			inline-size:var(--nav-deco-line-width);
			inset-block-end:0;
			position:absolute;
			transition:inherit;
		}

		&::before{
			inset-inline-start:0;
		}

		&::after{
			inset-inline-end:0;
		}

		&[aria-current]{
			--nav-deco-line-color:var(--nav-deco-line-color-current);

			&::after{
				--nav-deco-accent-height:var(--nav-deco-accent-height-expanded);
			}
		}

		&:hover,
		&:active,
		&:focus{
			--nav-deco-accent-height:var(--nav-deco-accent-height-expanded);
			--nav-deco-line-color:var(--nav-deco-line-color-hover);
		}
	}
}
}

@layer site-header{

.header__logo{
	display:inline-block;
	margin:calc(2 * var(--outline-width));
	max-inline-size:12em;

	& img{
		aspect-ratio:256 / 115;
	}
}

body[data-theme="dark"] .header__logo img{
	filter:invert(100%);
}

@media (prefers-color-scheme: dark){
	body:not([data-theme="light"]) .header__logo img{
		filter:invert(100%);
	}
}
}

@layer site-banner{
.layout__banner{
	background-color:var(--body-background-color);
	z-index:3;
	& > div{
		align-items:center;
		align-self:start;
		-moz-column-gap:2ch;
		     column-gap:2ch;
		display:flex;
		max-inline-size:100%;
		overflow-x:auto;
	}
}
}

@layer page-outline{

.page-outline{
	--page-layout:default;
	--content-width:50ch;
	--col-gap:clamp(1rem, 6vw, 3rem);
	--col-full:minmax(var(--col-gap), 1fr);

	container:page-outline / inline-size;
	display:grid;
	min-block-size:100svh;
	position:relative;

	& > :is(.layout, .content){
		display:grid;
		grid-auto-rows:max-content;
		padding-block:calc(var(--layout-gap) / 2);
		position:relative;
	}

	& > .content{
		row-gap:var(--layout-gap);

		& > .section--intro:has(h1:last-child){
			margin-block-end:calc(-1 * var(--layout-gap));
		}
	}
}

@media screen and (width <= 60rem){
	.page-outline{
		--col-content:min(var(--content-width), 100% - var(--col-gap) * 2);

		grid-template-rows:max-content max-content 1fr max-content;

		& > :is(.layout, .content){
			grid-template-columns:[full-start] var(--col-full) [content-start] var(--col-content) [content-end] var(--col-full) [full-end];
		}

		& > .layout{
			justify-items:center;
		}

		& > .layout__banner{
			align-items:center;
			padding-block:0.75rem 0;
			padding-inline:var(--col-gap);

			& > div{
				border-block-end:var(--px-rem) solid var(--accent-border-color-2);
				grid-column:full;
				grid-row:1;
				padding-block-end:0.75rem;
			}

			& .header__logo img{
				block-size:calc(1rem * var(--body-line-height) + 2em);
				inline-size:auto;
				max-inline-size:initial;
			}
		}

		& :is(.content, .layout__footer) > *{
			grid-column:content;
		}
	}

	body[data-sticky-header="true"]{
		& .layout__banner{
			inset-block-start:0;
			position:sticky;
		}
	}
}

@media screen and (width > 60rem){
	.page-outline{
		--page-layout:big-screen;
		--sidebar-width:15rem;
		--col-sidebar:var(--sidebar-width);
		--col-content:min(var(--content-width), 100% - var(--sidebar-width) - var(--col-gap) * 2);

		grid-template-columns:[full-start] var(--col-full) [sidebar-start] var(--col-sidebar) [sidebar-end content-start] var(--col-content) [content-end] var(--col-full) [full-end];
		grid-template-rows:1fr max-content;
	}
	.layout__banner{
		grid-column:sidebar;
		grid-row:1 / 3;
		justify-content:end;
		margin-inline-end:var(--layout-gap);
		row-gap:0.75rem;
		& > div{
			align-items:end;
			flex-direction:column;
		}
	}

	.layout__navigation{
		& ul{
			flex-direction:column;
		}

		& li{
			align-items:flex-end;
			display:flex;
			justify-content:end;
			max-inline-size:100%;
		}
	}

	.content__main{
		grid-column:content;
		grid-row:1 / 2;

		& h1{
			margin-block-start:1.75rem;
		}
	}

	.layout__footer{
		grid-column:content;
		grid-row:3;
	}

	body[data-sticky-header="true"] .layout__banner > div{
		inset-block-start:calc(var(--layout-gap) / 2);
		position:sticky;
	}
}
}

@layer hire-me-page{
.page--hire-me{
	& .cta--mah-rye-kuh{
		max-inline-size:16em;

		& > a{
			--line-color:var(--color-dark-accent-1);
			--line-color-hover:var(--color-light-accent-1);

			align-items:center;
			aspect-ratio:1 / 1;
			background-color:white;
			border:0.375rem solid var(--line-color);
			border-radius:100%;
			display:flex;
			justify-content:center;
			margin:calc(2 * var(--outline-width));
			padding:15%;

			&:hover,
			&:active,
			&:focus{
				--line-color:var(--line-color-hover);
			}

			& > img{
				aspect-ratio:60 / 49;
			}
		}

		& > figcaption{
			font-weight:bold;
			margin-block-start:var(--mini-gap);
			text-align:center;

			& > i{
				font-style:normal;
			}
		}
	}
}
}

@layer comic-sans-day{

@layer root-variables{
	body[data-special-mode="comic_sans_day"]{
		--font-body:400 var(--body-font-size) / var(--body-line-height) "Comic Sans MS", "Comic Sans", "Comic Mono", -apple-system, blinkmacsystemfont, avenir next, avenir, segoe ui, helvetica neue, adwaita sans, cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif;
		--font-heading:300 var(--body-font-size) / var(--heading-line-height) "Comic Sans MS", "Comic Sans", "Comic Mono", "Marek Slab", iowan old style, apple garamond, baskerville, times new roman, droid serif, times, source serif pro, serif, apple color emoji, segoe ui emoji, segoe ui symbol;
		--font-mono:400 var(--body-font-size) / var(--body-line-height) "Comic Mono", "Courier New", courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
	}
}
}

@layer print-style{
@media print{
	:root{
		--shadow-color:rgb(207 207 201);
		--body-background-color:hsl(0deg 0% 100%);
		--body-text-color:hsl(0deg 0% 0%);
		--accent-background-color:hsl(0deg 0% 97%);
		--accent-border-color:hsl(0deg 0% 80%);
		--accent-border-color-2:hsl(0deg 0% 67%);
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	li,
	dt,
	dd,
	table,
	a{
		-moz-column-break-inside:avoid;
		     break-inside:avoid;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6{
		-moz-column-break-after:avoid;
		     break-after:avoid;
	}

	.page-outline{
		display:block;
		margin-block:0;
		margin-inline:auto;
		max-inline-size:var(--copy-max-width);
		padding:0;
	}

	a,
	a:link,
	a:visited{
		background:transparent;
		color:currentcolor;
		text-decoration:underline;
	}

	main > :is(section, article, div) a[href]::after{
		-moz-column-break-inside:avoid;
		     break-inside:avoid;
		content:"\a<" attr(href) ">";
	}

	.article__meta__title a[href]::after{
		font-size:1rem;
		white-space:pre-wrap;
	}

	.form__field{
		border-block-end:var(--px-rem) solid var(--accent-border-color-2);
	}

	.messages{
		margin-block-start:0;
	}

	.messages__message{
		padding:0;
		position:relative;

		&::before{
			color:red;
			content:"!";
			display:inline-block;
			inset-inline-start:-2ch;
			position:absolute;
		}
	}

	.highlight{
		-moz-column-break-inside:avoid;
		     break-inside:avoid;
	}

	.header__inner,
	.main__inner,
	.footer__inner{
		padding-inline:0;
	}

	.header__logo{
		float:inline-end;
		inline-size:10em;
		margin:0;
	}

	input,
	textarea,
	.form__actions,
	.layout__navigation,
	.form--search,
	.pagination__item--previous,
	.pagination__item--next,
	.article__series,
	.article__series-separator,
	.article__footer-separator,
	.article__footer,
	.footer__copyright span,
	.footer__copyright a,
	.settings-toggle{
		display:none !important;
	}
}
}