/*
Theme Name: The Reading Realm
Theme URI: https://thereadingrealm.co.uk
Author: The Reading Realm Ltd
Author URI: https://thereadingrealm.co.uk
Description: A warm, modern theme for The Reading Realm - cream paper, berry accents, book covers front and centre, and a dyslexia-friendly font switch for readers. Plain PHP/CSS, no page builder.
Version: 2.5.2
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: the-reading-realm
Tags: blog, custom-menu, featured-images, threaded-comments, translation-ready, accessibility-ready
*/

/* ==========================================================================
   1. Fonts
   The @font-face rules are NOT here. They are printed inline in <head> by
   trr_font_face_css() in functions.php, using absolute URLs.

   Why: optimisation plugins that combine or rewrite CSS (LiteSpeed's UCSS,
   for one) serve the result from a different directory, which silently
   breaks font paths that are relative to this file.
   ========================================================================== */

/* ==========================================================================
   2. Design tokens
   Change the look here. Every colour pairing used for text passes WCAG AA.
   ========================================================================== */

:root {
	/* Palette */
	--trr-cream: #fbf7f0;           /* page background                   */
	--trr-paper: #fffdf9;           /* cards, inputs                     */
	--trr-sand: #f3e7d3;            /* panels                            */
	--trr-line: #e7daca;            /* hairlines                         */
	--trr-line-strong: #d9c9b4;     /* outlined buttons, inputs          */
	--trr-ink: #2e2621;             /* text - 13.9:1 on cream            */
	--trr-ink-soft: #4a3e35;        /* secondary text                    */
	--trr-muted: #6b5d52;           /* meta - 5.9:1 on cream             */
	--trr-berry: #a8325a;           /* accent - 6:1 on cream             */
	--trr-berry-dark: #8a2649;      /* accent hover                      */
	--trr-ochre: #efc97a;           /* tags - ink on ochre 9.4:1         */
	--trr-choc: #2b211c;            /* footer, overlays                  */
	--trr-choc-line: #4a3b32;
	--trr-on-dark: #f3e7d3;         /* text on choc - 12.9:1             */
	--trr-on-dark-muted: #c9b8a6;   /* secondary text on choc - 8.2:1    */

	/* Type */
	--trr-font-sans: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--trr-font-body: var(--trr-font-sans);
	--trr-font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--trr-font-brand: "Young Serif", Georgia, "Times New Roman", serif; /* site title */
	--trr-display-tracking: -0.015em;

	/* Shape */
	--trr-container: 1280px;
	--trr-gutter: 24px;
	--trr-radius-lg: 28px;
	--trr-radius: 20px;
	--trr-radius-sm: 10px;
	--trr-shadow-cover: 0 18px 32px -16px rgba(43, 33, 28, 0.45), 0 2px 6px rgba(43, 33, 28, 0.08);
	--trr-section-gap: 96px;
}

/* Reader's choice: the dyslexia-friendly font, set by the header toggle. */
.trr-dyslexic {
	--trr-font-body: "Open Dyslexic", var(--trr-font-sans);
	--trr-font-display: "Open Dyslexic", var(--trr-font-sans);
	--trr-display-tracking: 0;
}

/* ==========================================================================
   3. Base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: 96px;
}

body {
	margin: 0;
	background: var(--trr-cream);
	color: var(--trr-ink);
	font-family: var(--trr-font-body);
	font-size: 18px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
	max-width: 100%;
}

img {
	height: auto;
}

a {
	color: var(--trr-berry);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color 0.15s ease;
}

a:hover {
	color: var(--trr-berry-dark);
}

:focus-visible {
	outline: 3px solid var(--trr-berry);
	outline-offset: 3px;
	border-radius: 4px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5em;
	font-family: var(--trr-font-display);
	font-optical-sizing: auto;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: var(--trr-display-tracking);
	color: var(--trr-ink);
}

p {
	margin: 0 0 1em;
}

blockquote {
	margin: 2rem 0;
	padding: 4px 0 4px 24px;
	border-left: 4px solid var(--trr-ochre);
	font-family: var(--trr-font-display);
	font-size: 1.2em;
	font-style: italic;
	color: var(--trr-ink-soft);
}

blockquote p:last-child {
	margin-bottom: 0;
}

code,
pre {
	font-family: ui-monospace, Consolas, Monaco, monospace;
	font-size: 0.9em;
}

pre {
	overflow-x: auto;
	padding: 16px;
	background: var(--trr-sand);
	border-radius: var(--trr-radius-sm);
}

hr {
	height: 1px;
	margin: 2.5rem 0;
	border: 0;
	background: var(--trr-line);
}

table {
	width: 100%;
	border-collapse: collapse;
}

th,
td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--trr-line);
	text-align: left;
}

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

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
	word-wrap: normal !important;
}

.skip-link:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 12px 20px;
	clip: auto;
	clip-path: none;
	background: var(--trr-paper);
	border-radius: 999px;
	box-shadow: 0 4px 16px rgba(43, 33, 28, 0.2);
	color: var(--trr-ink);
	font-weight: 700;
}

.trr-no-scroll {
	overflow: hidden;
}

/* ==========================================================================
   4. Shared pieces: sections, headings, buttons, tags
   ========================================================================== */

.trr-main {
	display: block;
}

.trr-section {
	max-width: var(--trr-container);
	margin: 0 auto;
	padding: var(--trr-section-gap) var(--trr-gutter) 0;
}

.trr-section--chips {
	padding-top: 36px;
}

.trr-section--chips + .trr-posts {
	padding-top: 56px;
}

.trr-main > :last-child {
	padding-bottom: 112px;
}

.trr-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 40px;
	margin-bottom: 32px;
}

.trr-section__intro {
	max-width: 640px;
	color: var(--trr-ink-soft);
}

.trr-section__intro p:last-child {
	margin-bottom: 0;
}

.trr-heading {
	margin: 0 0 12px;
	font-size: clamp(32px, 3.4vw, 42px);
	line-height: 1.1;
}

.trr-section__head .trr-heading:last-child {
	margin-bottom: 0;
}

.trr-heading--small {
	font-size: clamp(26px, 2.6vw, 34px);
}

.trr-eyebrow {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--trr-berry);
}

.trr-eyebrow--light {
	color: var(--trr-ochre);
}

