/* ==========================================================================
   Fonts (self-hosted, copied from @fontsource packages at build time)
   ========================================================================== */

@font-face {
	font-family: "Alegreya";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("/assets/fonts/alegreya-latin-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Alegreya";
	font-style: italic;
	font-weight: 400 900;
	font-display: swap;
	src: url("/assets/fonts/alegreya-latin-wght-italic.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Accented letters such as the ā in "Gāt" */
@font-face {
	font-family: "Alegreya";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("/assets/fonts/alegreya-latin-ext-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Alegreya";
	font-style: italic;
	font-weight: 400 900;
	font-display: swap;
	src: url("/assets/fonts/alegreya-latin-ext-wght-italic.woff2") format("woff2-variations");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Used by the character generator to measure how text will fit on the printed sheet. */
@font-face {
	font-family: "IM Fell English";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/im-fell-english-latin-400-normal.woff2") format("woff2");
}

@font-face {
	font-family: "IM Fell English SC";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/im-fell-english-sc-latin-400-normal.woff2") format("woff2");
}

/* ==========================================================================
   Palette
   ========================================================================== */

/* Crossfades between pages, in browsers that support it */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}
}

:root {
	color-scheme: dark;

	/* Forest floor */
	--moss-deep: oklch(0.26 0.05 150);
	--earth-deep: oklch(0.2 0.035 55);

	/* Text */
	--text: oklch(0.88 0.035 75);
	--text-muted: oklch(0.74 0.035 70);
	--heading: oklch(0.87 0.13 92);
	--link: oklch(0.84 0.11 128);
	--link-hover: var(--heading);

	/* Lines and surfaces */
	--rule: oklch(0.45 0.045 65);
	--rule-faint: oklch(0.36 0.035 65);
	--surface: oklch(0.18 0.03 60 / 0.45);
	--selection: oklch(0.45 0.08 135);

	/* Status labels and change highlights */
	--alpha: oklch(0.78 0.13 50);
	--change: oklch(0.88 0.2 128 / 0.16);
	--change-line: oklch(0.88 0.2 128 / 0.7);

	--font-body: "Alegreya", "Iowan Old Style", Georgia, serif;
	--font-heading: "IM Fell English SC", "Alegreya", Georgia, serif;

	--measure: 46rem;
}

/* ==========================================================================
   Page
   ========================================================================== */

html {
	min-height: 100%;
	/* Keeps the page from shifting when the open menu hides the scrollbar */
	scrollbar-gutter: stable;
	background-color: var(--earth-deep);
	/* Fallback for browsers without gradient interpolation spaces */
	background-image: linear-gradient(170deg, var(--moss-deep), var(--earth-deep));
	/* oklch interpolation avoids the muddy grey band halfway between green and brown */
	background-image: linear-gradient(170deg in oklch, var(--moss-deep), var(--earth-deep));
}

/* Misty forest across the top of the page, fading into the background gradient */
body::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: -1;
	/* Centred; on very wide screens the faded sides blend into the page */
	width: min(100%, 110rem);
	margin-inline: auto;
	/* Roughly the cropped image's 2000 × 675 proportions, within limits */
	height: clamp(18rem, 34vw, 36rem);
	background-image: url("/assets/forest/forest-1000.jpg");
	background-image: image-set(
		url("/assets/forest/forest-1000.avif") type("image/avif"),
		url("/assets/forest/forest-1000.jpg") type("image/jpeg")
	);
	background-position: center top;
	background-size: cover;
	opacity: 0.7;
	/* Fade out towards the bottom and both sides; the two masks are intersected */
	--fade-down: linear-gradient(to bottom, black, rgb(0 0 0 / 0.55) 35%, rgb(0 0 0 / 0.15) 65%, transparent 90%);
	--fade-sides: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
	-webkit-mask-image: var(--fade-down), var(--fade-sides);
	-webkit-mask-composite: source-in;
	mask-image: var(--fade-down), var(--fade-sides);
	mask-composite: intersect;
	pointer-events: none;
}

@media (min-width: 50rem), (min-resolution: 2dppx) {
	body::before {
		background-image: url("/assets/forest/forest-2000.jpg");
		background-image: image-set(
			url("/assets/forest/forest-2000.avif") type("image/avif"),
			url("/assets/forest/forest-2000.jpg") type("image/jpeg")
		);
	}
}

body {
	max-width: var(--measure);
	margin: 0 auto;
	padding: clamp(3rem, 1rem + 7vw, 9rem) 1rem 4rem;
	font-family: var(--font-body);
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	line-height: 1.6;
	color: var(--text);
	font-kerning: normal;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

::selection {
	background-color: var(--selection);
	color: var(--text);
}

/* ==========================================================================
   Skip link and focus
   ========================================================================== */

a[href="#main"] {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 1;
	padding: 0.5rem 1rem;
	background-color: var(--earth-deep);
	transform: translateY(-200%);
}

a[href="#main"]:focus {
	transform: none;
}

:focus-visible {
	outline: 3px solid var(--heading);
	outline-offset: 3px;
	border-radius: 2px;
}

main:focus {
	outline: none;
}

/* ==========================================================================
   Header, nav, footer
   ========================================================================== */

body > header {
	padding-top: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 2rem;
}

body > header p {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 1.5rem;
}

body > header p a {
	color: var(--heading);
	text-decoration: none;
}

/* Slide-out navigation */
html.site-nav-open,
html:has(.site-search-dialog[open]) {
	overflow: hidden;
}

.site-nav-toggle {
	right: 0.75rem;
	z-index: 30;
}

.site-nav-toggle,
.site-search-toggle {
	position: fixed;
	top: 0.75rem;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background-color: var(--earth-deep);
	border: 1px solid var(--rule);
	border-radius: 0.5rem;
	color: var(--heading);
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s;
}

.site-nav-toggle:hover,
.site-search-toggle:hover {
	border-color: var(--link);
	color: var(--link);
}

.site-nav-bars {
	position: relative;
	display: block;
	width: 1.25rem;
	height: 0.875rem;
}

.site-nav-bars span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: currentColor;
	border-radius: 1px;
	transition: transform 0.25s, opacity 0.15s, top 0.25s;
}

.site-nav-bars span:nth-child(1) {
	top: 0;
}

.site-nav-bars span:nth-child(2) {
	top: calc(50% - 1px);
}

.site-nav-bars span:nth-child(3) {
	top: calc(100% - 2px);
}

/* The bars become a cross, so the same button closes the menu */
.is-open .site-nav-bars span:nth-child(1) {
	top: calc(50% - 1px);
	transform: rotate(45deg);
}

.is-open .site-nav-bars span:nth-child(2) {
	opacity: 0;
}

.is-open .site-nav-bars span:nth-child(3) {
	top: calc(50% - 1px);
	transform: rotate(-45deg);
}

.site-nav-backdrop {
	position: fixed;
	inset: 0;
	z-index: 10;
	background-color: oklch(0.1 0.02 60 / 0.6);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s, visibility 0s linear 0.25s;
}

.is-open .site-nav-backdrop {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.25s;
}

.site-nav-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
	width: min(24rem, 88vw);
	padding: 4.25rem 1.25rem 2rem;
	overflow-y: auto;
	/* Reaching the end of the menu doesn't carry on scrolling the page */
	overscroll-behavior: contain;
	background-color: var(--earth-deep);
	border-left: 1px solid var(--rule);
	/* Hidden too, so nothing in the closed menu can be tabbed to */
	visibility: hidden;
	transform: translateX(100%);
	transition: transform 0.25s, visibility 0s linear 0.25s;
}

.is-open .site-nav-drawer {
	visibility: visible;
	transform: none;
	transition: transform 0.25s;
}

.site-nav-drawer a {
	color: var(--text);
	text-decoration: none;
}

.site-nav-drawer a:hover {
	color: var(--link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.site-nav-drawer a[aria-current="page"] {
	color: var(--heading);
}

.site-nav-top {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
}

.site-nav-home {
	padding: 0.2rem 0;
}

.site-nav-group {
	margin: 1.5rem 0 0.4rem;
	font-family: var(--font-heading);
	font-size: 1.375rem;
	line-height: 1.1;
	color: var(--heading);
}

.site-nav-pages,
.site-nav-sections {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav-drawer li + li {
	margin-top: 0;
}

.site-nav-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem;
}

.site-nav-row a {
	padding: 0.2rem 0;
	line-height: 1.3;
}

.site-nav-expand {
	flex: none;
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0.25rem;
	color: var(--text-muted);
	cursor: pointer;
}

.site-nav-expand:hover {
	color: var(--link);
}

.site-nav-expand svg {
	width: 0.875rem;
	height: 0.875rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.25s ease;
}

.site-nav-expand[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.site-nav-sections.is-animating {
	overflow: hidden;
}

.site-nav-sections {
	margin: 0.1rem 0 0.5rem;
	padding-left: 0.75rem;
	border-left: 1px solid var(--rule-faint);
	font-size: 0.9em;
}

.site-nav-sections a {
	display: block;
	padding: 0.15rem 0;
	line-height: 1.3;
	color: var(--text-muted);
}

.site-nav-level-3 {
	padding-left: 0.875rem;
}

@media (prefers-reduced-motion: reduce) {
	.site-nav-drawer,
	.site-nav-backdrop,
	.site-nav-bars span,
	.site-nav-expand svg {
		transition: none;
	}
}

/* Site search */
.site-search-toggle {
	/* One button's width plus a gap to the left of the menu toggle. Sits under the open menu. */
	right: 4rem;
	z-index: 5;
}

.site-search-toggle svg,
.site-search-close svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.site-search-dialog {
	width: min(42rem, 100% - 1.5rem);
	max-width: none;
	--top-gap: min(4rem, 10dvh);
	max-height: calc(100dvh - var(--top-gap) - 0.75rem);
	margin: var(--top-gap) auto auto;
	padding: 0;
	overflow: hidden;
	background-color: var(--earth-deep);
	border: 1px solid var(--rule);
	border-radius: 0.5rem;
	color: var(--text);
}

.site-search-dialog[open] {
	display: flex;
}

.site-search-dialog::backdrop {
	background-color: oklch(0.1 0.02 60 / 0.6);
}

.site-search-panel {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	padding: 0.75rem;
}

.site-search-form {
	display: flex;
	gap: 0.5rem;
}

.site-search-form input {
	flex: 1;
	min-width: 0;
	padding: 0.5rem 0.75rem;
	background-color: var(--surface);
	border: 1px solid var(--rule);
	border-radius: 0.375rem;
	color: var(--text);
	font: inherit;
	font-size: 1.125rem;
}

.site-search-form input::placeholder {
	color: var(--text-muted);
}

.site-search-close {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.75rem;
	padding: 0;
	background: none;
	border: 1px solid transparent;
	border-radius: 0.375rem;
	color: var(--text-muted);
	cursor: pointer;
}

.site-search-close:hover {
	color: var(--link);
}

.site-search-status {
	margin: 0;
	color: var(--text-muted);
	font-size: 0.9em;
}

.site-search-status:not(:empty) {
	padding: 0.5rem 0.5rem 0;
}

.site-search-results {
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
}

.site-search-results > li {
	padding: 0.5rem 0;
	border-top: 1px solid var(--rule-faint);
}

.site-search-results > li:first-child {
	margin-top: 0.5rem;
}

.site-search-results ul {
	margin: 0 0 0 0.25rem;
	padding: 0 0 0 0.75rem;
	border-left: 1px solid var(--rule-faint);
	list-style: none;
}

.site-search-results a {
	display: block;
	padding: 0.375rem 0.5rem;
	border-radius: 0.25rem;
	color: var(--text);
	text-decoration: none;
}

/* The scrolling list would clip an outline drawn outside the link */
.site-search-results a:focus-visible {
	outline-offset: -3px;
}

.site-search-results a:hover .site-search-title {
	color: var(--link-hover);
}

.site-search-title {
	display: block;
	color: var(--link);
}

.site-search-results > li > a .site-search-title {
	font-size: 1.125rem;
	font-weight: 700;
}

.site-search-excerpt {
	display: block;
	color: var(--text-muted);
	font-size: 0.9em;
}

.site-search-excerpt mark {
	background-color: oklch(0.87 0.13 92 / 0.22);
	color: var(--text);
}

/* Character generator */
character-generator {
	--control-height: 2.5rem;
	display: block;
}

character-generator:not(:defined),
character-generator [hidden] {
	display: none;
}

character-generator label,
character-generator .gen-label {
	display: block;
	font-size: 0.9em;
	color: var(--text-muted);
}

/* A label for something that isn't a form field, spaced like the ones that are */
character-generator .gen-label {
	margin: 0 0 0.125rem;
}

character-generator :is(input:not([type="file"]), select, textarea) {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin-top: 0.125rem;
	padding: 0.375rem 0.5rem;
	background-color: var(--surface);
	border: 1px solid var(--rule);
	border-radius: 0.25rem;
	color: var(--text);
	font: inherit;
	font-size: 1rem;
}

character-generator :is(input:not([type="file"]), select) {
	height: var(--control-height);
}

character-generator select option,
character-generator select optgroup {
	background-color: var(--earth-deep);
}

character-generator button,
character-generator .gen-file-button {
	padding: 0.25rem 0.625rem;
	background: none;
	border: 1px solid var(--rule);
	border-radius: 0.25rem;
	color: var(--link);
	font: inherit;
	font-size: 0.875rem;
	cursor: pointer;
}

character-generator button:hover,
character-generator .gen-file-button:hover {
	border-color: var(--link-hover);
	color: var(--link-hover);
}

character-generator button:disabled {
	opacity: 0.6;
	cursor: progress;
}

character-generator button.gen-primary {
	height: var(--control-height);
	padding: 0 1.25rem;
	background-color: var(--heading);
	border-color: var(--heading);
	color: var(--earth-deep);
	font-size: 1rem;
	font-weight: 700;
}

character-generator button.gen-primary:hover {
	background-color: var(--link);
	border-color: var(--link);
	color: var(--earth-deep);
}

character-generator details summary {
	color: var(--link);
	font-size: 0.875rem;
	cursor: pointer;
}

.gen-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.gen-controls label {
	flex: 1 1 16rem;
}

/* Stays in view at the bottom of the screen, and comes to rest at the end of the form */
.gen-messages {
	position: sticky;
	bottom: 0.75rem;
	margin-inline: 1rem;
	font-size: 0.9em;
	font-weight: 700;
}

/* Always rendered, however empty, so screen readers announce new messages */
.gen-status {
	margin: 0;
}

/* Solid colours with a shadow, so messages read clearly over whatever they float above */
.gen-status:not(:empty) {
	margin-top: 0.75rem;
	padding: 0.5rem 0.75rem;
	background-color: var(--rule);
	border-radius: 0.25rem;
	box-shadow: 0 0.25rem 1rem oklch(0 0 0 / 0.45);
	color: var(--text);
}

.gen-character {
	display: grid;
	gap: 1rem;
	grid-template-columns: minmax(0, 1fr);
}

.gen-portrait {
	display: grid;
	place-items: center;
	aspect-ratio: 224 / 337;
	background-color: var(--surface);
	border: 1px solid var(--rule);
	border-radius: 0.25rem;
	color: var(--text-muted);
	overflow: hidden;
}

.gen-portrait img:not([hidden]) {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
}

.gen-portrait p {
	margin: 0;
}

/* Stands in for the browser's file control, whose "No file chosen" text can't be updated */
character-generator .gen-file-button {
	display: inline-block;
	line-height: normal;
}

/* The real input is hidden, so its keyboard focus shows on the button beside it */
:focus-visible + .gen-file-button {
	outline: 3px solid var(--heading);
	outline-offset: 3px;
}

/* The portrait's buttons stretch to fill each line of its column */
portrait-picker {
	display: block;
	container-type: inline-size;
}

portrait-picker .gen-buttons > :is(button, label) {
	flex: 1 0 auto;
	text-align: center;
}

/* All three only share a line from about 18rem wide. Below that, Remove wraps onto a line of
   its own, where it keeps its natural width rather than stretching across the column. */
@container (width < 18rem) {
	portrait-picker .gen-buttons:has(> [data-role="use-cult"]:not([hidden])) > [data-role="clear"] {
		flex-grow: 0;
	}
}

.gen-credit {
	margin: 0.375rem 0 0;
	color: var(--text-muted);
	font-size: 0.8em;
}

.gen-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin-top: 0.5rem;
}

.gen-details {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

/* Read-only, so a label and a link on one line, at the same sizes as the fields around it */
.gen-cult {
	margin: 0;
}

.gen-cult .gen-label {
	display: inline;
	margin: 0 0.375rem 0 0;
}

.gen-cult a {
	font-size: 1rem;
}

.gen-row {
	display: grid;
	gap: 0.625rem;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.ability {
	display: grid;
	grid-template-columns: 4.5rem 4rem minmax(0, 1fr);
	align-items: center;
	column-gap: 0.625rem;
	margin-bottom: 0.375rem;
}

/* Six cells across the rest of the row, like the score grid on the printed sheet */
.ability-pips {
	display: flex;
	gap: 0.25rem;
}

.ability-pips span {
	flex: 1;
	height: 1.75rem;
	border: 1px solid var(--rule);
	border-radius: 0.25rem;
}

.ability-pips .is-base {
	background-color: var(--heading);
	border-color: var(--heading);
}

.ability-pips .is-bonus {
	background-color: var(--link);
	border-color: var(--link);
}

.ability-bonus {
	grid-column: 3;
	color: var(--text-muted);
	font-size: 0.8em;
}

/* The running totals: brighter than the labels around them */
.ability-total,
.gen-heading p {
	margin: 0;
	color: var(--heading);
	font-variant-numeric: lining-nums tabular-nums;
	font-weight: 600;
}

.ability-total {
	font-size: 0.9em;
	text-align: right;
}

.gen-warnings {
	max-height: 40vh;
	margin: 0.75rem 0 0;
	padding: 0.5rem 0.75rem 0.5rem 1.75rem;
	overflow-y: auto;
	background-color: var(--alpha);
	border-radius: 0.25rem;
	box-shadow: 0 0.25rem 1rem oklch(0 0 0 / 0.45);
	color: var(--earth-deep);
}

.gen-warnings li::marker {
	color: inherit;
}

.gen-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
}


.gift-grid-cards {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: minmax(0, 1fr);
}

gift-card {
	display: block;
	min-width: 0;
	padding: 0.625rem;
	background-color: var(--surface);
	border: 1px solid var(--rule);
	border-radius: 0.25rem;
	font-size: 0.9em;
	overflow-wrap: break-word;
}

gift-card h3 {
	margin: 0 0 0.25rem;
	font-size: 1.1em;
	line-height: 1.15;
}

gift-card p {
	margin: 0 0 0.25rem;
}

.gift-card-meta {
	color: var(--text-muted);
	font-size: 0.8em;
}

.gift-card-text {
	white-space: pre-line;
}

.gift-card-full p {
	color: var(--text-muted);
	white-space: pre-line;
}

.gift-card-eyes {
	margin: 0.25rem 0;
	padding-left: 0.75rem;
	border-left: 1px solid var(--rule);
	list-style: none;
}

.gift-card-warning {
	color: var(--alpha);
	font-size: 0.85em;
}

.gift-card-edit {
	margin-top: 0.5rem;
}

.gift-card-edit[open] > :not(summary) {
	margin-top: 0.375rem;
}

.gen-add {
	display: grid;
	gap: 0.75rem;
	margin-top: 1rem;
}

.gen-add form {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.5rem;
}

.gen-add form button {
	align-self: start;
}

sheet-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	align-items: center;
	margin-top: 1.5rem;
}

sheet-actions button {
	height: var(--control-height);
}

@media (min-width: 40rem) {
	.gen-character {
		grid-template-columns: 14.5rem minmax(0, 1fr);
	}

	.gift-grid-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* Mirrors the printed sheet. Gifts beyond its 16 slots follow on below. */
	gift-card {
		grid-column: var(--col) / span var(--width);
		grid-row: var(--row) / span var(--height);
	}

	gift-card.is-extra {
		grid-column: span 2;
		grid-row: auto;
	}
}

body > footer {
	margin-top: 4rem;
	padding-top: 1rem;
	border-top: 1px solid var(--rule-faint);
	color: var(--text-muted);
	font-size: 0.9em;
}

/* Publisher logo, the last thing on every page */
.footer-logo {
	display: block;
	width: 7rem;
	margin: 2rem auto 0;
	opacity: 0.85;
	transition: opacity 0.15s;
}

.footer-logo:hover {
	opacity: 1;
}

.footer-logo img {
	width: 100%;
	margin: 0;
	border-radius: 0;
}

/* "← Back to Home" at the end of every page but the home page */
.back-link {
	margin-top: 3rem;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1,
h2,
h3,
h4 {
	font-family: var(--font-heading);
	font-weight: 400;
	line-height: 1.1;
	color: var(--heading);
	text-shadow: 0 0 1.5rem oklch(0.87 0.13 92 / 0.18);
	text-wrap: balance;
}

h1 {
	margin: 2.5rem 0 1.5rem;
	font-size: clamp(2.75rem, 1.75rem + 4.5vw, 5rem);
	line-height: 0.9;
}

/* Home page: the Wolden logo stands in for the title text */
h1.logo img {
	width: min(100%, 32rem);
	margin: 0 auto;
	border-radius: 0;
}

.tagline {
	text-align: center;
	font-style: italic;
	text-wrap: balance;
}

/* Home page introduction: "Wolden is…" followed by "…" continuations */
.intro {
	margin: 3rem 0;
}

.intro-lead {
	margin-bottom: 1rem;
	font-family: var(--font-heading);
	font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
	line-height: 1.1;
	color: var(--heading);
}

/* Each item opens with "…", so bullets would be noise */
.intro ul {
	padding: 0;
	list-style: none;
}

.intro li + li {
	margin-top: 1rem;
}

/* Home page links to the zines: stacked, then side by side */
.zine-promos {
	display: grid;
	gap: 1.5rem;
	margin: 3rem 0;
}

@media (min-width: 40rem) {
	.zine-promos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.zine-promo {
	display: block;
	text-align: center;
	text-wrap: balance;
}

.zine-promo img {
	width: 100%;
	margin: 0 0 0.75rem;
}

/* Home page link to the character generator: portrait, pitch, and a button-like label */
.cta-card {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-top: 2rem;
	padding: 0.75rem 1.5rem 0.75rem 0.75rem;
	background-color: var(--surface);
	border: 1px solid var(--rule);
	border-radius: 0.5rem;
	color: var(--text);
	text-decoration: none;
	transition: border-color 0.15s;
}

.cta-card:hover {
	border-color: var(--heading);
	color: var(--text);
}

.cta-card picture {
	flex: none;
}

.cta-card img {
	width: 7rem;
	margin: 0;
	border-radius: 0.25rem;
}

.cta-card-text {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 0.5rem;
}

.cta-card-title {
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
	line-height: 1.1;
	color: var(--heading);
}

.cta-card-title .badge {
	font-family: var(--font-body);
	font-size: 0.5em;
}

.cta-card-action {
	padding: 0.4rem 1rem;
	background-color: var(--heading);
	border-radius: 0.25rem;
	color: var(--earth-deep);
	font-weight: 700;
	white-space: nowrap;
	transition: background-color 0.15s;
}

.cta-card:hover .cta-card-action {
	background-color: var(--link);
}

@media (max-width: 30rem) {
	.cta-card {
		gap: 0.75rem;
		padding-right: 0.75rem;
	}

	.cta-card img {
		width: 5rem;
	}
}

h2 {
	margin: 3rem 0 1rem;
	font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
}

h3 {
	margin: 2rem 0 0.75rem;
	font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
}

h4 {
	margin: 1.5rem 0 0.5rem;
	font-size: 1.375rem;
}

p,
ul,
ol,
table {
	margin: 0 0 1.25rem;
}

strong {
	font-weight: 700;
	color: oklch(0.93 0.04 80);
}

a {
	color: var(--link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover {
	color: var(--link-hover);
	text-decoration-thickness: 2px;
}

ul,
ol {
	padding-left: 1.5rem;
}

li + li {
	margin-top: 0.35rem;
}

li::marker {
	color: var(--link);
}

/* "Alpha" / "Beta" label for unfinished pages (`status:` in front matter) */
.badge {
	display: inline-block;
	padding: 0.05em 0.5em 0.1em;
	border: 1px solid currentColor;
	border-radius: 999px;
	color: var(--heading);
	font-size: 0.7em;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
	vertical-align: 0.15em;
}

/* Less finished than beta, so a warmer, more cautionary colour */
.badge-alpha {
	color: var(--alpha);
}

/* Issue that isn't available yet: quieter than the status labels */
.badge-zine {
	color: var(--text-muted);
}

/* Issue with a page to visit: filled, with an arrow, so it reads as a button */
a.badge-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.2em 0.65em;
	background-color: var(--link);
	border-color: var(--link);
	color: var(--earth-deep);
	text-decoration: none;
	transition: background-color 0.15s, border-color 0.15s;
}

a.badge-link:hover {
	background-color: var(--link-hover);
	border-color: var(--link-hover);
	color: var(--earth-deep);
}

.badge-arrow {
	width: 0.7em;
	height: 0.7em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Read by screen readers but not shown */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Text highlighted in Craft: changes since the last playtest */
mark.change {
	padding: 0 0.15em;
	background-color: var(--change);
	border-bottom: 1px dotted var(--change-line);
	border-radius: 0.2em;
	color: inherit;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

mark.change[title] {
	cursor: help;
}

/* Grid of cards with cover images */
.cover-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	padding: 0;
	list-style: none;
}

@media (min-width: 40rem) {
	.cover-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.cover-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 0.75rem;
	background-color: var(--surface);
	border: 1px solid var(--rule-faint);
	border-radius: 0.5rem;
	transition: border-color 0.15s;
}

.cover-card + .cover-card {
	margin-top: 0;
}

.cover-card:hover {
	border-color: var(--link);
}

/* Covers vary in shape and many are cut-outs, so fit them in a shared frame, feet down */
.cover-card img {
	width: 100%;
	aspect-ratio: 4 / 5;
	margin: 0 0 0.75rem;
	border-radius: 0;
	object-fit: contain;
	object-position: center bottom;
}

.cover-card h3 {
	margin: 0;
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3rem);
	line-height: 1.15;
	text-wrap: pretty;
}

.cover-card-link {
	color: var(--heading);
	text-decoration: none;
}

.cover-card-link:hover {
	color: var(--heading);
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

/* Makes the whole card the title link's click area */
.cover-card-link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 0.5rem;
}

.cover-card-link:focus-visible {
	outline: none;
}

.cover-card-link:focus-visible::after {
	outline: 3px solid var(--heading);
	outline-offset: 2px;
}

.cover-card-description {
	margin: 0.4rem 0 0;
	font-size: 0.9em;
	line-height: 1.35;
	color: var(--text-muted);
}

/* Clicks pass through to the card, except on badges that are links themselves */
.cover-card-badges {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem;
	margin: auto 0 0;
	padding-top: 0.6rem;
	pointer-events: none;
}

.cover-card-badges .badge {
	vertical-align: baseline;
}

.cover-card-badges a {
	pointer-events: auto;
}

/* Clears the page edge when jumping to a section from the menu */
h2[id],
h3[id] {
	scroll-margin-top: 1.5rem;
}

/* Downloadable file from Craft: thumbnail, name, and file details */
.file-card {
	margin: 1.5rem 0;
}

.file-card a {
	display: inline-flex;
	align-items: center;
	gap: 1.25rem;
	max-width: 100%;
	padding: 0.75rem 1.5rem 0.75rem 0.75rem;
	background-color: var(--surface);
	border: 1px solid var(--rule);
	border-radius: 0.5rem;
	text-decoration: none;
	transition: border-color 0.15s;
}

.file-card a:hover {
	border-color: var(--link);
}

.file-card picture {
	flex: none;
}

.file-card img {
	display: block;
	width: 5rem;
	margin: 0;
	border-radius: 0.2rem;
}

.file-card-text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.file-card-title {
	font-family: var(--font-heading);
	font-size: 1.375rem;
	line-height: 1.15;
	color: var(--heading);
}

.file-card-meta {
	font-size: 0.875em;
	color: var(--text-muted);
}

/* Sits just under the page title */
.page-status {
	margin: -0.75rem 0 1.5rem;
	font-size: 1.125rem;
}

/* Nested list items (e.g. sub-steps in Craft's numbered lists) */
li > ul,
li > ol {
	margin: 0.35rem 0 0;
}

/* ==========================================================================
   Callouts (sidebars from Craft)
   ========================================================================== */

.callout {
	margin: 2rem 0;
	padding: 1.25rem 1.5rem;
	background-color: var(--surface);
	border-left: 3px solid var(--link);
	border-radius: 0 0.5rem 0.5rem 0;
}

.callout > :first-child {
	margin-top: 0;
}

.callout > :last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Images
   ========================================================================== */

img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 2rem auto;
	border-radius: 0.5rem;
}

/* ==========================================================================
   Tables (roll tables from Craft)
   ========================================================================== */

table {
	width: 100%;
	border-collapse: collapse;
	background-color: var(--surface);
	font-variant-numeric: lining-nums tabular-nums;
}

th,
td {
	padding: 0.5rem 0.75rem;
	text-align: left;
	vertical-align: top;
}

th {
	color: var(--heading);
	border-bottom: 2px solid var(--rule);
}

/* The bold markers from Craft are redundant inside header cells */
th strong {
	color: inherit;
}

td {
	border-bottom: 1px solid var(--rule-faint);
}

tbody tr:nth-child(even) {
	background-color: oklch(0.3 0.03 70 / 0.18);
}

/* Die-roll column */
th:first-child,
td:first-child {
	width: 1%;
	white-space: nowrap;
	text-align: center;
	color: var(--text-muted);
}

th:first-child {
	color: var(--heading);
}

@media (max-width: 30rem) {
	th,
	td {
		padding: 0.4rem 0.5rem;
	}

	table {
		font-size: 0.95em;
	}
}