/*! v26.min.css | v26.0126 | pakal.org */

/* == Fonts ================================================================= */
/* -- Titles fonts ---------------------------------------------------------- */
@font-face {
	font-family:	"Oswald-Bold";
	font-style:		normal;
	font-weight:	700;
	src:			url("../fonts/oswald/Oswald-Bold.woff2")	format("woff2"),
					url("../fonts/oswald/Oswald-Bold.woff")		format("woff"),
					url("../fonts/oswald/Oswald-Bold.ttf")		format("truetype");
	font-display:	optional;
}

/* -- Everythings fonts ----------------------------------------------------- */
@font-face {
	font-family:	"Roboto Condensed";
	font-style:		normal;
	font-weight:	400;
	src:			url("../fonts/roboto/Roboto-Condensed.woff2")	format("woff2"),
					url("../fonts/roboto/Roboto-Condensed.woff")	format("woff"),
					url("../fonts/roboto/Roboto-Condensed.ttf")		format("truetype");
	font-display:	optional;
}

@font-face {
	font-family:	"Roboto Condensed";
	font-style:		normal;
	font-weight:	700;
	src:			url("../fonts/roboto/Roboto-BoldCondensed.woff2")	format("woff2"),
					url("../fonts/roboto/Roboto-BoldCondensed.woff")	format("woff"),
					url("../fonts/roboto/Roboto-BoldCondensed.ttf")		format("truetype");
	font-display:	optional;
}

@font-face {
	font-family:	"Roboto Condensed";
	font-style:		italic;
	font-weight:	400;
	src:			url("../fonts/roboto/Roboto-CondensedItalic.woff2")	format("woff2"),
					url("../fonts/roboto/Roboto-CondensedItalic.woff")	format("woff"),
					url("../fonts/roboto/Roboto-CondensedItalic.ttf")	format("truetype");
	font-display:	optional;
}

@font-face {
	font-family:	"Roboto Condensed";
	font-style:		italic;
	font-weight:	700;
	src:			url("../fonts/roboto/Roboto-BoldCondensedItalic.woff2")	format("woff2"),
					url("../fonts/roboto/Roboto-BoldCondensedItalic.woff")	format("woff"),
					url("../fonts/roboto/Roboto-BoldCondensedItalic.ttf")	format("truetype");
	font-display:	optional;
}