.trr-btn,
.trr-comments .submit,
.trr-search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 26px;
	background: var(--trr-berry);
	border: 0;
	border-radius: 999px;
	color: #fff;
	font-family: var(--trr-font-body);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.trr-btn:hover,
.trr-comments .submit:hover,
.trr-search-submit:hover {
	background: var(--trr-berry-dark);
	color: #fff;
}

.trr-btn--ghost {
	background: transparent;
	border: 1.5px solid rgba(251, 247, 240, 0.7);
	color: var(--trr-cream);
}

.trr-btn--ghost:hover {
	background: var(--trr-cream);
	border-color: var(--trr-cream);
	color: var(--trr-ink);
}

.trr-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	text-decoration: none;
}

.trr-arrow-link svg {
	width: 18px;
	height: 18px;
	transition: transform 0.15s ease;
}

.trr-arrow-link:hover svg {
	transform: translateX(3px);
}

.trr-tag {
	display: inline-block;
	padding: 3px 12px;
	background: var(--trr-ochre);
	border-radius: 999px;
	color: var(--trr-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
}

a.trr-tag:hover {
	background: #e6b95c;
	color: var(--trr-ink);
}

/* ==========================================================================
   5. Header
   ========================================================================== */

.trr-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(251, 247, 240, 0.95);
	border-bottom: 1px solid var(--trr-line);
	-webkit-backdrop-filter: saturate(1.2) blur(8px);
	backdrop-filter: saturate(1.2) blur(8px);
}

.admin-bar .trr-header {
	top: 32px;
}

.trr-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 28px;
	max-width: var(--trr-container);
	min-height: 76px;
	margin: 0 auto;
	padding: 0 var(--trr-gutter);
}

.trr-header__brand {
	margin-right: auto;
}

.trr-site-title {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--trr-ink);
	font-family: var(--trr-font-brand);
	font-size: 26px;
	font-weight: 400;
	letter-spacing: -0.005em;
	line-height: 1.1;
	text-decoration: none;
}

.trr-site-title:hover {
	color: var(--trr-ink);
}

.trr-site-title svg {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	color: var(--trr-berry);
}

.trr-header__brand .custom-logo {
	display: block;
	max-height: 52px;
	width: auto;
}

.trr-nav__menu,
.trr-nav__menu .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.trr-nav__menu li {
	position: relative;
}

.trr-nav__menu a {
	display: block;
	color: var(--trr-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}

.trr-nav__menu a:hover,
.trr-nav__menu .current-menu-item > a,
.trr-nav__menu .current-menu-ancestor > a,
.trr-nav__menu .current-page-ancestor > a {
	color: var(--trr-berry);
}

.trr-submenu-toggle {
	display: none;
}

.trr-header__tools {
	display: flex;
	align-items: center;
	gap: 10px;
}

.trr-icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1.5px solid var(--trr-line-strong);
	border-radius: 999px;
	color: var(--trr-ink);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.trr-icon-btn:hover {
	background: var(--trr-paper);
	border-color: var(--trr-ink);
}

.trr-icon-btn svg {
	width: 20px;
	height: 20px;
}

/* Flex, not the default inline: an inline wrapper sits on a text line and
   the space below the baseline pushed the icon ~4px above centre. */
.trr-nav-toggle .trr-icon-burger {
	display: flex;
}

.trr-nav-toggle,
.trr-nav-toggle .trr-icon-close,
.trr-nav-toggle[aria-expanded="true"] .trr-icon-burger {
	display: none;
}

.trr-nav-toggle[aria-expanded="true"] .trr-icon-close {
	display: flex;
}

/* Dyslexia-friendly font switch: a round "Aa" button like the search button.
   Its name is read out by screen readers and shown as a tooltip on hover. */
.trr-font-toggle {
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
}

.trr-font-toggle[aria-pressed="true"] {
	background: var(--trr-ochre);
	border-color: var(--trr-ochre);
}

.trr-font-toggle__sample {
	font-family: "Open Dyslexic", sans-serif;
	font-size: 14px;
}

/* Desktop navigation with hover dropdowns. */
@media (min-width: 1025px) {
	.trr-nav__menu {
		display: flex;
		align-items: center;
		gap: 0 26px;
	}

	.trr-nav__menu > li > a {
		padding: 26px 0;
	}

	.trr-nav__menu > .menu-item-has-children > a {
		padding-right: 16px;
	}

	.trr-nav__menu > .menu-item-has-children > a::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 1px;
		width: 6px;
		height: 6px;
		margin-top: -5px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
	}

	.trr-nav__menu .sub-menu {
		position: absolute;
		top: calc(100% - 10px);
		left: -16px;
		z-index: 20;
		min-width: 230px;
		padding: 8px;
		background: var(--trr-paper);
		border: 1px solid var(--trr-line);
		border-radius: 16px;
		box-shadow: 0 18px 40px -18px rgba(43, 33, 28, 0.35);
		visibility: hidden;
		opacity: 0;
		transform: translateY(6px);
		transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	}

	.trr-nav__menu li:hover > .sub-menu,
	.trr-nav__menu li:focus-within > .sub-menu {
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
	}

	.trr-nav__menu .sub-menu a {
		padding: 10px 14px;
		border-radius: 10px;
		font-size: 16px;
		font-weight: 400;
		white-space: nowrap;
	}

	.trr-nav__menu .sub-menu a:hover,
	.trr-nav__menu .sub-menu .current-menu-item > a {
		background: var(--trr-sand);
		color: var(--trr-ink);
	}

	.trr-nav__menu .sub-menu .sub-menu {
		top: -9px;
		left: 100%;
	}

	/* The last dropdown opens leftwards so it cannot run off-screen;
	   theme.js adds .is-flipped to any other item that would. */
	.trr-nav__menu > li:last-child > .sub-menu,
	.trr-nav__menu > li.is-flipped > .sub-menu {
		left: auto;
		right: -16px;
	}
}

