@charset "utf-8";

/*
 ************************************************
	folderHorizon main.css
	* Loaded after layout css file
 ***********************************************/

/* variable font *******************************/
@font-face {
	font-family: 'Default-Font';
	src: url('./font/LibreFranklin-VariableFont_wght.ttf');
	font-weight: 300 900;
}

@font-face {
	font-family: 'Default-Font-Italic';
	src: url('./font/LibreFranklin-Italic-VariableFont_wght.ttf');
	font-weight: 300 900;
}

:root {
	/********************************************
	Global font size/weight
	********************************************/
	/* HD Screen / Tablet / Phone (default) */
	--body-font-size: 16px;
	--body-font-weight: 480;
	--body-line-height: 1.7;
	/* Media Small Screen */
	--sm-body-font-size: 14px;
	--sm-body-font-weight: 440;
	--sm-body-line-height: 1.6;
	/* Media Very Small Screen */
	--vsm-body-font-size: 12px;
	--vsm-body-font-weight: 400;
	--vsm-body-line-height: 1.4;

	/********************************************
	Main colors
	For SVG images Use a text/code editor to to
	change the fill/stroke colors in the *.svg files
	********************************************/
	--body-background: #ffffff;
	--text-color-1: #222222;
	--text-color-2: #444444;
	--text-color-3: #666666;
	--text-color-4: #999999;
	--text-color-5: #b8b8b8;
	--link-color: #800000;

	/********************************************
	Border used for h2.content-title, h3.section-title
	You can change or set: none;
	********************************************/
	--title-border: 1px solid #555555;

	/********************************************
	Audio waveform borders/background colors.
	Waveform color is set in archive config file
	********************************************/
	--audio-waveform-background: transparent;
	--audio-waveform-border: 1px solid #555555;
}

html {
	position: relative;
	min-height: 100%;
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
	-webkit-tap-highlight-color: transparent;
}

html,
body {
	font-size: var(--body-font-size);
}

body {
	font-family: 'Default-Font', sans-serif;
	font-weight: var(--body-font-weight);
	line-height: var(--body-line-height);
	color: var(--text-color-2);
	background-color: var(--body-background);
	margin: 0;
	padding: 0;
	overflow-y: scroll;
}

/********* layout.css => *********/

/* Page Wrapper :: width, margin */

.wrapper.home {
	width: var(--wrapper-home-width);
	margin: var(--wrapper-home-margin);
}

.wrapper.archive {
	width: var(--wrapper-archive-width);
	margin: var(--wrapper-archive-margin);
}

/* Header / Main / Footer:: Flex */
header,
main,
footer {
	display: -webkit-box;
	/* OLD - iOS 6-, Safari 3.1-6, BB7 */
	display: -moz-box;
	/* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;
	/* TWEENER - IE 10 */
	display: -webkit-flex;
	/* OR -webkit-flexbox; ?:: NEW - Safari 6.1+. iOS 7.1+, BB10 */
	display: flex;
	/* NEW, Spec - Firefox 20+, Chrome, Opera 12.1 */
	/* - */
	-webkit-align-items: baseline;
	align-items: baseline;
	/* Align aside/content */
}

main {
	min-height: 75vh;
}

/* header/content/footer layout */

.home header>nav.menubar,
.home .content,
.home footer>.footer {
	flex-basis: var(--content-home-width);
}

.archive header>nav.menubar,
.archive .content,
.archive footer>.footer {
	flex-basis: var(--content-archive-width);
}

.home header {
	margin-bottom: var(--header-home-margin-bottom);
}

.archive header {
	margin-bottom: var(--header-archive-margin-bottom);
}

.home header>nav.menubar>ul {
	text-align: var(--header-home-menu-align);
}

.archive header>nav.menubar>ul {
	text-align: var(--header-archive-menu-align);
}

header>nav.menubar>ul>li {
	display: inline;
}

/* aside layout */

.home aside {
	flex-basis: var(--aside-home-width);
}

header>nav.title,
.archive aside {
	flex-basis: var(--aside-archive-width);
}

/****************-****************/

.hide {
	display: none;
}

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

