/* lorehallow.com. Built from web/static/css/site.css by cmd/lorehallow-web. */
:root {
	/* Palette: generated from art/style/palette.hex. */
	--c-ink: #1a1420;
	--c-night-plum: #2e2433;
	--c-dusk-violet-grey: #4a3d4d;
	--c-slate: #615a68;
	--c-stone: #857882;
	--c-pale-stone: #a8979a;
	--c-dark-soil: #3b2a24;
	--c-bark: #74402e;
	--c-earth: #965a3a;
	--c-dry-path: #c08256;
	--c-sand: #d4b48a;
	--c-ember: #b8642a;
	--c-amber: #e09a3c;
	--c-lantern-gold: #f2c45a;
	--c-glow: #fbe39b;
	--c-deep-forest: #1f3326;
	--c-moss-shadow: #2f4f2f;
	--c-moss: #577139;
	--c-leaf: #7a8e3c;
	--c-sunlit-leaf: #abb84e;
	--c-deep-dusk: #1f2a44;
	--c-dusk-blue: #2f4466;
	--c-river: #4a6a8f;
	--c-sky: #7a9cbf;
	--c-mist: #b4cde0;
	--c-skin-deep: #9e5a4f;
	--c-skin-mid: #cc8a6c;
	--c-skin-light: #efc4a0;
	--c-banner-red: #8f2f2f;
	--c-berry: #c94a3a;
	--c-arcane-violet: #5e4a86;
	--c-teal-glass: #3f8f86;
	--c-parchment-white: #f4ecd8;
	/* Roles: the only colors text and backgrounds use (internal/site/theme.go). */
	--bg: var(--c-ink);
	--bg-raised: var(--c-night-plum);
	--bg-dusk: var(--c-deep-dusk);
	--bg-sky: var(--c-dusk-blue);
	--bg-page: var(--c-parchment-white);
	--bg-button: var(--c-lantern-gold);
	--bg-button-hover: var(--c-glow);
	--bg-done: var(--c-sunlit-leaf);
	--bg-human: var(--c-banner-red);
	--bg-adr: var(--c-arcane-violet);
	--bg-code: var(--c-sand);
	--text: var(--c-parchment-white);
	--text-muted: var(--c-pale-stone);
	--text-heading: var(--c-lantern-gold);
	--text-link: var(--c-glow);
	--text-accent: var(--c-amber);
	--text-done: var(--c-sunlit-leaf);
	--text-on-light: var(--c-ink);
	--text-heading-on-light: var(--c-bark);
	--text-link-on-light: var(--c-banner-red);
	--text-muted-on-light: var(--c-dusk-violet-grey);
}

@font-face { font-family: "Lorehallow Pixel"; src: url("/assets/lorehallow-pixel.3ac0a4d7a2.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Go"; src: url("/assets/go-regular.12581ec5a3.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Go"; src: url("/assets/go-italic.ff16faf1f0.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Go"; src: url("/assets/go-bold.a6fedec375.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Go Mono"; src: url("/assets/go-mono.79605cc2b5.woff") format("woff"); font-display: swap; }

:root {
	--pixel: "Lorehallow Pixel", "Go", ui-monospace, monospace;
	--body: "Go", "Segoe UI", system-ui, sans-serif;
	--mono: "Go Mono", ui-monospace, Menlo, Consolas, monospace;
	--gutter: 16px;
	--max: 1240px;
	--shadow: 4px 4px 0 var(--c-ink);
	color-scheme: dark;
}
@media (min-width: 768px) { :root { --gutter: 24px; } }

*, *::before, *::after { box-sizing: border-box; }
html { background-color: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
	margin: 0;
	background-color: var(--bg);
	color: var(--text);
	font: 18px/1.65 var(--body);
	overflow-x: hidden;
}
img { image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated; max-width: none; display: inline-block; vertical-align: bottom; }
a { color: var(--text-link); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--text-heading); }
:focus-visible { outline: 3px solid var(--c-glow); outline-offset: 3px; }
code, pre { font-family: var(--mono); font-size: 0.9em; }
p { margin: 0 0 1em; }
strong { font-weight: 700; }

h1, h2, h3, .kicker, .nav, .brand span, .button, .badge, .pixel {
	font-family: var(--pixel);
	font-weight: 400;
	font-synthesis: none;
	letter-spacing: 0;
	-webkit-font-smoothing: none;
}
h1, h2, h3 { color: var(--text-heading); margin: 0 0 16px; text-wrap: balance; }
h1 { font-size: 30px; line-height: 40px; }
h2 { font-size: 30px; line-height: 40px; }
h3 { font-size: 20px; line-height: 28px; }
@media (min-width: 768px) { h1 { font-size: 40px; line-height: 52px; } }
.kicker { font-size: 20px; line-height: 28px; color: var(--text-accent); margin: 0 0 4px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.center { text-align: center; }
.center-block { margin-left: auto; margin-right: auto; text-align: center; }
.lede { font-size: 20px; color: var(--text-muted); max-width: 46em; }
.prose { max-width: 40em; }
.prose h2 { margin-top: 0; }

.skip {
	position: absolute; left: 8px; top: -100px; z-index: 10;
	background-color: var(--bg-button); color: var(--text-on-light); padding: 8px 12px;
}
.skip:focus { top: 8px; }
.draft-banner {
	margin: 0; padding: 6px var(--gutter); text-align: center;
	background-color: var(--bg-button); color: var(--text-on-light); font-size: 15px;
}

/* Header and footer */
.site-header {
	background-color: var(--bg);
	border-bottom: 4px solid var(--c-night-plum);
	box-shadow: 0 4px 0 var(--c-ink);
	position: relative; z-index: 2;
}
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 8px; padding-bottom: 8px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text-heading); text-decoration: none; font-size: 30px; line-height: 64px; }
.brand:hover { color: var(--text-link); }
.nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 20px; line-height: 28px; }
.nav a { color: var(--text); text-decoration: none; display: inline-block; padding: 8px 0 6px; border-bottom: 4px solid transparent; }
.nav a:hover { color: var(--text-link); border-bottom-color: var(--c-dusk-violet-grey); }
.nav a[aria-current="page"] { color: var(--text-heading); border-bottom-color: var(--c-amber); }
@media (max-width: 639px) {
	.header-inner { justify-content: center; }
	.nav { justify-content: center; gap: 0 16px; }
}

.site-footer { background-color: var(--bg); border-top: 4px solid var(--c-night-plum); padding: 48px 0 32px; color: var(--text-muted); font-size: 16px; }
.footer-inner { display: grid; gap: 24px; }
@media (min-width: 900px) { .footer-inner { grid-template-columns: 1.2fr 2fr; } .footer-note { grid-column: 1 / -1; } }
.footer-brand { display: flex; gap: 16px; align-items: flex-start; }
.footer-brand p { margin: 0; }
.footer-brand strong { color: var(--text); }
.footer-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 24px; }
.footer-links ul { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin: 0 0 6px; }
.footer-note { margin: 0; border-top: 2px solid var(--c-night-plum); padding-top: 16px; }

