@font-face {
	font-family: Trap;
	font-weight: normal;
	src: url("./fonts/trapgadak-regular-webfont.woff") format("woff"), url("./fonts/trapgadak-regular-webfont.woff2") format("woff2");
}

@font-face {
	font-family: Trap;
	font-weight: bold;
	src: url("./fonts/trapgadak-bold-webfont.woff") format("woff"), url("./fonts/trapgadak-bold-webfont.woff2") format("woff2");
}

@font-face {
	font-family: Agara;
	font-style: normal;
	src: url("./fonts/agara-regular.woff") format("woff"), url("./fonts/agara-regular.woff2") format("woff2");
}

@font-face {
	font-family: Agara;
	font-style: italic;
	src: url("./fonts/agara-italic.woff") format("woff"), url("./fonts/agara-italic.woff2") format("woff2");
}

html, body {
	height: 100%;
	max-width: 100vw;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow-x: hidden;
	background-color: #ebe6e2;
}

main {
	display: flex;
	flex: 1;
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: Trap;
	line-height: 1.3;
	hyphens: auto;
}

a {
	color: black;
	font-family: inherit;
	text-decoration: underline;
}

a:hover {
	color: grey;
}

h1 {
	font-size: 3rem;
}

.arrow, .backarrow {
	font-size: 1.5rem;
}

.arrow {
	text-decoration: none;
	display: inline-block;
	transition: 0.2s ease;
}

.arrow:hover {
	transform: translateX(0.3rem);
	color: black;
}

.backarrow {
	transform: rotate(180deg);
	text-decoration: none;
	display: inline-block;
	transition: 0.2s ease;
}

.backarrow:hover {
	transform: translateX(-0.3rem) rotate(180deg);
	color: black;
}

.container {
	display: flex;
	flex-direction: column;
	height: 100vh;
}

header, footer {
	z-index: 10;
}

header {
	position: fixed;
	margin: .3rem;
	height: 3rem;
}

header, footer * {
	display: inline-block;
	vertical-align: bottom;
}

header h2 {
	margin-left: 3rem;
	margin-bottom: -.2rem;
	font-family: Trap;
	font-weight: normal;
}

.textlogo {
	height: 100%;
	background-color: #ebe6e2;
	border-radius: 0.3rem;
	padding: .3rem;
}

footer {
	text-align: right;
	display: flex;
	justify-content: end;
	margin: .3rem;
}

.footertext {
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	background-color: #ebe6e2;
	border-radius: 0.3rem;
}

.footertext span {
	padding: .3rem;
}

.imagecontainer {
	position: relative;
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 0;
	overflow: hidden;
}

.tree {
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
}

.spot {
	position: absolute;
	height: auto;
	max-width: none;
	pointer-events: none;
	cursor: pointer;
	-webkit-filter: grayscale(60%);
	filter: grayscale(60%);
	transition: filter 1.5s ease, opacity 0.5s ease;
	opacity: 0;
}

.spot.visible {
	opacity: 1;
}

.spot:hover {
	-webkit-filter: none;
	filter: none;
}