/* Tablet and phone: menu becomes a drawer under the header. */
@media (max-width: 1024px) {
	/* Fixed padding rather than a min-height with centring: when the drawer
	   opens the header grows, the centring no longer applies, and the top row
	   jumped up. With padding the row stays put, open or closed. */
	.trr-header__inner {
		min-height: 0;
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.trr-nav-toggle {
		display: flex;
	}

	/* The brand gives way to the buttons, so the header stays one row and a
	   long site title wraps inside its own space instead. */
	.trr-header__brand {
		flex: 1 1 0;
		min-width: 0;
	}

	.trr-nav {
		order: 3;
		flex: 1 0 100%;
	}

	.trr-nav__container {
		display: none;
		padding: 4px 0 16px;
	}

	.trr-nav__container.is-open {
		display: block;
	}

	.trr-nav__menu li {
		border-top: 1px solid var(--trr-line);
	}

	.trr-nav__menu a {
		padding: 14px 52px 14px 4px;
		font-size: 18px;
	}

	.trr-nav__menu .sub-menu {
		display: none;
		padding: 0 0 8px 16px;
	}

	.trr-nav__menu .sub-menu.is-open {
		display: block;
	}

	.trr-nav__menu .sub-menu li {
		border-top: 0;
	}

	.trr-nav__menu .sub-menu a {
		padding-top: 10px;
		padding-bottom: 10px;
		font-size: 17px;
		font-weight: 400;
	}

	.trr-submenu-toggle {
		position: absolute;
		top: 4px;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		background: none;
		border: 0;
		border-radius: 999px;
		color: var(--trr-ink);
		cursor: pointer;
	}

	.trr-submenu-toggle::after {
		content: "";
		width: 8px;
		height: 8px;
		margin-top: -4px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform 0.15s ease;
	}

	.trr-submenu-toggle[aria-expanded="true"]::after {
		margin-top: 4px;
		transform: rotate(-135deg);
	}
}

@media (max-width: 782px) {
	.admin-bar .trr-header {
		top: 46px;
	}
}

@media (max-width: 600px) {
	/* The admin bar stops being fixed here, so the header sticks to the top. */
	.admin-bar .trr-header {
		top: 0;
	}

	.trr-header__inner {
		gap: 0 12px;
	}

	.trr-site-title {
		gap: 8px;
		/* One line on phones 375px and wider; wraps to two on the smallest. */
		font-size: clamp(17px, 5vw, 21px);
	}

	.trr-site-title svg {
		width: 26px;
		height: 26px;
	}

	.trr-header__tools {
		gap: 6px;
	}

}

@media (max-width: 440px) {
	/* On phones the title alone is the logo; the icon would push it onto two lines. */
	.trr-site-title svg {
		display: none;
	}
}

/* --- Search overlay ----------------------------------------------------- */

.trr-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(43, 33, 28, 0.92);
}

.trr-search-overlay.is-open {
	display: flex;
}

.trr-search-overlay .trr-search-form {
	width: 100%;
	max-width: 720px;
}

.trr-search-overlay .trr-search-form__input {
	min-height: 64px;
	font-size: 22px;
}

.trr-search-close {
	position: absolute;
	top: 20px;
	right: 20px;
	border-color: rgba(243, 231, 211, 0.4);
	color: var(--trr-on-dark);
}

.trr-search-close:hover {
	background: transparent;
	border-color: var(--trr-on-dark);
}

.trr-search-form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.trr-search-form__input {
	flex: 1 1 240px;
	min-width: 0;
	min-height: 52px;
	padding: 0 22px;
	background: var(--trr-paper);
	border: 1.5px solid var(--trr-line-strong);
	border-radius: 999px;
	color: var(--trr-ink);
}

.trr-search-form__input:focus {
	border-color: var(--trr-berry);
	outline: none;
	box-shadow: 0 0 0 3px rgba(168, 50, 90, 0.2);
}

/* ==========================================================================
   6. Homepage hero
   ========================================================================== */

.trr-hero {
	max-width: var(--trr-container);
	margin: 0 auto;
	padding: 32px var(--trr-gutter) 0;
}

.trr-hero__frame {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(460px, 44vw, 580px);
	overflow: hidden;
	background: var(--trr-choc);
	border-radius: var(--trr-radius-lg);
	isolation: isolate;
}

.trr-hero__image {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% 40%;
}

/* Warm scrim, strongest behind the text, so the headline is readable on any photo. */
.trr-hero__frame::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(43, 33, 28, 0.88) 0%, rgba(43, 33, 28, 0.62) 45%, rgba(43, 33, 28, 0.05) 80%);
}

.trr-hero__content {
	max-width: 700px;
	padding: clamp(28px, 5vw, 64px);
	color: var(--trr-cream);
}

.trr-hero__heading {
	margin: 0;
	color: var(--trr-cream);
	font-size: clamp(38px, 5.2vw, 68px);
	line-height: 1.04;
	letter-spacing: -0.02em;
}

/* More room under the small line than other eyebrows get: the headline
   below it is up to 68px, so the usual 10px gap looks cramped. */
.trr-hero__content .trr-eyebrow {
	margin-bottom: clamp(16px, 1.8vw, 24px);
}

.trr-dyslexic .trr-hero__heading {
	letter-spacing: 0;
	font-size: clamp(30px, 4vw, 52px);
}

.trr-hero__text {
	max-width: 540px;
	margin: 22px 0 32px;
	color: var(--trr-on-dark);
	font-size: 20px;
	line-height: 1.55;
}

.trr-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

@media (max-width: 767px) {
	.trr-hero {
		padding-top: 16px;
	}

	.trr-hero__frame {
		min-height: 520px;
		border-radius: var(--trr-radius);
	}

	/* On a phone the text covers most of the photo: scrim from the bottom instead. */
	.trr-hero__frame::before {
		background: linear-gradient(0deg, rgba(43, 33, 28, 0.94) 0%, rgba(43, 33, 28, 0.8) 55%, rgba(43, 33, 28, 0.2) 100%);
	}

	.trr-hero__text {
		font-size: 18px;
	}
}

/* ==========================================================================
   7. Topic buttons and post grid
   ========================================================================== */

.trr-chips__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.trr-chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	background: var(--trr-paper);
	border: 1.5px solid var(--trr-line);
	border-radius: 999px;
	color: var(--trr-ink);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.trr-chip:hover {
	border-color: var(--trr-ink);
	color: var(--trr-ink);
}

.trr-chip.is-current {
	background: var(--trr-ink);
	border-color: var(--trr-ink);
	color: var(--trr-cream);
}

