@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&family=Cinzel:wght@500;700&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

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

:root {
	--bg:        #0a0d0a;
	--bg2:       #10150f;
	--parch:     #e7dcc1;
	--parch2:    #ddd0ad;
	--ink:       #2c2616;
	--ink-soft:  #5a4f36;
	--gold:      #c2a047;
	--gold-lit:  #e2c163;
	--green:     #3c5a34;
	--green-deep:#1b2917;
}

html {
	background-color: var(--bg);
	background-image:
		radial-gradient(120% 90% at 50% -10%, #1a2418 0%, transparent 55%),
		radial-gradient(100% 120% at 50% 120%, #14110a 0%, transparent 60%),
		linear-gradient(180deg, var(--bg2), var(--bg));
	background-attachment: fixed;
	min-height: 100%;
}

body {
	font-family: 'EB Garamond', Georgia, serif;
	font-size: 19px;
	line-height: 1.65;
	color: #d9d0ba;
	margin: 0 auto;
	padding: 0 16px 4em;
	max-width: 880px;
	min-height: 100vh;
}

/* ---- Header / wordmark ---- */
header { text-align: center; padding-top: 2.2em; }
header .home-logo img {
	height: 46px; width: auto; opacity: .85;
	filter: drop-shadow(0 2px 6px #000a);
	transition: opacity .15s;
}
header .home-logo:hover img { opacity: 1; }

.wordmark {
	font-family: 'UnifrakturMaguntia', 'Cinzel', serif;
	font-weight: 400;
	font-size: clamp(3.4rem, 11vw, 6rem);
	line-height: .95;
	margin: .25em 0 .05em;
	color: var(--gold-lit);
	text-shadow: 0 2px 0 #000, 0 0 28px #c2a04755, 0 6px 24px #000a;
	letter-spacing: 1px;
}
.tagline {
	font-family: 'Cinzel', serif;
	letter-spacing: .28em;
	text-transform: uppercase;
	font-size: .72rem;
	color: var(--gold);
	margin: 0 0 1.4em;
	opacity: .85;
}

/* ---- Nav ---- */
header nav { margin: 0 auto 2.4em; }
header nav ul {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; justify-content: center; gap: .4em;
}
header nav a {
	display: inline-block;
	font-family: 'Cinzel', serif;
	font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
	color: #cdbf9b; text-decoration: none;
	padding: .5em 1.1em;
	border: 1px solid #3c4435;
	border-radius: 3px;
	background: linear-gradient(180deg, #1c2419, #141a12);
	transition: all .15s;
}
header nav a:hover { color: var(--gold-lit); border-color: var(--gold); }
header nav li.active a {
	color: #1d1707;
	background: linear-gradient(180deg, var(--gold-lit), var(--gold));
	border-color: var(--gold-lit);
}

/* ---- The parchment page ---- */
article {
	background:
		linear-gradient(180deg, #efe6cf, var(--parch) 12%, var(--parch2));
	color: var(--ink);
	border: 1px solid #6b5a32;
	border-radius: 4px;
	box-shadow:
		0 0 0 6px #14110a,
		0 0 0 7px var(--gold),
		0 24px 60px #000a,
		inset 0 0 80px #b59c6233;
	padding: 2.6em clamp(1.2em, 5vw, 3.4em);
	margin: 0 auto;
}

article h1, article h2, article h3 {
	font-family: 'Cinzel', serif;
	color: var(--green-deep);
	line-height: 1.2;
	margin: 1.4em 0 .35em;
}
article h1 { font-size: 2.1rem; margin-top: 0; }
article h2 { font-size: 1.55rem; border-bottom: 2px solid #c9b78a; padding-bottom: .15em; }
article h3 { font-size: 1.2rem; color: #6a4f1e; letter-spacing: .02em; }
article h1:first-child, article > p:first-child { margin-top: 0; }

article p, article li { color: #38301d; }
article .subheading { color: var(--ink-soft); font-style: italic; margin-top: -.2em; }

article a { color: #7a5a16; font-weight: 500; text-decoration: underline; text-decoration-color: #c2a04788; }
article a:hover { color: #a06f15; }

article hr {
	border: none; height: 18px; margin: 2em auto;
	background: radial-gradient(circle, #8a7239 0 2px, transparent 3px) center/22px 100% repeat-x;
	max-width: 60%; opacity: .55;
}

article ul { padding-left: 1.2em; }
article li { margin: .3em 0; }
article li::marker { color: var(--green); }

article strong { color: var(--green-deep); }

article code, article kbd {
	font-family: ui-monospace, monospace; font-size: .9em;
	background: #d6c79e; color: #3a2e12;
	padding: .08em .4em; border-radius: 3px; border: 1px solid #b8a779;
}

article img {
	max-width: 100%; border-radius: 3px;
	border: 1px solid #6b5a32; box-shadow: 0 6px 18px #0006;
	image-rendering: pixelated;        /* the game art is pixel art */
}

article table { width: 100%; border-collapse: collapse; margin: 1em 0; }
article th, article td { border: 1px solid #c2b083; padding: .5em .7em; text-align: left; }
article th { background: #d8c89e; font-family: 'Cinzel', serif; color: var(--green-deep); }

.post-date {
	font-family: 'Cinzel', serif; font-size: .6em;
	color: var(--ink-soft); letter-spacing: .06em;
	margin-left: .6em; vertical-align: middle;
}

/* ---- The seal button ---- */
.button {
	display: inline-block;
	font-family: 'Cinzel', serif; font-weight: 700;
	font-size: 1.05rem; letter-spacing: .06em;
	color: #1d1707 !important; text-decoration: none !important;
	padding: .7em 1.8em; margin: .4em 0;
	background: linear-gradient(180deg, var(--gold-lit), var(--gold) 55%, #9c7f2f);
	border: 1px solid #f0d98a;
	border-radius: 4px;
	box-shadow: 0 3px 0 #6e5a25, 0 8px 22px #000a, inset 0 1px 0 #fff7;
	transition: transform .1s, box-shadow .1s, filter .1s;
}
.button:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 4px 0 #6e5a25, 0 12px 28px #000c, inset 0 1px 0 #fff8; }
.button:active { transform: translateY(2px); box-shadow: 0 1px 0 #6e5a25, 0 4px 12px #000a; }

/* ---- Footer ---- */
footer { margin-top: 2.6em; text-align: center; color: #7c7256; font-family: 'Cinzel', serif; font-size: .8rem; letter-spacing: .05em; }
footer a { color: var(--gold); }

@media (max-width: 600px) {
	body { font-size: 17px; }
	article { box-shadow: 0 0 0 4px #14110a, 0 0 0 5px var(--gold), 0 16px 40px #000a; }
}