/* Buttons and badges */
.button {
	display: inline-block; font-size: 20px; line-height: 28px; text-decoration: none;
	padding: 10px 18px 8px; border: 2px solid var(--c-ink);
	background-color: var(--bg-button); color: var(--text-on-light);
	box-shadow: inset 0 -4px 0 var(--c-amber), 0 4px 0 var(--c-ink);
}
.button:hover { background-color: var(--bg-button-hover); color: var(--text-on-light); }
.button:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 var(--c-amber), 0 2px 0 var(--c-ink); }
.button-quiet { background-color: var(--bg-raised); color: var(--text); border-color: var(--c-dusk-violet-grey); box-shadow: 0 4px 0 var(--c-ink); }
.button-quiet:hover { background-color: var(--bg-dusk); color: var(--text-link); }
.badge { display: inline-block; font-size: 20px; line-height: 24px; padding: 0 6px; vertical-align: 2px; white-space: nowrap; }
h3 .badge { margin-left: 4px; }
.badge-planned, .badge-adr { background-color: var(--bg-adr); color: var(--text); }
.badge-human { background-color: var(--bg-human); color: var(--text); }
.badge-draft { background-color: var(--bg-button); color: var(--text-on-light); }

/* Bands: the page is a stack of full-width color bands. */
.band { padding: 64px 0; background-color: var(--bg); }
.band-dusk { background-color: var(--bg-dusk); }
.band-raised { background-color: var(--bg-raised); }
@media (min-width: 768px) { .band { padding: 88px 0; } }

.section-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.section-head h2 { margin: 0; }
.section-head img { flex: none; }

.split { display: grid; gap: 40px; align-items: center; justify-items: center; }
.split > .prose { justify-self: stretch; }
@media (min-width: 1280px) { .split { grid-template-columns: auto 1fr; justify-items: start; } }
.split-text { justify-items: stretch; }
@media (min-width: 960px) { .split-text { grid-template-columns: 3fr 2fr; } }

.framed {
	margin: 0; line-height: 0;
	border: 4px solid var(--c-ink);
	box-shadow: 0 0 0 4px var(--c-bark), 0 0 0 8px var(--c-ink), 12px 12px 0 8px var(--c-ink);
}

/* Cards */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.card {
	background-color: var(--bg-raised); border: 2px solid var(--c-dusk-violet-grey); box-shadow: var(--shadow);
	padding: 20px; font-size: 17px; line-height: 1.6;
}
.card p { margin: 0; }
.card img { display: block; margin-bottom: 12px; }
.card h3 { margin-bottom: 8px; }
.band-raised .card { background-color: var(--bg); }
@media (min-width: 1100px) { .cards-5 { grid-template-columns: repeat(5, 1fr); } .cards-4 { grid-template-columns: repeat(4, 1fr); } }

.empty { border: 2px dashed var(--c-dusk-violet-grey); padding: 24px; color: var(--text-muted); max-width: 46em; }
.empty p { margin: 0; }

/* The hero: three parallax layers drawn at a whole-number scale (--k),
   each layer tiled with its mirror image so it runs edge to edge, with the
   original centered. The sky above the art is the far layer's top color. */
.hero {
	--k: 3;
	border-bottom: 4px solid var(--c-ink);
	position: relative; overflow: hidden; isolation: isolate;
	background-color: var(--bg-sky);
	padding: 40px 0 calc(var(--k) * 104px);
	text-align: center;
}
@media (min-width: 640px) { .hero { --k: 4; padding-top: 56px; } }
@media (min-width: 1440px) { .hero { --k: 5; } }
@media (min-width: 2200px) { .hero { --k: 6; } }
@media (min-width: 3200px) { .hero { --k: 8; } }
.hero-scene { position: absolute; inset: 0; z-index: -1; }
.hero-layer {
	position: absolute; left: 0; right: 0; bottom: 0;
	height: calc(var(--k) * 160px);
	background-repeat: repeat-x;
	background-size: calc(var(--k) * 480px) calc(var(--k) * 160px);
	background-position: calc(50% + var(--k) * 120px) bottom;
	image-rendering: pixelated;
}
.hero-far { background-image: url("/assets/parallax_far-pair.0f7cfad296.png"); }
.hero-mid { background-image: url("/assets/parallax_mid-pair.e2389bb0e1.png"); }
.hero-near { background-image: url("/assets/parallax_near-pair.85556814bd.png"); }
.hero-content { position: relative; --halo: 2px 2px 0 var(--c-ink); }
.wordmark { margin: 0 0 12px; line-height: 0; }
.wordmark img { filter: drop-shadow(0 4px 0 var(--c-ink)); }
.pitch {
	font-family: var(--pixel); font-size: 20px; line-height: 30px; color: var(--text);
	max-width: 30em; margin: 0 auto 12px; text-shadow: var(--halo);
}
@media (min-width: 768px) { .pitch { font-size: 30px; line-height: 40px; max-width: 24em; } }
.hero-status { max-width: 34em; margin: 0 auto 24px; color: var(--text); font-size: 17px; text-shadow: var(--halo); }
.cta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* Lantern glass on the post in the near layer (art pixels 201-206, 96-102,
   and the same lantern in the mirrored copies on either side). */
