:root {
	--ash-bg: #160f0b;
	--ash-bg-soft: #241710;
	--ash-panel: rgb(24 17 13 / 0.88);
	--ash-panel-solid: #211711;
	--ash-border: rgb(206 163 92 / 0.28);
	--ash-gold: #d7ae66;
	--ash-gold-strong: #f0cf89;
	--ash-text: #f2e7d1;
	--ash-muted: #b9aa94;
	--ash-red: #d9674f;
	--ash-green: #8dc06f;
	--ash-shadow: 0 24px 80px rgb(0 0 0 / 0.36);
	font-family: "Trebuchet MS", Arial, sans-serif;
}

* {
	box-sizing: border-box;
}

html,
body {
	min-height: 100%;
	margin: 0;
}

body.ash-public {
	background:
		linear-gradient(180deg, rgb(18 11 7 / 0.38), rgb(18 11 7 / 0.96) 520px),
		var(--ash-bg);
	color: var(--ash-text);
	font-size: 16px;
	line-height: 1.5;
}

a {
	color: var(--ash-gold-strong);
	text-decoration: none;
}

a:hover,
a:focus-visible {
	text-decoration: underline;
}

button,
input,
select,
textarea {
	font: inherit;
}

.ash-hero {
	position: relative;
	min-height: 760px;
	padding: 24px clamp(18px, 4vw, 56px) 72px;
	background:
		linear-gradient(90deg, rgb(8 5 3 / 0.95), rgb(17 10 6 / 0.72) 40%, rgb(16 10 7 / 0.55)),
		image-set(url("/assets/img/promo/hero-bg.webp") type("image/webp"), url("/assets/img/promo/hero-bg.jpg") type("image/jpeg"));
	background-position: center;
	background-size: cover;
}

.ash-hero--compact {
	min-height: 170px;
	padding-top: 12px;
	padding-bottom: 20px;
}

.ash-hero--compact .ash-nav {
	min-height: 46px;
}

.ash-hero--compact .ash-brand img {
	width: 130px;
}

.ash-hero--compact .ash-hero__inner {
	min-height: 74px;
	grid-template-columns: minmax(0, 1fr);
	align-items: end;
	margin-top: 10px;
}

.ash-hero--compact .ash-auth,
.ash-hero--compact .ash-hero__copy p,
.ash-hero--compact .ash-hero__actions {
	display: none;
}

.ash-hero--compact .ash-hero__copy h1,
.ash-hero--compact .ash-hero__copy .ash-hero__wordmark {
	font-size: clamp(38px, 6vw, 58px);
}

.ash-hero--compact .ash-kicker {
	margin-bottom: 4px;
	font-size: 11px;
}

.ash-nav,
.ash-hero__inner,
.ash-main,
.ash-footer {
	width: min(1180px, 100%);
	margin: 0 auto;
}

.ash-nav {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 72px;
}

.ash-brand {
	display: inline-flex;
	align-items: center;
	color: var(--ash-gold-strong);
	font-size: 24px;
	font-weight: 800;
	letter-spacing: 0;
}

.ash-brand img {
	display: block;
	width: 180px;
	height: auto;
}

.ash-nav__links {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 18px;
}

.ash-nav__links a,
.ash-nav__online {
	color: var(--ash-text);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
}

.ash-nav__online {
	min-width: 116px;
	padding: 8px 12px;
	border: 1px solid var(--ash-border);
	border-radius: 8px;
	background: rgb(0 0 0 / 0.32);
	text-align: center;
}

.ash-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
	gap: clamp(28px, 6vw, 86px);
	align-items: center;
	min-height: 610px;
}

.ash-hero__copy {
	max-width: 660px;
}

.ash-kicker {
	margin-bottom: 10px;
	color: var(--ash-gold);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* The wordmark is not the page's heading except on the front page -- inside, the heading belongs to
   what the page is about. Same type, different tag. */
.ash-hero h1,
.ash-hero__wordmark {
	margin: 0;
	color: var(--ash-gold-strong);
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(64px, 10vw, 124px);
	line-height: 0.9;
	letter-spacing: 0;
	text-shadow: 0 10px 38px rgb(0 0 0 / 0.62);
}

.ash-hero__copy p {
	max-width: 560px;
	margin: 28px 0 0;
	color: var(--ash-text);
	font-size: clamp(18px, 2vw, 22px);
}

.ash-hero__actions,
.ash-auth__actions,
.ash-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-top: 24px;
}