.trr-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 48px 32px;
}

.trr-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

/* Every cover sits in the same 3:4 frame, so the grid stays tidy whatever
   shape the original image is. */
.trr-card__cover {
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--trr-sand);
	border-radius: var(--trr-radius-sm);
	box-shadow: var(--trr-shadow-cover);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

a.trr-card__cover:hover,
.trr-related__link:hover .trr-card__cover {
	transform: translateY(-4px);
	box-shadow: 0 26px 40px -18px rgba(43, 33, 28, 0.5), 0 2px 6px rgba(43, 33, 28, 0.08);
}

.trr-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.trr-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--trr-berry);
}

.trr-card__placeholder svg {
	width: 30%;
	height: auto;
	opacity: 0.6;
}

.trr-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	color: var(--trr-muted);
	font-size: 14px;
	line-height: 1.5;
}

.trr-card__title {
	margin: 0;
	font-size: 23px;
	line-height: 1.2;
	overflow-wrap: break-word;
}

.trr-card__title a {
	color: var(--trr-ink);
	text-decoration: none;
}

.trr-card__title a:hover {
	color: var(--trr-berry);
}

.trr-card__excerpt {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--trr-muted);
	font-size: 16px;
	line-height: 1.55;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.sticky .trr-card__title::before {
	content: "\2605\00a0";
	color: var(--trr-berry);
}

/* --- Pagination --------------------------------------------------------- */

.trr-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 64px;
}

.trr-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border-radius: 999px;
	color: var(--trr-ink);
	font-weight: 700;
	text-decoration: none;
}

.trr-pagination a.page-numbers {
	background: var(--trr-paper);
	border: 1.5px solid var(--trr-line);
}

.trr-pagination a.page-numbers:hover {
	border-color: var(--trr-ink);
}

.trr-pagination .page-numbers.current {
	background: var(--trr-ink);
	color: var(--trr-cream);
}

.trr-pagination .page-numbers.dots {
	min-width: 0;
	padding: 0 4px;
	color: var(--trr-muted);
}

.trr-no-results {
	max-width: 620px;
}

/* --- Listing page heading ---------------------------------------------- */

.trr-page-head {
	max-width: var(--trr-container);
	margin: 0 auto;
	padding: 32px var(--trr-gutter) 0;
}

.trr-page-head__title {
	margin: 0 0 12px;
	font-size: clamp(40px, 4.6vw, 58px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	overflow-wrap: anywhere;
}

.trr-page-head__description {
	max-width: 700px;
	color: var(--trr-ink-soft);
}

.trr-page-head .trr-chips {
	margin-top: 28px;
}

.trr-page-head + .trr-posts {
	padding-top: 56px;
}

/* ==========================================================================
   8. Homepage panels: apps, visits, about
   ========================================================================== */

.trr-apps {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 40px;
	padding: clamp(28px, 4vw, 56px);
	background: var(--trr-sand);
	border-radius: var(--trr-radius-lg);
}

.trr-apps__text {
	flex: 1 1 380px;
	min-width: 0;
}

.trr-apps__intro {
	max-width: 460px;
	margin-bottom: 28px;
	color: var(--trr-ink-soft);
}

.trr-apps__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.trr-apps__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 12px 12px 22px;
	background: var(--trr-paper);
	border-radius: 16px;
}

.trr-apps__name {
	font-family: var(--trr-font-display);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
}

.trr-apps__badge {
	display: block;
	line-height: 0;
}

.trr-apps__badge img {
	width: 150px;
	height: auto;
}

.trr-apps__media {
	flex: 1 1 420px;
	min-width: 0;
}

.trr-apps__image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--trr-radius);
}