.lantern-glow, .lantern-glow::before, .lantern-glow::after {
	position: absolute; width: calc(var(--k) * 6px); height: calc(var(--k) * 7px);
	bottom: calc(var(--k) * 57px); left: calc(50% + var(--k) * 81px);
	background-color: var(--bg-button-hover); opacity: 0.0;
	box-shadow: 0 0 calc(var(--k) * 8px) calc(var(--k) * 3px) rgb(242 196 90 / 0.45);
	animation: flicker 4.2s steps(1) infinite;
}
.lantern-glow::before, .lantern-glow::after { content: ""; bottom: 0; animation-delay: -1.7s; }
.lantern-glow::before { left: calc(var(--k) * 72px); }
.lantern-glow::after { left: calc(var(--k) * -408px); animation-delay: -2.9s; }
@keyframes flicker {
	0% { opacity: 0.55; } 12% { opacity: 0.35; } 18% { opacity: 0.6; } 40% { opacity: 0.45; }
	46% { opacity: 0.25; } 52% { opacity: 0.55; } 75% { opacity: 0.4; } 88% { opacity: 0.6; }
}

/* Stars: one art pixel each, in the sky above the art: near the top, or
   out to the sides where they can't be mistaken for punctuation. */
.stars {
	position: absolute; left: 50%; top: 0; width: calc(var(--k) * 1px); height: calc(var(--k) * 1px);
	background-color: transparent;
	box-shadow:
		calc(var(--k) * -150px) calc(var(--k) * 14px) 0 var(--c-parchment-white),
		calc(var(--k) * -118px) calc(var(--k) * 40px) 0 var(--c-mist),
		calc(var(--k) * -96px) calc(var(--k) * 8px) 0 var(--c-glow),
		calc(var(--k) * -64px) calc(var(--k) * 6px) 0 var(--c-mist),
		calc(var(--k) * -30px) calc(var(--k) * 6px) 0 var(--c-parchment-white),
		calc(var(--k) * 12px) calc(var(--k) * 3px) 0 var(--c-mist),
		calc(var(--k) * 44px) calc(var(--k) * 4px) 0 var(--c-glow),
		calc(var(--k) * 78px) calc(var(--k) * 10px) 0 var(--c-parchment-white),
		calc(var(--k) * 104px) calc(var(--k) * 12px) 0 var(--c-mist),
		calc(var(--k) * 138px) calc(var(--k) * 28px) 0 var(--c-glow),
		calc(var(--k) * 170px) calc(var(--k) * 6px) 0 var(--c-parchment-white),
		calc(var(--k) * -190px) calc(var(--k) * 32px) 0 var(--c-glow),
		calc(var(--k) * 210px) calc(var(--k) * 38px) 0 var(--c-mist),
		calc(var(--k) * -230px) calc(var(--k) * 10px) 0 var(--c-mist),
		calc(var(--k) * 250px) calc(var(--k) * 18px) 0 var(--c-parchment-white);
	animation: twinkle 7s steps(1) infinite;
}
@keyframes twinkle { 0%, 100% { opacity: 1; } 30% { opacity: 0.6; } 33% { opacity: 1; } 70% { opacity: 0.75; } }

/* Fireflies: one art pixel, drifting in whole art pixels and blinking. */
.fireflies { position: absolute; inset: 0; }
.ff {
	position: absolute; width: calc(var(--k) * 1px); height: calc(var(--k) * 1px);
	background-color: var(--bg-button);
	box-shadow: 0 0 calc(var(--k) * 2px) calc(var(--k) * 1px) rgb(242 196 90 / 0.35);
	animation: drift 9s steps(9) infinite, blink 3s steps(3) infinite;
}
.ff-0 { left: calc(50% + var(--k) * -210px); bottom: calc(var(--k) * 34px); animation-duration: 9s, 3s; animation-delay: -1s, -0s; }
.ff-1 { left: calc(50% + var(--k) * -172px); bottom: calc(var(--k) * 58px); animation-duration: 11s, 4s; animation-delay: -4s, -1s; }
.ff-2 { left: calc(50% + var(--k) * -140px); bottom: calc(var(--k) * 22px); animation-duration: 8s, 3s; animation-delay: -2s, -2s; }
.ff-3 { left: calc(50% + var(--k) * -104px); bottom: calc(var(--k) * 70px); animation-duration: 12s, 5s; animation-delay: -7s, -3s; }
.ff-4 { left: calc(50% + var(--k) * -76px); bottom: calc(var(--k) * 40px); animation-duration: 10s, 3s; animation-delay: -3s, -1s; }
.ff-5 { left: calc(50% + var(--k) * -38px); bottom: calc(var(--k) * 64px); animation-duration: 9s, 4s; animation-delay: -6s, -2s; }
.ff-6 { left: calc(50% + var(--k) * -12px); bottom: calc(var(--k) * 30px); animation-duration: 13s, 3s; animation-delay: -9s, -0s; }
.ff-7 { left: calc(50% + var(--k) * 22px); bottom: calc(var(--k) * 52px); animation-duration: 10s, 5s; animation-delay: -2s, -4s; }
.ff-8 { left: calc(50% + var(--k) * 58px); bottom: calc(var(--k) * 26px); animation-duration: 11s, 3s; animation-delay: -5s, -1s; }
.ff-9 { left: calc(50% + var(--k) * 92px); bottom: calc(var(--k) * 74px); animation-duration: 9s, 4s; animation-delay: -8s, -2s; }
.ff-10 { left: calc(50% + var(--k) * 126px); bottom: calc(var(--k) * 44px); animation-duration: 12s, 3s; animation-delay: -1s, -0s; }
.ff-11 { left: calc(50% + var(--k) * 164px); bottom: calc(var(--k) * 30px); animation-duration: 10s, 4s; animation-delay: -6s, -3s; }
.ff-12 { left: calc(50% + var(--k) * 196px); bottom: calc(var(--k) * 62px); animation-duration: 8s, 3s; animation-delay: -3s, -1s; }
.ff-13 { left: calc(50% + var(--k) * 232px); bottom: calc(var(--k) * 36px); animation-duration: 11s, 5s; animation-delay: -4s, -2s; }