a,
a:active,
a:visited {
	color: var(--text-color-2);
	text-decoration: none;
}

a:hover {
	color: var(--link-color) !important;
}

b,
strong {
	font-weight: 700;
}

i,
em {
	font-family: 'Default-Font-Italic', 'Default-Font', sans-serif;
}

/*
	h1 is used only for archive name > homepage link
	this example uses the same size for all headers.
	See also editor.css *-toolbar-button__text h*
*/
h1,
h2,
h3,
h4 {
	font-size: 1rem;
	margin: 0;
	padding: 0;
}

hr {
	height: 1px;
	background: var(--text-color-2);
	color: transparent;
	border: none;
	margin: 0 0 1.2rem 0;
}

pre {
	font-family: "Courier New", monospace;
	font-weight: 600;
}

nav ul {
	list-style-type: none;
}

p,
nav ul,
figure {
	margin: 0;
	padding: 0;
}

/**********************************
	header items: archive name, topnav
*/

/* archive name :: homepage link */
header h1.archive-name {
	font-size: 1rem;
	text-transform: uppercase;
	white-space: nowrap;
}

header h1.archive-name a {
	color: var(--text-color-2);
}

/* nav media buttons */
button.topnav,
button.sidenav {
	display: none;
}

/* topnav menu items */
header ul.topnav li {
	background-image: url(../img/separator.svg);
	background-repeat: no-repeat;
	background-position: left center;
	white-space: nowrap;
	text-transform: uppercase;
	/*font-size: 0.9rem;*/
	font-weight: 700;
	margin: 0;
	padding: 0 0.56rem 0 0.75rem;
}

header ul.topnav li:first-child {
	background: none;
	padding-left: 0;
}

header ul.topnav li:last-child {
	/* last-child search icon */
	padding-left: 0.4rem;
}

header ul.topnav li.search-nav {
	/* last-child search icon */
	padding-right: 0;
}

/**********************************
	aside section/project sidenav
*/

aside h3.aside-title {
	font-size: 0.9rem;
}

aside ul {
	/* box margins */
	margin: 0.5rem 2rem 0 0.75rem;
}

/* sidenav menu items */
aside ul.sidenav li {
	font-size: 0.85rem;
	line-height: 1.3;
	margin-bottom: 0.37rem;
	padding-left: 0.5rem;
	text-indent: -0.5rem;
}

/* groups */

.pointer-noselect,
aside ul.sidenav li.project-group-title {
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: pointer;
}

aside ul.sidenav li.project-group-title::after {
	content: ' +';
}

aside ul.sidenav li.project-group-title.open {
	font-weight: 600;
}

aside ul.sidenav li.project-group-title.open::after {
	content: '';
}

aside ul.sidenav li.project-group {
	margin-left: 0.5rem;
}

aside ul.sidenav li.project-group::before {
	content: '- ';
}

/**********************************
	var
*/

/* program hardcoded ! */
li.project-group-title.selected,
li.selected>a {
	color: var(--link-color);
}

li.project-group-title.selected {
	font-weight: 500;
}

li.selected>a:hover,
li.selected>a:active {
	color: var(--text-color-3) !important;
}

/* hide templates empty content! */
.section>.items:empty,
section:empty {
	display: none;
}

/**********************************
	media homepage/project
*/

img,
video,
audio {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}

video {
	margin: 0 auto;
}

/* detected by mains.js  */
video.vertical-video {
	height: 90vh !important;
	width: auto !important;
}

.audio img {
	background-color: var(--audio-waveform-background);
	border: var(--audio-waveform-border);
	border-bottom: none;
}

/**********************************
	article main texts everywhere
*/

article {
	font-size: 0.95rem;
}

article a,
article a:active {
	color: var(--link-color);
}

article a:hover {
	color: var(--text-color-1) !important;
}

/**********************************
	captions homepage/project
*/

figcaption {
	font-size: 0.75rem;
}

figcaption.file-title {
	font-weight: 580;
	margin-top: 0.5rem;
}

/**********************************
	homepage
*/

/** homepage file margin bottom **/
.home .content>figure {
	margin-bottom: 6.5rem;
}