.ash-button,
.ash-form button,
.ash-admin-news button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid var(--ash-border);
	border-radius: 8px;
	background: var(--ash-panel-solid);
	color: var(--ash-text);
	font-weight: 800;
	cursor: pointer;
}

.ash-button--primary,
.ash-form button,
.ash-admin-news button {
	border-color: rgb(240 207 137 / 0.58);
	background: linear-gradient(180deg, #9a3d25, #612313);
	color: #fff4df;
}

.ash-button--ghost {
	background: rgb(0 0 0 / 0.3);
}

.ash-auth {
	border: 1px solid var(--ash-border);
	border-radius: 10px;
	background: var(--ash-panel);
	box-shadow: var(--ash-shadow);
	backdrop-filter: blur(8px);
}

.ash-auth__tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-bottom: 1px solid var(--ash-border);
}

.ash-auth__tabs button {
	height: 54px;
	border: 0;
	border-right: 1px solid var(--ash-border);
	background: transparent;
	color: var(--ash-muted);
	font-weight: 800;
	cursor: pointer;
}

.ash-auth__tabs button:last-child {
	border-right: 0;
}

.ash-auth__tabs button.is-active {
	background: rgb(154 61 37 / 0.38);
	color: var(--ash-gold-strong);
}

.ash-auth__panel {
	padding: 24px;
}

/* Login failures show as a small red line under the buttons, not a banner. */
.ash-auth__error {
	margin: 10px 0 0;
	color: var(--ash-red);
	font-size: 13px;
	line-height: 1.45;
}

.ash-auth__error a {
	color: var(--ash-gold-strong);
}

.ash-auth__eyebrow {
	color: var(--ash-green);
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
}

.ash-auth__greeting {
	font-size: 15px !important;
	font-family: "Trebuchet MS", Arial, sans-serif !important;
	line-height: 1.35 !important;
}

.ash-auth h2,
.ash-section h1,
.ash-section h2,
.ash-rating h2 {
	margin: 0 0 16px;
	color: var(--ash-gold-strong);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 30px;
	line-height: 1.15;
	letter-spacing: 0;
}

.ash-form {
	display: grid;
	gap: 14px;
}

.ash-form--compact {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--ash-border);
}

.ash-form label {
	display: grid;
	gap: 6px;
	color: var(--ash-muted);
	font-size: 13px;
	font-weight: 800;
}

.ash-form input,
.ash-form select,
.ash-form textarea,
.ash-admin-news input,
.ash-admin-news textarea {
	width: 100%;
	min-height: 42px;
	border: 1px solid rgb(240 207 137 / 0.26);
	border-radius: 8px;
	background: rgb(7 5 4 / 0.72);
	color: var(--ash-text);
	padding: 10px 12px;
}

.ash-form input.is-invalid,
.ash-form select.is-invalid,
.ash-form textarea.is-invalid {
	border-color: #d84a36;
	box-shadow: 0 0 0 2px rgb(216 74 54 / 0.28);
}

.ash-form textarea,
.ash-admin-news textarea {
	min-height: 116px;
	resize: vertical;
}

.ash-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.ash-form__grid--date {
	grid-template-columns: 1fr 1fr;
}

.ash-form__row {
	justify-content: space-between;
	margin-top: 4px;
}