.infobox {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	left: .3rem;
	right: 1rem;
	padding: .7rem;
	bottom: 1rem;
	align-self: start;
	justify-self: right;
	max-width: 30rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.published {
	display: inline;
	text-align: right;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	width: fit-content;
	align-self: end;
}

.infobox p {
	line-height: 1.2;
}

.infobox img {
	width: 100%;
}

.sefiinfo {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	left: 1rem;
	padding: .7rem;
	border-radius: .4rem;
	top: 4rem;
	align-self: start;
	justify-self: left;
	max-width: 65rem;
	min-width: 30%;
	transition: width 0.2s ease-out;
}

.sefiinfo.active {
	width: 100vw;
}

.sefiinfo span {
	padding-right: .3rem;
}

.idle-prompt {
	position: fixed;
	bottom: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	background: rgba(0, 0, 0, 0.85);
	color: white;
	padding: 1rem 1.5rem;
	border-radius: 0.5rem;
	font-size: 1rem;
	z-index: 1000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease-in-out;
}

.idle-prompt.visible {
	opacity: 1;
}

.columnleft {
	width: 50%;
	max-width: 50rem;
}

.postcolumnleft {
	width: 35%;
	max-width: 50rem;
}

.seficontainer {
	margin-top: 0;
}

.bookcontainer {
	display: flex;
	flex-direction: column;
	width: 50%;
	max-width: 50rem;
	padding: 1rem;
	padding-top: 0rem;
	z-index: 1;
	align-self: flex-start;
	gap: 1rem;
}

.postbookcontainer {
	display: flex;
	flex-direction: column;
	width: 55%;
	max-width: 50rem;
	padding: 1rem;
	padding-top: 0rem;
	z-index: 1;
	align-self: flex-start;
	gap: 1rem;
}

.bookinfo, .homebookinfo {
	position: sticky;
	top: 0;
	padding-top: 0.3rem;
	text-align: right;
	flex-shrink: 0;
	background: #ebe6e2;
}

.homepagetitle {
	display: inline;
	background: black;
	color: white;
	padding: .5rem;
	padding-right: 100vw; /* Push background to the right */
	margin-right: -100vw; /* Pull text back so it’s visually aligned */
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	line-height: 1.6;
	white-space: nowrap;
	overflow: hidden;
}

.bookcontent {
	padding: 0.5rem;
	background: #ebe6e2;
	font-size: 1.2rem;
}

.bookcontent p {
	line-height: 1.4;
}

.bookcontent a {
	text-transform: uppercase;
	font-weight: bold;
}

.singlelink {
	line-height: 2;
}

.pagetitle {
	font-weight: bold;
	color: white;
	line-height: 1.6;
	background: none; /* let JS handle bars */
	position: relative; /* ensures stacking context */
	z-index: 1;
	white-space: normal;
	overflow-wrap: break-word;
	hyphens: none;
}

.imgcontainer {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	height: auto; 
	min-height: 100%;
	max-width: 55rem;
	overflow: hidden;
	mask-image: linear-gradient(to right, black 80%, transparent 97%);
	-webkit-mask-image: linear-gradient(to right, black 80%, transparent 97%);
	background-size: cover;
	background-position: left center;
	background-repeat: no-repeat;
	height: 100%;
	width: 100%;
}

.bookimg {
	display: none;
	width: 100%;
	object-fit: cover;
	z-index: 0;
}

.post {
	background-color: #d5cac2;
	padding: .7rem;
	border-radius: .4rem;
	font-family: agara, serif;
	font-size: 1.2rem;
}

.post p {
	font-family: Agara;
	padding-bottom: 0.5rem;
}

.post em {
	font-family: agara, serif;
}

.bookcontent p {
	padding-bottom: 0.5rem;
}

h4 {
	padding-bottom: 0.5rem;
}

.post img, .bookcontent img, video {
	max-width: 100%;
	max-height: 30rem;
	display: inline;
}

audio {
	width: 100%;
}

.collapsible, .collapsibleh {
	cursor: pointer;
	padding-bottom: 0 !important;;
}

.active, .collapsible:hover {
}

.ccontent {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}

.ccontent p {
	padding-top: 0.5rem;
}

.collapsiblex:after {
	content: '\02795';
	font-size: .9rem;
	margin-left: .3rem;
}

.collapsiblex.active:after {
	content: "\2796";
}

.collapsibleh:after, .collapsible:after {
	content: '\25B6\FE0E';
	font-size: .8rem;
	margin-left: .3rem;
}

.collapsibleh.active:after, .collapsible.active:after {
	content: "\25BC\FE0E";
	font-size: .87rem;
}

.pdfembed {
	width: 100%;
	height: 30rem;
}

#lightbox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease;
	z-index: 9999;
	cursor: pointer;
}

#lightbox.show {
	opacity: 1;
	visibility: visible;
}

#lightbox img {
	max-width: 90%;
	max-height: 90%;
	border-radius: 4px;
	box-shadow: 0 0 15px rgba(0,0,0,0.5);
	cursor: auto;
}

#lightbox-close {
	position: absolute;
	top: 20px;
	right: 30px;
	font-size: 40px;
	color: white;
	cursor: pointer;
	z-index: 10000;
	user-select: none;
}


@media screen and (max-width: 1024px){
	.infobox .pagetitle {
		font-size: 2.5rem;
	}
	
	.bookinfo {
		max-width: 50vw;
		margin-left: 35%;
		background: none;
	}
	
	.sefiinfo {
		width: 70%;
		font-size: 1.1rem;
	}
	
	.sefiinfo.active {
		max-width: 95%;
	}
	
	.spot {
		filter: none;
	}

	.imgcontainer {
		max-width: 100%;
		mask-image: none;
		-webkit-mask-image: none;
		height: 100%;
		width: 100%;
	}
	.columnleft {
		width: 30%;
	}
	
	.postcolumnleft {
		width: 20%;
	}

	.bookcontainer, .postbookcontainer {
		width: 100%;
	}
	
	.seficontainer {
		margin-top: 2.5rem;
	}
}

@media screen and (max-width: 430px){
	header {
		position: relative;
	}
	.bookinfo {
		margin-bottom: 20%;
		max-width: 100%;
		margin-left: 0;
	}
	
	.sefiinfo {
		width: 95%;
		font-size: 1rem;
	}
	
	
	.homebookinfo {
		margin-bottom: 20%;
	}
	
	.idle-prompt {
		text-align: center;
	}
	footer {
		text-align: center;
	}
	.footertext span {
		padding-top: .1rem;
	}
	.columnleft, .postcolumnleft {
		display: none;
	}
	.sefiinfo {
		min-width: 90%;
	}
	.pagetitle {
		font-size: 2.5rem;
	}
	.seficontainer {
		margin-top: 0;
	}
}