/*! v27.min.css | v27.alpha.73 | 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-meta: monospace;

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

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

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

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

	--color-background: #e4e4de;

	--color-base: #222;
	--color-texts: #484842;
	--color-quotes: #60605a;
	--color-meta: #60605a;

	--color-underline: #b6b6b0;
	--color-image-box: #b6b6b0;

	--color-brand: #ce453e;

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

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

	--gap-nav: 2rem;

	--size-rotated-header: calc(18px + var(--gap-default));
/*
	--fx-collection-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);
*/
	--fx-collection-shadow:
									0 1px 2px rgba(0, 0, 0, .8),
									0 4px 12px rgba(0, 0, 0, .6),
									0 0 20px rgba(0, 0, 0, .4);


}



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

	box-sizing: border-box;
}


html {
	width: 100%;
	height: 100%;

	scroll-behavior: smooth;
	color-scheme: light;

	font-size: 16px;
}


body {
	width: 100%;
	height: auto;

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

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

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

a:hover {
	color: var(--color-brand);
	text-decoration: underline dotted var(--color-texts) 2px;
}


strong, b {
	font-weight: 600;
}

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

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

blockquote footer {
	color: var(--color-quotes);
	font-size: var(--font-size-medium);

	text-align: right;
}

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

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

hr {
	border: none;
	border-top: 1px dotted #666;
	color: #666;
	width: 50%;
	height: 0;
	margin: 0 auto 1rem auto;
}



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

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

.citation {
	font-style: italic;
}



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

.frost-effect {
	background: rgba(228, 228, 222, 0.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 -------------------------------------------------------- */
.collection-container, .album-container, .photo-container {
	display: grid;
	grid-template-columns: var(--size-rotated-header) 1fr;
	grid-template-rows: auto 1fr;
	gap: var(--gap-default);

	width: auto;
	max-width: 100%;

	margin: var(--gap-menu) var(--gap-default) var(--gap-footer) var(--gap-default);

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

/*
.photo-container {
	width: auto;

	min-height: 100%;
	height: auto;

	margin: var(--gap-menu) var(--gap-default) var(--gap-footer) var(--gap-default);

	padding: 0 0 var(--gap-footer) 0;
}
*/

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

	width: auto;

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

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

.vertical-content {
	grid-row: auto;
	grid-column: 2;

	width: 100%;
	max-width: 960px;

	place-self: center;
}



/* -- #Header --------------------------------------------------------------- */
.rotated-header {
	grid-row: 1;
	grid-column: 1;

	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 var(--color-underline);
}


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

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

	gap: 32px;
}

.split-full {
	width: 100%;
}



/* == #News feed & Collections stuff ======================================== */
.collection-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

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


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

	padding: 0 12px 0 0;
	margin: 0;

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

.collection-header h2 {
	margin: 0;
	padding: 2px 0 0 0;
	width: fit-content;
	text-shadow: var(--fx-collection-shadow);
}

/*
.collection-footer {
	position: absolute;
	z-index: 100;

	display: flex;
	flex-wrap: nowrap;
	gap: .12rem;

	margin: 0;
	padding: 0;

	align-items: flex-end;
	justify-content: space-between;

	inset: auto 12px 12px 12px;

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

}
*/

.collection-badge {
	width: fit-content;
	margin: 0 0 6px 0;
	padding: 1px 4px;

	background-color: var(--color-brand);

	color: var(--color-background);
	font-size: var(--font-size-small);
	font-weight: 500;

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

	border-radius: 2px;

	box-shadow: var(--fx-collection-shadow);
}

.collection-meta {
	width: fit-content;
	margin: 0;
	padding: 0;

	color: var(--color-background);
	font-size: var(--font-size-medium);
	font-weight: 500;

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

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




/*
.collection-footer p {
	color: var(--color-background);
	font-size: var(--font-size-medium);
	font-weight: 500;

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

	text-shadow: var(--fx-collection-shadow);
}
*/


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

	overflow: hidden;

	border-radius: 5px;
	background-color: #000;
	border: 1px solid var(--color-image-box)
}


.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: .80;
	filter: unset;
}
*/

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

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

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

.collection-item:hover img {
	opacity: .85;
	filter: unset;
}



/* == #Album ================================================================ */
.album-grid {
	display: grid;
	grid-auto-flow: row;
	gap: 24px;

	width: 100%;
}


[class^="album-description-"] {
	display: block;
	width: 100%;
}


.album-header {
	display: block;
	width: 100%;
	margin: 0 0 1rem 0;
	padding: 0;
}


.album-text {
	display: block;
	width: 100%;

	color: var(--color-texts);

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

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

.album-text blockquote {
	font-size: inherit;
	line-height: inherit;
}


.album-photos {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	flex-shrink: 0;
	gap: 24px;

	align-items: flex-start;

	width: 100%;
	height: auto;
}


.album-photo {
	display: block;
	flex-direction: column;
	flex-shrink: 0;

	width: 100%;
	height: auto;
}


.album-photo picture, .album-photo img {
	display: block;
	width: 100%;
	height: auto;
}

.album-photo img {
	object-fit: contain;
}


.album-photo-caption {
	display: flex;
	gap: 1rem;

	margin: 4px 0 0 0;

	width: 100%;

	color: var(--color-texts);

	justify-content: space-between;
}


/* -- Album Meta ------------------------------------------------------------ */
.album-meta {
	display: block;
	width: auto;

	padding: 24px 0 0 0;

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

.album-meta-zone {
	display: grid;
	grid-template-columns: auto auto;
	gap: 3px 1rem;

	margin: 0;
	padding: 0;

	justify-content: space-between;

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

.album-meta-zone dt {
	font-weight: 600;
	justify-self: start;
}

.album-meta-zone dd {
	justify-self: end;
	text-align: right;
}

.album-meta-zone ul {
	margin: 0;
	padding: 0;

	list-style: none;
}

.album-meta-zone li {
	margin: 0;
	padding: 0;
}

.album-meta-gap {
	margin: 0 0 1rem 0;

}


/* -- Album navigation ------------------------------------------------------ */
.album-nav {
	grid-row: 2;
	grid-column: 2;

	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

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

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

.album-nav nav ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1rem;

	margin: 0;
	padding: 0;

	list-style: none;

	justify-content: space-between;

	color: var(--color-base);
	font-family: var(--font-headers);
	font-weight: 700;
	font-size: var(--font-size-smalltitle);
}

.album-nav li {
	flex: 1;
	margin: 0;
}

.album-nav-next {
	text-align: left;
}

.album-nav-prev {
	text-align: right;
}



/* == #Photo ================================================================ */
.photo-wrapper {
	grid-row: 1;
	grid-column: 2;

	display: flex;
	width: 100%;
	height: auto;

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

.photo-card {
	position: relative;
	display: flex;

	width: fit-content;
	max-width: 100%;
	max-height: 100%;

	margin: 0;

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

.photo-image {
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 100%;
	max-height: calc(100dvh - var(--gap-menu) - var(--gap-footer) - 32px);
}

.photo-image img {
	max-width: 100%;
	max-height: calc(100dvh - var(--gap-menu) - var(--gap-footer) - 32px);
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.photo-card figcaption {
	position: absolute;

	display: flex;
	gap: 1rem;

	height: auto;
	width: 100%;

	top: 100%;
	left: 0;

	padding: 2px 0 0 0;

	color: var(--color-texts);

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

.photo-title {
	display: block;

	color: var(--color-text);
	font-size: var(--font-size-medium);
	font-weight: 600;

	line-height: 1;
}

.photo-location,
.photo-date {
	display: block;

	color: var(--color-meta);
	font-size: var(--font-size-small);
	text-wrap: balance;
	line-height: 1;
}

.photo-date {
	text-wrap: nowrap;
}



/* -- Photo navigation ------------------------------------------------------ */
.photo-nav {
	grid-row: 2;
	grid-column: 2;

	display: block;
	width: 100%;
	height: auto;
	margin: 40px 0 0 0;
}

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

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

.photo-nav ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0 2rem;

	margin: 0;
	padding: 0;

	list-style: none;

	justify-content: space-between;

	color: var(--color-base);
	font-family: var(--font-headers);
	font-weight: 700;
	font-size: var(--font-size-smalltitle);
}

.photo-nav li {
	flex: 1;
	margin: 0;
}

.photo-nav-next {
	text-align: left;
}

.photo-nav-prev {
	text-align: right;
}


/* == #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.2;

	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 figure {
	display: block;
	margin: 1rem 0 1.75rem 0;
}


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

	background-color: #fff;

	object-fit: contain;

	border-radius: 8px;
	border: 1px solid var(--color-image-box);
}

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



/* -- #Compare 2 photos ----------------------------------------------------- */
.compare-photos {
	position: relative;
	display: block;

	width: 100%;

	margin: 0;
	padding: 0;

	--position: 50%;
}


.compare-before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	clip-path: inset(0 calc(100% - var(--position)) 0 0);
}


.compare-range {
	position: absolute;
	z-index: 20;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
}


.compare-slider {
	position: absolute;
	z-index: 10;
	top: 0;
	bottom: 0;
	left: var(--position);
	width: 3px;
	height: 100%;
	background: #fff;
	pointer-events: none;
	transform: translateX(-50%);
	box-shadow: 0 0 8px #000;
	opacity: .7;
}

.compare-slider::after {
	display: flex;
	align-items: center;
	justify-content: center;

	content: "< >";
	color: var(--color-brand);
	font-weight: 900;
	font-size: 16px;

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 24px;
	height: 24px;
	background: #fff;
	border-radius: 50%;
}


.compare-range {
	accent-color: transparent;
}

.compare-photo {
	container-type: normal;
}


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

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

	border-top: 1px dotted #aaa;
}

.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-img {
	display: block;
	float: right;
	width: 114px;
	height: 114px;
	margin: 0 4px 8px 8px;
	border: 2px solid #222;
	border-radius: 50%;
}

.about-text::after {
	content: "";
	display: table;
	clear: both;
}


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

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



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

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

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


/* == Tablets =============================================================== */
@media screen and (min-width: 800px) {

	/* == #News feed & Collections stuff ==================================== */


	/* == #Album ============================================================ */
	.album-meta {
		flex-direction: row;
		justify-content: flex-end;
	}

	.album-header span {
		display: unset;
	}


	/* == Articles ========================================================== */
	.article-themes {
		flex-direction: row;
		gap: 0 3em;

		justify-content: center;
		align-items: 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: 1.8rem;
		--font-size-subtitle: 1.75rem;
		--font-size-smalltitle: 1.5rem;
*/
		--gap-nav: 2.5rem;

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

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

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

	.footer-content span {
		display: inline;
	}


	/* -- #Main contents ---------------------------------------------------- */
	.collection-container, .album-container, .photo-container {
		padding: 0 0 var(--gap-footer) 0;
	}


	/* -- 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;
		height: 400px;
		max-height: 400px;
	}


	/* == #Photo ============================================================ */


	/* == #Error page ======================================================= */
	.error-text {
		font-size: 1.4rem;
	}
}




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

		--gap-nav: 3rem;
		--gap-album-nav: 18px;
		--gap-photo-figure: 44px;

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


	/* -- #Main contents ---------------------------------------------------- */
	.horizontal {
		width: 100%;
		min-width: 100%;
		max-width: fit-content;

		min-height: 560px;
		height: 100%;
		max-height: 100%;

		overflow-x: auto;
		overflow-y: hidden;
	}
/*
	.full-window {
		width: 100%;
		min-width: 100%;
		max-width: fit-content;

		min-height: 480px;
		height: auto;
		max-height: auto;

		overflow-x: auto;
		overflow-y: auto;
border:1px solid #F00;
	}
*/
/*
	.collection-container {
		width: 100%;

		min-width: 0px;
		max-width: max-content;

		min-height: 640px;
		height: calc(100% - var(--gap-menu) - var(--gap-footer));
		max-height: calc(100% - var(--gap-menu) - var(--gap-footer));
		margin: var(--gap-menu) 0 0 var(--gap-default);

		padding: 0;
	}
*/
	.album-container {
		row-gap: 8px;
		width: 100%;

		min-width: 0px;
		max-width: max-content;

		min-height: 560px;
		height: calc(100% - var(--gap-menu) - var(--gap-footer) - var(--gap-album-nav));
		max-height: calc(100% - var(--gap-menu) - var(--gap-footer) - var(--gap-album-nav));

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




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


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

	.collection-item:nth-child(1) {
		grid-column: span 6;
		height: 480px;
		max-height: 480px;
	}

	.collection-item:nth-child(n+2) {
		grid-column: span 2;
		height: 400px;
		max-height: 400px;
	}



	/* == #Album ============================================================ */
	.album-grid {
		grid-auto-flow: column;
		grid-auto-columns: max-content;

		width: 100%;
		min-width: 0px;
		max-width: max-content;

		min-height: 560px;
		height: 100%;
	}



	[class^="album-description-"] {
		height: 100%;
	}

	.album-description-320 { width: 320px; }
	.album-description-400 { width: 400px; }
	.album-description-480 { width: 480px; }
	.album-description-560 { width: 560px; }
	.album-description-640 { width: 640px; }
	.album-description-720 { width: 720px; }
	.album-description-800 { width: 800px; }
	.album-description-880 { width: 880px; }


	.album-text {
		font-size: 1.12rem;
		line-height: 1.2;
	}


	.album-photos {
		flex-direction: row;

		width: max-content;
		min-width: max-content;

		min-height: 560px;
		height: 100%;

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

	.album-photo {
		display: block;

		width: auto;
		min-width: auto;

		min-height: 560px;
		height: calc(100% - var(--gap-photo-figure));
	}

	.album-photo a {
		display: block;
		height: 100%;
	}

	.album-photo picture, .album-photo img {
		display: block;
		width: auto;
		height: 100%;
	}

	.album-photo-caption {
		gap: 2rem;
	}

	/* -- Album Meta ------------------------------------------------------------ */
	.album-meta {
		display: flex;

		width: fit-content;

		height: 100%;
		min-height: 560px;

		padding: 0 0 4px 24px;

		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-end;

		border-top: none;
		border-left: 1px dotted var(--color-underline);
	}


	/* -- Album navigation -------------------------------------------------- */
	.album-nav {
		position: relative;

		width: auto;
		height: auto;
	}

	.album-nav nav {
		position: fixed;
		display: block;

		width: calc(100% - var(--gap-default) - var(--size-rotated-header) - var(--gap-default) - var(--gap-default));
		height: auto;
	}

	.album-nav ul {
		flex-wrap: nowrap;
	}


	/* == #Photo ============================================================ */
}


/* == Super Desktop ========================================================= */
@media screen and (min-width: 1136px) and (min-height: 1050px) {

	/* == #Album ============================================================ */
	.album-text {
		font-size: 1.2rem;
		line-height: 1.2;
	}
}