.home .content figcaption.file-title,
.home .content figcaption.file-description {
	margin-left: var(--home-caption-indent);
}

/* homepage article text */
.home .content>article {
	width: var(--home-article-width);
}

/**********************************
	section/project titles border
*/
h2.content-title {
	border-bottom: var(--title-border);
	margin-bottom: 0.5rem;
}

/**********************************
	homepage and section article text
*/
.content>article {
	margin: 0 auto 7.5rem auto;
}

/**********************************
	section page (project image items)
*/

.section .content-title {
	/* hide section title already shown in aside? */
	font-size: 0;
}

.section>.items {
	display: -webkit-box;
	/* OLD - iOS 6-, Safari 3.1-6, BB7 */
	display: -moz-box;
	/* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;
	/* TWEENER - IE 10 */
	display: -webkit-flex;
	/* OR -webkit-flexbox; ?:: NEW - Safari 6.1+. iOS 7.1+, BB10 */
	display: flex;
	/* NEW, Spec - Firefox 20+, Chrome, Opera 12.1 */
	/* - */
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	/* - */
	-webkit-justify-content: space-between;
	justify-content: space-between;
	/* - */
	gap: 2.75rem 1.25rem;
	/* - */
	margin-bottom: 5.75rem;
	/* margin image-items>main-text */
}

/* fix last child on "justify-content: space-between;" */
.section>.items figure:last-child {
	-webkit-flex: 1;
	flex: 1;
}

.section>.items figure {
	height: 8.75rem;
}

.section>.items img {
	width: auto;
	max-height: 100%;
	/*!!!*/
}

/* caption => project title */
.section>.items figcaption {
	font-size: 0.7rem;
	margin-top: 0.35rem;
}

/**********************************
	project page
*/

/* article in page */
.project>article {
	margin: 2rem 0 5.75rem 0;
}

/* article after first media figure */
.project>section>article {
	margin: 5.75rem 0;
}

/* article after first gallery image */
.project>section.gallery>article {
	margin: 5.75rem 0 4.5rem 0;
}

.project>section {
	margin-bottom: 7.5rem;
}

/* margin after caption */
.project>section.gallery .items.rows>figure.thumb,
.project>section.video>figure,
.project>section.audio>figure {
	margin-bottom: 2.5rem;
}

/* audio waveform, trim object */
.project>section.audio figure img {
	width: 100%;
	height: 5.75rem;
	object-fit: cover;
	object-position: 100% 50%;
}

/* actually used for documents section */
h3.section-title {
	border-bottom: var(--title-border);
	margin-bottom: 1.25rem;
}

.project>section.document>figure {
	margin-bottom: 1.25rem;
}

.project section.document a {
	color: var(--link-color);
	font-size: 0.8rem;
}