.ash-captcha {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.ash-captcha img {
	display: block;
	width: 107px;
	height: 26px;
	border: 1px solid rgb(240 207 137 / 0.28);
	background: rgb(255 255 255 / 0.1);
}

/* No refresh button meant a player who could not read the code -- or hit a stale image after a
   back-button restore -- had no way out but reloading the whole page. */
.ash-captcha__refresh {
	flex: none;
	width: 28px;
	height: 28px;
	padding: 0;
	font-size: 16px;
	line-height: 1;
	border: 1px solid rgb(240 207 137 / 0.28);
	border-radius: 6px;
	background: rgb(240 207 137 / 0.08);
	color: var(--ash-gold);
	cursor: pointer;
}

.ash-captcha__refresh:hover { background: rgb(240 207 137 / 0.16); color: var(--ash-gold-strong); }
.ash-captcha__refresh.is-spinning { animation: ash-captcha-spin .5s linear; }

@keyframes ash-captcha-spin { to { transform: rotate(360deg); } }

.ash-captcha input[name="keycode"] { flex: 1 1 120px; min-width: 100px; }

.ash-check {
	display: flex !important;
	grid-template-columns: none !important;
	gap: 10px !important;
	align-items: flex-start;
	font-weight: 600 !important;
	line-height: 1.35;
}

.ash-check input {
	width: 18px;
	min-height: 18px;
	margin-top: 2px;
}

.ash-form__message,
.ash-error,
.ash-notice {
	min-height: 24px;
	padding: 10px 12px;
	border-radius: 8px;
	background: rgb(0 0 0 / 0.26);
	color: var(--ash-muted);
}

/* An empty status line drew a dark rounded strip above the submit button for no reason -- there was
   nothing to report yet. Hide it until it has something to say. */
.ash-form__message:empty {
	display: none;
}

/* The birthday group: a label over the day/month pair and a line saying what it is for, so the two
   bare number boxes stop reading as an unexplained requirement. */
.ash-fieldgroup { margin-bottom: var(--ash-space, 16px); }
.ash-fieldgroup__label {
	margin-bottom: 6px;
	color: var(--ash-text);
	font-size: 14px;
}
.ash-fieldgroup__hint {
	margin: 6px 0 0;
	color: var(--ash-muted);
	font-size: 12px;
	line-height: 1.4;
}

.ash-error {
	margin-bottom: 16px;
	border: 1px solid rgb(217 103 79 / 0.45);
	color: #ffb7a8;
}

.ash-notice {
	margin-bottom: 16px;
	border: 1px solid rgb(141 192 111 / 0.42);
	color: #d7f2c7;
}

.ash-main {
	display: grid;
	gap: 28px;
	padding: 32px clamp(18px, 4vw, 56px) 72px;
}

.ash-section {
	border: 1px solid var(--ash-border);
	border-radius: 10px;
	background: var(--ash-panel);
	box-shadow: var(--ash-shadow);
	padding: clamp(22px, 4vw, 34px);
}

.ash-section--wide {
	width: 100%;
}

.ash-section__head {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	align-items: flex-start;
	margin-bottom: 18px;
}

.ash-home-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.ash-card {
	overflow: hidden;
	border: 1px solid var(--ash-border);
	border-radius: 10px;
	background: var(--ash-panel);
	box-shadow: 0 16px 54px rgb(0 0 0 / 0.26);
}

.ash-card img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.ash-card div {
	padding: 20px;
}

.ash-card h2 {
	margin: 0 0 10px;
	color: var(--ash-gold-strong);
	font-size: 24px;
	line-height: 1.15;
}

.ash-card p,
.ash-news p,
.ash-muted,
.ash-legal p,
.ash-empty {
	color: var(--ash-muted);
}

.ash-columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 28px;
}

.ash-news {
	padding: 18px 0;
	border-top: 1px solid var(--ash-border);
}

.ash-news:first-of-type {
	border-top: 0;
}

.ash-news time {
	display: block;
	margin-bottom: 6px;
	color: var(--ash-muted);
	font-size: 13px;
	font-weight: 700;
}

.ash-news h3 {
	margin: 0 0 8px;
	color: var(--ash-gold-strong);
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: 0;
}

.ash-news p {
	margin: 0;
}

.ash-news--full h3 {
	font-size: 32px;
}

.ash-news__body {
	color: var(--ash-text);
}

.ash-news__body img {
	max-width: 100%;
	height: auto;
}

.ash-rating {
	border-left: 1px solid var(--ash-border);
	padding-left: 24px;
}

.ash-rating__row {
	display: grid;
	grid-template-columns: 34px 1fr auto;
	gap: 10px;
	align-items: center;
	padding: 10px 0;
	border-top: 1px solid var(--ash-border);
	color: var(--ash-text);
}