/* ========================================================================== */
/* -- Da CSS ---------------------------------------------------------------- */
:root {
	--gap-top:						56px;
	--gap-bottom:					48px;
	--gap-rotated-title:			86px;
	--gap-album-navigation:			26px;

	--background-color:				#1c1c1c;


	--font-title:					"Oswald-Bold", Impact, "Helvetica Neue", "Arial Narrow", sans-serif;
	--font-primary:					"Roboto Condensed", "Helvetica Neue", "Arial Narrow", sans-serif;

	--font-size-default:			1.25rem;
	--font-size-album-description:	1.125rem;
	--font-size-small:				1rem;

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

	--line-height-default:			1.3;
	--line-height-album:			1.2;

	--text-high-contrast:			#eee;
	--text-normal-contrast:			#b0b0b0;
	--text-bold-contrast:			#b2b2b2;
	--text-low-contrast:			#888888;

	--pakal-brand-color:			#ce453e;

	--link-default-color:			#ffbb00;
	--link-hover-color:				#eee;

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

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

html {
	width:							100%;
	height:							100%;
	color-scheme:					dark;
}

body {
	width:							100%;
	height:							100%;

	background: 					var(--background-color);

	color:							var(--text-normal-contrast);
	font-size:						var(--font-size-default);

	font-family:					var(--font-primary);
	font-weight:					400;

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

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

.horizontal {
	height:							calc(100% - var(--gap-top) - var(--gap-bottom));
	min-height:						640px;
	overflow-x:						auto;
	overflow-y: 					hidden;
}

.horizontal_album {
	height:							calc(100% - var(--gap-top) - var(--gap-bottom) - var(--gap-album-navigation));
	min-height:						640px;
	overflow-x:						auto;
	overflow-y: 					hidden;
}



/* -- Some common tag classes... -------------------------------------------- */
a, a:link, a:visited, a:active {
	color:							var(--link-default-color);
	text-decoration:				none;
	transition:						all .25s ease-in-out 0s;

}

a:hover {
	color:							var(--link-hover-color);
	text-decoration:				none;
}


h1, h2, h3, h4, h5, h6 {
	color:							var(--text-high-contrast);
	font-family: 					var(--font-title);
	font-weight: 					700;
	letter-spacing:					normal;
	line-height:					normal;
}

p {
	margin:							.12em 0 1em 0;
}

b, strong {
	font-weight:					700;
}

ul {
	margin:							1em 0;
	padding:						0 1.5em;
}

blockquote {
	margin:							1em 0;
	padding:						0 1.5em;

	color:							var(--text-low-contrast);
	line-height:					var(--line-height-album);
	border-left:					.25em solid var(--text-low-contrast);
}

.dictionary {

}

.dictionary_underline {
	color:							var(--text-normal-contrast);

	text-decoration:				underline dotted 1px;
	text-underline-offset:			3px;
}

/* -- Figure + image related stuff ------------------------------------------ */
img {
	display: 						block;
	margin:							0 auto;
	padding:						0;

	color:							var(--text-normal-contrast);

	vertical-align:					middle;

	font-size: 						var(--font-size-small);
	font-style:						italic;
	text-align:						left;
}

.redim_this_image {
	display:						block;
	position:						relative;
	width: 							auto;
	height: 						auto;
}


/* =============================================================================
   -- Common stuff ....
   ========================================================================== */

/* -- Menubar / Menu -------------------------------------------------------- */
#menu_bar {
	position:						fixed;
	z-index:						2000;

	/* top | right | bottom | left */
	inset:							0 0 auto 0;

	width:							auto;

	background:						rgba(28,28,28, .75);
	backdrop-filter: 				blur(4px);
}

#inside_menu {
	display:						flex;

	margin:							0 16px;
	padding:						7px 0 4px 0;

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

.logo {
	display:						block;
	margin:							4px 0 0 0;
	padding: 						0;
}


/* -- Menu ------------------------------------------------------------------ */
.navigate, .nav-toggle {
	display:						block;
}

.nav-icon {
	display:						none;
	width:							17px;
	height:							auto;
	margin-left:					auto;
	padding:						2px 0 0 0;
}

.navigate ul {
	display:						flex;
	gap:							12px;

	margin:							0;
	padding:						0;

	font-family:					var(--font-primary);
	font-size:						24px;
	font-weight:					700;
	line-height:					normal;
	letter-spacing:					0.01em;
	text-transform:					uppercase;

	list-style:						none;
}

.navigate li {
	display:						block;
	white-space:					nowrap;
}

.navigate .gap {
	margin:							0 12px 0 0;
}

.rss-icon {
	width:							17px;
	height:							auto;
}

.navigate a, .navigate a:link, .navigate a:visited, .navigate a:active {
	color: 							var(--text-high-contrast);
}

.navigate a:hover,
.navigate a.menuCurrent {
	color:							var(--pakal-brand-color);
}


/* -- Site footer ----------------------------------------------------------- */
#site_footer {
	position:						fixed;
	z-index:						2000;

	/* top | right | bottom | left */
	inset:							auto 0 0 0;

	width:							auto;

	background:						rgba(28,28,28, .75);
	backdrop-filter: 				blur(4px);

}

#inside_footer {
	display:						flex;

	margin:							0 16px;
	padding:						4px 0 6px 0;

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

	justify-content: 				space-between;
	border-top:						1px solid var(--pakal-brand-color);
}

#inside_footer p {
	display:						block;
	margin:							0;
	padding:						0;
}

/* -- #Containers ----------------------------------------------------------- */
#container_base {
	display:						block;
	width:							100%;

	margin:							0;
	padding:						var(--gap-top) 16px var(--gap-bottom) 16px;
}