.trr-visits {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.trr-visit {
	padding: 28px;
	background: var(--trr-paper);
	border: 1px solid var(--trr-line);
	border-radius: var(--trr-radius);
}

.trr-visit--featured {
	border: 2px solid var(--trr-berry);
}

.trr-visit__meta {
	margin: 0 0 6px;
	color: var(--trr-muted);
	font-size: 15px;
	font-weight: 700;
}

.trr-visit__title {
	margin: 0 0 12px;
	font-size: 30px;
}

.trr-visit__text {
	margin: 0 0 20px;
	color: var(--trr-ink-soft);
	font-size: 16px;
}

.trr-visit__price {
	margin: 0;
	color: var(--trr-berry);
	font-family: var(--trr-font-display);
	font-size: 36px;
	font-weight: 600;
	line-height: 1;
}

/* [trr_visits] inside a page. It stays within the page's text column, so the
   cards become full-width rows - details on the left, price on the right -
   instead of three narrow columns. The heading matches the page's own h2s.
   The selectors include .trr-entry-content so they outrank the general
   post/page rules for headings, lists and list items. */
.trr-entry-content .trr-visits-embed {
	margin-top: 2.5em;
	margin-bottom: 2.5em;
}

.trr-entry-content .trr-visits-embed .trr-section__head {
	margin-bottom: 24px;
}

.trr-entry-content .trr-visits-embed .trr-heading {
	margin-top: 0;
	font-size: 32px;
}

.trr-entry-content .trr-visits-embed .trr-visits {
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin: 0;
	padding: 0;
}

.trr-entry-content .trr-visits-embed .trr-visit {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"meta  price"
		"title price"
		"text  price";
	align-items: center;
	column-gap: 32px;
	margin: 0;
	padding: 24px 28px;
}

.trr-entry-content .trr-visits-embed .trr-visit__meta {
	grid-area: meta;
}

.trr-entry-content .trr-visits-embed .trr-visit__title {
	grid-area: title;
	margin: 0 0 6px;
	font-size: 26px;
}

.trr-entry-content .trr-visits-embed .trr-visit__text {
	grid-area: text;
	margin: 0;
}

.trr-entry-content .trr-visits-embed .trr-visit__price {
	grid-area: price;
	font-size: 40px;
}

@media (max-width: 600px) {
	/* On a phone the price drops under the description. */
	.trr-entry-content .trr-visits-embed .trr-visit {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"meta"
			"title"
			"text"
			"price";
		padding: 22px;
	}

	.trr-entry-content .trr-visits-embed .trr-visit__price {
		margin-top: 16px;
		font-size: 34px;
	}
}

.trr-about {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 32px 48px;
	padding-top: 64px;
	border-top: 1px solid var(--trr-line);
}

.trr-about__photo {
	flex: 0 0 auto;
	width: 168px;
	height: 168px;
	object-fit: cover;
	object-position: 50% 20%;
	border: 6px solid var(--trr-sand);
	border-radius: 999px;
}

.trr-about__text {
	flex: 1 1 420px;
	min-width: 0;
	max-width: 760px;
	color: var(--trr-ink-soft);
}

.trr-about__text .trr-heading {
	color: var(--trr-ink);
}

/* ==========================================================================
   9. Single post
   ========================================================================== */

.trr-single {
	max-width: 1180px;
	margin: 0 auto;
	padding: 32px var(--trr-gutter) 0;
}

.trr-single__layout {
	display: flex;
	align-items: flex-start;
	gap: 72px;
}

.trr-single__media {
	position: sticky;
	top: 112px;
	flex: 0 0 340px;
}

.admin-bar .trr-single__media {
	top: 144px;
}

/* While the cover is sticky, it must fit in the window with its button
   below it, or the bottom would stay out of view until the end of the post.
   112px is the sticky offset; 68px the button and its gap; 24px breathing
   room at the bottom. */
@media (min-width: 900px) {
	.trr-single__image {
		max-height: calc(100vh - 204px);
	}

	.admin-bar .trr-single__image {
		max-height: calc(100vh - 236px);
	}
}

/* Cover and buy button together, as wide as the cover. */
.trr-single__cover {
	display: inline-flex;
	flex-direction: column;
	max-width: 100%;
}

.trr-single__image {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	border-radius: var(--trr-radius-sm);
	box-shadow: 0 24px 40px -18px rgba(43, 33, 28, 0.5), 0 2px 6px rgba(43, 33, 28, 0.1);
}

.trr-single__article {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 700px;
}

.trr-single--no-media .trr-single__article {
	margin: 0 auto;
}

.trr-single__header .trr-card__meta {
	margin-bottom: 18px;
	font-size: 15px;
}

.trr-single__title {
	margin: 0 0 28px;
	font-size: clamp(38px, 4.6vw, 58px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	overflow-wrap: anywhere;
}

.trr-dyslexic .trr-single__title {
	font-size: clamp(30px, 3.6vw, 44px);
}

/* --- Post and page content ---------------------------------------------- */

.trr-entry-content {
	font-size: 19px;
	line-height: 1.7;
}

.trr-entry-content::after {
	content: "";
	display: table;
	clear: both;
}

.trr-entry-content > * {
	margin-top: 0;
	margin-bottom: 1.25em;
}

.trr-entry-content h2 {
	margin-top: 1.8em;
	font-size: 32px;
}

.trr-entry-content h3 {
	margin-top: 1.6em;
	font-size: 26px;
}

.trr-entry-content h4 {
	margin-top: 1.4em;
	font-size: 22px;
}

/* The opening paragraph of a post reads as an introduction. */
.trr-single .trr-entry-content > p:first-child {
	margin-bottom: 1.6em;
	color: var(--trr-ink-soft);
	font-family: var(--trr-font-display);
	font-size: 24px;
	font-style: italic;
	line-height: 1.45;
}

/* Interview questions - marked up by trr_mark_questions() in functions.php. */
.trr-entry-content .trr-question {
	margin-top: 2em;
	margin-bottom: 0.4em;
	color: var(--trr-berry);
	font-family: var(--trr-font-display);
	font-size: 24px;
	line-height: 1.3;
}

.trr-entry-content .trr-question strong {
	font-weight: 600;
}

.trr-entry-content ul,
.trr-entry-content ol {
	padding-left: 1.3em;
}

.trr-entry-content li + li {
	margin-top: 0.35em;
}

.trr-entry-content img {
	border-radius: var(--trr-radius-sm);
}

/* Images are centred by default. Anything the editor explicitly floated left
   or right keeps its float - those rules are more specific and win below. */
.trr-entry-content p > img,
.trr-entry-content p > a > img,
.trr-entry-content figure img,
.trr-entry-content .wp-block-image img,
.trr-entry-content .wp-caption img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.trr-entry-content figure,
.trr-entry-content .wp-block-image,
.trr-entry-content .wp-caption,
.trr-entry-content .wp-block-gallery {
	margin-left: auto;
	margin-right: auto;
	margin-top: 2em;
	margin-bottom: 2em;
	text-align: center;
}

.trr-entry-content .wp-caption {
	max-width: 100%;
}

.trr-entry-content .alignleft,
.trr-entry-content img.alignleft {
	float: left;
	margin: 0.3em 1.5em 1em 0;
}

.trr-entry-content .alignright,
.trr-entry-content img.alignright {
	float: right;
	margin: 0.3em 0 1em 1.5em;
}

.trr-entry-content .aligncenter,
.trr-entry-content img.aligncenter {
	display: block;
	float: none;
	margin-left: auto;
	margin-right: auto;
}

.trr-entry-content figcaption,
.wp-caption-text {
	margin-top: 10px;
	color: var(--trr-muted);
	font-size: 15px;
	line-height: 1.5;
	text-align: center;
}

.trr-entry-content .wp-block-quote,
.trr-entry-content .wp-block-pullquote {
	margin-left: 0;
	margin-right: 0;
}

/* Who said it: on its own line, plain and smaller, so the credit reads apart
   from the quote. */
.trr-entry-content blockquote cite {
	display: block;
	margin-top: 4px;
	line-height: 1.4;
	color: var(--trr-muted);
	font-family: var(--trr-font-body);
	font-size: 0.72em;
	font-style: normal;
	font-weight: 700;
}

/* Book listings: Columns blocks given the class "trr-book" (cover in the
   first column, details in the second), as on the My Books page. */
.trr-entry-content .trr-book {
	gap: 2em 40px;
	margin-bottom: 0;
}

.trr-entry-content .trr-book + .trr-book {
	margin-top: 3em;
	padding-top: 3em;
	border-top: 1px solid var(--trr-line);
}

.trr-entry-content .trr-book .wp-block-image {
	margin: 0;
}

.trr-entry-content .trr-book > .wp-block-column:first-child .wp-block-image img {
	box-shadow: var(--trr-shadow-cover);
}

/* The title at the top of the details column lines up with the cover;
   any later headings in it keep their usual space above. */
.trr-entry-content .trr-book .wp-block-column > h3:first-child {
	margin-top: 0;
}

/* Images in the details column (e.g. App Store badges) sit on the text's
   left edge instead of being centred. */
.trr-entry-content .trr-book > .wp-block-column:not(:first-child) .wp-block-image {
	margin: 0.5em 0 1.25em;
	text-align: left;
}

.trr-entry-content .trr-book > .wp-block-column:not(:first-child) .wp-block-image img {
	margin-left: 0;
}

.trr-entry-content .trr-book blockquote {
	font-size: 1.05em;
}

.trr-entry-content .trr-book blockquote p {
	margin-bottom: 0.8em;
}

/* Side by side (WordPress stacks Columns below 782px): the cover stays in
   view while the longer descriptions scroll past it. */
@media (min-width: 782px) {
	.trr-entry-content .trr-book > .wp-block-column:first-child {
		position: sticky;
		top: 112px;
	}

	.admin-bar .trr-entry-content .trr-book > .wp-block-column:first-child {
		top: 144px;
	}
}

@media (max-width: 781px) {
	.trr-entry-content .trr-book > .wp-block-column:first-child {
		max-width: 260px;
		margin: 0 auto;
	}
}

/* Cover shelves: a Gallery block given the class "trr-covers" (Block ->
   Advanced). Covers sit in a 5:7 frame - the typical shape of a book cover,
   so little is cropped - with the caption underneath rather than laid over
   the image. Core's gallery rules
   use an id selector and overlay captions, hence the !important flags. */
.trr-entry-content .wp-block-gallery.trr-covers {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px 20px;
	margin: 1.5em 0 2.5em;
	text-align: left;
}

.trr-entry-content .wp-block-gallery.trr-covers figure.wp-block-image {
	display: block !important;
	width: auto !important;
	margin: 0 !important;
	text-align: left;
}

.trr-entry-content .wp-block-gallery.trr-covers figure.wp-block-image::before,
.trr-entry-content .wp-block-gallery.trr-covers figure.wp-block-image::after {
	content: none !important;
	display: none !important;
}

.trr-entry-content .wp-block-gallery.trr-covers figure.wp-block-image img {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 5 / 7;
	object-fit: cover;
	object-position: center;
	border-radius: var(--trr-radius-sm);
	box-shadow: var(--trr-shadow-cover);
}

.trr-entry-content .wp-block-gallery.trr-covers figure.wp-block-image figcaption {
	position: static;
	width: auto;
	max-height: none;
	margin: 12px 0 0;
	padding: 0;
	overflow: visible;
	background: none;
	color: var(--trr-muted);
	font-size: 15px;
	line-height: 1.4;
	text-align: left;
}

.trr-entry-content .wp-block-gallery.trr-covers figcaption strong {
	color: var(--trr-ink);
	font-family: var(--trr-font-display);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
}

@media (max-width: 600px) {
	.trr-entry-content .wp-block-gallery.trr-covers {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 16px;
	}
}

.trr-entry-content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	padding: 0 26px;
	background: var(--trr-berry);
	border-radius: 999px;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.trr-entry-content .wp-block-button__link:hover {
	background: var(--trr-berry-dark);
	color: #fff;
}

.trr-entry-content iframe {
	max-width: 100%;
}

/* Video embeds pasted into older posts and pages carry a fixed width and
   height (800x600, 800x450). Shrinking only the width would leave a squashed
   box with black bars, so they fill the column at 16:9 instead. */
.trr-entry-content iframe[src*="youtube.com"],
.trr-entry-content iframe[src*="youtube-nocookie.com"],
.trr-entry-content iframe[src*="youtu.be"],
.trr-entry-content iframe[src*="player.vimeo.com"] {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--trr-radius-sm);
	/* A dark frame shows while a lazy-loaded video is still loading. */
	background: var(--trr-choc);
}

.trr-entry-footer {
	margin-top: 2em;
	color: var(--trr-muted);
	font-size: 15px;
}

.trr-page-links {
	margin-top: 2em;
	font-weight: 700;
}

/* --- Buy the book ---------------------------------------------------------- */

.trr-buy-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	background: var(--trr-berry);
	border-radius: 999px;
	color: #fff;
	font-family: var(--trr-font-body);
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background 0.15s ease;
}