@keyframes drift {
	0%, 100% { transform: translate(0, 0); }
	25% { transform: translate(calc(var(--k) * 3px), calc(var(--k) * -2px)); }
	50% { transform: translate(calc(var(--k) * 1px), calc(var(--k) * -6px)); }
	75% { transform: translate(calc(var(--k) * -3px), calc(var(--k) * -3px)); }
}
@keyframes blink { 0%, 100% { opacity: 0; } 33% { opacity: 1; } 66% { opacity: 0.6; } }

/* Gentle parallax as the hero scrolls away, where the browser supports
   scroll-driven animations; elsewhere the scene simply stays still. */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: scroll()) {
		.hero-far, .hero-mid {
			animation: linear both;
			animation-timeline: scroll(root);
			animation-range: 0 100vh;
		}
		.hero-far { animation-name: sink-far; }
		.hero-mid { animation-name: sink-mid; }
		@keyframes sink-far { to { transform: translateY(calc(var(--k) * 48px)); } }
		@keyframes sink-mid { to { transform: translateY(calc(var(--k) * 20px)); } }
	}
}

/* Progress bars */
.xp { margin: 0 0 20px; }
.xp-label { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; color: var(--text-muted); margin-bottom: 6px; }
.xp-label span:first-child { color: var(--text); font-weight: 700; }
.xp-track {
	position: relative; height: 24px; background-color: var(--bg);
	border: 2px solid var(--c-ink); box-shadow: 0 0 0 2px var(--c-dusk-violet-grey), var(--shadow);
	margin: 2px;
}
.xp-big .xp-track { height: 32px; }
.xp-fill {
	position: absolute; left: 0; top: 0; bottom: 0; display: block;
	background-color: var(--bg-button);
	box-shadow: inset 0 4px 0 var(--c-glow), inset 0 -4px 0 var(--c-ember);
}
.xp-track::after {
	content: ""; position: absolute; inset: 0;
	background-image: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), var(--c-ink) calc(10% - 2px) 10%);
}
.xp-0{width:0%}.xp-1{width:1%}.xp-2{width:2%}.xp-3{width:3%}.xp-4{width:4%}.xp-5{width:5%}.xp-6{width:6%}.xp-7{width:7%}.xp-8{width:8%}.xp-9{width:9%}.xp-10{width:10%}.xp-11{width:11%}.xp-12{width:12%}.xp-13{width:13%}.xp-14{width:14%}.xp-15{width:15%}.xp-16{width:16%}.xp-17{width:17%}.xp-18{width:18%}.xp-19{width:19%}.xp-20{width:20%}.xp-21{width:21%}.xp-22{width:22%}.xp-23{width:23%}.xp-24{width:24%}.xp-25{width:25%}.xp-26{width:26%}.xp-27{width:27%}.xp-28{width:28%}.xp-29{width:29%}.xp-30{width:30%}.xp-31{width:31%}.xp-32{width:32%}.xp-33{width:33%}.xp-34{width:34%}.xp-35{width:35%}.xp-36{width:36%}.xp-37{width:37%}.xp-38{width:38%}.xp-39{width:39%}.xp-40{width:40%}.xp-41{width:41%}.xp-42{width:42%}.xp-43{width:43%}.xp-44{width:44%}.xp-45{width:45%}.xp-46{width:46%}.xp-47{width:47%}.xp-48{width:48%}.xp-49{width:49%}.xp-50{width:50%}.xp-51{width:51%}.xp-52{width:52%}.xp-53{width:53%}.xp-54{width:54%}.xp-55{width:55%}.xp-56{width:56%}.xp-57{width:57%}.xp-58{width:58%}.xp-59{width:59%}.xp-60{width:60%}.xp-61{width:61%}.xp-62{width:62%}.xp-63{width:63%}.xp-64{width:64%}.xp-65{width:65%}.xp-66{width:66%}.xp-67{width:67%}.xp-68{width:68%}.xp-69{width:69%}.xp-70{width:70%}.xp-71{width:71%}.xp-72{width:72%}.xp-73{width:73%}.xp-74{width:74%}.xp-75{width:75%}.xp-76{width:76%}.xp-77{width:77%}.xp-78{width:78%}.xp-79{width:79%}.xp-80{width:80%}.xp-81{width:81%}.xp-82{width:82%}.xp-83{width:83%}.xp-84{width:84%}.xp-85{width:85%}.xp-86{width:86%}.xp-87{width:87%}.xp-88{width:88%}.xp-89{width:89%}.xp-90{width:90%}.xp-91{width:91%}.xp-92{width:92%}.xp-93{width:93%}.xp-94{width:94%}.xp-95{width:95%}.xp-96{width:96%}.xp-97{width:97%}.xp-98{width:98%}.xp-99{width:99%}.xp-100{width:100%}

