/*! v27.min.css | v27.alpha.6 | pakal.org */

/* == Fonts ================================================================= */
/* https://tophix.com/font-tools/google-woff-download						  */
/* -- Titles fonts ---------------------------------------------------------- */
@font-face {
	font-family:	"Oswald-Bold";
	font-style:		normal;
	font-weight:	700;
	font-display:	swap;
	src:			url("../fonts/oswald-bold/oswald.woff2") format("woff2");
	unicode-range:	U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -- Everythings fonts ----------------------------------------------------- */
@font-face {
	font-family:	"Roboto Condensed";
	font-style:		normal;
	font-weight:	100 900;
	font-display:	swap;
	src:			url("../fonts/roboto-condensed/RobotoCondensed.woff2") format("woff2");
	unicode-range:	U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family:	"Roboto Condensed";
	font-style:		italic;
	font-weight:	100 900;
	font-display:	swap;
	src:			url("../fonts/roboto-condensed/RobotoCondensed-Italic.woff2") format("woff2");
	unicode-range:	U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* == Mobile first ========================================================== */
:root {
	--font-default:					"Roboto Condensed", "Arial Narrow", sans-serif;
	--font-headers:					"Oswald-Bold", Impact, "Arial Narrow", sans-serif;

	--font-size-base:				1.3rem;
	--font-size-medium:				1.12rem;
	--font-size-small:				1rem;

	--font-size-menu:				23px;
	--font-size-header:				40px;

	--font-size-title:				1.75rem;
	--font-size-subtitle:			1.5rem;
	--font-size-smalltitle:			1.25rem;


	--line-height-default:			1.3;
	--line-height-texts:			1.3;


	--color-background:				#eee;

	--color-base:					#222;
	--color-texts:					#585858;
	--color-meta:					#666;

	--color-brand:					#ce453e;

	--color-collections-text:		#eee;
	--color-collections-link:		#ffbb00;
	--color-collections-hover:		#eee;

	--gap-default:					16px;
	--gap-menu:						calc(36px + var(--gap-default));
	--gap-footer:					var(--gap-default);

	--gap-nav:						2rem;

	--size-rotated-header:			calc(18px + var(--gap-default));

	--fx-shadow:					1px 1px 1px		rgba(0, 0, 0, .8),
									0px 3px 5px		rgba(0, 0, 0, .6),
									0px 10px 20px	rgba(0, 0, 0, .4);

}


/* -- Base ------------------------------------------------------------------ */
*, *::before, *::after {
	margin:							0;
	padding:						0;

	box-sizing:						border-box;
}


html {
	width:							100%;
	min-height:						100%;
	scroll-behavior:				smooth;
	color-scheme:					light;
}

body {
	width:							100%;
	height: 						100%;
	max-height:						none;

	background:						var(--color-background);

	color:							var(--color-base);
	font-family:					var(--font-default);
	font-size:						var(--font-size-base);
	font-weight:					400;

	line-height:					var(--line-height-default);

	-webkit-overflow-scrolling:		touch;

	text-rendering:					optimizeLegibility;
	-webkit-font-smoothing:			antialiased;
	-moz-osx-font-smoothing:		grayscale;
}

strong, b {
	font-weight:					600;
}

blockquote {
	margin:							0 0 1rem 0;
	padding:						0 2rem;

	color:							var(--color-texts);
	line-height:					var(--line-height-texts);
	border-left:					.25rem solid #ccc;
}

ul {
	margin:							1rem 0;
	padding:						0 0 0 2em;
}

ul li {
	margin:							0 0 .25em 0;
}



/* -- Common stuff ---------------------------------------------------------- */
.dictionary {
	display:						block;
}

.dictionary_underline {
	color:							var(--color-base);
	text-decoration:				underline dotted 1px;
	text-underline-offset:			4px;
}

.citation {
	font-style:						italic;
}



/* -- #Effects -------------------------------------------------------------- */
@keyframes fadeIn {
	to { opacity: 1; }
}

.frost-effect {
	background:						rgba(238, 238, 238, .75);
	backdrop-filter:				blur(8px);
}



/* -- #Menu ----------------------------------------------------------------- */
.fixed-bars {
	position:						fixed;
	z-index:						200;

	width:							100%;
	height:							auto;
	padding:						0 16px;
}

.menu-position {
	inset:							0 0 auto 0;
}

.menu-content {
	display:						flex;
	flex-direction:					row;
	width:							100%;

	padding:						4px 0 3px 0;

	justify-content:				space-between;
	border-bottom:					2px solid var(--color-brand);
}

.menu-logo {
	display:						flex;
	padding:						3px 0 0 0;
}

/* -- Menu navigation */
.burger-checkbox {
	display:						none;
}

.burger-label {
	display:						flex;
	padding:						3px 0 0 0;
	justify-content:				flex-end;
}

.burger-btn {
	display:						flex;
	flex-direction:					column;
	width:							24px;
	height:							21px;

	justify-content:				space-between;

	cursor:							pointer;
}

.burger-btn span {
	display:						block;
	width:							100%;
	height:							4px;
	margin:							0 auto;
	background-color:				var(--color-base);
	transition:						all 0.25s ease-in-out;
}

.burger-btn:hover span {
	background-color:				var(--color-brand);
}


.menu-list {
	display:						none;
	flex-direction:					column;
	gap:							0px;

	margin:							0;
	padding:						8px 0 0 0;

	align-items:					flex-end;

	list-style:						none;
}

.menu-list li {
	margin:							0;
	padding:						0;
}

.menu-list li:nth-child(1),
.menu-list li:nth-child(4),
.menu-list li:nth-child(5),
.menu-list li:nth-child(7) {
	margin:							0 0 12px 0;
}


.menu-list a {
	text-decoration:				none;

	color:							var(--color-base);
	font-family:					var(--font-default);
	font-size:						var(--font-size-menu);
	font-weight:					700;

	white-space:					nowrap;
	line-height:					normal;
	letter-spacing:					0.01em;
	text-transform:					uppercase;
}

.menu-list a:hover,
.menu-list a.menu-current {
	color:							var(--color-brand);
}


/* -- Menu toggling -- */
.burger-checkbox:checked ~ .menu-list {
	display: flex;
}

.burger-checkbox:checked + .burger-label .burger-btn span:nth-child(1) {
	background-color: var(--color-brand);
}

.burger-checkbox:checked + .burger-label .burger-btn span:nth-child(2) {
	width: 25%;
	background-color: var(--color-brand);
	opacity: .75;
}

.burger-checkbox:checked + .burger-label .burger-btn span:nth-child(3) {
	background-color: var(--color-brand);
}



/* -- #Footer --------------------------------------------------------------- */
.footer-position {
	position:						relative;
}

.footer-content {
	display:						block;
	padding: 						4px 0 6px 0;

	color:							var(--color-base);
	font-size:						var(--font-size-small);
	line-height:					normal;

	text-align:						center;

	border-top:						2px solid var(--color-brand);
}

.footer-content span {
	display:						block;
}



/* -- #Main contents -------------------------------------------------------- */
.vertical-container {
	margin:							var(--gap-menu) var(--gap-default) var(--gap-footer) var(--gap-default);

	opacity:						0;
	animation:						fadeIn 1s ease-in-out forwards;
}

.vertical-layout {
	display:						grid;
	grid-template-columns:			var(--size-rotated-header) 1fr;
	gap:							var(--gap-default);

	width:							100%;
}

.vertical-centered {
	width:							100%;
	max-width:						960px;
	margin:							0 auto;
}




/* -- #Header --------------------------------------------------------------- */
.rotated-header {
	writing-mode:					vertical-lr;

	color:							var(--color-base);
	font-family:					var(--font-headers);

	justify-self:					start;
	pointer-events:					none;
}

.rotated-header h1, .rotated-header span {
	display:						block;
	position:						fixed;

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

	white-space:					nowrap;
	line-height:					.92;
	letter-spacing:					.02em;

	text-transform:					uppercase;

	transform:						translate(-1px, -3px);
}



/* -- #Titles --------------------------------------------------------------- */
.main-title, .sub-title, .small-title {
	display:						flex;
	color:							var(--color-base);
	font-family:					var(--font-headers);
	font-size:						var(--font-size-title);
	line-height:					1.1;

	margin:							0;
	padding:						0 0 6px 0;

	text-align:						left;
	text-wrap: 						balance;

	transform:						translate(0px, -6px);
}

.sub-title {
	font-size:						var(--font-size-subtitle);
	padding:						0 0 3px 0;
}

.small-title {
	font-size:						var(--font-size-smalltitle);
	padding:						0 0 2px 0;
}

.title-underline {
	border-bottom:					1px dotted #888;
}


/* -- Split content --------------------------------------------------------- */
.split {
	display:						grid;

	grid-template-columns:			1fr;
	grid-template-rows: 			auto;

	gap:							32px;
}

.split-full {
	width:							100%;
}



/* == #News feed & Collections stuff ======================================== */
.collection-container {
	margin:							var(--gap-menu) var(--gap-default) var(--gap-footer) var(--gap-default);

	opacity:						0;
	animation:						fadeIn 1s ease-in-out forwards;
}

.collection-layout {
	display:						grid;
	grid-template-columns:			var(--size-rotated-header) 1fr;
	gap:							var(--gap-default);

	width:							100%;
}

.collection-grid {
	display: 						grid;
	grid-template-columns: 			1fr;
	gap:							8px;
}

.collection-item {
	position:						relative;
	width:							100%;
	height:							auto;
	max-height:						240px;
}


.collection-item a  {
	color: 							var(--color-collections-link);
	text-decoration:				none;
}

.collection-item a:hover {
	color:							var(--color-collections-hover);
}


.collection-header {
	position:						absolute;
	display:						block;
	z-index: 						100;

	/* top | right | bottom | left */
	inset:							16px 16px auto 16px;

	text-shadow:					var(--fx-shadow);
}


.collection-footer {
	position:						absolute;
	display:						block;
	z-index: 						100;

	/* top | right | bottom | left */
	inset:							auto 16px 16px auto;

	text-align:						right;

	text-shadow:					var(--fx-shadow);
}

.collection-header p, .collection-footer p {
	color:							var(--color-collections-text);
	font-weight:					500;

	letter-spacing:					normal;
	line-height:					normal;

	white-space:					nowrap;

	text-shadow:					var(--fx-shadow);
}


.collection-cover {
	display: 						block;
	width: 							100%;
	height: 						100%;

	overflow:						hidden;

	border-radius:					7px;
	background-color:				#000;
}


.collection-cover img {
	display:						block;
	width:							100%;
	height:							100%;

	object-fit: 					cover;
	object-position:				center center;

	opacity: 						.75;
	filter:							grayscale(.25);
	transition:						all .25s ease-in-out 0s;
}

.collection-cover:hover img {
	opacity: 						1;
	filter:							unset;
}

.collection-cover:hover .collection-item a  {
	color:							var(--color-collections-hover);
}


/* == #Articles ============================================================= */
.article-meta {
	display:						block;
	margin:							0 0 1rem 0;
	padding:						0;

	color:							var(--color-meta);
	font-size:						var(--font-size-small);
	line-height: 					1;

	text-align:						right;
}

.article-text {
	color:							var(--color-texts);

	text-align: 					justify;
	word-break:						break-word;
	overflow-wrap:					break-word;
	hyphens:						auto;
}

.article-text p:not(:last-child) {
	margin:							0 0 1rem 0;
}

.article-text a {
	color:							var(--color-texts);
	text-decoration:				underline solid var(--color-brand) 3px;
	text-underline-offset:			2px;

	transition:						all .25s ease-in-out 0s;
}

.article-text a:hover {
	color:							var(--color-base);
	background:						var(--color-brand);
	text-decoration:				none;
}


.article-text figure {
	display:						block;
	margin:							1rem 0 1.75rem 0;
}

.article-text figure a:hover {
	background-color:				transparent;
	text-decoration:				none;
}

.article-text figure img {
	display:						block;
	width:							100%;
	max-width:						100%;
	height:							auto;

	background-color:				#fff;

	border-radius: 					7px;

	object-fit:						contain;

	border:							1px solid #ccc;
}

.article-text figcaption {
	display:						flex;
	flex-wrap:						nowrap;
	flex-direction: 				row;
	gap:							0 1em;
	margin:							.12rem 0 0 0;

	color:							var(--color-meta);
	font-size:						var(--font-size-small);

	justify-content: 				space-between;
}

.article-text figcaption span {
	flex:							1;
}

.article-text figcaption span:first-child {
	text-align:						left;
}

.article-text figcaption span:last-child {
	text-align:						right;
}

/* -- Aside stuff ----------------------------------------------------------- */
.article-asides {
	display:						block;
	width:							100%;

	margin:							2rem 0 0 0;
	padding:						1.5rem 0 0 0;

	border-top:						1px dotted var(--color-meta);
}

.article-themes {
	display:						flex;
	flex-wrap:						wrap;
	flex-direction:					column;
	gap:							.25em;

	margin:							.25rem 0 0;
	padding:						0;

	color:							var(--color-meta);
	font-family: 					var(--font-headers);
	font-size:						var(--font-size-smalltitle);

	line-height:					1.3;
	list-style:						none;

	text-align:						left;
	align-items: 					flex-start;
	justify-content: 				flex-start;
}

.article-themes li {
	margin:							0;
	padding:						0;
}

.article-themes a {
	color:							var(--color-brand);
	white-space:					normal;
	text-decoration:				none;
}

.article-themes a:hover {
	color:							var(--color-base);
}


.article-nav {
	display:						flex;
	flex-wrap:						nowrap;
	gap:							.25rem var(--gap-nav);

	width:							100%;
	margin:							.25rem 0 0 0;
	padding:						0;

	list-style:						none;

	text-align:						left;
	justify-content: 				space-between;
}

.article-nav a {
	color:							var(--color-brand);
	text-decoration:				none;
}

.article-nav a:hover {
	color:							var(--color-base);
}


.article-nav-elm {
	flex:							1;
	margin:							0;
	padding:						0;
}

.article-nav-elm p {
	margin:							0;
	padding:						0;

	color:							var(--color-texts);
	font-size: 						var(--font-size-medium);
	line-height: 					var(--line-height-default);

	text-align:						justify;
	word-break:						break-word;
	overflow-wrap:					break-word;
	hyphens:						auto;
}



/* == #About page =========================================================== */
.about-text {
	color:							var(--color-texts);

	text-align: 					justify;
	word-break:						break-word;
	overflow-wrap:					break-word;
	hyphens:						auto;
}

.about-text p:not(:last-child) {
	margin:							0 0 1rem 0;
}

.about-text a {
	color:							var(--color-texts);
	text-decoration:				underline solid var(--color-brand) 3px;
	text-underline-offset:			2px;

	transition:						all .25s ease-in-out 0s;
}

.about-text a:hover {
	color:							var(--color-base);
	background:						var(--color-brand);
	text-decoration:				none;
}


.about-img {
	display:						block;
	float:							right;
	width:							114px;
	height:							114px;
	margin:							2px 0px 4px 16px;
	border:							2px solid #222;
	border-radius:					80px;
}


.about-socials {
	display:						flex;
	flex-wrap:						wrap;
	gap:							.25rem 2.5rem;

	margin:							0;
	padding:						0;

	list-style:						none;

	justify-content: 				center;
}

.about-socials li {
	margin:							0;
	padding:						0;
}

.about-socials a {
	margin:							0 8px;

	font-weight:					500;
	text-decoration:				none;

	color:							var(--color-brand);
	white-space:					nowrap;
	line-height:					normal;
}

.about-socials a:hover {
	color:							var(--color-base);
	background:						unset;
}




/* == #Links page =========================================================== */
.links-group {
	display:						flex;
	flex-wrap:						wrap;
	gap:							.25rem 2.5rem;

	margin:							0;
	padding:						0;

	list-style:						none;

	justify-content: 				center;
}

.links-group li {
	margin:							0;
	padding:						0;
}

.links-group a {
	text-decoration:				none;

	font-weight:					500;

	color:							var(--color-brand);
	white-space:					nowrap;
	line-height:					normal;
}

.links-group a:hover {
	color:							var(--color-base);
}

.links-new {
	background:						#ffee00;
	padding:						0px 8px;
}




/* == Tablets =============================================================== */
@media screen and (min-width: 768px) {
	/* == Articles ============================================================== */
	.article-themes {
		flex-direction:					row;
		gap:							0 3em;

		text-align:						center;
		justify-content: 				center;
	}

	.article-themes a {
		white-space:					nowrap;
	}



	/* == #About page =========================================================== */
	.about-img {
		width:							160px;
		height:							160px;
	}
}

/* == Laptop ================================================================ */
@media screen and (min-width: 1024px) {
	:root {
		--font-size-header:			56px;

		--font-size-title:			2rem;
		--font-size-subtitle:		1.75rem;
		--font-size-smalltitle:		1.5rem;

		--gap-menu:					calc(36px + var(--gap-default));
		--gap-footer:				calc(31px + var(--gap-default));

		--gap-nav:					2.5rem;

		--size-rotated-header:		calc(36px + var(--gap-default));
	}

	/* -- #Menu ----------------------------------------------------------------- */
	.burger-checkbox,
	.burger-label,
	.burger-btn {
		display: none;
	}

	.menu-list {
		display:						flex;
		flex-direction:					row;
		gap:							12px;

		padding:						0;

		align-items:					center;
		justify-content: 				flex-end;
	}

	.menu-list li:nth-child(1),
	.menu-list li:nth-child(4),
	.menu-list li:nth-child(5),
	.menu-list li:nth-child(7) {
		margin:							0 12px 0 0;
	}



	/* -- #Footer --------------------------------------------------------------- */
	.footer-position {
		position:						fixed;
		inset:							auto 0 0 0;
	}

	.footer-content {
		display:						flex;

		text-align:						left;
		align-items:					center;
		justify-content:				space-between;
	}

	.footer-content span {
		display:						inline;
	}



	/* -- Split content --------------------------------------------------------- */
	.split {
		grid-template-columns:			repeat(2, 1fr);
	}

	.split-full {
		grid-column:					span 2;
	}



	/* == #News feed & Collections stuff ======================================== */
	.collection-grid {
		grid-template-columns: 			repeat(2, 1fr);
	}

	.collection-item:nth-child(1) {
		grid-column: 					span 2;
	}
}




/* == Desktop =============================================================== */
@media screen and (min-width: 1136px) {
	:root {
		--font-size-header:			72px;

		--gap-nav:					3rem;

		--size-rotated-header:		calc(54px + var(--gap-default));
	}

	.horizontal {
		height: 						100vh;
		height: 						100dvh;
		min-height:						640px;
		overflow-x:						auto;
		overflow-y: 					hidden;
		min-width: 						max-content;
	}


	/* -- #Header --------------------------------------------------------------- */
	.rotated-header h1.notFixed,
	.rotated-header span.notFixed {
		position:						relative;
	}



	/* == #News feed & Collections stuff ======================================== */
	.collection-container {
		width:							auto;
		max-width:						none;
		height:							calc(100% - var(--gap-menu) - var(--gap-footer) - var(--gap-default));

		margin:							var(--gap-menu) var(--gap-default) 0 var(--gap-default);
		padding:						0;
	}

	.collection-layout {
		width: 							100%;
		height:							100%;
		margin:							0;
		padding:						0;
	}

	.collection-grid {
		grid-auto-flow:					column;
		grid-template-rows:				repeat(2, minmax(0, 1fr));
		grid-template-columns: 			unset;
		height:							100%;
		magrin:							0;
		padding:						0;
	}

	.collection-item {
		width:							480px;
		height:							auto;
		min-height:						100%;
	}

	.collection-item:nth-child(1) {
		grid-row:						span 2;
		width:							560px;
	}
}


/* == Super Desktop ========================================================= */
/*
@media screen and (min-width: 1140px) and (min-height: 1024px) {
}
*/