.ash-rating__row span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: rgb(154 61 37 / 0.44);
	color: var(--ash-gold-strong);
	font-weight: 800;
}

.ash-rating__row small {
	color: var(--ash-muted);
}

.ash-rating__more {
	display: inline-block;
	margin-top: 18px;
	font-weight: 800;
}

.ash-rating-table {
	display: grid;
	gap: 0;
}

.ash-rating-table__row {
	display: grid;
	grid-template-columns: 52px 1fr 120px;
	gap: 14px;
	align-items: center;
	min-height: 48px;
	border-top: 1px solid var(--ash-border);
	color: var(--ash-text);
}

.ash-rating-table__row:first-child {
	border-top: 0;
}

.ash-rating-table__row span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: rgb(154 61 37 / 0.44);
	color: var(--ash-gold-strong);
	font-weight: 800;
}

.ash-rating-table__row small {
	color: var(--ash-muted);
	text-align: right;
}

.ash-about {
	display: grid;
	gap: 24px;
}

.ash-about__intro {
	max-width: 850px;
	color: var(--ash-muted);
}

.ash-about__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.ash-about__grid article {
	overflow: hidden;
	border: 1px solid var(--ash-border);
	border-radius: 10px;
	background: rgb(0 0 0 / 0.22);
}

.ash-about__grid img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.ash-about__grid h3 {
	margin: 18px 18px 8px;
	color: var(--ash-gold-strong);
	font-size: 22px;
}

.ash-about__grid p {
	margin: 0 18px 20px;
	color: var(--ash-muted);
}

/* ── Real screenshots ──────────────────────────────────────
   Actual game views, not promo art. The two location shots run full width; the character screen is
   tall and narrow, so it is capped and centred rather than blown up. */
.ash-shots {
	margin-top: 36px;
}

.ash-shots h2 {
	margin: 0 0 18px;
	color: var(--ash-gold-strong);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 26px;
}

.ash-shot {
	margin: 0 0 20px;
	border: 1px solid var(--ash-border);
	border-radius: 10px;
	overflow: hidden;
	background: var(--ash-panel);
	box-shadow: var(--ash-shadow);
}

.ash-shot img {
	display: block;
	width: 100%;
	height: auto;
}

.ash-shot figcaption {
	padding: 10px 14px;
	color: var(--ash-muted);
	font-size: 13px;
}

.ash-shot--portrait {
	max-width: 420px;
	margin-left: auto;
	margin-right: auto;
}

.ash-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}

.ash-pagination a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	border: 1px solid var(--ash-border);
	border-radius: 8px;
	background: rgb(0 0 0 / 0.26);
	font-weight: 800;
}

.ash-pagination a.is-active {
	background: rgb(154 61 37 / 0.58);
	color: #fff;
}

.ash-admin-news {
	display: grid;
	gap: 12px;
	margin-bottom: 22px;
	padding: 16px;
	border: 1px solid var(--ash-border);
	border-radius: 10px;
	background: rgb(0 0 0 / 0.2);
}

.ash-legal {
	max-width: 860px;
	margin-inline: auto;
}

.ash-legal h3 {
	margin: 24px 0 8px;
	color: var(--ash-gold);
}

.ash-legal ul {
	color: var(--ash-muted);
}

.ash-restore {
	max-width: 640px;
	margin-inline: auto;
}

.ash-footer {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	padding: 0 clamp(18px, 4vw, 56px) 42px;
	color: var(--ash-muted);
}