.progress-widget { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .progress-widget { grid-template-columns: 3fr 2fr; } }
.current-phase {
	display: grid; gap: 4px; justify-items: start; text-decoration: none; color: var(--text);
	background-color: var(--bg-raised); border: 2px solid var(--c-amber); box-shadow: var(--shadow); padding: 24px;
}
.current-phase:hover { color: var(--text); border-color: var(--c-glow); }
.current-phase img { margin-bottom: 8px; }
.current-title { font-family: var(--pixel); font-size: 30px; line-height: 40px; color: var(--text-heading); }
.current-goal { color: var(--text-muted); font-size: 16px; margin-bottom: 12px; }
.current-phase .xp { width: 100%; margin: 0; }

/* Devlog lists */
.post-list { display: grid; gap: 24px; }
.post-list-3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.post-card { background-color: var(--bg-raised); border: 2px solid var(--c-dusk-violet-grey); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.band-raised .post-card { background-color: var(--bg); }
.post-card-art { display: block; line-height: 0; text-align: center; border-bottom: 2px solid var(--c-dusk-violet-grey); }
.post-card-body { padding: 20px; }
.post-card h3 { margin-bottom: 8px; }
.post-card h3 a { color: var(--text-heading); text-decoration: none; }
.post-card h3 a:hover { color: var(--text-link); text-decoration: underline; }
.post-card p { margin: 0 0 12px; }
.meta { color: var(--text-muted); font-size: 15px; }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 15px; }

/* Showcase */
.lineup { margin: 0 0 40px; text-align: center; }
/* The lineup art is mostly night sky; show the bottom third, where they stand. */
.crop-lineup {
	display: inline-flex; align-items: flex-end; overflow: hidden; aspect-ratio: 192 / 56;
	border: 4px solid var(--c-ink); box-shadow: var(--shadow); line-height: 0; max-width: 100%;
}
.lineup figcaption { margin: 16px auto 0; max-width: 46em; color: var(--text-muted); font-size: 16px; }
.props {
	list-style: none; margin: 0 auto 24px; padding: 0 0 0; display: flex; flex-wrap: wrap; align-items: flex-end;
	justify-content: center; gap: 16px 32px; border-bottom: 8px solid var(--c-moss); box-shadow: 0 4px 0 var(--c-moss-shadow); max-width: 820px;
}

.link-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 560px) { .link-tiles { grid-template-columns: 1fr 1fr; } }
.link-tiles a {
	display: grid; gap: 4px; padding: 16px 18px; text-decoration: none; height: 100%;
	background-color: var(--bg-raised); border: 2px solid var(--c-dusk-violet-grey); box-shadow: var(--shadow); color: var(--text);
}
.link-tiles a:hover { border-color: var(--c-amber); color: var(--text); }
.link-tiles strong { font-family: var(--pixel); font-weight: 400; font-size: 20px; line-height: 28px; color: var(--text-link); }
.link-tiles span { font-size: 15px; color: var(--text-muted); }

/* Page headers */
.page-head { padding: 48px 0 40px; background-color: var(--bg-dusk); border-bottom: 4px solid var(--c-ink); }
.page-head .lede { margin-bottom: 0; }
.page-head-art { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .page-head-art { grid-template-columns: 1fr auto; } }
.crumbs { font-size: 16px; margin: 0 0 8px; color: var(--text-muted); }