.trr-buy-button:hover {
	background: var(--trr-berry-dark);
	color: #fff;
}

/* Under the sticky cover beside a post. */
.trr-buy-button--block {
	display: flex;
	width: 100%;
	margin-top: 20px;
}

/* A caption that held "Buy here!": the button, then any remaining text. */
.trr-entry-content figcaption.trr-has-buy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
}

.trr-entry-content figcaption.trr-has-buy .trr-buy-button {
	color: #fff;
}

.trr-affiliate-note {
	margin: 2.5em 0 0;
	padding: 14px 18px;
	background: var(--trr-sand);
	border-radius: 14px;
	color: var(--trr-ink-soft);
	font-size: 15px;
	line-height: 1.5;
}

.trr-byline {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--trr-line);
	line-height: 1.5;
}

.trr-byline__avatar {
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	border-radius: 999px;
}

.trr-byline__name {
	margin: 0;
	font-weight: 700;
}

.trr-byline__bio {
	margin: 2px 0 0;
	color: var(--trr-muted);
	font-size: 16px;
}

/* --- More to read -------------------------------------------------------- */

.trr-related {
	padding: var(--trr-section-gap) 0 0;
}

.trr-related__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.trr-related__link {
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: var(--trr-ink);
	text-decoration: none;
}

.trr-related__title {
	font-family: var(--trr-font-display);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
	overflow-wrap: break-word;
}

.trr-related__link:hover .trr-related__title {
	color: var(--trr-berry);
}

/* --- Comments ------------------------------------------------------------ */

.trr-comments {
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid var(--trr-line);
}

.trr-comments__title,
.trr-comments .comment-reply-title {
	font-size: 28px;
}

.trr-comments ol.comment-list,
.trr-comments ol.children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.trr-comments ol.children {
	margin-left: 28px;
}

.trr-comments .comment-body {
	padding: 20px 0;
	border-bottom: 1px solid var(--trr-line);
}

.trr-comments .comment-author {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
}