.ash-footer nav {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* ── Cookie notice ─────────────────────────────────────────
   A pinned bar, not a paragraph dumped at the foot of the page. Shows on every public
   section until the visitor accepts it (JS toggles [hidden]). */
.ash-cookie-notice {
	position: fixed;
	right: 18px;
	bottom: 18px;
	left: 18px;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	max-width: 860px;
	margin: 0 auto;
	padding: 14px 16px;
	border: 1px solid var(--ash-border);
	border-radius: 8px;
	background: var(--ash-panel-solid);
	box-shadow: var(--ash-shadow);
}

.ash-cookie-notice[hidden] {
	display: none;
}

.ash-cookie-notice p {
	margin: 0;
	color: var(--ash-muted);
	font-size: 13px;
}

.ash-cookie-notice button {
	min-height: 36px;
	padding: 6px 14px;
	border: 1px solid var(--ash-border);
	border-radius: 8px;
	background: linear-gradient(180deg, #9a3d25, #612313);
	color: #fff4df;
	font-weight: 800;
	cursor: pointer;
}

@media (max-width: 900px) {
	.ash-cookie-notice {
		flex-direction: column;
	}
}

/* ── The world, in numbers ────────────────────────────────
   Counted from the game's own tables (index.php ashWorldStats), so the front page cannot promise
   content that was cut. A row of four; on a phone, two by two. */
.ash-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	text-align: center;
}

.ash-stat b {
	display: block;
	color: var(--ash-gold-strong);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 40px;
	line-height: 1.1;
}

.ash-stat span {
	display: block;
	margin-top: 6px;
	color: var(--ash-muted);
	font-size: 14px;
}

/* ── The phone that is coming ─────────────────────────────
   Said plainly, and said once: the app is not out yet, and a badge that links nowhere is worse than
   a sentence that tells the truth. */
.ash-app {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.ash-app p {
	margin: 0;
	max-width: 62ch;
}

.ash-app__badge {
	flex: none;
	padding: 12px 20px;
	border: 1px dashed var(--ash-border);
	border-radius: 10px;
	color: var(--ash-gold);
	font-weight: bold;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* A page that does not exist says so, instead of quietly serving the front page with a 200. */
.ash-notfound {
	text-align: center;
}

.ash-notfound .ash-hero__actions {
	justify-content: center;
}

.ash-notfound p {
	margin: 0 auto 24px;
	max-width: 56ch;
}

@media (max-width: 900px) {
	.ash-stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.ash-app {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* A heading that introduces the block under it is not a panel of its own. */
.ash-section--plain {
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}


/* ── The library ──────────────────────────────────────────
   Fourteen articles about how the game works -- the only real depth the public site has, and the
   material a search engine actually wants. It used to render in a shell of its own: no logo, no nav,
   no footer, no way back into the game, serif text on a near-white sheet over grey. It is part of
   the site now, on the site's own colours, and it reads like a book: contents, chapters, and a way
   to the next page. */
.ash-main--wide {
	width: min(1240px, 100%);
}

.lib-layout {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 22px;
	align-items: start;
}

.lib-menu {
	position: sticky;
	top: 18px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 18px;
	border: 1px solid var(--ash-border);
	border-radius: 10px;
	background: var(--ash-panel);
	box-shadow: var(--ash-shadow);
}

.lib-menu .lib-home {
	margin-bottom: 8px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--ash-border);
	color: var(--ash-gold-strong);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 20px;
}

.lib-menu .lib-title {
	display: block;
	margin: 14px 0 4px;
	color: var(--ash-gold);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lib-menu .lib-title:first-of-type {
	margin-top: 4px;
}

.lib-menu a.lib-link {
	display: block;
	padding: 5px 8px;
	border-radius: 6px;
	color: var(--ash-text);
	line-height: 1.35;
}

.lib-menu a.lib-link:hover {
	background: rgb(240 207 137 / 0.08);
	color: var(--ash-gold-strong);
}

/* Where you are in the book. Without it a twelve-item menu is twelve identical links. */
.lib-menu a.is-current {
	background: rgb(240 207 137 / 0.12);
	color: var(--ash-gold-strong);
	font-weight: 700;
}

/* The home link is a header, not a menu row: it is already the largest, gold, rule-underlined item,
   so the current-item box just wraps it in an oversized slab. Mark it current by weight alone. */
.lib-menu a.lib-home.is-current {
	background: none;
	font-weight: 700;
}

.lib-main {
	padding: 30px 34px 34px;
}

.lib-crumbs {
	margin-bottom: 14px;
	color: var(--ash-muted);
	font-size: 13px;
}

.lib-crumbs span {
	margin: 0 6px;
	opacity: 0.6;
}

.lib-crumbs b {
	color: var(--ash-text);
	font-weight: 600;
}

.lib-article h1 {
	margin: 0 0 18px;
	color: var(--ash-gold-strong);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 34px;
	line-height: 1.15;
}

.lib-prose {
	color: var(--ash-text);
	font-size: 16px;
	line-height: 1.7;
}

.lib-prose p { margin: 0 0 14px; }
.lib-prose ul, .lib-prose ol { margin: 0 0 16px; padding-left: 22px; }
.lib-prose li { margin-bottom: 6px; }
.lib-prose a { color: var(--ash-gold); text-decoration: underline; }
.lib-prose a:hover { color: var(--ash-gold-strong); }
.lib-prose b, .lib-prose strong { color: var(--ash-gold-strong); }
.lib-prose img { max-width: 100%; height: auto; border-radius: 8px; }

.lib-prose h2 {
	margin: 28px 0 12px;
	color: var(--ash-gold-strong);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 24px;
}

.lib-prose h3 {
	margin: 22px 0 10px;
	color: var(--ash-gold);
	font-size: 18px;
}

/* A wide table (the experience ladder is 60 rows of numbers) scrolls inside itself rather than
   pushing the page sideways. */
.lib-prose table {
	display: block;
	overflow-x: auto;
	width: 100%;
	margin: 0 0 18px;
	border-collapse: collapse;
}

.lib-prose th,
.lib-prose td {
	padding: 7px 12px;
	border: 1px solid var(--ash-border);
	text-align: left;
}

.lib-prose th {
	background: rgb(240 207 137 / 0.09);
	color: var(--ash-gold-strong);
}

.lib-prose tbody tr:nth-child(even) {
	background: rgb(255 255 255 / 0.03);
}

/* The contents page: what a book opens on. */
.lib-contents {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 18px;
	margin-top: 32px;
	padding-top: 26px;
	border-top: 1px solid var(--ash-border);
}

.lib-contents__chapter h2 {
	margin: 0 0 10px;
	color: var(--ash-gold);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lib-contents__chapter ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lib-contents__chapter li {
	margin-bottom: 6px;
}

.lib-contents__chapter a {
	color: var(--ash-text);
}

.lib-contents__chapter a:hover {
	color: var(--ash-gold-strong);
}

/* Read one page, land on the next. A wiki with no forward link is a wiki you leave. */
.lib-pager {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	margin-top: 34px;
	padding-top: 20px;
	border-top: 1px solid var(--ash-border);
}

.lib-pager__link {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-width: 46%;
	padding: 10px 14px;
	border: 1px solid var(--ash-border);
	border-radius: 8px;
	color: var(--ash-text);
}

.lib-pager__link:hover {
	background: rgb(240 207 137 / 0.08);
}

.lib-pager__link span {
	color: var(--ash-muted);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.lib-pager__link b {
	color: var(--ash-gold-strong);
}

.lib-pager__link--next {
	margin-left: auto;
	text-align: right;
}

.lib-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 26px;
	padding: 18px 20px;
	border: 1px solid var(--ash-border);
	border-radius: 10px;
	background: rgb(240 207 137 / 0.05);
}

.lib-cta p {
	margin: 0;
	color: var(--ash-muted);
}

@media (max-width: 900px) {
	.lib-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.lib-menu {
		position: static;
	}

	.lib-main {
		padding: 22px 18px 24px;
	}

	.lib-pager {
		flex-direction: column;
	}

	.lib-pager__link {
		max-width: none;
	}

	.lib-pager__link--next {
		text-align: left;
	}
}

/* The 404's illustration: a wanderer at an archway onto nothing -- the page is a dead end, and says
   so in a picture before it says so in words. */
.ash-notfound__art {
	display: block;
	width: 100%;
	max-width: 640px;
	margin: 0 auto var(--ash-space, 24px);
	border-radius: 12px;
	box-shadow: 0 16px 54px rgb(0 0 0 / 0.3);
}

/* The about page opens on the world it describes: a city street between fights. */
.ash-about__banner {
	display: block;
	width: 100%;
	margin: 0 0 22px;
	border-radius: 12px;
	box-shadow: 0 16px 54px rgb(0 0 0 / 0.26);
}