:root {
	--paper: #e7d8b8;
	--sheet: #f2e7cf;
	--ink: #2b2d20;
	--moss: #3d4930;
	--rust: #9b4f2e
}

* {
	box-sizing: border-box
}

body {
	margin: 0;
	background: #29281f;
	color: var(--ink);
	font-family: Georgia, serif
}

.hero {
	height: 420px;
	position: relative;
	background: #263025 url('assets/hero-journal.png') center 54%/cover no-repeat;
	box-shadow: inset 0 -90px 90px #17170f99
}

.title-card {
	position: absolute;
	left: 50%;
	top: 32px;
	transform: translateX(-50%);
	width: min(690px, 56vw);
	filter: drop-shadow(0 10px 8px #17130b77)
}

.weather {
	position: absolute;
	right: 3.2vw;
	top: 88px;
	width: 216px;
	padding: 31px 20px 13px;
	background: #f3e4ca;
	border: 1px solid #80643e88;
	box-shadow: 0 7px 13px #17130b73, 3px 3px #bca37b;
	border-radius: 4px
}

.weather:before {
	content: "";
	position: absolute;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #8f4a24;
	top: 7px;
	left: calc(50% - 7px)
}

.weather div {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px dashed #7d6b4c99;
	font: 10px Arial;
	text-transform: uppercase
}

.weather b {
	font: 400 14px Georgia;
	text-transform: capitalize
}

.tabs {
	height: 100px;
	margin-top: -20px;
	padding: 0 max(20px, calc((100vw - 1150px)/2));
	display: flex;
	align-items: flex-end;
	gap: -5px;
	position: relative;
	background: linear-gradient(transparent 20px, #d8c6a4 20px);
	overflow: auto
}

.tabs button {
	height: 58px;
	min-width: 180px;
	border: 1px solid #8d7652;
	border-bottom: 0;
	border-radius: 18px 18px 0 0;
	background: #eadabd;
	font-size: 20px
}

.tabs button.active {
	color: #fff3df;
	background: #9b4f2e
}

.content {
	min-height: 500px;
	padding: 30px max(20px, calc((100vw - 1180px)/2)) 80px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	background-color: var(--paper);
	background-image: linear-gradient(#856d4520 1px, transparent 1px), linear-gradient(90deg, #856d4518 1px, transparent 1px);
	background-size: 72px 72px
}

.card {
	position: relative;
	min-height: 250px;
	padding: 38px 45px;
	background: var(--sheet);
	border: 1px solid #9f88635e;
	box-shadow: 0 5px 12px #46341f37, 4px 5px #bdaa8770
}

.card.full {
	grid-column: 1/-1
}

.card h2 {
	margin: 0 0 20px;
	color: var(--moss);
	font-size: 40px;
	font-weight: 400
}

.card .rich,
.card p {
	font: 18px/1.62 Arial
}

.card.image {
	padding: 20px
}

.card.image .content-image {
	width: 100%;
	height: 290px;
	object-fit: cover;
	border: 10px solid #f8edda
}

.decoration {
	position: absolute;
	width: 140px;
	transform: translate(-50%, -50%) rotate(var(--rotate)) scale(var(--scale));
	filter: drop-shadow(0 3px 3px #0004);
	pointer-events: none;
	z-index: 3
}

.editing .decoration {
	pointer-events: auto;
	cursor: move;
	outline: 2px dashed var(--rust)
}

footer {
	padding: 26px max(30px, calc((100vw - 1180px)/2));
	display: flex;
	justify-content: space-between;
	color: #d1c19f;
	font: 11px Arial;
	letter-spacing: .13em;
	text-transform: uppercase
}

.admin-tab {
	position: fixed;
	right: 0;
	top: 42%;
	z-index: 20;
	writing-mode: vertical-rl;
	padding: 24px 11px;
	background: #8c482c;
	color: #fff;
	border: 0;
	border-radius: 8px 0 0 8px
}

.admin-panel {
	position: fixed;
	right: 0;
	top: 0;
	z-index: 40;
	width: min(470px, 95vw);
	height: 100vh;
	overflow: auto;
	background: #f7f2e7;
	box-shadow: -12px 0 40px #0007;
	font-family: Arial
}

.admin-panel>header {
	display: flex;
	justify-content: space-between;
	padding: 24px
}

.admin-panel h2 {
	font: 30px Georgia;
	margin: 5px 0
}

.admin-panel small {
	color: var(--rust);
	letter-spacing: .15em
}

.close {
	border: 0;
	background: none;
	font-size: 30px
}

.panel-nav {
	display: flex;
	gap: 4px;
	padding: 0 18px 14px;
	overflow: auto
}

.panel-nav button,
.panel-section button,
.save,
.secondary {
	padding: 10px;
	border: 1px solid #bbb;
	background: white
}

.panel-section {
	display: grid;
	gap: 12px;
	padding: 22px
}

.panel-section input,
.panel-section textarea,
.panel-section select {
	width: 100%;
	padding: 10px
}

.edit-row {
	display: grid;
	gap: 8px;
	padding: 12px;
	background: #eee5d4
}

.edit-row textarea {
	min-height: 100px
}

.save,
.secondary {
	margin: 8px 22px;
	width: calc(100% - 44px)
}

.save {
	background: var(--moss);
	color: white
}

.gate {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	background: #20271fee
}

.paper {
	background: #f1e5ce
}

.modal {
	width: min(440px, 90vw);
	padding: 42px;
	display: grid;
	gap: 12px;
	text-align: center
}

.modal input,
.modal button {
	padding: 12px
}

.error {
	color: #a1362e
}

.hidden {
	display: none !important
}

#particles {
	position: fixed;
	inset: 0;
	z-index: 10;
	pointer-events: none;
	overflow: hidden
}

.particle {
	position: absolute;
	top: -30px;
	animation: fall linear infinite
}

@keyframes fall {
	to {
		transform: translate(70px, 110vh) rotate(400deg)
	}
}

@media(max-width:800px) {
	.hero {
		height: 390px
	}

	.title-card {
		width: 86vw
	}

	.weather {
		top: 200px;
		right: 12px;
		width: 185px
	}

	.content {
		grid-template-columns: 1fr
	}

	.card.half {
		grid-column: 1
	}

	.tabs button {
		min-width: 145px;
		font-size: 16px
	}
}