/* document generic download icon */
.project section.document a {
	background-image: url(../img/icon/download.svg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
	padding-left: 1.25rem;
}

/* document filetype icon example */
.project section.document a.icon-pdf,
.project section.document a.icon-htm,
.project section.document a.icon-html {
	background-image: url(../img/icon/document.svg);
}

/**********************************
	search, topnav link and page
*/

li.search-nav>a,
.search-button {
	background-image: url(../img/button_search.svg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: right;
}

li.search-nav>a:hover,
.search-button:hover {
	background-image: url(../img/button_search.hover.svg);
}

li.search-nav>a {
	/* svg size! */
	padding-right: 1.5rem;
}

/**********************************
	search page
*/

.search-button {
	background-color: transparent;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0 0.5rem;
	padding: 0;
	border: none;
	cursor: pointer;
}

.search-field>.search-input {
	width: 16rem;
}

.search-field>span {
	font-weight: 640;
	white-space: nowrap;
}

.search-field,
.search-result {
	margin-bottom: 4rem;
}

.search-result {
	border-bottom: 1px solid var(--text-color-4);
}

.search-result>p {
	font-weight: 640;
	margin-bottom: 1.8rem;
	border-bottom: 1px solid var(--text-color-4);
}

.search-result a,
.search-result a:active,
.search-result a:visited {
	color: var(--link-color);
}

.search-result a:hover {
	color: var(--text-color-2) !important;
}

.search-result>ul {
	font-weight: 520;
	margin: 0;
	padding: 0;
}

.search-result li {
	margin: 0.25rem 0 0.12rem 1.5rem;
}

.search-result li.nodot {
	list-style-type: none;
}

/**********************************
	Contextual section.add-content
	Empty by default can be customized
	See doc/documentation.html and
	layout home/archive settings
*/
section.add-content:empty {
	display: none;
}

section.add-content {
	margin-bottom: 5.75rem;
	/* as the others */
}

/**********************************
	Global footer
	Empty by default can be customized
	See doc/documentation.html
*/
footer:empty {
	display: none;
}

/**********************************
	custom .footer list example  */
.footer>ul {
	text-align: center;
	margin: 0;
	padding: 0;
}

.footer>ul li {
	display: inline-block;
	background-image: url(../img/separator.svg);
	background-repeat: no-repeat;
	background-position: right center;
	white-space: nowrap;
	font-size: 0.9rem;
	font-weight: 500;
	padding: 0 0.75rem;
}

.footer>ul li:last-child {
	background: none;
}

/**********************************
	credits
*/
div.poweredby {
	position: absolute;
	z-index: 1;
	right: 0.75rem;
	bottom: 0.5rem;
	font-size: 0.63rem;
	margin: 0;
}

div.poweredby i {
	font-weight: 600;
}

/**********************************
	Small Screen
**********************************/
@media only screen and (max-width: 1440px) {

	html,
	body {
		font-size: var(--sm-body-font-size);
	}

	body {
		font-weight: var(--sm-body-font-weight);
		line-height: var(--sm-body-line-height);
	}
}

/**********************************
	Very Small Screen
**********************************/
@media only screen and (max-device-width: 1366px) {

	html,
	body {
		font-size: var(--vsm-body-font-size);
	}

	body {
		font-weight: var(--vsm-body-font-weight);
		line-height: var(--vsm-body-line-height);
	}
}

/**********************************
	Tablet...
*********/
@media screen and (max-device-width: 1080px) {

	:root {
		--tbl-wrapper-width: 48.25rem;
		--tbl-wrapper-margin: 1rem auto 3rem auto;
		--tbl-content-width: 36.25rem;
		--tbl-aside-width: calc(var(--tbl-wrapper-width) - var(--tbl-content-width));
	}

	html,
	body {
		font-size: var(--body-font-size);
	}

	body {
		font-weight: var(--body-font-weight);
		line-height: var(--body-line-height);
	}

	.wrapper.home,
	.wrapper.archive {
		width: var(--tbl-wrapper-width);
		margin: var(--tbl-wrapper-margin);
	}

	.home header,
	.archive header {
		margin-bottom: 0.75rem;
	}

	.home header>nav.title {
		flex-basis: var(--tbl-aside-width);
		margin-left: 0;
	}

	.home header>nav.menubar {
		flex-basis: var(--tbl-content-width);
		margin-right: 0;
	}

	.home header>nav.menubar>ul {
		text-align: right;
	}

	.home aside {
		flex-basis: 0;
	}

	.home .content,
	.home footer>.footer {
		flex-basis: 100%;
	}

	.home .content figcaption.file-title,
	.home .content figcaption.file-description {
		margin-left: 0;
	}

	.archive header>nav.title,
	.archive aside {
		flex-basis: var(--tbl-aside-width);
	}

	.archive header>nav.menubar,
	.archive .content,
	.archive footer>.footer {
		flex-basis: var(--tbl-content-width);
	}

	.home .content article {
		width: 70%;
	}

	/* sidenav menu items */
	aside ul.sidenav li {
		font-size: 0.7rem;
	}
}

/*********************
	Tablet & Big Phone :: landscape
**********************************/
@media only screen and (max-device-width: 1080px) and (orientation : landscape) {

	.wrapper.home,
	.wrapper.archive {
		width: 94vw;
	}

	.home header>nav.menubar,
	.archive header>nav.menubar,
	.archive .content,
	.archive footer>.footer {
		flex-basis: 100%;
	}
}

/**********************************
	Phone
**********************************/
@media only screen and (max-device-width: 767px) {

	html,
	body {
		font-size: var(--body-font-size);
	}

	body {
		font-weight: var(--body-font-weight);
		line-height: var(--body-line-height);
	}

	.wrapper.home,
	.wrapper.archive {
		width: 94vw;
		margin: 0.75rem auto 3.75rem auto;
	}

	/******* de-flex / re-set ********/
	header,
	main,
	footer {
		display: block;
	}

	.home header>nav.title {
		margin-left: 0;
	}

	.home header>nav.menubar {
		margin-right: 0;
	}

	/************ header *************/
	header h1.archive-name {
		font-size: 1.2rem;
	}

	/******** header topnav **********/

	header>nav.menubar>ul {
		width: auto !important;
		margin: 2rem 0 2.5rem 1.25rem;
	}

	header>nav.menubar>ul>li {
		display: block;
		background: none;
		font-size: 1.3rem;
		text-align: right;
		margin: 0 2.25rem 1.25rem 0;
		padding: 0;
	}

	header>nav.menubar>ul>li.selected>a {
		color: var(--text-color-4) !important;
	}

	/********** main aside ***********/
	aside .aside-title {
		display: none;
	}

	/****** main aside sidenav *******/

	aside>nav>ul {
		text-align: right;
		margin: 0 2.25rem 12.5rem 0;
		/* see also topnav margin */
	}

	aside>nav>ul.sidenav>li {
		font-size: 1.3rem;
		font-weight: 700;
		margin-bottom: 2rem;
		text-transform: inherit;
		padding: 0;
		text-indent: 0;
	}

	aside>nav>ul.sidenav>li.project-group-title {
		font-weight: 700;
	}

	aside>nav>ul.sidenav>li.project-group-title.open::after {
		content: ' +';
	}

	aside>nav>ul.sidenav>li.project-group::before {
		content: '';
	}

	aside>nav>ul.sidenav>li.project-group::after {
		content: ' -';
	}

	/**** show nav buttons / JS ******/

	button.topnav,
	button.sidenav {
		position: absolute;
		z-index: 2;
		right: 3vw;
		width: 1.5rem;
		height: 1.5rem;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		background-color: transparent;
		margin: 0;
		padding: 0;
		border: none;
		display: block;
	}

	button.topnav {
		top: 1rem;
		background-image: url(../img/button_topnav.svg);
	}

	button.sidenav {
		background-image: url(../img/button_sidenav.svg);
	}

	button.sidenav {
		top: -100px;
		/* see main.js sidenavBtnVerticalOffet var */
	}

	button.topnav.open {
		background-image: url(../img/button_topnav.open.svg);
	}

	button.sidenav.open {
		transform: rotate(-90deg);
	}

	.collapse {
		display: block;
		max-height: 0;
		overflow: hidden;
		transition: max-height 1s cubic-bezier(0, 1, 0, 1);
	}

	.show {
		max-height: 900vh;
		transition: max-height 1s ease-in-out;
	}

	/**** homepage figure / text *****/

	.home .content figure {
		margin-bottom: 4.5rem;
	}

	.home .content figcaption.file-title,
	.home .content figcaption.file-description {
		margin-left: 0;
	}

	.home .content article {
		width: 100%;
	}

	/***** section image items *******/

	.section .content-title {
		/* show section title on hidden aside */
		font-size: 0.9rem;
	}

	.section>.items figure {
		height: 6.5rem;
	}

	.section>.items figure img {
		max-height: 100%;
		/*!!!*/
	}

	/* not .section class ! */
	.project section {
		margin-bottom: 5rem;
	}

	/************ search *************/

	.search-button {
		width: 1.5rem;
		height: 1.5rem;
	}

	.search-field>.search-input {
		width: 100%;
		font-size: 1rem;
		margin: 0 0 0.5rem 0;
	}

	/* custom .footer list eg.  */
	.footer>ul li {
		display: block;
		background: none;
		padding: 0;
		margin-bottom: 0.75rem;
	}
}

/**********************************
	Small phone header title
**********************************/
@media only screen and (max-device-width: 360px) {
	header h1.archive-name {
		font-size: 1.1rem;
	}
}