@charset 'utf-8';

@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>";
}

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

: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:4rem;
	--element-gap:1.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;
	--outline-button-size:2.5rem;
	--outline-button-offset:0.75rem;
	--outline-button-gap:0.25rem;
	--outline-button-translate-y:0.5em;
	--body-font-size:1.25rem;
	--body-line-height:1.65;
	--heading-line-height:1.35;
	--heading-letter-spacing:0.125rem;
	--h1-font-size:3.815rem;
	--h2-font-size:3.052rem;
	--h3-font-size:2.441rem;
	--h4-font-size:1.953rem;
	--h5-font-size:1.563rem;
	--h6-font-size:1.25rem;
	--small-font-size:0.8rem;
	--smaller-font-size:0.64rem;
	--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));
	--navigation-menu-item-border-color:var(--color-main-brand-1);
	--navigation-menu-item-border-color-current:var(--color-light-accent-1);
	--navigation-menu-item-border-color-hover:var(--color-dark-accent-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);

	@media print{
		--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%);
	}
}

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;
}

@font-face{
	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");
}

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

body.no-js .js-only{
	display:none !important;
}

[hidden]{
	display:none !important;
}

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

html{
	box-sizing:border-box;
	-webkit-text-size-adjust:none;
	   -moz-text-size-adjust:none;
	        text-size-adjust:none;
}

*,
*::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%;
}

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;
}

h1,
h2,
h3,
h4,
h5,
h6{
	font:var(--font-heading);
	letter-spacing:var(--heading-letter-spacing);
	margin-block:1.15em 0.65em;
	margin-inline:0;
	text-wrap:balance;
}

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);
}

body{
	background-color:var(--body-background-color);
	color:var(--body-text-color);
	color-scheme:var(--color-scheme);
	font:var(--font-body);
	margin:0;

	@media screen and (forced-colors: none){
		&.theme--light{
			--color-scheme:light;
		}

		&.theme--dark{
			--color-scheme:dark;
		}
	}

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

.page-outline{
	min-block-size:100svh;
	padding:var(--body-padding);
	position:relative;
}

.site-banner,
.header,
.navigation,
.main,
.footer{
	inline-size:-moz-max-content;
	inline-size:max-content;
	max-inline-size:100%;
}

.header,
.navigation,
.main,
.footer{
	padding:var(--section-padding);
}

.header__inner,
.navigation__inner,
.main__inner,
.footer__inner{
	max-inline-size:100%;
	position:relative;
}

.main__inner{
	inline-size:var(--copy-max-width);
}

:where(main, main section, .article__content) > * + *{
	margin-block:var(--element-gap);
}

dialog{
	background-color:var(--body-background-color);

	& h1{
		margin-block:0;
	}
}

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%);
}

dt{
	--dt-item-offset:2.5em;

	font-style:italic;
	margin-block:0;
	margin-inline:0 var(--dt-item-offset);

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

	& dd{
		margin-block:0;
		margin-inline:var(--dt-item-offset) 0;
	}
}

ul.messages{
	display:grid;
	gap:var(--element-gap);
	list-style-type:none;
	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);
	}
}

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

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

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

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{
	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%;
	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);
	}
}

code,
pre{
	background-color:var(--accent-background-color);
	font:var(--font-mono);
}

pre{
	-moz-tab-size:4;
	  -o-tab-size:4;
	     tab-size:4;
	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.code-wrap--enabled{
	& .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);
	}
}

.content__page-title{
	margin-block-start:0;
}

.main{
	border-block-end:var(--px-rem) solid var(--body-text-color);

	& div,
	& section{
		+ section{
			margin-block-start:var(--layout-gap);
		}
	}
}

article.reference{
	--reference-indent:1.5em;

	margin-block:var(--element-gap);
	margin-inline:0;
	padding-inline-start:var(--reference-indent);
	text-indent:calc(-1 * var(--reference-indent));

	& .reference--title{
		font-style:normal;
	}

	& .reference--website-title,
	& .reference--publisher{
		font-style:italic;
	}

	& .reference--annotation{
		margin-inline-start:calc(-1 * var(--reference-indent));
	}
}