.trr-comments .comment-author img {
	border-radius: 999px;
}

.trr-comments .comment-meta {
	color: var(--trr-muted);
	font-size: 14px;
}

.trr-comments .comment-meta a {
	color: var(--trr-muted);
}

.trr-comments .comment-content {
	margin-top: 10px;
}

.trr-comments .reply a {
	font-size: 15px;
	font-weight: 700;
}

.trr-comments label {
	display: block;
	margin-bottom: 6px;
	font-weight: 700;
	font-size: 16px;
}

.trr-comments input[type="text"],
.trr-comments input[type="email"],
.trr-comments input[type="url"],
.trr-comments textarea,
.trr-form input[type="text"],
.trr-form input[type="email"],
.trr-form textarea {
	width: 100%;
	max-width: 100%;
	padding: 12px 16px;
	background: var(--trr-paper);
	border: 1.5px solid var(--trr-line-strong);
	border-radius: 14px;
	color: var(--trr-ink);
}

.trr-comments input:focus,
.trr-comments textarea:focus,
.trr-form input:focus,
.trr-form textarea:focus {
	border-color: var(--trr-berry);
	outline: none;
	box-shadow: 0 0 0 3px rgba(168, 50, 90, 0.2);
}

.trr-comments .comment-form-cookies-consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.trr-comments .comment-form-cookies-consent label {
	font-weight: 400;
}

.trr-comments__closed {
	color: var(--trr-muted);
}

/* ==========================================================================
   10. Static pages and the contact form
   ========================================================================== */

.trr-page {
	max-width: 760px;
	margin: 0 auto;
	padding: 32px var(--trr-gutter) 0;
}

