/*!
Theme Name: Tiffany Hunt
Theme URI: https://tiffanyhuntromance.com/
Author: Wild Ink Publishing
Author URI: https://tiffanyhuntromance.com/
Description: Books-first author theme for tiffanyhuntromance.com. Built on Underscores.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: tiffanyhunt

Based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Design tokens
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
# Components
	- Navigation
	- Site header and footer
	- Posts and pages
	- Media
	- Captions
	- Galleries
	- Book page
	- Buy links
	- Signup callout
	- Books archive
	- Homepage
	- Pages (About, Contact, Bonus Content, Content Warnings)
	- Links page
	- Book cards
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Design tokens
--------------------------------------------------------------*/
:root {
	/* Palette, sampled from the Book 1 cover (S&S edition). Every colour on the site is set in this block. */
	--th-ink: #0f0f13; /* Cover black. */
	--th-white: #fff;
	--th-gold: #e3bd63; /* Bright gold. On ink only (10.7:1); fails on light backgrounds (1.7:1). */
	--th-gold-deep: #8b6f32; /* Gold for text on the page and white (4.5:1). Fails on parchment (3.5:1). */
	--th-parchment: #ebdeb1; /* The subtitle ribbon on the Dark Lord covers. */

	/* Roles: what components use. */
	--th-bg: #fbf9f7;
	--th-surface: var(--th-white);
	--th-text: #3b3636;
	--th-muted: #676161; /* 4.5:1 on parchment as well as the page. */
	--th-heading: var(--th-ink);
	--th-link: var(--th-gold-deep);
	--th-accent: var(--th-gold); /* Button labels and borders on ink or dark bands, never a fill. */
	--th-button: var(--th-ink);
	--th-on-dark: var(--th-white);
	--th-focus: var(--th-ink);
	--th-tint: var(--th-parchment); /* Newsletter and bonus blocks. Links inside them are ink. */
	--th-tint-line: #e1d2a4;
	--th-line: #e8e1dc;
	--th-field-line: #847d73; /* Form field borders: 3:1 on white and on parchment. */
	--th-font-body: "Quicksand", -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif;
	--th-font-display: "Lora", georgia, "Times New Roman", serif;
	--th-font-poster: "Bebas Neue", "Arial Narrow", sans-serif; /* Homepage hero status label only. One weight (400). */
	--th-radius: 10px;
	--th-gutter: 16px;
	--th-max: 1120px;
	--th-shadow-cover: 0 12px 32px color-mix(in srgb, var(--th-ink) 20%, transparent);
}

@media screen and (min-width: 50em) {

	:root {
		--th-gutter: 32px;
	}
}

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: var(--th-text);
	font-family: var(--th-font-body);
	font-size: 1.0625rem;
	line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	color: var(--th-heading);
	font-family: var(--th-font-display);
	font-weight: 600;
	line-height: 1.2;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: var(--th-line);
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted var(--th-muted);
	cursor: help;
}

mark,
ins {
	background: var(--th-tint);
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: var(--th-bg);
}