.cta--mah-rye-kuh{
	background-color:var(--accent-background-color);
	border-inline-start:calc(2 * var(--px-rem)) solid var(--accent-border-color);
	inline-size:-moz-max-content;
	inline-size:max-content;

	& a{
		display:inline-block;
		font-size:1.1em;
		padding:var(--element-gap);
	}
}

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

form.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;
		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.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.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.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;
		}
	}
}

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

	.article__footer{
		& p{
			font-style:italic;
			margin-block-end:0;
		}

		& ul{
			display:flex;
			flex-wrap:wrap;
			gap:0.5rem;
			list-style-type:none;
			margin-block-start:0;
			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-block:0;
			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);
			}
		}
	}
}

article.article--preview{
	margin-block:var(--layout-gap);
	margin-inline:0;
}

.pagination{
	@media screen and (width <= 85rem){
		display:flex;
		justify-content:center;
	}
	& ul{
		display:grid;
		gap:0.25rem;
		grid-auto-columns:minmax(3ch, max-content);
		grid-auto-flow:column;
		grid-template-rows:3ch;
		list-style-type:none;
		margin:0;
		padding:0;
	}

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

		& > :is(a, span){
			block-size:100%;
			padding-block:0;
			padding-inline:0.25em;
		}
		& > a{
			display:block;
			text-decoration:none;
		}

		& > span{
			display:inline-block;
		}
	}

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

	& .pagination__item--previous{
		@media screen and (width <= 85rem){
			span:last-child{
				display:none;
			}
		}
	}

	& .pagination__item--next{
		@media screen and (width <= 85rem){
			span:first-child{
				display:none;
			}
		}
	}

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

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

.header__logo{
	display:inline-block;
	max-inline-size:12em;

	img{
		aspect-ratio:256 / 115;
		block-size:auto;
	}
}

body.theme--dark .header__logo img{
	filter:invert(100%);
}

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

.navigation{
	--navigation-menu-font-size:1rem;
	--navigation-menu-item-border-width:0.25rem;
	--navigation-menu-item-border-accent-height:0;
	--navigation-menu-item-border-accent-height-expanded:15%;
}

@media screen and (width > 85rem){
	.navigation{
		--navigation-menu-font-size:1.2rem;
		--navigation-menu-item-border-width:0.5rem;
	}
}

.navigation__list-wrapper{
	margin-block-start:calc(-1 * var(--outline-width));
	overflow-x:auto;
}