.trr-page__title {
	margin: 0 0 32px;
	font-size: clamp(40px, 4.6vw, 58px);
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.trr-page__thumb {
	margin-bottom: 32px;
}

.trr-page__thumb img {
	display: block;
	width: 100%;
	border-radius: var(--trr-radius);
}

.trr-form-wrap {
	max-width: 640px;
	margin: 1.5rem 0;
}

.trr-form__field {
	margin: 0 0 16px;
}

.trr-form label {
	display: block;
	margin-bottom: 6px;
	font-size: 16px;
	font-weight: 700;
}

.trr-form textarea {
	min-height: 180px;
	resize: vertical;
}

.trr-form__actions {
	margin: 0;
}

/* Honeypot - off-screen rather than display:none, which some bots detect. */
.trr-form__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.trr-form-notice {
	margin: 0 0 1rem;
	padding: 14px 18px;
	border-radius: 14px;
	font-size: 16px;
}

.trr-form-notice p {
	margin: 0;
}

.trr-form-notice p + p {
	margin-top: 6px;
}

.trr-form-notice--success {
	background: #e6efe0;
	color: #2f4a26;
}

.trr-form-notice--error {
	background: #f6e1e8;
	color: #7a2141;
}

.trr-error-404 {
	max-width: 720px;
	margin: 0 auto;
	padding: 48px var(--trr-gutter) 0;
	text-align: center;
}

.trr-error-404 .trr-search-form {
	margin: 32px 0;
}

/* ==========================================================================
   11. Footer
   ========================================================================== */

.trr-footer {
	background: var(--trr-choc);
	color: var(--trr-on-dark);
	font-size: 16px;
}

.trr-footer a {
	color: var(--trr-on-dark-muted);
	text-decoration: none;
}

.trr-footer a:hover {
	color: var(--trr-cream);
	text-decoration: underline;
}

.trr-footer__main {
	display: flex;
	flex-wrap: wrap;
	gap: 40px 64px;
	max-width: var(--trr-container);
	margin: 0 auto;
	padding: 64px var(--trr-gutter) 40px;
}

.trr-footer__brand {
	flex: 2 1 300px;
	min-width: 0;
}

.trr-footer__name {
	margin: 0 0 12px;
	color: var(--trr-on-dark);
	font-family: var(--trr-font-brand);
	font-size: 28px;
	font-weight: 400;
	letter-spacing: -0.005em;
	line-height: 1.15;
}

.trr-footer__tagline {
	max-width: 380px;
	margin: 0;
	color: var(--trr-on-dark-muted);
}

.trr-footer__nav {
	flex: 3 1 360px;
	min-width: 0;
}

/* Top-level footer menu items become column headings; children the links. */
.trr-footer__menu {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 24px 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.trr-footer__menu > li > a {
	display: inline-block;
	margin-bottom: 12px;
	color: var(--trr-on-dark);
	font-weight: 700;
}

.trr-footer__menu .sub-menu,
.trr-social {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.trr-footer__follow {
	flex: 1 1 160px;
}

.trr-footer__heading {
	margin: 0 0 12px;
	font-weight: 700;
}

.trr-social__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.trr-social__link svg {
	width: 18px;
	height: 18px;
}

.trr-footer__bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	max-width: var(--trr-container);
	margin: 0 auto;
	padding: 20px var(--trr-gutter) 36px;
	border-top: 1px solid var(--trr-choc-line);
	color: var(--trr-on-dark-muted);
	font-size: 14px;
	line-height: 1.5;
}

.trr-footer__bar p {
	margin: 0;
}

/* ==========================================================================
   12. Cookie notice
   ========================================================================== */

.trr-cookie {
	position: fixed;
	left: 50%;
	bottom: 20px;
	z-index: 9998;
	display: none;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 20px;
	width: calc(100% - 32px);
	max-width: 720px;
	padding: 18px 20px 18px 24px;
	transform: translateX(-50%);
	background: var(--trr-choc);
	border-radius: var(--trr-radius);
	box-shadow: 0 18px 40px -12px rgba(43, 33, 28, 0.5);
	color: var(--trr-on-dark);
	font-size: 16px;
	line-height: 1.5;
}

.trr-cookie.is-visible {
	display: flex;
}

.trr-cookie__text {
	flex: 1 1 300px;
	margin: 0;
}

.trr-cookie__text a {
	color: var(--trr-ochre);
}

.trr-cookie__accept {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 24px;
	background: var(--trr-ochre);
	border: 0;
	border-radius: 999px;
	color: var(--trr-ink);
	font-weight: 700;
	cursor: pointer;
}

.trr-cookie__accept:hover {
	background: #e6b95c;
}

/* --- Complianz consent banner ---------------------------------------------
   When the Complianz plugin is active the theme's own notice hides itself and
   Complianz shows its banner. Complianz colours its banner through CSS
   variables declared on :root; setting them on the banner itself overrides
   whatever is picked in its settings, so it always matches the site:
   chocolate panel, cream text, ochre buttons. "Accept" and "Deny" are styled
   identically - UK guidance expects rejecting to be as easy as accepting.
   Position and wording are still set in Complianz. */

.cmplz-cookiebanner,
#cmplz-manage-consent {
	--cmplz_banner_background_color: var(--trr-choc);
	--cmplz_banner_border_color: var(--trr-choc);
	--cmplz_banner_border_width: 0;
	--cmplz_banner_border_radius: 20px;
	--cmplz_text_color: var(--trr-on-dark);
	--cmplz_hyperlink_color: var(--trr-ochre);
	--cmplz_title_font_size: 20px;
	--cmplz_text_font_size: 15px;
	--cmplz_link_font_size: 14px;
	--cmplz_category_body_font_size: 14px;
	--cmplz_category_header_title_font_size: 15px;
	--cmplz_category_header_active_font_size: 13px;
	--cmplz_category_header_always_active_color: var(--trr-ochre);
	--cmplz_button_accept_background_color: var(--trr-ochre);
	--cmplz_button_accept_border_color: var(--trr-ochre);
	--cmplz_button_accept_text_color: var(--trr-ink);
	--cmplz_button_deny_background_color: var(--trr-ochre);
	--cmplz_button_deny_border_color: var(--trr-ochre);
	--cmplz_button_deny_text_color: var(--trr-ink);
	--cmplz_button_settings_background_color: transparent;
	--cmplz_button_settings_border_color: rgba(243, 231, 211, 0.45);
	--cmplz_button_settings_text_color: var(--trr-on-dark);
	--cmplz_button_border_radius: 999px;
	--cmplz_button_font_size: 15px;
	--cmplz_slider_active_color: var(--trr-ochre);
	--cmplz_slider_inactive_color: #6b5d52;
	--cmplz_slider_bullet_color: #fff;
}

.cmplz-cookiebanner {
	font-family: var(--trr-font-body);
}

.cmplz-cookiebanner.cmplz-show {
	box-shadow: 0 18px 40px -12px rgba(43, 33, 28, 0.5);
}

.cmplz-cookiebanner .cmplz-title {
	font-family: var(--trr-font-display);
	font-weight: 600;
	letter-spacing: var(--trr-display-tracking);
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	font-family: var(--trr-font-body);
	font-weight: 700;
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover {
	background-color: #e6b95c;
	border-color: #e6b95c;
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover {
	border-color: var(--trr-on-dark);
}

.cmplz-cookiebanner .cmplz-categories .cmplz-category {
	background-color: rgba(243, 231, 211, 0.08);
	border-radius: 12px;
}

/* Cookie Policy / Privacy Statement links: side by side, no bullets. */
.cmplz-cookiebanner .cmplz-links ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Expand arrows and close button: light, to show on the dark panel. */
.cmplz-cookiebanner .cmplz-category-toggle {
	color: var(--trr-on-dark);
	background: none;
	border: 0;
}

.cmplz-cookiebanner .cmplz-icon.cmplz-open {
	background: none;
}

.cmplz-cookiebanner .cmplz-icon svg,
.cmplz-cookiebanner .cmplz-close svg {
	fill: currentColor;
}

.cmplz-cookiebanner :focus-visible {
	outline: 3px solid var(--trr-ochre);
	outline-offset: 2px;
}

/* ==========================================================================
   13. WordPress core alignment / block helpers
   ========================================================================== */

.alignwide {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}

.alignfull {
	max-width: none;
}

.gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-bottom: 1.25rem;
}

.gallery-item {
	margin: 0;
}

/* ==========================================================================
   14. Breakpoints
   ========================================================================== */

@media (max-width: 1100px) {
	.trr-grid,
	.trr-related__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.trr-related__list > :nth-child(4) {
		display: none;
	}
}

@media (max-width: 899px) {
	:root {
		--trr-section-gap: 72px;
	}

	/* The cover moves above the article. */
	.trr-single__layout {
		flex-direction: column;
		gap: 36px;
	}

	.trr-single__media {
		position: static;
		flex: none;
		width: min(70%, 300px);
		margin: 0 auto;
	}
}

@media (max-width: 767px) {
	:root {
		--trr-gutter: 16px;
		--trr-section-gap: 64px;
	}

	body {
		font-size: 17px;
	}

	.trr-grid,
	.trr-related__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 36px 16px;
	}

	.trr-related__list > :nth-child(4) {
		display: block;
	}

	.trr-card__title {
		font-size: 19px;
	}

	.trr-card__excerpt {
		display: none;
	}

	.trr-related__title {
		font-size: 18px;
	}

	.trr-entry-content {
		font-size: 18px;
	}

	.trr-single .trr-entry-content > p:first-child {
		font-size: 21px;
	}

	.trr-entry-content .trr-question {
		font-size: 21px;
	}

	/* A floated image beside body text is unreadable at phone widths. */
	.trr-entry-content .alignleft,
	.trr-entry-content img.alignleft,
	.trr-entry-content .alignright,
	.trr-entry-content img.alignright {
		float: none;
		display: block;
		margin: 0 auto 1em;
	}

	.trr-apps,
	.trr-visit {
		border-radius: var(--trr-radius);
	}

	.trr-about {
		padding-top: 48px;
	}

	.trr-about__photo {
		width: 128px;
		height: 128px;
	}

	.trr-footer__bar {
		flex-direction: column;
	}

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

@media (max-width: 380px) {
	.trr-card__meta .trr-post-date {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   15. Print
   ========================================================================== */

@media print {
	.trr-header,
	.trr-footer,
	.trr-cookie,
	.trr-search-overlay,
	.trr-chips,
	.trr-related,
	.trr-comments,
	.trr-pagination {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 12pt;
	}

	.trr-single__layout {
		display: block;
	}

	.trr-single__media {
		position: static;
		width: 40%;
		margin-bottom: 1em;
	}

	a {
		color: #000;
		text-decoration: underline;
	}
}