/* Progress page and quest map */
.quest-map {
	--gap: 24px; --road: 12px; --road-y: 44px;
	background-color: var(--bg-raised);
	background-image: url("/assets/terrain_base-grass-a.643d291d6e.png");
	background-size: 64px 64px; background-repeat: repeat;
	border: 4px solid var(--c-ink); box-shadow: 0 0 0 4px var(--c-bark), 0 0 0 8px var(--c-ink);
	padding: 24px 16px; margin: 0 0 48px;
}
.quest-map ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); isolation: isolate; }
.quest-map li { position: relative; }
.quest-map li::before {
	content: ""; position: absolute; z-index: -1;
	left: calc(44px - var(--road) / 2); top: var(--road-y); width: var(--road); height: calc(100% + var(--gap));
	background-color: var(--bg); /* hidden under the road texture */
	background-image: linear-gradient(var(--c-dry-path), var(--c-dry-path));
	box-shadow: inset 0 0 0 2px var(--c-earth);
}
.quest-map li:last-child::before { display: none; }
.qm-node {
	display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 12px;
	text-decoration: none; color: var(--text);
}
.qm-art { display: grid; place-items: center; width: 88px; height: 88px; }
.qm-plaque {
	display: block; background-color: var(--bg); border: 2px solid var(--c-dusk-violet-grey); box-shadow: var(--shadow);
	padding: 6px 10px; font-size: 15px; line-height: 1.4;
}
.qm-plaque .pixel { display: block; font-size: 20px; line-height: 24px; color: var(--text-heading); }
.qm-plaque .qm-title { display: block; font-weight: 700; }
.qm-plaque .qm-count { display: block; color: var(--text-muted); }
.qm-node:hover .qm-plaque { border-color: var(--c-glow); }
.is-future .qm-art img { filter: brightness(0.55) saturate(0.4); }
.is-future .qm-plaque { border-style: dashed; }
.is-done .qm-plaque .qm-count { color: var(--text-done); }
.is-current .qm-plaque { border-color: var(--c-amber); }
.is-current .qm-art { position: relative; }
.you-are-here {
	position: absolute; top: -14px; left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 1;
	font-family: var(--pixel); font-size: 20px; line-height: 24px; padding: 0 6px;
	background-color: var(--bg-button); color: var(--text-on-light); box-shadow: 2px 2px 0 var(--c-ink);
}
.you-are-here { display: none; }
.qm-here { color: var(--text-heading); }
@media (min-width: 640px) {
	.you-are-here { display: block; }
	.qm-here { display: none; }
	.quest-map { padding: 32px 24px; --road-y: 44px; }
	.qm-node { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 8px; }
	.qm-plaque { width: 100%; }
}
@media (min-width:640px){
.quest-map ol{grid-template-columns:repeat(4,1fr)}
.quest-map .qm-0{grid-row:1;grid-column:1}.quest-map .qm-0::before{left:50%;top:calc(var(--road-y) - var(--road)/2);width:calc(100% + var(--gap));height:var(--road)}
.quest-map .qm-1{grid-row:1;grid-column:2}.quest-map .qm-1::before{left:50%;top:calc(var(--road-y) - var(--road)/2);width:calc(100% + var(--gap));height:var(--road)}
.quest-map .qm-2{grid-row:1;grid-column:3}.quest-map .qm-2::before{left:50%;top:calc(var(--road-y) - var(--road)/2);width:calc(100% + var(--gap));height:var(--road)}
.quest-map .qm-3{grid-row:1;grid-column:4}.quest-map .qm-3::before{left:calc(50% - var(--road)/2);top:var(--road-y);width:var(--road);height:calc(100% + var(--gap))}
.quest-map .qm-4{grid-row:2;grid-column:4}.quest-map .qm-4::before{right:50%;left:auto;top:calc(var(--road-y) - var(--road)/2);width:calc(100% + var(--gap));height:var(--road)}
.quest-map .qm-5{grid-row:2;grid-column:3}.quest-map .qm-5::before{right:50%;left:auto;top:calc(var(--road-y) - var(--road)/2);width:calc(100% + var(--gap));height:var(--road)}
.quest-map .qm-6{grid-row:2;grid-column:2}.quest-map .qm-6::before{right:50%;left:auto;top:calc(var(--road-y) - var(--road)/2);width:calc(100% + var(--gap));height:var(--road)}
.quest-map .qm-7{grid-row:2;grid-column:1}.quest-map .qm-7::before{left:calc(50% - var(--road)/2);top:var(--road-y);width:var(--road);height:calc(100% + var(--gap))}
.quest-map .qm-8{grid-row:3;grid-column:1}.quest-map .qm-8::before{left:50%;top:calc(var(--road-y) - var(--road)/2);width:calc(100% + var(--gap));height:var(--road)}
.quest-map .qm-9{grid-row:3;grid-column:2}.quest-map .qm-9::before{left:50%;top:calc(var(--road-y) - var(--road)/2);width:calc(100% + var(--gap));height:var(--road)}
.quest-map .qm-10{grid-row:3;grid-column:3}.quest-map .qm-10::before{left:50%;top:calc(var(--road-y) - var(--road)/2);width:calc(100% + var(--gap));height:var(--road)}
.quest-map .qm-11{grid-row:3;grid-column:4}.quest-map .qm-11::before{left:calc(50% - var(--road)/2);top:var(--road-y);width:var(--road);height:calc(100% + var(--gap))}
.quest-map .qm-12{grid-row:4;grid-column:4}.quest-map .qm-12::before{right:50%;left:auto;top:calc(var(--road-y) - var(--road)/2);width:calc(100% + var(--gap));height:var(--road)}
.quest-map .qm-13{grid-row:4;grid-column:3}.quest-map .qm-13::before{right:50%;left:auto;top:calc(var(--road-y) - var(--road)/2);width:calc(100% + var(--gap));height:var(--road)}
.quest-map .qm-14{grid-row:4;grid-column:2}.quest-map .qm-14::before{right:50%;left:auto;top:calc(var(--road-y) - var(--road)/2);width:calc(100% + var(--gap));height:var(--road)}
.quest-map .qm-15{grid-row:4;grid-column:1}.quest-map .qm-15::before{left:calc(50% - var(--road)/2);top:var(--road-y);width:var(--road);height:calc(100% + var(--gap))}
.quest-map .qm-16{grid-row:5;grid-column:1}.quest-map .qm-16::before{left:50%;top:calc(var(--road-y) - var(--road)/2);width:calc(100% + var(--gap));height:var(--road)}
.quest-map .qm-17{grid-row:5;grid-column:2}.quest-map .qm-17::before{left:50%;top:calc(var(--road-y) - var(--road)/2);width:calc(100% + var(--gap));height:var(--road)}
.quest-map .qm-18{grid-row:5;grid-column:3}.quest-map .qm-18::before{left:50%;top:calc(var(--road-y) - var(--road)/2);width:calc(100% + var(--gap));height:var(--road)}
.quest-map .qm-19{grid-row:5;grid-column:4}.quest-map .qm-19::before{left:calc(50% - var(--road)/2);top:var(--road-y);width:var(--road);height:calc(100% + var(--gap))}
.quest-map .qm-20{grid-row:6;grid-column:4}.quest-map .qm-20::before{display:none}
}
@media (min-width:1024px){
.quest-map ol{grid-template-columns:repeat(7,1fr)}
.quest-map .qm-0{grid-row:1;grid-column:1}.quest-map .qm-0::before{left:50%;top:calc(var(--road-y) - var(--road)/2);width:calc(100% + var(--gap));height:var(--road)}
.quest-map .qm-1{grid-row:1;grid-column:2}.quest-map .qm-1::before{left:50%;top:calc(var(--road-y) - var(--road)/2);width:calc(100% + var(--gap));height:var(--road)}
.quest-map .qm-2{grid-row:1;grid-column:3}.quest-map .qm-2::before{left:50%;top:calc(var(--road-y) - var(--road)/2);width:calc(100% + var(--gap));height:var(--road)}
.quest-map .qm-3{grid-row:1;grid-column:4}.quest-map .qm-3::before{left:50%;top:calc(var(--road-y) - var(--road)/2);width:calc(100% + var(--gap));height:var(--road)}
.quest-map .qm-4{grid-row:1;grid-column:5}.quest-map .qm-4::before{left:50%;top:calc(var(--road-y) - var(--road)/2);width:calc(100% + var(--gap));height:var(--road)}
.quest-map .qm-5{grid-row:1;grid-column:6}.quest-map .qm-5::before{left:50%;top:calc(var(--road-y) - var(--road)/2);width:calc(100% + var(--gap));height:var(--road)}
.quest-map .qm-6{grid-row:1;grid-column:7}.quest-map .qm-6::before{left:calc(50% - var(--road)/2);top:var(--road-y);width:var(--road);height:calc(100% + var(--gap))}
.quest-map .qm-7{grid-row:2;grid-column:7}.quest-map .qm-7::before{right:50%;left:auto;top:calc(var(--road-y) - var(--road)/2);width:calc(100% + var(--gap));height:var(--road)}
.quest-map .qm-8{grid-row:2;grid-column:6}.quest-map .qm-8::before{right:50%;left:auto;top:calc(var(--road-y) - var(--road)/2);width:calc(100% + var(--gap));height:var(--road)}
.quest-map .qm-9{grid-row:2;grid-column:5}.quest-map .qm-9::before{right:50%;left:auto;top:calc(var(--road-y) - var(--road)/2);width:calc(100% + var(--gap));height:var(--road)}
.quest-map .qm-10{grid-row:2;grid-column:4}.quest-map .qm-10::before{right:50%;left:auto;top:calc(var(--road-y) - var(--road)/2);width:calc(100% + var(--gap));height:var(--road)}
.quest-map .qm-11{grid-row:2;grid-column:3}.quest-map .qm-11::before{right:50%;left:auto;top:calc(var(--road-y) - var(--road)/2);width:calc(100% + var(--gap));height:var(--road)}
.quest-map .qm-12{grid-row:2;grid-column:2}.quest-map .qm-12::before{right:50%;left:auto;top:calc(var(--road-y) - var(--road)/2);width:calc(100% + var(--gap));height:var(--road)}
.quest-map .qm-13{grid-row:2;grid-column:1}.quest-map .qm-13::before{left:calc(50% - var(--road)/2);top:var(--road-y);width:var(--road);height:calc(100% + var(--gap))}
.quest-map .qm-14{grid-row:3;grid-column:1}.quest-map .qm-14::before{left:50%;top:calc(var(--road-y) - var(--road)/2);width:calc(100% + var(--gap));height:var(--road)}
.quest-map .qm-15{grid-row:3;grid-column:2}.quest-map .qm-15::before{left:50%;top:calc(var(--road-y) - var(--road)/2);width:calc(100% + var(--gap));height:var(--road)}
.quest-map .qm-16{grid-row:3;grid-column:3}.quest-map .qm-16::before{left:50%;top:calc(var(--road-y) - var(--road)/2);width:calc(100% + var(--gap));height:var(--road)}
.quest-map .qm-17{grid-row:3;grid-column:4}.quest-map .qm-17::before{left:50%;top:calc(var(--road-y) - var(--road)/2);width:calc(100% + var(--gap));height:var(--road)}
.quest-map .qm-18{grid-row:3;grid-column:5}.quest-map .qm-18::before{left:50%;top:calc(var(--road-y) - var(--road)/2);width:calc(100% + var(--gap));height:var(--road)}
.quest-map .qm-19{grid-row:3;grid-column:6}.quest-map .qm-19::before{left:50%;top:calc(var(--road-y) - var(--road)/2);width:calc(100% + var(--gap));height:var(--road)}
.quest-map .qm-20{grid-row:3;grid-column:7}.quest-map .qm-20::before{display:none}
}