.navigation__list{
	display:grid;
	font:var(--font-heading);
	font-size:var(--navigation-menu-font-size);
	gap:1ch;
	grid-auto-columns:max-content;
	grid-auto-flow:column;
	grid-template-rows:auto;
	letter-spacing:var(--heading-letter-spacing);
	list-style-type:none;
	margin:0;
	padding:0;

	li{
		align-items:flex-end;
		display:flex;
		max-inline-size:100%;

		&:dir(ltr){
			justify-content:flex-end;
		}
	}

	a{
		background-color:transparent;
		border:none;
		border-block-end:var(--navigation-menu-item-border-width) solid var(--navigation-menu-item-border-color);
		display:inline-block;
		margin:calc(2 * var(--outline-width));
		padding-block:1.25em 0.75em;
		padding-inline:1.25em;
		position:relative;
		text-align:start;
		text-decoration:none;
		transition:border-block-end-color var(--transition-duration);

		&::before,
		&::after{
			background-color:var(--navigation-menu-item-border-color);
			block-size:var(--navigation-menu-item-border-accent-height);
			content:"";
			inline-size:var(--navigation-menu-item-border-width);
			inset-block-end:calc(-1 * var(--px-rem));
			position:absolute;
			transition:background-color var(--transition-duration), block-size var(--transition-duration);
		}

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

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

		&[aria-current]{
			--navigation-menu-item-border-color:var(--navigation-menu-item-border-color-current);

			&::before{
				block-size:var(--navigation-menu-item-border-accent-height-expanded);
			}
		}

		&:hover,
		&:active,
		&:focus{
			--navigation-menu-item-border-accent-height:var(
				--navigation-menu-item-border-accent-height-expanded
			);
			--navigation-menu-item-border-color:var(--navigation-menu-item-border-color-hover);
		}

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

.footer__inner{
	align-items:center;
	display:flex;
}

.footer__copyright{
	font-size:var(--small-font-size);
	margin:0;

	@media screen and (width <= 85rem){
		margin-block:0;
		margin-inline:auto;
	}

	@media screen and (width <= 31.25rem){
		text-align:center;

		small,
		a{
			display:block;
		}

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

	small{
		font-size:1em;
	}
}

.footer__to-top-link{
	margin-inline-start:auto;
}

@media screen and (width <= 85rem){
	.footer__inner{
		padding-block-end:0;
	}
}

.page-outline{
	display:grid;
	grid-auto-rows:max-content;
	grid-template-areas:"site-header" "site-nav" "site-main" "site-footer";
	justify-content:center;

	& .site-banner{
		align-items:center;
		display:flex;
		flex-direction:column;
		gap:var(--element-gap);
		grid-area:site-banner;
	}

	& .layout__header{
		grid-area:site-header;
		padding-block-end:0;
	}

	& .layout__navigation{
		grid-area:site-nav;
		inline-size:100%;
		padding-block:0;
	}

	& .content__main{
		grid-area:site-main;
	}

	& .content__page-title{
		margin-block-start:var(--section-padding-v);
	}

	& .layout__footer{
		grid-area:site-footer;
	}
}

@media screen and (width <= 85rem){
	.page-outline{
		grid-template-columns:100svw;
		justify-items:center;

		& .site-banner{
			display:contents;
		}

		& .layout__header{
			text-align:center;
		}

		& .navigation__inner{
			border-block-end:var(--px-rem) solid var(--accent-border-color-2);
			margin-inline:auto;
		}

		& .navigation__list-wrapper{
			padding-block-end:var(--section-padding-v);
		}

		& .navigation__list{
			inline-size:-moz-min-content;
			inline-size:min-content;
			margin-inline:auto;
		}
	}
}

@media screen and (width > 85rem){
	.page-outline{
		grid-template-areas:"site-banner site-main" "site-banner site-footer";

		& .site-banner{
			align-items:end;
		}

		& .navigation__list{
			gap:var(--element-gap);
			grid-auto-flow:row;
			grid-template-columns:100%;
		}

		& .content__page-title{
			margin-block-start:2.25rem;
		}
	}
}

body:not(.sticky-navigation--enabled){
	& .layout__navigation li:first-child{
		display:none;
	}
}

body.sticky-navigation--enabled{
	& .navigation{
		background-color:var(--body-background-color);
		inset-block-start:0;
		position:sticky;
		z-index:3;
	}
}

.back-to-top__link,
button.settings-toggle{
	align-items:center;
	background-color:var(--accent-background-color);
	block-size:var(--outline-button-size);
	border:calc(2 * var(--px-rem)) solid var(--color-main-brand-1);
	border-radius:100%;
	display:inline-flex;
	inline-size:var(--outline-button-size);
	justify-content:center;
	line-height:1;
	transition:transform 80ms ease-in;
	white-space:nowrap;

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

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

.back-to-top{
	inset-block:100vh var(--outline-button-offset);
	inset-inline-end:calc(
		var(--outline-button-offset) +
		var(--outline-button-size) +
		var(--outline-button-gap)
	);
	pointer-events:none;
	position:absolute;
}

.back-to-top__link{
	font-size:var(--small-font-size);
	inset-block-start:calc(100vh - var(--outline-button-size) - var(--outline-button-offset));
	pointer-events:all;
	position:sticky;
	text-decoration:none;
}

.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%);
	}
}

button.settings-toggle{
	inset-block-end:var(--outline-button-offset);
	inset-inline-end:var(--outline-button-offset);
	padding:0;
	position:fixed;

	svg{
		inline-size:55%;
	}
}

@media print{
	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);
	}

	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;
	}

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

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

	body{
		font-size:1rem;
	}

	.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;
	}

	.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,
	.back-to-top{
		display:none !important;
	}
}