/*! 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;
}



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

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

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

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


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


	--color-background:			#eee;

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

	--color-brand:				#ce453e;

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

	--gap-nav:					4rem;

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


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



/* -- 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%;
	min-height: 100vh;

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



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

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

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


.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,
.burger-label,
.burger-btn {
	display: none;
}

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

	list-style: none;
	justify-content: flex-end;
}

.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-right:					12px;
}

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



/* -- Site footer ----------------------------------------------------------- */
.footer-position {
	inset: auto 0 0 0;
/*	padding: 0 16px env(safe-area-inset-bottom) 16px;	*/
}

.footer-content {
	display: flex;
	flex-direction: row;

	padding: 4px 0 6px 0;

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

	align-items: center;
	justify-content: space-between;
	border-top: 2px solid var(--color-brand);
}



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

.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 {
	position: fixed;
	display: block;

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

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

	text-transform: uppercase;

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


/* -- Content grid system --------------------------------------------------- */
.grid-2-cols {
	display:						grid;
	width:							100%;

	grid-template-columns:			repeat(2, 1fr); /* Create 2 equal columns */
	gap:							32px;
}

.grid-item {
}

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



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

	padding:						0 0 6px 0;

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

.sub-title {
	font-size:						var(--font-size-subtitle);
}

.small-title {
	font-size:						var(--font-size-smalltitle);
}



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

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


.article-text {
	color:							var(--color-texts);
	line-height: 					var(--line-height-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;
	gap:							0 2.5rem;

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

	color:							var(--color-texts);
	font-family: 					var(--font-headers);
	font-size:						var(--font-size-smalltitle);
	line-height:					1.3;

	list-style:						none;

	text-align:						center;
	justify-content: 				center;
}
.article-themes li {
	margin:							0;
}

.article-themes a {
	color:							var(--color-brand);

	white-space:					nowrap;

	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);
	line-height: 					var(--line-height-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;
	margin:							2px 0px 4px 16px;
	border:							2px solid #222;
	border-radius:					80px;
}


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

	margin:							.25rem 0 0 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:							.25rem 0 0 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;
}






/* =============================================================================
   == Responsive shit ...
   ========================================================================== */
@media only screen and (max-width:1024px) {

	:root {
		--font-default:				"Roboto Condensed", "Arial Narrow", sans-serif;
		--font-headers:				"Oswald-Bold", Impact, "Arial Narrow", sans-serif;

		--font-size-base:			1.25rem;
		--font-size-small:			1rem;

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

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


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


		--color-background:			#eee;

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

		--color-brand:				#ce453e;

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

		--gap-nav:					3rem;

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



	/* -- Menubar / Menu -------------------------------------------------------- */

	/* -- Menu navigation */
	.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;

		padding: 6px 0 0 0;

		align-items: 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:							2px 0 12px 0;
	}

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



/* ========================================================================== */
@media only screen and (max-width:800px) {

	: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-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.35;


		--color-background:			#eee;

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

		--color-brand:				#ce453e;

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



	/* -- Content grid system --------------------------------------------------- */
	.grid-2-cols {
		grid-template-columns:			1fr;
	}

	.grid-full {
		grid-column:					unset;
	}


	/* -- Site footer ----------------------------------------------------------- */
	.footer-position {
		position: relative;
		inset: unset;
	}

	.footer-content {
		display:						block;
		text-align:						center;
	}

	.footer-content span {
		display:						block;
	}



	/* =============================================================================
	   -- Articles specific stuff ...
	   ========================================================================== */
/*
	.article-text figcaption p:last-child {
		text-align:						left;
	}
*/

	/* -- Aside stuff ----------------------------------------------------------- */
	.article-themes {
		display:						flex;
		flex-wrap:						wrap;
		flex-direction:					column;
		gap:							.5em;

		margin:							.5rem 0 0;

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

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



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


}