.legend { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; color: var(--text-muted); }

.two-col { display: grid; gap: 48px; }
@media (min-width: 960px) { .two-col { grid-template-columns: 3fr 2fr; } }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.feed li { background-color: var(--bg-raised); border-left: 4px solid var(--c-sunlit-leaf); padding: 12px 16px; font-size: 16px; }
.feed .meta { display: block; margin-bottom: 2px; }
.feed .kicker { font-size: 20px; color: var(--text-done); }
.waiting { background-color: var(--bg-raised); border: 2px solid var(--c-banner-red); box-shadow: var(--shadow); padding: 20px; }
.waiting ul { margin: 0; padding-left: 20px; }
.waiting li { margin-bottom: 8px; }

.phase-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.phase-table th, .phase-table td { text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--c-night-plum); vertical-align: middle; }
.phase-table th { color: var(--text-muted); font-weight: 400; }
.phase-table td.num { white-space: nowrap; }

/* Phase pages */
.meta-list { display: grid; gap: 8px 16px; margin: 0 0 24px; }
@media (min-width: 768px) { .meta-list { grid-template-columns: max-content 1fr; } }
.meta-list dt { font-family: var(--pixel); font-size: 20px; line-height: 28px; color: var(--text-accent); }
.meta-list dd { margin: 0; }
.checklist { list-style: none; margin: 0 0 40px; padding: 0; }
.checklist li { display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 10px 0; border-bottom: 2px solid var(--c-night-plum); }
.checklist li.done { color: var(--text-muted); }
.checklist code { overflow-wrap: anywhere; }
.section-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-top: 40px; }
.section-title h2 { margin: 0; }
.section-title span { color: var(--text-muted); font-size: 16px; }
.check {
	position: relative; display: inline-block; width: 20px; height: 20px; margin-top: 5px;
	border: 2px solid var(--c-pale-stone); background-color: var(--bg);
}
.check-done { background-color: var(--bg-done); border-color: var(--c-moss-shadow); }
.check-done::after {
	content: ""; position: absolute; left: 2px; top: 8px; width: 2px; height: 2px; background-color: transparent;
	box-shadow: 0 0 0 var(--c-ink), 2px 2px 0 var(--c-ink), 4px 4px 0 var(--c-ink), 6px 2px 0 var(--c-ink),
		8px 0 0 var(--c-ink), 10px -2px 0 var(--c-ink), 12px -4px 0 var(--c-ink);
}
.pager { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 40px; }