#container_collection {
	display:						flex;
	width:							auto;
	height:							100%;

	margin:							var(--gap-top) 0 0 16px;
}

#container_album {
	display:						flex;
	position:						relative;
	flex-flow:						row;
	width:							auto;
	height:							100%;

	margin:							var(--gap-top) 0 0 16px;
}

#container_header {
	display:						flex;
	width:							auto;
	padding:						0 20px 0 0;
}

#container_padded {
	display:						block;
	width:							100%;

	padding:						0 0 0 var(--gap-rotated-title);
}

#container_centered {
	margin:							0 auto;
}

.faded {
	opacity:						0;
	transition:						opacity .75s ease-in-out;
}

.fade-in {
	opacity:						1;
}


.rotated_label {
	display:						block;

	transform:						translate(-1px, -4px);

	color:							var(--pakal-brand-color);
	font-family: 					var(--font-title);
	font-size:						72px;
	font-weight: 					700;

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

	writing-mode:					vertical-rl;
	pointer-events:					none;
}

.rotated_fixed {
	position:						fixed;
}


.grid_2col {
	display:						grid;
	width:							100%;

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

.grid_item {
}

.grid_full {
	grid-column:					span 2;
}


.max_960 {
	max-width: 						960px;
}


.main_title {
	color:							var(--text-high-contrast);
	font-size:						var(--font-size-title);
	line-height:					.92;

	padding:						0 0 4px 0;

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



/* =============================================================================
   -- #News feed & Collections stuff ....
   ========================================================================== */
.collection_grid {
	display:						grid;
	height:							100%;

	grid-auto-flow:					column;
	grid-template-rows: 			auto auto;
	gap:							8px;

	padding:						0 16px 0 0;
}


.collection_grid a, .collection_grid a:link, .collection_grid a:visited, .collection_grid a:active {
	color: 							var(--link-default-color);
}

.collection_grid a:hover {
	color:							var(--link-hover-color);
}


.collection_item {
	position:						relative;
	width:							480px;
	height:							100%;
	min-height:						320px;
}

.collection_span {
	grid-row:						1 / span 2;
	width:							480px;
	height:							100%;
	min-height: 					640px;
}

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

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

	transform:						translateY(-50%);

	text-align:						left;
}

.collection_header span {
	display:						block;
	width:							50%;

	background-color:				var(--link-default-color);

	color:							var(--background-color);
	font-size:						var(--font-size-default);
	letter-spacing:					normal;
	line-height:					normal;

	white-space:					nowrap;

	margin:							0;
	padding:						1px 0 2px 2px;

	box-shadow:						var(--fx-shadow);
/*
	text-shadow:
		1px 1px 1px		rgba(0, 0, 0, 1),
		0px 3px 5px		rgba(0, 0, 0, .8),
		0px 10px 20px	rgba(0, 0, 0, .2),
		0px 20px 40px	rgba(0, 0, 0, .1);
*/
}

.collection_title {
	color:							var(--text-high-contrast);
	font-size:						var(--font-size-title);
	letter-spacing:					normal;
	line-height: 					1.2;

	margin:							0 0 6px 0;

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

.collection_cover {
	display: 						block;
	width: 							100%;
	height:							100%;

	overflow:						hidden;

	background-color:				#000;
}

.collection_cover img {
	width:							100%;
	height:							100%;

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

	opacity: 						.75;

	filter:							grayscale(.3);

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

.collection_cover:hover img {
	opacity: 						1;

	filter:							unset;
}


/* =============================================================================
   -- #Albums stuff ....
   ========================================================================== */
.album_flex {
	display:						flex;

	height:							100%;

	flex-flow: 						row;
	gap:							32px;

	padding:						0 16px 0 0;
}

.album_item {
	display:						block;
}

.album_desc_width_320 {
	width:							320px;
}

.album_desc_width_400 {
	width:							400px;
}

.album_desc_width_480 {
	width:							480px;
}

.album_desc_width_560 {
	width:							560px;
}

.album_desc_width_640 {
	width:							640px;
}

.album_desc_width_720 {
	width:							720px;
}

.album_desc_width_800 {
	width:							800px;
}

.album_desc_width_880 {
	width:							880px;
}

.album_desc_width_960 {
	width:							960px;
}

.album_meta {
	display:						inline-block;
	margin:							0 0 1rem 0;

	color:							var(--text-low-contrast);
	font-size:						var(--font-size-small);
}

.album_description {
	font-size:						var(--font-size-album-description);
	line-height:					var(--line-height-album);

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


.album_photo_caption {
	display:						block;
	position:						absolute;
	z-index: 						10;

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

	color:							var(--text-high-contrast);
	text-shadow:					var(--fx-shadow);
}

.album_photo_caption_title {
	margin:							0;
	padding:						0;

	font-family: 					var(--font-title);
	font-weight: 					700;
	font-size:						var(--font-size-subtitle);

	line-height: 					normal;
}

.album_photo_caption_details {
	margin:							0;
	padding:						0;

	font-size: 						var(--font-size-default);
	line-height: 					normal;
}


/* -- Album navigation ------------------------------------------------------ */
#container_album aside {
	display:						flex;
	position:						fixed;

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

	justify-content: 				space-between;
}

#album_navigation {
}

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


/* =============================================================================
   -- Photo specific stuff
   ========================================================================== */



/* =============================================================================
   -- #Essays specific stuff ...
   ========================================================================== */


/* =============================================================================
   -- Common asides stuff ...
   ========================================================================== */



/* =============================================================================
   -- #About page ...
   ========================================================================== */
.about_content {
	text-align: 					justify;
	word-break:						break-word;
	overflow-wrap:					break-word;
	hyphens:						auto;
}

.about_img {
	float:							right;
	margin:							2px 0px 4px 16px;
	border:							2px solid #000;
	border-radius:					80px;
}



/* =============================================================================
   -- #Links page ...
   ========================================================================== */
.links_group {
	margin:							0;
	padding:						0;

	list-style:						none;
	text-align:						center;
}

.links_group::after {
	content:						"";
	display:						inline-block;
	width:							100%;
}

.links_group li {
	display:						inline-block;
	margin:							.12rem 1.5rem .5rem 0;
	white-space:					nowrap;
}



/* =============================================================================
   -- Comments ...
   ========================================================================== */


/* =============================================================================
   -- Error page ...
   ========================================================================== */



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

	/* ====================================================================== */
	/* -- Da CSS ------------------------------------------------------------ */
	body {
		overflow-y:						auto;
	}

	.horizontal {
		height:							auto;
		overflow-y: 					auto;
		min-height: 					unset;
	}

	.horizontal_album {
		height:							auto;
		overflow-y: 					auto;
		min-height: 					unset;
	}


	/* -- Menubar / Menu ---------------------------------------------------- */
	#menu_bar {
		height:							auto;
	}

	/* -- Menu -------------------------------------------------------------- */
	.navigate {
		text-align: 					right;
	}

	.nav-icon {
		display:						block;
	}

	.nav-toggle {
		display:						none;
	}

	.navigate ul {
		display:						block;
		margin:							8px 0 4px 0;
	}

	.navigate li {
		display:						block;
		margin:							2px 0 0 0;
	}

	.navigate .gap {
		margin:							2px 0 12px 0;
	}


	/* -- Site footer ...  -------------------------------------------------- */
	#site_footer {
		position:						relative;

		/* top | right | bottom | left */
		inset:							unset;
	}

	#inside_footer {
		display:						block;

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

	/* -- #Content ---------------------------------------------------------- */
	#container_base {
		padding:						var(--gap-top) 16px 16px 16px;
	}

	#container_collection {
		width:							auto;
		height:							auto;
		margin:							var(--gap-top) 16px 16px 16px;
	}

	#container_album {
		width:							auto;
		height:							auto;
		margin:							var(--gap-top) 16px 16px 16px;
	}

	#container_header {
		padding:						0 var(--gap-rotated-title) 0 0;
	}

	.rotated_label {
		position:						fixed;
	}


	/* =========================================================================
	   -- #News feed stuff ....
	   ====================================================================== */
	.collection_grid {
		width:							100%;

		grid-auto-flow:					unset;
		grid-template-rows: 			unset;
		grid-column:					1;

		padding:						0;
	}

	.collection_item {
		width:							100%;
		height:							240px;
		min-height:						240px;
	}

	.collection_span {
		grid-row:						unset;
	}

	.collection_header {
		/* top | right | bottom | left */
		inset:							50% 8px auto 8px;
	}


	/* =========================================================================
	   -- #Albums stuff ....
	   ====================================================================== */
	.album_flex {
		width:							100%;
		height:							auto;

		flex-flow:						column;

		gap:							16px;

		padding:						0;
	}

	.album_item {
		width:							100%;
		height:							auto;
	}

	.desc_width_320, .desc_width_480, .desc_width_480, .desc_width_560, .desc_width_640, .desc_width_720, .desc_width_800, .desc_width_880, .desc_width_960 {
		width:							100%;
   }

   .album_meta {
	display:						inline-block;
   margin:							0 0 1rem 0;

   color:							var(--text-low-contrast);
   font-size:						var(--font-size-small);
	  }


   .album_description {
	   font-size:						var(--font-size-default);
	   line-height:						var(--line-height-default);
   }


   .album_photo_caption {
		/* top | right | bottom | left */
		inset:							auto auto 8px 8px;
   }

   .album_photo_caption_title {
		font-size:						var(--font-size-subtitle);
		line-height:					1.2;
   }

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


   /* -- Album navigation ------------------------------------------------------ */
	#container_album aside {
		position:						relative;
		gap:							16px;

		/* top | right | bottom | left */
		inset:							unset;
	}

	#album_navigation {
	}

	.album_nav_title {
		font-size:							1.2rem;
		line-height:						1.2;
	}


	/* =========================================================================
	   -- Photo specific stuff ...
	   ====================================================================== */


	/* =========================================================================
	   -- #Essays specific stuff ...
	   ====================================================================== */


	/* =========================================================================
	   -- Common asides stuff ...
	   ====================================================================== */


	/* =========================================================================
	   -- #Links page ...
	   ====================================================================== */


	/* =========================================================================
	   -- Error page ...
	   ====================================================================== */
}


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

	/* ====================================================================== */
	/* -- Da CSS ------------------------------------------------------------ */
	:root {
		--gap-rotated-title:			56px;

		--font-size-title:				1.75rem;
		--font-size-subtitle:			1.5rem;
	}

	/* -- Titles classes ---------------------------------------------------- */


	/* -- Content ----------------------------------------------------------- */
	#container_header {
		padding:						0 var(--gap-rotated-title) 0 0;
	}

	#container_padded {
		display:						block;
		width:							100%;

		padding:						0 0 0 var(--gap-rotated-title);
	}

	.rotated_label {
		font-size:						45px;
		transform:						translate(-1px, -2px);
	}


	.grid_item {
		grid-column:					span 2;
	}

	.main_title {
		font-size:						var(--font-size-title);
		transform:						translate(-1px, -2px);
	}


	/* =========================================================================
	   -- #News feed stuff ....
	   ====================================================================== */
	.collection_title {
		font-size:						var(--font-size-title);
	}

	.collection_header span {
		width:							66.6666%;
	}


	/* =========================================================================
	   -- #Albums stuff ....
	   ====================================================================== */


	/* =========================================================================
		  -- Photo specific stuff ...
	   ====================================================================== */


	/* =========================================================================
	   -- #Essays specific stuff ...
	   ====================================================================== */


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

	/* =========================================================================
	   -- #Links page ...
	   ====================================================================== */


	/* =========================================================================
	   -- Common asides stuff ...
	   ====================================================================== */


	/* ================================================================== */
	/* -- Error page ---------------------------------------------------- */
}