hr {
	background-color: var(--th-line);
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

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

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a,
a:visited {
	color: var(--th-link);
}

a:hover,
a:active {
	color: var(--th-heading);
}

:focus-visible {
	outline: 2px solid var(--th-focus);
	outline-offset: 2px;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid var(--th-button);
	border-radius: var(--th-radius);
	background: var(--th-button);
	color: var(--th-accent);
	font-weight: 700;
	line-height: 1;
	min-height: 44px;
	padding: 0.6em 1.2em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: var(--th-accent);
	color: var(--th-on-dark);
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: var(--th-accent);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: var(--th-text);
	border: 1px solid var(--th-field-line);
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: var(--th-heading);
}

select {
	border: 1px solid var(--th-field-line);
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px color-mix(in srgb, var(--th-ink) 20%, transparent);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 56em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

/* Site header and footer
--------------------------------------------- */
.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px max(var(--th-gutter), calc((100% - var(--th-max)) / 2));
	background: var(--th-surface);
	border-bottom: 1px solid var(--th-line);
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.custom-logo {
	display: block;
	width: auto;
	max-height: 48px;
}

.site-title {
	margin: 0;
	font-family: var(--th-font-display);
	font-size: 1.375rem;
	font-weight: 600;
}

.site-title a,
.site-title a:visited {
	color: var(--th-heading);
	text-decoration: none;
}

/* The logo already says the name; keep the title for screen readers. */
.wp-custom-logo .site-title,
.site-description {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.main-navigation {
	width: auto;
}

.menu-toggle {
	background: transparent;
	border: 1px solid var(--th-line);
	color: var(--th-heading);
}

.menu-toggle:hover {
	background: var(--th-tint);
	border-color: var(--th-tint-line);
	color: var(--th-heading);
}

.main-navigation a,
.main-navigation a:visited {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 10px;
	color: var(--th-heading);
	font-weight: 600;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
	color: var(--th-link);
}

/* Small screens: the open menu drops down under the header, full width. */
.main-navigation.toggled ul {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: 100;
	padding: 8px var(--th-gutter) 16px;
	background: var(--th-surface);
	border-bottom: 1px solid var(--th-line);
	box-shadow: 0 8px 16px color-mix(in srgb, var(--th-ink) 8%, transparent);
}

@media screen and (min-width: 56em) {

	.main-navigation ul,
	.main-navigation.toggled ul {
		position: static;
		gap: 4px;
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
	}
}

.site-main {
	flex: 1;
	width: 100%;
	max-width: var(--th-max);
	margin: 0 auto;
	padding: 24px var(--th-gutter) 56px;
}

.site-footer {
	padding: 28px var(--th-gutter);
	background: var(--th-surface);
	border-top: 1px solid var(--th-line);
	color: var(--th-muted);
	font-size: 0.9375rem;
	text-align: center;
}

.footer-navigation ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 8px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}

.footer-navigation a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 8px;
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.book__blurb.entry-content {
	margin: 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/* Book page
--------------------------------------------- */

/* Phones: cover beside the title block, buy links straight after, then the rest.
   Wide screens: sticky cover on the left, everything else in the right column. */
.book__layout {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	grid-template-areas:
		"cover header"
		"buy buy"
		"body body";
	gap: 24px 18px;
	align-items: start;
}

.book__cover {
	grid-area: cover;
}

.book__cover img {
	display: block;
	width: 100%;
	border-radius: 4px;
	box-shadow: var(--th-shadow-cover);
}

.book__header {
	grid-area: header;
	align-self: center;
}

.book__buy {
	grid-area: buy;
}

.book__body {
	grid-area: body;
	min-width: 0;
}

@media screen and (min-width: 50em) {

	.book__layout {
		grid-template-columns: 340px minmax(0, 1fr);
		grid-template-rows: auto auto 1fr;
		grid-template-areas:
			"cover header"
			"cover buy"
			"cover body";
		column-gap: 56px;
		row-gap: 28px;
	}

	.book__cover {
		position: sticky;
		top: 24px;
	}

	.book__header {
		align-self: end;
	}
}

.book__series {
	margin: 0 0 0.5em;
	color: var(--th-link);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.book__title {
	margin: 0;
	font-size: clamp(1.5rem, 4vw + 0.75rem, 2.75rem);
	overflow-wrap: break-word;
}

.book__title-sub {
	display: block;
	margin-top: 0.25em;
	color: var(--th-muted);
	font-size: 0.6em;
	font-weight: 500;
}

.book__tagline {
	margin: 0.75em 0 0;
	color: var(--th-muted);
	font-family: var(--th-font-display);
	font-size: 1.0625rem;
	font-style: italic;
}

.book__release {
	display: inline-block;
	margin: 0.9em 0 0;
	padding: 4px 12px;
	border-radius: 8px;
	background: var(--th-tint);
	color: var(--th-heading);
	font-size: 0.8125rem;
	font-weight: 700;
}

/* Accolades: outlined pills in the text colour (book page, homepage hero). */
.accolades {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.accolades__item {
	padding: 4px 12px;
	border: 1px solid currentcolor;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

.book__accolades {
	margin-top: 0.9em;
	color: var(--th-heading);
}

.book__buy-heading {
	margin: 0 0 10px;
	color: var(--th-muted);
	font-family: var(--th-font-body);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.book__buy .buy-links + .book__buy-heading {
	margin-top: 20px;
}

.book__body > * {
	margin-top: 0;
	margin-bottom: 0;
}

.book__body > * + * {
	margin-top: 36px;
}

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

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

.book__blurb ul,
.book__blurb ol {
	margin-left: 1.25em;
}

.book__section-heading {
	margin: 0 0 0.75em;
	font-size: 1.375rem;
}

/* Content warnings: native disclosure, styled. */
.book__warnings {
	background: var(--th-surface);
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius);
}

.book__warnings summary {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 10px 16px;
	color: var(--th-heading);
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}

.book__warnings summary::-webkit-details-marker {
	display: none;
}

.book__warnings summary::before {
	content: "";
	flex: none;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 7px solid var(--th-heading);
	transition: transform 0.15s ease;
}

.book__warnings[open] summary::before {
	transform: rotate(90deg);
}

.book__warnings-hint {
	color: var(--th-muted);
	font-weight: 500;
}

.book__warnings[open] .book__warnings-hint {
	display: none;
}

.book__warnings-text {
	padding: 0 16px 4px 31px;
}

/* Tropes */
.trope-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.trope-list__item {
	padding: 6px 14px;
	background: var(--th-surface);
	border: 1px solid var(--th-line);
	border-radius: 999px;
	font-size: 0.9375rem;
	font-weight: 600;
}

/* Other editions */
.edition-list {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.edition {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	padding: 14px;
	background: var(--th-surface);
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius);
}

.edition__cover {
	display: block;
	width: 72px;
	border-radius: 3px;
}

.edition__label {
	margin: 0 0 10px;
	font-size: 1.0625rem;
}

/* More in this series */
.book__series-more {
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid var(--th-line);
}

/* Buy links
--------------------------------------------- */
.buy-links {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media screen and (min-width: 50em) {

	.buy-links {
		grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
	}
}

.buy-link {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 52px;
	padding: 8px 10px;
	background: var(--th-surface);
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius);
	text-align: center;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.buy-link__logo {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 28px;
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter 0.15s ease, opacity 0.15s ease;
}

.buy-link__name {
	color: var(--th-heading);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.25;
}

/* Colour on hover, keyboard focus, and tap (:active). */
.buy-link:hover,
.buy-link:focus-visible,
.buy-link:active {
	border-color: var(--th-heading);
	box-shadow: 0 2px 10px color-mix(in srgb, var(--th-ink) 12%, transparent);
}

.buy-link:hover .buy-link__logo,
.buy-link:focus-visible .buy-link__logo,
.buy-link:active .buy-link__logo {
	filter: none;
	opacity: 1;
}

.buy-link:hover .buy-link__name,
.buy-link:focus-visible .buy-link__name,
.buy-link:active .buy-link__name {
	color: var(--th-link);
}

.buy-links--compact {
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}

.buy-links--compact .buy-link {
	min-height: 44px;
}

/* Signup callout (book pages, Bonus Content, homepage band)
--------------------------------------------- */

/* Colours come from .signup-colours (end of this section). */
.signup-callout {
	padding: 24px 20px;
	border: 1px solid var(--th-signup-line, var(--th-tint-line));
	border-radius: 16px;
}

@media screen and (min-width: 50em) {

	.signup-callout {
		padding: 28px 32px;
	}
}

.signup-callout__heading {
	margin: 0 0 0.25em;
	font-size: 1.5rem;
}

.signup-callout__intro {
	margin: 0 0 0.75em;
}

.bonus-items {
	margin: 0 0 1.25em;
	padding: 0;
	list-style: none;
}

.bonus-item {
	position: relative;
	margin: 0.4em 0;
	padding-left: 1.6em;
}

.bonus-item::before {
	content: "\2726"; /* ✦ */
	position: absolute;
	left: 0;
	color: var(--th-heading);
}

.bonus-item--pending {
	color: var(--th-muted);
}

.bonus-item--pending::before {
	content: "\25C7"; /* ◇ */
	color: var(--th-muted);
}

/* The theme's MailerLite form: email + button on one row when there's room. */
.signup-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.signup-form .signup-form__email {
	flex: 1 1 220px;
	min-width: 0;
	min-height: 48px;
	padding: 0 14px;
	background: var(--th-surface);
	border: 1px solid var(--th-field-line);
	border-radius: var(--th-radius);
	color: var(--th-text);
	font-size: 1rem;
}

.signup-form .signup-form__email:focus {
	border-color: var(--th-focus);
	color: var(--th-heading);
}

/* White label, gold on hover, like the homepage hero button. */
.signup-form__button {
	flex: 0 0 auto;
	min-height: 48px;
	padding: 0 22px;
	color: var(--th-on-dark);
}

.signup-form__button:hover,
.signup-form__button:focus-visible {
	color: var(--th-accent);
}

.signup-form__status {
	margin: 8px 0 0;
	color: var(--th-heading);
	font-size: 0.9375rem;
	font-weight: 600;
}

.signup-form__status:empty {
	display: none;
}

.signup-form__success {
	margin: 0;
	padding: 14px 16px;
	background: var(--th-surface);
	border-left: 4px solid var(--th-heading);
	border-radius: var(--th-radius);
	color: var(--th-heading);
	font-weight: 600;
}

.signup-form--placeholder {
	margin: 0;
	padding: 16px;
	background: var(--th-surface);
	border: 2px dashed var(--th-field-line);
	border-radius: var(--th-radius);
	color: var(--th-muted);
	font-size: 0.9375rem;
}

/* Signup colours: the homepage band and the callouts take the colours from
   Site Settings → Homepage → Newsletter colours, set inline on the block
   (tiffanyhunt_signup_attributes()). The fallbacks are the parchment
   defaults. The admin checks the text against the background and the label
   against the button (4.5:1). Links take the text colour, never gold (gold
   fails on parchment, 3.5:1). The email field and thank-you box stay white. */
.signup-colours {
	--th-signup-line: color-mix(in srgb, var(--th-signup-bg, var(--th-tint)) 94%, var(--th-ink));
	background: var(--th-signup-bg, var(--th-tint));
	color: var(--th-signup-text, var(--th-text));
}

.signup-colours .signup-callout__heading,
.signup-colours .home-signup__heading,
.signup-colours a,
.signup-colours a:visited,
.signup-colours .signup-form__status,
.signup-colours .bonus-item::before {
	color: var(--th-signup-text, var(--th-heading));
}

/* "Coming with release" bonus items: a softer shade of the text colour,
   worked out to stay readable (or the theme's muted grey on parchment). */
.signup-colours .bonus-item--pending,
.signup-colours .bonus-item--pending::before {
	color: var(--th-signup-muted, var(--th-muted));
}

.signup-colours :focus-visible {
	outline-color: var(--th-signup-text, var(--th-focus));
}

.signup-colours .signup-form__button {
	background: var(--th-signup-button, var(--th-button));
	border-color: var(--th-signup-button, var(--th-button));
	color: var(--th-signup-button-text, var(--th-on-dark));
}

.signup-colours .signup-form__button:hover,
.signup-colours .signup-form__button:focus {
	border-color: var(--th-accent);
}

.signup-colours .signup-form__button:hover,
.signup-colours .signup-form__button:focus-visible {
	color: var(--th-accent);
}

/* When gold wouldn't be readable on the button colour (or the label is
   already gold), hover underlines the label instead, as on the hero. */
.signup-colours--plain-hover .signup-form__button:hover,
.signup-colours--plain-hover .signup-form__button:focus,
.signup-colours--plain-hover .signup-form__button:focus-visible {
	border-color: var(--th-signup-button, var(--th-button));
	color: var(--th-signup-button-text, var(--th-on-dark));
}

.signup-colours--plain-hover .signup-form__button:hover,
.signup-colours--plain-hover .signup-form__button:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Books archive: covers grouped by series
--------------------------------------------- */
.page-header .page-title {
	margin: 0 0 28px;
	font-size: clamp(1.75rem, 3vw + 1rem, 2.75rem);
}

.series-group + .series-group {
	margin-top: 48px;
	padding-top: 36px;
	border-top: 1px solid var(--th-line);
}

.series-group__title {
	margin: 0 0 20px;
	font-size: clamp(1.25rem, 1.5vw + 0.9rem, 1.75rem);
}

/* Optional series tagline (Books → Series → Tagline), close under the name
   like a subtitle; the gap above the covers stays 20px. Muted passes 4.5:1
   on the page background. */
.series-group__title:has(+ .series-group__tagline) {
	margin-bottom: 4px;
}

.series-group__tagline {
	margin: 0 0 20px;
	color: var(--th-muted);
	font-family: var(--th-font-display);
	font-size: clamp(1rem, 0.3vw + 0.95rem, 1.125rem);
	font-style: italic;
	line-height: 1.4;
}

/* Homepage
--------------------------------------------- */
.site-main--home {
	--th-hero-overhang: 72px; /* How far the hero image sticks out past its colour band. */
	max-width: none;
	padding: 0 0 64px;
}

@media screen and (min-width: 50em) {

	.site-main--home {
		--th-hero-overhang: 48px;
	}
}

.home-section {
	max-width: var(--th-max);
	margin: 0 auto;
	padding: 0 var(--th-gutter);
}

.home-section__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 16px;
	margin-bottom: 20px;
}

.home-section__heading {
	margin: 0 0 0.5em;
	font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
}

.home-section__header .home-section__heading {
	margin: 0;
}

.home-section__more {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 700;
}

/* Hero: the featured book's image beside its text panel (stacked, image
   first, on phones) on a colour or picture band (Site Settings → Homepage).
   The band is drawn shorter than the hero, so the image sticks out past its
   top edge, and on wide screens past its bottom edge too, over the
   newsletter band. Text colour is white or ink only, so the admin contrast
   check holds. */
.home-hero {
	--th-hero-text: var(--th-on-dark);
	--th-hero-button-text: var(--th-on-dark);
	position: relative;
	z-index: 1; /* The image overlaps the next band on wide screens. */
	margin-top: 16px;
	padding-bottom: 40px;
	color: var(--th-hero-text);
}

.home-hero::before {
	content: "";
	position: absolute;
	inset: var(--th-hero-overhang) 0 0;
	z-index: -1;
	background: var(--th-hero-bg, var(--th-ink));
}

.home-hero--dark-text {
	--th-hero-text: var(--th-ink);
}

.home-hero--button-dark-text {
	--th-hero-button-text: var(--th-ink);
}

/* Image band: the picture fills the band's shape, cropped to fit around its
   focus point (Site Settings → Homepage → Image focus, inline as
   --th-hero-focus). The ink ::before band behind it shows while it loads. */
.home-hero__backdrop {
	position: absolute;
	inset: var(--th-hero-overhang) 0 0;
	z-index: -1;
	overflow: hidden;
}

.home-hero__backdrop img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--th-hero-focus, 50% 50%);
}

/* A soft halo in the band's dark (or light) keeps the words readable where
   they cross a busy part of the picture. Not on the button, which has its
   own solid colour. */
.home-hero--image .home-hero__status,
.home-hero--image .home-hero__title,
.home-hero--image .home-hero__tagline {
	text-shadow: 0 0 10px color-mix(in srgb, var(--th-ink) 90%, transparent), 0 1px 2px var(--th-ink);
}

.home-hero--image.home-hero--dark-text .home-hero__status,
.home-hero--image.home-hero--dark-text .home-hero__title,
.home-hero--image.home-hero--dark-text .home-hero__tagline {
	text-shadow: 0 0 10px color-mix(in srgb, var(--th-white) 90%, transparent), 0 1px 2px var(--th-white);
}

/* The status label's thin lines get the same edge as the letters. */
.home-hero--image .home-hero__status::before,
.home-hero--image .home-hero__status::after {
	box-shadow: 0 1px 2px var(--th-ink);
}

.home-hero--image.home-hero--dark-text .home-hero__status::before,
.home-hero--image.home-hero--dark-text .home-hero__status::after {
	box-shadow: 0 1px 2px var(--th-white);
}

/* No band (Site Settings → Homepage → Background): the hero sits on the page
   like any other section, in the page's heading colour, with no overhang. */
.home-hero--plain {
	--th-hero-overhang: 0px; /* Needs the unit: it's used inside calc(). */
	--th-hero-text: var(--th-heading);
	padding: 16px 0 48px;
}

.home-hero--plain::before {
	content: none;
}

.home-hero__inner {
	display: grid;
	gap: 24px;
	justify-items: center;
	text-align: center;
}

@media screen and (min-width: 50em) {

	.home-hero {
		margin-top: 24px;
		margin-bottom: calc(-1 * var(--th-hero-overhang));
		padding-bottom: 0;
	}

	.home-hero::before,
	.home-hero__backdrop {
		inset: var(--th-hero-overhang) 0;
	}

	/* The image column fits the picture's shape (--th-hero-ratio, its width
	   ÷ height, set inline by hero.php): wide enough to show it 480px tall,
	   up to 60% of the row. So a tall book gets a narrow column and sits
	   close to the text, and a wide mockup (two formats side by side) gets
	   room to be tall enough to stick out of the band. The pair is centred
	   on the page; the text stays centred in its column. */
	.home-hero__inner {
		grid-template-columns: min(calc(480px * var(--th-hero-ratio, 0.75)), 60%) minmax(0, 38rem);
		gap: 40px;
		align-items: center;
		justify-content: center;
	}

	.home-hero__media {
		width: 100%;
	}

	/* Keeps the text inside the band, however long the tagline runs. 20px
	   (was 28px before the big title) keeps the book overhanging by ~45px at
	   1280px wide with a two-line title and a ~160-character tagline. */
	.home-hero__panel {
		padding-block: calc(var(--th-hero-overhang) + 20px);
	}

	/* Very wide pictures (1.5:1 or wider, TIFFANYHUNT_HERO_WIDE_RATIO) can't
	   be tall enough beside the text, so they sit above it, as on phones,
	   sticking out of the band's top edge. */
	.home-hero--wide-image .home-hero__inner,
	.home-hero--no-image .home-hero__inner {
		grid-template-columns: minmax(0, 38rem);
		gap: 24px;
	}

	.home-hero--wide-image .home-hero__media {
		justify-self: center;
		width: auto;
	}

	.home-hero--wide-image .home-hero__panel {
		padding-top: 0;
	}

	.home-hero--plain {
		padding: 24px 0 56px;
	}
}

.home-hero__media {
	display: block;
	max-width: 100%;
}

/* The picture keeps its shape and its box hugs it (no empty margins inside),
   so its edges are what sticks out of the band. Phones: up to 260px tall,
   above the text. Wide screens: the full width of its column, which is
   sized from its shape, so up to 480px tall. */
.home-hero__image {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 260px;
}

@media screen and (min-width: 50em) {

	.home-hero__image {
		width: 100%;
		max-height: none;
	}

	.home-hero--wide-image .home-hero__image {
		width: auto;
		max-height: 340px;
	}
}

/* The flat cover (no mockup set) gets the cover treatment. */
.home-hero__image--cover {
	border-radius: 4px;
	box-shadow: var(--th-shadow-cover);
}

/* A size container, so the title can shrink with a narrower column. */
.home-hero__panel {
	width: 100%;
	max-width: 38rem;
	container-type: inline-size;
}

/* The book title is the headline; the status is a small, widely spaced
   label above it between two short lines in the text colour (the user's
   call, 2026-10-27). Bebas Neue has a single weight; asking for bold would
   make the browser fake one. The second hero's label is the same, smaller. */
.home-hero__status,
.home-start__status {
	display: flex;
	gap: 0.85em;
	align-items: center;
	justify-content: center;
	margin: 0;
	font-family: var(--th-font-poster);
	font-size: clamp(1.25rem, 0.5vw + 1.1rem, 1.625rem);
	font-weight: 400;
	letter-spacing: 0.22em;
	line-height: 1;
	text-transform: uppercase;
}

/* A fixed length, so the label row stays inside the title below it: at 2em
   it fits within every current book's widest title line on computers, and
   within the Dark Lord titles on phones (measured 2026-10-27). */
.home-hero__status::before,
.home-hero__status::after,
.home-start__status::before,
.home-start__status::after {
	content: "";
	flex: 0 0 2em;
	height: 1px;
	background: currentcolor;
}

/* The letter spacing also follows the last letter; this evens up the gaps. */
.home-hero__status::after,
.home-start__status::after {
	margin-left: -0.22em;
}

/* Beside a wide mockup the text column is narrower, and the title shrinks
   with it (11.5% of the column) so it keeps to two lines. Beside a tall
   book, and on phones, the clamp is the smaller value and wins. */
.home-hero__title {
	margin: 0.3em 0 0;
	color: inherit;
	font-size: min(clamp(2.25rem, 2.4vw + 1.4rem, 3.75rem), 11.5cqi);
	font-weight: 500;
	line-height: 1.04;
	text-wrap: balance;
}

/* "(And Other War Crimes)": smaller, in italics, on its own line. */
.home-hero__title-sub,
.home-start__title-sub {
	display: block;
	margin-top: 0.3em;
	font-size: max(0.4em, 1rem);
	font-style: italic;
	font-weight: 400;
	line-height: 1.3;
}

.home-hero__tagline,
.home-start__tagline {
	max-width: 34rem;
	margin: 0.9em auto 0;
	font-family: var(--th-font-display);
	font-size: 1rem;
	font-style: italic;
	line-height: 1.5;
}

.home-hero .home-hero__accolades,
.home-start .home-start__accolades {
	justify-content: center;
	margin-top: 18px;
}

.home-hero__button,
.home-hero__button:visited,
.home-start__button,
.home-start__button:visited {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	margin-top: 24px;
	padding: 0 28px;
	background: var(--th-button);
	border: 2px solid var(--th-button);
	border-radius: var(--th-radius);
	color: var(--th-on-dark);
	font-weight: 700;
	text-decoration: none;
	transition: color 0.15s ease;
}

.home-hero__button:hover,
.home-hero__button:focus-visible,
.home-start__button:hover,
.home-start__button:focus-visible {
	color: var(--th-accent);
}

/* On a band the whole button takes the Button colour (Site Settings →
   Homepage), with white or ink text checked against it in the admin. Hover
   underlines the label, which works whatever the colours are. */
.home-hero:not(.home-hero--plain) .home-hero__button,
.home-hero:not(.home-hero--plain) .home-hero__button:visited {
	background: var(--th-hero-button, var(--th-button));
	border-color: var(--th-hero-button, var(--th-button));
	color: var(--th-hero-button-text);
}

.home-hero:not(.home-hero--plain) .home-hero__button:hover,
.home-hero:not(.home-hero--plain) .home-hero__button:focus-visible {
	color: var(--th-hero-button-text);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* The outline follows the panel text, so it shows on dark and light bands. */
.home-hero__button:focus-visible {
	outline-color: var(--th-hero-text);
}

/* Newsletter band: full width, straight after the hero. Colours come from
   .signup-colours (Signup callout section). */
.home-signup {
	padding: 32px 0;
	border-bottom: 1px solid var(--th-signup-line, var(--th-tint-line));
}

.home-signup__inner {
	display: grid;
	gap: 16px 48px;
	align-items: center;
}

@media screen and (min-width: 50em) {

	.home-signup {
		padding: 40px 0;
	}

	.home-signup__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	}
}

.home-signup__heading {
	margin: 0 0 0.3em;
	font-size: clamp(1.375rem, 1.5vw + 0.9rem, 1.875rem);
}

.home-signup__intro,
.home-signup__more {
	margin: 0;
}

.home-signup__more {
	margin-top: 0.5em;
	font-weight: 700;
}

/* Second hero (Site Settings → Homepage → Second hero): a small headline,
   then one book mirroring the hero on the page background, with the text on
   the left and the book on the right on wide screens; on phones the book
   comes first, as in the hero. Label, title line, tagline, and button share
   the hero's styles above, smaller. */
.home-start {
	padding-top: 40px;
}

.home-start__heading {
	margin: 0 0 28px;
	font-size: clamp(1.375rem, 1vw + 1rem, 1.75rem);
	text-align: center;
	text-wrap: balance;
}

.home-start__inner {
	display: grid;
	gap: 24px;
	justify-items: center;
	text-align: center;
}

.home-start__media {
	display: block;
	max-width: 100%;
}

.home-start__image {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 260px;
}

.home-start__image--cover {
	border-radius: 4px;
	box-shadow: var(--th-shadow-cover);
}

.home-start__panel {
	width: 100%;
	max-width: 34rem;
	color: var(--th-heading);
}

/* Phones: shorter lines than the hero's, so the label row stays inside this
   smaller title (measured on the Dark Lord titles at 375px wide). */
.home-start__status {
	gap: 0.7em;
	font-size: clamp(1.125rem, 0.4vw + 1rem, 1.375rem);
}

.home-start__status::before,
.home-start__status::after {
	flex-basis: 1.25em;
}

.home-start__title {
	margin: 0.35em 0 0;
	color: inherit;
	font-size: clamp(1.75rem, 1.6vw + 1.2rem, 2.625rem);
	font-weight: 500;
	line-height: 1.06;
	text-wrap: balance;
}

.home-start__series {
	margin: 0.9em 0 0;
	color: var(--th-muted);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.home-start__tagline {
	margin-top: 0.6em;
}

/* The picture's column fits its shape (--th-start-ratio, width ÷ height,
   set inline by start.php): up to 400px tall, and no more than 45% of the
   row, so a wide mockup leaves the text room. */
@media screen and (min-width: 50em) {

	.home-start {
		padding-top: 64px;
	}

	.home-start__heading {
		margin-bottom: 36px;
	}

	.home-start__status {
		gap: 0.85em;
	}

	.home-start__status::before,
	.home-start__status::after {
		flex-basis: 2em;
	}

	.home-start__inner {
		grid-template-columns: minmax(0, 34rem) min(calc(400px * var(--th-start-ratio, 0.75)), 45%);
		gap: 56px;
		align-items: center;
		justify-content: center;
	}

	.home-start--no-image .home-start__inner {
		grid-template-columns: minmax(0, 34rem);
	}

	.home-start__media {
		order: 2;
		width: 100%;
	}

	.home-start__image {
		width: 100%;
		max-height: none;
	}
}

.home-books {
	padding-top: 48px;
}

/* Room for the hero image that overhangs the band below it on wide screens
   (the newsletter band is hidden from visitors until a form is set up). */
@media screen and (min-width: 50em) {

	.home-hero:not(.home-hero--plain) + .home-signup {
		padding-top: calc(40px + var(--th-hero-overhang));
	}

	.home-hero:not(.home-hero--plain) + .home-start {
		padding-top: calc(64px + var(--th-hero-overhang));
	}

	.home-hero:not(.home-hero--plain) + .home-books {
		padding-top: calc(48px + var(--th-hero-overhang));
	}
}

/* Bio teaser */
.home-bio {
	padding-top: 56px;
}

.home-bio__inner {
	display: grid;
	gap: 24px;
	align-items: center;
}

@media screen and (min-width: 50em) {

	.home-bio__inner {
		grid-template-columns: 280px minmax(0, 1fr);
		gap: 48px;
	}
}

.home-bio__image {
	display: block;
	width: 100%;
	max-width: 220px;
	border-radius: 16px;
}

@media screen and (min-width: 50em) {

	.home-bio__image {
		max-width: 280px;
	}
}

.home-bio__text {
	max-width: 62ch;
}

.home-bio__text p {
	margin: 0 0 1em;
}

.home-bio__link {
	font-weight: 700;
}

/* Pages (About, Contact, Bonus Content, Content Warnings)
--------------------------------------------- */
.site-main--narrow {
	max-width: calc(780px + 2 * var(--th-gutter));
}

.entry-header .entry-title {
	margin: 0 0 24px;
	font-size: clamp(1.75rem, 3vw + 1rem, 2.75rem);
}

.entry-content > :first-child,
.page-intro > :first-child {
	margin-top: 0;
}

.entry-content img {
	border-radius: 12px;
}

.entry-content h2,
.entry-content h3 {
	margin: 1.6em 0 0.5em;
}

.entry-footer {
	margin-top: 32px;
	font-size: 0.875rem;
}

.page-intro {
	margin: 0 0 28px;
}

.page-intro p:last-child {
	margin-bottom: 0;
}

.bonus-page__signup {
	margin-bottom: 48px;
}

/* About: small photo top-left, bio wrapping around and under it. */
.about {
	display: flow-root;
}

.about__photo {
	float: left;
	width: 120px;
	margin: 4px 18px 10px 0;
}

.about__photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

@media screen and (min-width: 50em) {

	.about__photo {
		width: 200px;
		margin: 6px 32px 16px 0;
	}
}

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

/* Book rows: small cover + title + details (bonus items, content warnings). */
.book-rows {
	display: grid;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.book-row {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	scroll-margin-top: 24px;
}

@media screen and (min-width: 50em) {

	.book-row {
		grid-template-columns: 96px minmax(0, 1fr);
		gap: 24px;
	}
}

.book-row__cover img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 3px;
	box-shadow: 0 6px 16px color-mix(in srgb, var(--th-ink) 16%, transparent);
}

.book-row__title {
	margin: 0 0 4px;
	font-size: 1.125rem;
}

.book-row__title a,
.book-row__title a:visited {
	display: inline-flex;
	align-items: center;
	min-height: 44px; /* Tap target, even for one-line titles. */
	color: var(--th-heading);
	text-decoration: none;
}

.book-row__title a:hover {
	color: var(--th-link);
	text-decoration: underline;
}

.book-row__note {
	margin: 0;
	color: var(--th-muted);
	font-style: italic;
}

.book-row .bonus-items {
	margin: 0;
}

/* Contact form (Fluent Forms), matched to the site's inputs and buttons. */
.site-main .fluentform {
	--fluentform-danger: var(--th-heading); /* Required asterisk and error text. The plugin's red is 2.8:1. */
	--fluentform-primary: var(--th-focus);
}

.site-main .fluentform .ff-el-input--label label {
	color: var(--th-heading);
	font-weight: 700;
}

.site-main .fluentform .ff-el-form-control {
	min-height: 48px;
	padding: 10px 14px;
	background: var(--th-surface);
	border: 1px solid var(--th-field-line);
	border-radius: var(--th-radius);
	color: var(--th-text);
	font-family: var(--th-font-body);
	font-size: 1rem;
}

.site-main .fluentform textarea.ff-el-form-control {
	min-height: 160px;
}

.site-main .fluentform .ff-el-form-control:focus {
	border-color: var(--th-focus);
	outline: 2px solid var(--th-focus);
	outline-offset: 1px;
}

.site-main .fluentform .ff-btn-submit {
	min-height: 48px;
	padding: 0 24px;
	border-radius: var(--th-radius);
	font-family: var(--th-font-body);
	font-size: 1rem;
	font-weight: 700;
}

.site-main .fluentform .ff-message-success {
	border-left: 4px solid var(--th-heading);
	border-radius: var(--th-radius);
	box-shadow: none;
	background: var(--th-surface);
}

/* Links page
--------------------------------------------- */
.site-main--links {
	max-width: calc(520px + 2 * var(--th-gutter));
	padding-top: 32px;
	text-align: center;
}

.links-page__avatar {
	display: block;
	width: 96px;
	height: 96px;
	margin: 0 auto 16px;
	border-radius: 50%;
	object-fit: cover;
}

.links-page__name {
	margin: 0;
	font-size: 1.75rem;
}

.links-page__tagline {
	margin: 4px 0 0;
	color: var(--th-muted);
}

.links-page__intro {
	margin-top: 16px;
}

.link-buttons {
	display: grid;
	gap: 12px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.link-button,
.link-button:visited {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 56px;
	padding: 8px 20px;
	background: var(--th-surface);
	border: 1px solid var(--th-line);
	border-radius: 14px;
	color: var(--th-heading);
	font-weight: 700;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.link-button:hover,
.link-button:focus-visible,
.link-button:active {
	border-color: var(--th-heading);
	box-shadow: 0 2px 12px color-mix(in srgb, var(--th-ink) 12%, transparent);
	color: var(--th-link);
}

/* With a thumbnail, keep the label centred in the space beside it. */
.link-button--thumb {
	justify-content: flex-start;
	padding-left: 8px;
}

.link-button__thumb {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	object-fit: cover;
}

.link-button--thumb .link-button__label {
	flex: 1;
	padding-right: 44px;
}

/* Book cards (series lists, books archive, homepage grid)
--------------------------------------------- */
.book-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 28px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media screen and (min-width: 50em) {

	.book-grid {
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
		gap: 36px 28px;
	}
}

.book-card,
.book-card:visited {
	display: block;
	color: var(--th-heading);
	text-decoration: none;
}

.book-card__cover {
	display: block;
	width: 100%;
	border-radius: 3px;
	box-shadow: 0 8px 20px color-mix(in srgb, var(--th-ink) 16%, transparent);
	transition: transform 0.2s ease;
}

.book-card:hover .book-card__cover,
.book-card:focus-visible .book-card__cover {
	transform: translateY(-4px);
}

.book-card__title {
	display: block;
	margin-top: 12px;
	font-family: var(--th-font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
}

.book-card:hover .book-card__title {
	color: var(--th-link);
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--th-surface);
	border-radius: 3px;
	box-shadow: 0 0 2px 2px color-mix(in srgb, var(--th-ink) 60%, transparent);
	clip: auto !important;
	clip-path: none;
	color: var(--th-heading);
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}