/* Devlog post: a parchment page */
.devlog-head { text-align: center; }
.page-sheet {
	max-width: 46rem; margin: 0 auto; padding: 32px 20px;
	background-color: var(--bg-page); color: var(--text-on-light);
	border: 4px solid var(--c-ink); box-shadow: 0 0 0 4px var(--c-sand), 0 0 0 8px var(--c-ink), 12px 12px 0 8px var(--c-ink);
	font-size: 19px; line-height: 1.7;
}
@media (min-width: 768px) { .page-sheet { padding: 56px 64px; } }
.page-sheet h1, .page-sheet h2, .page-sheet h3 { color: var(--text-heading-on-light); }
.page-sheet h2 { font-size: 30px; line-height: 40px; margin-top: 40px; }
.page-sheet h3 { margin-top: 32px; }
.page-sheet a { color: var(--text-link-on-light); }
.page-sheet a:hover { color: var(--text-on-light); }
.page-sheet .meta { color: var(--text-muted-on-light); }
.page-sheet code { background-color: var(--bg-code); color: var(--text-on-light); padding: 1px 4px; }
.page-sheet pre { background-color: var(--bg-code); color: var(--text-on-light); padding: 16px; overflow-x: auto; border: 2px solid var(--c-earth); }
.page-sheet pre code { padding: 0; }
.page-sheet blockquote { margin: 0 0 1em; padding: 4px 16px; border-left: 4px solid var(--c-earth); }
.page-sheet hr { border: 0; border-top: 4px dotted var(--c-earth); margin: 32px 0; }
.page-sheet table { border-collapse: collapse; margin: 0 0 1em; font-size: 16px; }
.page-sheet th, .page-sheet td { border: 2px solid var(--c-earth); padding: 6px 10px; text-align: left; }
.page-sheet img { max-width: 100%; }
.page-sheet .tags a { color: var(--text-link-on-light); }
.post-cover { text-align: center; margin: 0 0 24px; line-height: 0; }
.post-nav { max-width: 46rem; margin: 40px auto 0; display: grid; gap: 16px; }
@media (min-width: 640px) { .post-nav { grid-template-columns: 1fr 1fr; } .post-nav .older { text-align: right; } }

/* Downloads */
.platforms { list-style: none; margin: 0 0 48px; padding: 0; display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.platform { background-color: var(--bg-raised); border: 2px solid var(--c-dusk-violet-grey); box-shadow: var(--shadow); padding: 24px; }
.platform.unavailable { border-style: dashed; }
.platform h2 { font-size: 30px; }
.platform .status { font-family: var(--pixel); font-size: 20px; line-height: 28px; color: var(--text-muted); }
.sha { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; color: var(--text-muted); }

/* Generic content pages */
.content { padding-top: 56px; padding-bottom: 72px; }
.content .prose h2 { margin-top: 48px; }
.content .prose h2:first-child { margin-top: 0; }
.faq dt { font-family: var(--pixel); font-size: 20px; line-height: 28px; color: var(--text-heading); margin-top: 32px; }
.faq dd { margin: 8px 0 0; }
.gallery { display: grid; gap: 56px; justify-items: center; margin: 48px 0 0; }
.gallery figure { margin: 0; text-align: center; }
.gallery figcaption { margin: 16px auto 0; max-width: 40em; color: var(--text-muted); font-size: 16px; }
.gallery .framed { margin-bottom: 0; }
.gallery figure .framed + figcaption { margin-top: 28px; }
.stack-list { padding-left: 20px; }
.stack-list li { margin-bottom: 6px; }
.notice { background-color: var(--bg-raised); border-left: 4px solid var(--c-amber); padding: 12px 16px; }

/* 404 */
.lost { text-align: center; padding-top: 56px; padding-bottom: 80px; }
.lost .framed { display: inline-block; margin-bottom: 40px; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	.ff { opacity: 0; }
	.lantern-glow, .lantern-glow::before, .lantern-glow::after { opacity: 0.5; }
}
/* Responsive pixel art: whole-number scales only (generated). */
.k-2bdf1cb1{width:240px;height:80px}
.k-314f2fbe{width:240px;height:126px}
.k-5bde2713{width:240px;height:160px}
.k-a44080e5{width:192px;height:64px}
.k-e3546559{width:240px;height:160px}
.k-e3579d61{width:240px;height:160px}
.k-fbd83835{width:160px;height:120px}
.k-fe7ec49c{width:192px;height:128px}
@media (min-width:368px){.k-fbd83835{width:320px;height:240px}}
@media (min-width:432px){.k-a44080e5{width:384px;height:128px}.k-fe7ec49c{width:384px;height:256px}}
@media (min-width:528px){.k-2bdf1cb1{width:480px;height:160px}.k-314f2fbe{width:480px;height:252px}.k-5bde2713{width:480px;height:320px}.k-e3546559{width:480px;height:320px}.k-e3579d61{width:480px;height:320px}.k-fbd83835{width:480px;height:360px}}
@media (min-width:624px){.k-a44080e5{width:576px;height:192px}.k-fe7ec49c{width:576px;height:384px}}
@media (min-width:688px){.k-fbd83835{width:640px;height:480px}}
@media (min-width:768px){.k-2bdf1cb1{width:720px;height:240px}.k-314f2fbe{width:720px;height:378px}.k-5bde2713{width:720px;height:480px}.k-e3546559{width:720px;height:480px}.k-e3579d61{width:720px;height:480px}}
@media (min-width:816px){.k-fe7ec49c{width:768px;height:512px}}
@media (min-width:1008px){.k-2bdf1cb1{width:960px;height:320px}.k-314f2fbe{width:960px;height:504px}.k-5bde2713{width:960px;height:640px}.k-e3579d61{width:960px;height:640px}.k-fe7ec49c{width:960px;height:640px}}