.z-stack {
	position: relative;
}

.z-stack > * {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

footer {
	position: relative;
	z-index: 1;
}

body[data-page="Journal"] section {
	margin-bottom: 0;
}

.journal {
	width: 100%;
	min-height: calc(100vh - 2rem);
	height: calc(100vh - 2rem);
	display: flex;
	flex-direction: column;
	align-items: baseline;
	color: #333;
	background-color: rgb(230, 221, 198);
	border-radius: 2.5rem 2.5rem 0 0;
	gap: 1rem;
	overflow: hidden;
	margin-top: 2rem;
	padding-bottom: 0;
	z-index: 0;
}

.journal__page {
	--line-height: 28px;
	--line-offset: 8px;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: calc(1.5rem + var(--line-offset)) 3rem 1.5rem;
	line-height: var(--line-height);
	background-image:
		repeating-linear-gradient(
			to bottom,
			rgba(90, 70, 50, 0.08) 0,
			rgba(90, 70, 50, 0.08) 2px,
			transparent 2px,
			transparent var(--line-height)
		),
		linear-gradient(
			180deg,
			rgba(255, 250, 233, 0.85),
			rgba(240, 230, 210, 0.95)
		);
	background-position: 0 var(--line-offset);
	box-shadow: inset 0 0 0 1px rgba(120, 100, 80, 0.15);
	border-radius: 2.5rem;
}

.journal__intro {
	width: 100%;
	margin-bottom: var(--line-height);
	line-height: var(--line-height);
}

.journal__intro h1 {
	font-size: 2.5rem;
	line-height: calc(var(--line-height) * 2);
	margin: 16px 0 2px 0;
}

.journal__intro h3 {
	line-height: var(--line-height);
	margin: -8px 0 -8px 0;
}

.journal__intro br {
	display: none;
}

.journal__entries {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	flex: 1;
	overflow-y: auto;
	padding-right: 0.5rem;
}

.journal-entry {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: calc(var(--line-height) / 4) 0.5rem;
	margin-bottom: calc(var(--line-height) / 2 - 20px);
	text-decoration: none;
	color: inherit;
	border-bottom: 2px solid rgba(150, 120, 90, 0.35);
}

.journal-entry::before {
	content: "";
	position: absolute;
	left: -6%;
	right: -6%;
	top: 0.35rem;
	bottom: 0.35rem;
	background: rgba(255, 238, 120, 0.6);
	border-radius: 999px;
	transform: scaleX(0) translateX(-12%);
	transform-origin: left center;
	transition: transform 0.35s ease;
	filter: blur(0.5px);
	opacity: 0.95;
}

.journal-entry > * {
	position: relative;
	z-index: 1;
}

.journal-entry:last-child {
	border-bottom: none;
}

.journal-entry:hover::before {
	transform: scaleX(1) translateX(0);
}

.journal-entry__title {
	font-size: 1.35rem;
	font-weight: 700;
	line-height: var(--line-height);
	margin-bottom: 2px;
}

.journal-entry__subtitle {
	font-size: 1rem;
	color: rgba(60, 50, 40, 0.7);
	line-height: var(--line-height);
}

.journal-entry__date {
	font-size: 0.85rem;
	color: rgba(60, 50, 40, 0.55);
	line-height: var(--line-height);
}

em,
i {
	font-style: italic;
}

strong,
b {
	font-weight: bold;
}

hr {
	width: 100%;
	border: none;
	height: 2px;
	background-color: #ccc;
}

@media (max-aspect-ratio: 3/4) {
	.journal__page {
		padding: calc(1.5rem + var(--line-offset)) 1.5rem 1.5rem;
		border-radius: 2rem;
	}
}