/*
Theme Name: Real Human Reviews
Author: Parker Hall
Description: A hand-drawn reviews theme built from Parker's pen sketches and handwriting font. Reviews, videos and deals, each laid out the way they were drawn on paper.
Version: 1.12.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: real-human-reviews
*/

/* ------------------------------------------------------------------
   1. Ink, paper, handwriting
   ------------------------------------------------------------------ */

@font-face {
	font-family: "Parker Handwriting";
	src: url(assets/fonts/parker-handwriting.woff?v=2) format("woff"),
		url(assets/fonts/parker-handwriting.ttf?v=2) format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Review text is set in Fraunces (SIL Open Font License), its soft cut,
   trimmed to Latin and to the text size. */
@font-face {
	font-family: "Fraunces";
	src: url(assets/fonts/fraunces-soft.woff2) format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Fraunces";
	src: url(assets/fonts/fraunces-soft-italic.woff2) format("woff2");
	font-weight: 400 700;
	font-style: italic;
	font-display: swap;
}

:root {
	color-scheme: light;
	--ink: #0a0c12;
	--ink-blue: #1576a6; /* what text and lines turn under the pointer or keyboard: a deeper ama-iro, dark enough to read on the paper (4.6:1) */
	--rhr-focus: var(--ink); /* the keyboard focus ring */
	--paper: #faf6eb; /* notebook ivory */
	--paper-bg: var(--paper) url(assets/img/notebook-paper-texture.jpg) 0 0 / 384px 384px;
	--desk: #cfcbc2; /* the table the notebook lies on, seen on wide screens */
	--field: #fffdf6; /* the inside of a box you type in */
	--field-soft: rgba(255, 253, 246, 0.85); /* a box over the page, letting the paper show */
	--glow: #fdfbf4; /* the halo that keeps a drawing readable over a photo */
	--marker: #f9c80e; /* the yellow highlighter behind scores and labels */
	--on-marker: #0a0c12; /* ink on the highlighter, in either light */
	--error: #b3261e;
	--lift: rgba(10, 12, 18, 0.12); /* the shadow under a box lifted off the page */
	/* Pen lines drawn as backgrounds. Dark mode swaps in pale copies (assets/img/night/). */
	--pen-underline: url(assets/img/hand-drawn-underline.png);
	--pen-divider: url(assets/img/hand-drawn-divider-line.png);
	--pen-divider-2: url(assets/img/hand-drawn-divider-line-2.png);
	--pen-vline: url(assets/img/hand-drawn-vertical-line.png);
	--pen-dollar: url(assets/img/hand-drawn-dollar-sign.png);
	--hand: "Parker Handwriting", "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
	--read: "Fraunces", Georgia, "Times New Roman", serif; /* long review text */

	/* The sketches were scanned about 1618px wide. One "u" is one sketch pixel,
	   so sizes below can be read straight off the drawings. */
	--sheet: min(100vw, 1180px);
	--u: calc(var(--sheet) / 1618);
	--au: var(--u); /* scale for the drawn artwork */
}

/* Dark mode (inc/dark-mode.php): the notebook at night. Charcoal paper, ivory
   ink, the same yellow and blue. Body text is about 12.9:1 on the paper, links
   about 6:1. The drawings are repainted in assets/css/dark.css. */
html.rhr-dark {
	color-scheme: dark; /* scrollbars and the browser's own controls */
	--ink: #ece5d3;
	--ink-blue: #2ca9e1; /* the bright ama-iro reads well on dark paper */
	--rhr-focus: #ece5d3; /* focus rings */
	--paper: #22201c;
	--paper-bg: var(--paper) url(assets/img/night/notebook-paper-texture.jpg) 0 0 / 384px 384px;
	--desk: #0f0e0d;
	--field: #2c2a25;
	--field-soft: rgba(44, 42, 37, 0.85);
	--glow: #22201c;
	--lift: rgba(0, 0, 0, 0.45);
	--error: #ff8a80;
	--pen-underline: url(assets/img/night/hand-drawn-underline.png);
	--pen-divider: url(assets/img/night/hand-drawn-divider-line.png);
	--pen-divider-2: url(assets/img/night/hand-drawn-divider-line-2.png);
	--pen-vline: url(assets/img/night/hand-drawn-vertical-line.png);
	--pen-dollar: url(assets/img/night/hand-drawn-dollar-sign.png);
}

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--desk);
	color: var(--ink);
	font-family: var(--hand);
	font-size: clamp(1.3rem, 0.95rem + 1.15vw, 1.9rem);
	line-height: 1.2;
	/* The font is a fine pen; the sketches are a marker. A hair of stroke brings them together. */
	-webkit-text-stroke: 0.014em currentColor;
	overflow-x: hidden;
}

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

a {
	color: inherit;
	transition: color 0.12s ease;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px dashed var(--rhr-focus);
	outline-offset: 4px;
}

/* Fields and form buttons: a solid ring just outside the drawn edge. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--rhr-focus);
	outline-offset: 2px;
}

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

.rhr-skip:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 100;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.3em 0.6em;
	clip: auto;
	clip-path: none;
	background: var(--paper);
	color: var(--ink);
	white-space: normal;
}

/* Where a skip link or "jump to" lands, so the focus ring does not draw around a whole section. */
#main:focus,
[tabindex="-1"]:focus {
	outline: none;
}

/* Drawn artwork keeps the size it had on paper. */
.rhr-art {
	display: block;
	width: calc(var(--au) * var(--w));
	max-width: 100%;
	height: auto;
}

/* Hand-colouring that sits under a drawing's pen lines (the yellow in the logo).
   Which drawings have colour is listed in assets/css/frames.css. */
.rhr-inked {
	position: relative;
}

.rhr-inked::before {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	pointer-events: none;
}

.rhr-inked > .rhr-art {
	position: relative;
}

.rhr-title {
	margin: 0;
	font-weight: 400;
	line-height: 0.98;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	-webkit-text-stroke: 0.024em currentColor;
}

.rhr-title a {
	text-decoration: none;
}

.rhr-title a:hover,
.rhr-title a:focus-visible,
.rhr-fcard__photo:hover ~ .rhr-fcard__text .rhr-title a {
	color: var(--ink-blue);
	background: url(assets/img/hand-drawn-underline-blue.png) center bottom / 100% 0.16em no-repeat;
}

.rhr-title--xl {
	font-size: clamp(2.5rem, 1rem + 5.6vw, 5.2rem);
	overflow-wrap: break-word;
}

.rhr-subhead {
	margin: 0.25em 0 0.45em;
	font-size: clamp(1.25rem, 0.9rem + 1.5vw, 1.9rem);
	line-height: 1.15;
}

.rhr-byline {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.6em;
}

.rhr-empty {
	margin: 0;
	padding: 1em;
	text-align: center;
}

/* ------------------------------------------------------------------
   2. Page, header, footer
   ------------------------------------------------------------------ */

.rhr-page {
	width: min(100%, 1180px);
	min-height: 100vh;
	margin: 0 auto;
	padding-bottom: calc(var(--u) * 70);
}

/* Every page has a soft shadow down its left side, where it curves into the binding. */
.rhr-page {
	background:
		linear-gradient(to right, rgba(52, 40, 18, 0.16), rgba(52, 40, 18, 0.06) 10px, rgba(52, 40, 18, 0) 34px),
		var(--paper-bg);
}

/* Below notebook width the page fills the window, so nothing may poke out past its right edge. */
@media (max-width: 1319px) {
	.rhr-page {
		overflow-x: clip;
	}
}

/* On a wide screen you see the notebook itself: lying open, spine on the left,
   this page on top, the rest of the pages and the brown cover underneath. */
@media (min-width: 1320px) {
	.rhr-page {
		position: relative;
		width: 1216px;
		min-height: calc(100vh - 84px);
		margin: 36px auto 48px;
		padding-left: 36px; /* room for the binding; the drawing area stays 1180px */
		border-radius: 2px 18px 18px 2px;
		background:
			linear-gradient(to right, rgba(52, 40, 18, 0.5), rgba(52, 40, 18, 0.24) 8px, rgba(52, 40, 18, 0.11) 28px, rgba(52, 40, 18, 0.04) 66px, rgba(52, 40, 18, 0) 120px),
			linear-gradient(to left, rgba(52, 40, 18, 0.05), rgba(52, 40, 18, 0) 14px),
			var(--paper-bg);
		/* the edges of the pages underneath, fanned out to the right and bottom */
		box-shadow:
			1px 1px 0 #b7ae97,
			3px 3px 0 #f5f0e2,
			4px 4px 0 #b9b099,
			6px 6px 0 #f2eddd,
			7px 7px 0 #b1a88f,
			9px 9px 0 #efe9d8,
			10px 10px 0 #a69d85,
			13px 14px 9px rgba(0, 0, 0, 0.5);
	}

	/* the cover and spine */
	.rhr-page::before {
		content: "";
		position: absolute;
		z-index: -1;
		inset: -11px -25px -27px -22px;
		border-radius: 7px 27px 27px 7px;
		background:
			linear-gradient(to right, #2a170b, #8a5d38 5px, #4f311c 12px, #74492b 19px, #2f1b0e 22px, rgba(47, 27, 14, 0) 23px),
			linear-gradient(160deg, #7a4f2f, #55361f);
		box-shadow: inset 0 0 0 1px rgba(30, 16, 6, 0.55), inset 0 1px 0 1px rgba(255, 220, 180, 0.12), 0 1px 2px rgba(0, 0, 0, 0.45), 0 3px 8px rgba(0, 0, 0, 0.28), 6px 22px 46px rgba(30, 22, 8, 0.36);
	}
}

.rhr-header {
	display: flex;
	align-items: center;
	min-height: calc(var(--u) * 320);
	padding: calc(var(--u) * 14) calc(var(--u) * 30) 0 calc(var(--u) * 26);
}

.rhr-header__title {
	margin: 0;
	font: inherit;
	line-height: 0;
}

.rhr-header__current,
.rhr-nav a,
.rhr-footer__link {
	display: block;
	transition: transform 0.15s ease;
}

.rhr-header__current:hover,
.rhr-nav a:hover,
.rhr-footer__link:hover {
	transform: rotate(-1.5deg) scale(1.03);
}

.rhr-nav {
	margin-left: calc(var(--u) * 150);
}

.rhr-nav ul {
	display: flex;
	align-items: center;
	gap: calc(var(--u) * 74);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Small nudges so each header sits the way that page was drawn. */
.rhr-header--home .rhr-nav {
	margin-left: calc(var(--u) * -34);
}

.rhr-header--home .rhr-nav ul {
	gap: calc(var(--u) * 18);
}

.rhr-header--home .rhr-nav__item--videos,
.rhr-header--home .rhr-nav__item--reviews {
	margin-top: calc(var(--u) * 100);
}

.rhr-header--home .rhr-nav__item--deals {
	margin-left: calc(var(--u) * -14);
}

.rhr-header--reviews .rhr-nav__item--videos,
.rhr-header--reviews .rhr-nav__item--deals {
	margin-top: calc(var(--u) * 60);
}

.rhr-header--videos {
	align-items: flex-start;
	padding-top: calc(var(--u) * 30);
}

.rhr-header--videos .rhr-nav {
	margin-left: calc(var(--u) * 110);
}

.rhr-header--videos .rhr-nav ul {
	align-items: flex-start;
	gap: calc(var(--u) * 62);
}

.rhr-header--videos .rhr-nav__item--home {
	margin-top: calc(var(--u) * 46);
}

.rhr-header--videos .rhr-nav__item--reviews {
	margin-top: calc(var(--u) * 82);
}

.rhr-header--deals .rhr-nav__item--reviews {
	margin-top: calc(var(--u) * 90);
}

.rhr-header--deals .rhr-nav__item--videos {
	margin-top: calc(var(--u) * 120);
	margin-left: calc(var(--u) * -46);
}

.rhr-footer {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: calc(var(--u) * 110);
	margin-top: calc(var(--u) * 60);
	padding: 0 calc(var(--u) * 40) 0 calc(var(--u) * 170);
}

/* The two links at the foot of the page are drawn smaller than the
   navigation, so they read as small print. */
.rhr-footer .rhr-art {
	--au: calc(var(--u) * 0.6);
}

/* ------------------------------------------------------------------
   3. Sections and their drawn tabs
   ------------------------------------------------------------------ */

.rhr-section {
	position: relative;
	margin-top: calc(var(--u) * 100);
	padding: 0 calc(var(--u) * 185);
}

.rhr-header + .rhr-main > .rhr-section:first-child {
	margin-top: calc(var(--u) * 16);
}

.rhr-label {
	position: absolute;
	z-index: 5;
	left: calc(var(--u) * var(--lx, 0));
	top: calc(var(--u) * var(--ly, 0));
	margin: 0;
	line-height: 0;
	pointer-events: none;
	isolation: isolate;
}

/* Each tab is coloured in, which also stops the lines behind it showing through. */
.rhr-label a {
	display: block;
	pointer-events: auto;
	transition: transform 0.15s ease;
}

.rhr-label a:hover {
	transform: rotate(-1.5deg) scale(1.03);
}

/* Hover ink is blue too, so a tab goes back to bare paper while it is hovered. */
.rhr-label:has(a:hover)::before,
.rhr-label:has(a:focus-visible)::before {
	background: var(--paper-bg);
}

.rhr-label::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/* The colour itself (Porsche Maritime Blue, about #354a9b) is set per tab in frames.css. */
	background-color: var(--paper);
	background-position: center, 0 0;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Where each tab sat on the page, measured from the sketches. */
.rhr-label--label-latest-home { --lx: 139; --ly: 0; }
.rhr-label--label-reviews { --lx: 119; --ly: -37; }
.rhr-label--label-featured-home { --lx: 70; --ly: -56; }
.rhr-label--label-latest-reviews { --lx: 61; --ly: -43; }
.rhr-label--label-latest-videos { --lx: 102; --ly: 0; }
.rhr-label--label-more { --lx: 70; --ly: -50; }
.rhr-label--label-biggest { --lx: 51; --ly: -87; }
.rhr-label--label-featured-deals { --lx: 4; --ly: -139; }

.rhr-section--latest {
	padding: 0 calc(var(--u) * 260) 0 calc(var(--u) * 185);
}

.rhr-section--reviews {
	padding: 0 calc(var(--u) * 205) 0 calc(var(--u) * 185);
}

.rhr-section--home-deals {
	padding: 0 calc(var(--u) * 62) 0 calc(var(--u) * 196);
}

.rhr-section--lead {
	padding: 0 calc(var(--u) * 262) 0 calc(var(--u) * 176);
}

.rhr-section--grid {
	margin-top: calc(var(--u) * 90);
	padding: 0 calc(var(--u) * 240) 0 calc(var(--u) * 198);
}

.rhr-section--video-latest {
	padding: 0 calc(var(--u) * 440) 0 calc(var(--u) * 282);
}

.rhr-section--video-more {
	margin-top: calc(var(--u) * 190);
	padding: 0 calc(var(--u) * 90) 0 calc(var(--u) * 86);
}

.rhr-section--deals {
	padding: 0 calc(var(--u) * 140) 0 calc(var(--u) * 100);
}

.rhr-section--deals-1 {
	margin-top: calc(var(--u) * 190) !important;
}

.rhr-section--deals-2 {
	margin-top: calc(var(--u) * 200);
}

.rhr-section--one-deal {
	max-width: calc(var(--u) * 900);
	margin-inline: auto;
}

/* ------------------------------------------------------------------
   4. Hand-drawn frames
   ------------------------------------------------------------------ */

/* 4a. Picture frames: fixed shape, photo cut to the drawn outline. */
.rhr-pic {
	position: relative;
	display: block;
	width: 100%;
}

.rhr-pic::after,
.rhr-fcard::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background-position: center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	pointer-events: none;
}

.rhr-pic__media,
.rhr-fcard__photo {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
}

.rhr-pic__media > img:not(.rhr-art),
.rhr-fcard__photo > img:not(.rhr-art),
.rhr-pic__media > iframe {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.rhr-pic__placeholder {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 42%;
	transform: translate(-50%, -50%) rotate(-4deg);
}

.rhr-pic__media.rhr-empty {
	display: grid;
	place-items: center;
}

/* 4b. Whole cards exactly as drawn: outline, divider and all. Text scales with the card. */
.rhr-fcard {
	position: relative;
	container-type: inline-size;
}

.rhr-fcard--flip::after {
	transform: scaleX(-1);
}

.rhr-fcard--flip > .rhr-fcard__photo {
	transform: scaleX(-1);
}

.rhr-fcard--flip > .rhr-fcard__photo > * {
	transform: scaleX(-1);
}

.rhr-fcard--flip > .rhr-fcard__photo > .rhr-pic__placeholder {
	transform: translate(-50%, -50%) scaleX(-1) rotate(-4deg);
}

.rhr-fcard__text,
.rhr-fcard__right,
.rhr-fcard__more {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

.rhr-clamp {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--lines, 2);
	line-clamp: var(--lines, 2);
	overflow: hidden;
}

/* 4c. Boxes that grow with their contents: the drawn corners stay put, the sides stretch. */
.rhr-box {
	position: relative;
	--bu: var(--u);
}

.rhr-box::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border-style: solid;
	border-color: transparent;
	border-width: calc(var(--bu) * var(--bt)) calc(var(--bu) * var(--br)) calc(var(--bu) * var(--bb)) calc(var(--bu) * var(--bl));
	border-image-slice: var(--bt) var(--br) var(--bb) var(--bl);
	border-image-repeat: stretch;
	pointer-events: none;
}

/* ------------------------------------------------------------------
   5. Sliders with the drawn arrows
   ------------------------------------------------------------------ */

.rhr-slider {
	--aw: calc(var(--u) * 80);
	--gap: calc(var(--u) * 120);
	position: relative;
	display: grid;
	grid-template-columns: var(--aw) minmax(0, 1fr) var(--aw);
	align-items: center;
	margin: 0 calc(var(--aw) * -1);
}

.rhr-slider__track {
	display: flex;
	gap: var(--gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.rhr-slider__track::-webkit-scrollbar {
	display: none;
}

.rhr-slider__item {
	flex: 0 0 calc((100% - var(--gap) * (var(--per) - 1)) / var(--per));
	min-width: 0;
	scroll-snap-align: start;
}

.rhr-slider__arrow .rhr-art {
	max-width: none;
}

.rhr-slider__arrow {
	z-index: 4;
	justify-self: center;
	margin: 0;
	padding: calc(var(--u) * 8);
	border: 0;
	background: none;
	line-height: 0;
	cursor: pointer;
	transition: transform 0.15s ease, opacity 0.15s ease;
}

.rhr-slider__arrow--prev:hover:not([disabled], [aria-disabled="true"]) {
	transform: translateX(-4px);
}

.rhr-slider__arrow--next:hover:not([disabled], [aria-disabled="true"]) {
	transform: translateX(4px);
}

.rhr-slider__arrow[disabled],
.rhr-slider__arrow[aria-disabled="true"] {
	opacity: 0.2;
	cursor: default;
}

.rhr-slider--empty {
	display: block;
	margin: 0;
}

/* Arrows drawn inside the box (Deals page, sliders inside a review). */
.rhr-slider--inside {
	display: block;
	margin: 0;
}

.rhr-slider--inside > .rhr-slider__arrow,
.rhr-products > .rhr-slider__arrow {
	position: absolute;
	top: 50%;
	margin-top: calc(var(--u) * -30);
}

.rhr-slider--inside > .rhr-slider__arrow--prev {
	left: calc(var(--u) * -78);
}

.rhr-slider--inside > .rhr-slider__arrow--next {
	right: calc(var(--u) * -62);
}

/* ------------------------------------------------------------------
   6. Homepage
   ------------------------------------------------------------------ */

.rhr-section--latest .rhr-slider {
	--gap: calc(var(--u) * 40);
}

.rhr-section--latest .rhr-slider__arrow--next {
	position: relative;
	left: calc(var(--u) * 34);
}

/* Review cards: drawn box, drawn picture frame, a few lines of text. */
.rhr-section--reviews .rhr-slider {
	--gap: calc(var(--u) * 150);
}

.rhr-section--reviews .rhr-slider__arrow--next {
	position: relative;
	left: calc(var(--u) * 96);
}

.rhr-fcard--home-a > .rhr-fcard__text,
.rhr-fcard--home-b > .rhr-fcard__text {
	justify-content: flex-start;
	gap: 1cqw;
	overflow: visible;
}

.rhr-fcard__title {
	font-size: 7.6cqw;
}

.rhr-fcard--home-a .rhr-fcard__title,
.rhr-fcard--home-b .rhr-fcard__title {
	font-size: 7cqw;
}

.rhr-fcard--home-a .rhr-byline,
.rhr-fcard--home-b .rhr-byline {
	font-size: 5.3cqw;
	line-height: 1;
}

.rhr-fcard__excerpt {
	margin: 0;
	font-family: var(--read);
	font-size: 4.6cqw;
	line-height: 1.3;
	-webkit-text-stroke: 0;
}

/* Featured deals: picture with link, crossed-out price, deal price. */
.rhr-section--home-deals .rhr-slider {
	--gap: calc(var(--u) * 105);
}

.rhr-fcard--mini > .rhr-fcard__text {
	align-items: center;
	overflow: visible;
}

.rhr-fcard--mini .rhr-prices {
	font-size: 15cqw;
	justify-content: center;
}

/* ------------------------------------------------------------------
   7. Prices
   ------------------------------------------------------------------ */

.rhr-prices {
	display: flex;
	align-items: baseline;
	gap: 0.45em;
	margin: 0;
	line-height: 1;
	white-space: nowrap;
	-webkit-text-stroke: 0.03em currentColor;
}

/* The handwriting sets digits close together, so prices get a little room to read. */
.rhr-money {
	letter-spacing: 0.08em;
}

.rhr-prices__was {
	position: relative;
	text-decoration: none;
}

/* The crossing-out is one of the drawn pen lines. */
.rhr-prices__was::after {
	content: "";
	position: absolute;
	left: -8%;
	right: -8%;
	top: 30%;
	height: 0.34em;
	background: var(--pen-divider) center / 100% 100% no-repeat;
	transform: rotate(-3deg);
}

.rhr-cur {
	display: inline-block;
	width: 0.52em;
	height: 0.66em;
	margin-right: 0.04em;
	background: var(--pen-dollar) center / contain no-repeat;
	vertical-align: -0.04em;
}

/* ------------------------------------------------------------------
   8. Reviews page
   ------------------------------------------------------------------ */

.rhr-fcard--split .rhr-split__title {
	font-size: 2.9cqw;
}

.rhr-fcard--split .rhr-byline {
	margin-top: 0.5cqw;
	font-size: 2.5cqw;
}

.rhr-fcard--split > .rhr-fcard__right {
	justify-content: flex-start;
	font-family: var(--read);
	font-size: 2.3cqw;
	line-height: 1.5;
	-webkit-text-stroke: 0;
}

.rhr-fcard--split > .rhr-fcard__more {
	z-index: 3;
}

.rhr-fcard--split > .rhr-fcard__more .rhr-art {
	width: 100%;
}

.rhr-fcard--split::before {
	display: none;
}

.rhr-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: calc(var(--u) * 64) calc(var(--u) * 58);
}

.rhr-grid > :nth-child(even) {
	margin-top: calc(var(--u) * -34);
}

.rhr-fcard--review .rhr-fcard__title {
	font-size: 6.6cqw;
}

.rhr-fcard--review .rhr-byline {
	margin-top: 1.2cqw;
	font-size: 5.6cqw;
}

.navigation.pagination {
	margin-top: calc(var(--u) * 70);
	text-align: center;
}

.nav-links {
	display: flex;
	justify-content: center;
	gap: 0.7em;
}

.page-numbers {
	padding: 0 0.3em;
	text-decoration: none;
}

.page-numbers.current {
	background: var(--pen-underline) center bottom / 100% 0.2em no-repeat;
}

a.page-numbers:hover,
a.page-numbers:focus-visible {
	color: var(--ink-blue);
	background: url(assets/img/hand-drawn-underline-blue.png) center bottom / 100% 0.2em no-repeat;
}

/* ------------------------------------------------------------------
   9. Videos
   ------------------------------------------------------------------ */

.rhr-video__link {
	cursor: pointer;
}

.rhr-video__thumb {
	transition: transform 0.25s ease;
}

.rhr-video__link:hover .rhr-video__thumb {
	transform: scale(1.03);
}

.rhr-video__play.rhr-art {
	position: absolute;
	left: 50%;
	top: 50%;
	width: max(9%, 44px);
	transform: translate(-50%, -50%);
	filter: drop-shadow(0 0 5px var(--glow)) drop-shadow(0 0 2px var(--glow));
	transition: transform 0.15s ease;
}

.rhr-video__link:hover .rhr-video__play {
	transform: translate(-50%, -50%) scale(1.15) rotate(-4deg);
}

.rhr-video.is-playing > .rhr-pic__media {
	background: #000;
}

.rhr-caption {
	margin: 0.35em 0 0;
	padding: 0 4%;
	font-size: 0.86em;
	text-align: center;
}

.rhr-section--video-more .rhr-slider {
	--aw: calc(var(--u) * 110);
	--gap: calc(var(--u) * 118);
}

/* ------------------------------------------------------------------
   10. Deals page
   ------------------------------------------------------------------ */

.rhr-box--outer {
	padding: calc(var(--u) * 96) calc(var(--u) * 78) calc(var(--u) * 84) calc(var(--u) * 96);
}

.rhr-box--outer .rhr-slider {
	--gap: calc(var(--u) * 84);
}

.rhr-fcard--deal-a .rhr-deal__name,
.rhr-fcard--deal-b .rhr-deal__name {
	--lines: 1;
	font-size: 7cqw;
}

.rhr-fcard--deal-a .rhr-prices,
.rhr-fcard--deal-b .rhr-prices {
	margin-top: 0.6cqw;
	font-size: 7.8cqw;
}

.rhr-fcard--deal-a > .rhr-fcard__text,
.rhr-fcard--deal-b > .rhr-fcard__text {
	justify-content: flex-start;
}

/* ------------------------------------------------------------------
   11. A single review
   ------------------------------------------------------------------ */

.rhr-review,
.rhr-plain {
	padding: calc(var(--u) * 30) calc(var(--u) * 130) 0 calc(var(--u) * 118);
}

.rhr-review__head {
	margin-top: calc(var(--u) * 12);
	padding: 0 calc(var(--u) * 60) 0 calc(var(--u) * 105);
}

/* The top of a review: headline, subhead and byline beside the main image
   (or video), then the disclosure across the page. On phones they stack. */
.rhr-review__top--split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	align-items: center;
	gap: calc(var(--u) * 50);
}

.rhr-review__top--split .rhr-review__head {
	margin-top: 0;
	padding: 0 0 0 calc(var(--u) * 40);
}

.rhr-review__note {
	padding: 0 calc(var(--u) * 60) 0 calc(var(--u) * 105);
}

.rhr-review__top--split + .rhr-review__note {
	margin-top: calc(var(--u) * 20);
	padding-left: calc(var(--u) * 40);
}

/* A review's headline is sized so a long one still leaves the text in view,
   and is written as it was typed rather than in capitals. */
.rhr-review__head .rhr-title--xl {
	font-size: clamp(1.9rem, 1.1rem + 2.2vw, 3.1rem);
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-transform: none;
}

/* The subhead under a review's headline is in the reading font, a step up from the text. */
.rhr-review__head .rhr-subhead {
	margin: 0.3em 0 0.6em;
	font-family: var(--read);
	font-size: clamp(1.15rem, 1rem + 0.45vw, 1.375rem);
	line-height: 1.35;
	-webkit-text-stroke: 0;
}

.rhr-review__top--split .rhr-title--xl {
	font-size: clamp(1.8rem, 0.9rem + 1.9vw, 3rem);
}

.rhr-review__head .rhr-byline {
	margin-top: 0.15em;
	font-size: clamp(1.1rem, 0.85rem + 0.8vw, 1.6rem);
}

.rhr-byline__date {
	display: block;
	margin-top: 0.2em;
	font-size: max(0.6em, 1rem);
}

.rhr-byline__avatar {
	flex: 0 0 auto;
	width: calc(var(--u) * 95);
}

.rhr-prose {
	margin-top: calc(var(--u) * 56);
	padding: 0 calc(var(--u) * 30);
	line-height: 1.24;
}

.rhr-prose::after {
	content: "";
	display: table;
	clear: both;
}

.rhr-prose > *,
.rhr-review__text > * {
	margin: 0 0 0.85em;
}

/* Review and video text: 18px, a size for reading, well below the headline and nav. */
.rhr-review__body {
	font-size: 1.125rem;
}

/* Body text across the site is in the reading font: reviews, video pages,
   pages and posts, and the text under each roundup pick, including text in
   group and column blocks. Headings, the score box, product cards and other
   drawn parts keep the hand, and so does a review's first sentence, which
   opens it like a handwritten note. .rhr-review__text is the column a
   review's text sits in when it has a margin beside it. */
:is(.rhr-prose, .rhr-review__text, .rhr-pick__text, .rhr-prose .wp-block-group, .rhr-prose .wp-block-group__inner-container, .rhr-prose .wp-block-column) > :is(p, ul, ol, blockquote, table, dl) {
	font-family: var(--read);
	line-height: 1.6;
	-webkit-text-stroke: 0;
}

:is(.rhr-prose, .rhr-review__text, .rhr-pick__text) > p {
	margin-bottom: 1em;
}

/* Pages and posts set their text at 18px, like a review. */
.rhr-plain__body :is(p, ul, ol, blockquote, table, dl) {
	font-size: 1.125rem;
}

.rhr-plain__body :is(p, ul, ol, blockquote, table, dl) :is(p, ul, ol, li) {
	font-size: inherit;
}

.rhr-lede {
	font-family: var(--hand);
	font-size: 1.3em;
	line-height: 1;
	-webkit-text-stroke: 0.014em currentColor;
}

.rhr-prose h2,
.rhr-prose h3,
.rhr-prose h4 {
	margin: 1.2em 0 0.4em;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	-webkit-text-stroke: 0.024em currentColor;
}

.rhr-prose h2 {
	font-size: 1.7em;
}

.rhr-prose h3 {
	font-size: 1.35em;
}

.rhr-prose a {
	text-decoration: none;
	padding-bottom: 0.08em;
	background: var(--pen-underline) left bottom / 100% 0.14em no-repeat;
}

.rhr-prose a:hover,
.rhr-prose a:focus-visible {
	color: var(--ink-blue);
	background-image: url(assets/img/hand-drawn-underline-blue.png);
	background-size: 100% 0.22em;
}

.rhr-prose ul,
.rhr-prose ol {
	padding-left: 1.3em;
}

.rhr-prose blockquote {
	margin-left: 0;
	padding-left: 1em;
	background: var(--pen-vline) left top / 0.5em 100% no-repeat;
}

.rhr-prose img,
.rhr-prose iframe,
.rhr-prose video {
	max-width: 100%;
}

.rhr-prose .alignleft {
	float: left;
	margin: 0.2em 1em 0.6em 0;
}

.rhr-prose .alignright {
	float: right;
	margin: 0.2em 0 0.6em 1em;
}

.rhr-prose .aligncenter {
	display: block;
	margin-inline: auto;
}

.rhr-prose .wp-caption,
.rhr-prose figure {
	max-width: 100%;
}

.rhr-prose figcaption,
.rhr-prose .wp-caption-text {
	font-size: 0.82em;
	text-align: center;
}

/* Affiliate disclosure: fine print, but plain ink on paper so it stays readable. */
.rhr-disclosure {
	max-width: 62em;
	margin: 0.6em 0 0;
	font-family: var(--read);
	font-size: 0.875rem;
	line-height: 1.45;
	-webkit-text-stroke: 0;
}

.rhr-disclosure a {
	text-decoration: none;
	background: var(--pen-underline) left bottom / 100% 0.12em no-repeat;
}

.rhr-disclosure a:hover,
.rhr-disclosure a:focus-visible {
	color: var(--ink-blue);
	background-image: url(assets/img/hand-drawn-underline-blue.png);
}

/* Product card with the cross-hatched Buy button. */
.rhr-products {
	float: right;
	width: calc(var(--u) * 430);
	margin: 0.2em 0 0.8em 1.1em;
	padding: calc(var(--u) * 42) calc(var(--u) * 34) calc(var(--u) * 58) calc(var(--u) * 38);
	line-height: 1.1;
	shape-outside: margin-box;
}

.rhr-products {
	--gap: 0px;
	--per: 1;
}

.rhr-products .rhr-slider__track {
	gap: 0;
}

.rhr-products > .rhr-slider__arrow--prev {
	left: calc(var(--u) * 26);
}

.rhr-products > .rhr-slider__arrow--next {
	right: calc(var(--u) * 20);
}

.rhr-products .rhr-product {
	flex: 0 0 100%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3em;
	text-align: center;
}

.rhr-product__image {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 0.82;
}

.rhr-product__image > img:not(.rhr-art) {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.rhr-product__name {
	margin: 0;
	font-size: 0.82em;
}

.rhr-buy {
	display: block;
	width: 100%;
	margin-top: 0.15em;
	transition: transform 0.15s ease;
}

.rhr-prose a.rhr-buy {
	padding: 0;
	background: none;
}

.rhr-buy:hover {
	transform: rotate(-1.5deg) scale(1.03);
}

/* The Buy button is dollar-bill green (#85bb65). It keeps its black lettering on hover (blue would vanish into the green) and the green deepens. */
a.rhr-buy:hover .rhr-art,
a.rhr-buy:focus-visible .rhr-art {
	filter: none;
}

.rhr-buy::before {
	transition: filter 0.15s ease;
}

.rhr-buy:hover::before,
.rhr-buy:focus-visible::before {
	filter: saturate(1.25) brightness(0.94);
}

.rhr-buy .rhr-art {
	width: 100%;
}

/* Shared previews: a strip across the top so nobody mistakes one for the live page. */
.rhr-preview-banner {
	position: sticky;
	top: 0;
	z-index: 100;
	padding: 0.4em 1em;
	background: #fff4b8;
	border-bottom: 2px solid currentColor;
	font-size: 1rem;
	text-align: center;
}

/* A product card shown on its own preview page. */
.rhr-share-preview .rhr-prose {
	margin-top: 1em;
}

/* A product sold by several shops: a row each with the shop, its price and a small Buy button. */
.rhr-shops,
.rhr-prose .rhr-shops {
	align-self: stretch;
	margin: 0.15em 0 0;
	padding: 0;
	list-style: none;
}

.rhr-shop + .rhr-shop {
	margin-top: 0.2em;
}

.rhr-shop__link,
.rhr-prose a.rhr-shop__link {
	display: flex;
	align-items: center;
	gap: 0.35em;
	padding: 0;
	background: none;
	color: inherit;
	text-decoration: none;
}

.rhr-shop__name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.78em;
	text-align: left;
	overflow-wrap: anywhere;
}

.rhr-shop__price {
	flex: 0 0 auto;
	font-size: 0.78em;
}

.rhr-shop__buy {
	flex: 0 0 36%;
	transition: transform 0.15s ease;
}

.rhr-shop__buy::before {
	transition: filter 0.15s ease;
}

.rhr-shop__buy .rhr-art {
	width: 100%;
}

.rhr-shop__link:hover .rhr-shop__name,
.rhr-shop__link:focus-visible .rhr-shop__name {
	color: var(--ink-blue);
}

.rhr-shop__link:hover .rhr-shop__buy,
.rhr-shop__link:focus-visible .rhr-shop__buy {
	transform: rotate(-1.5deg) scale(1.03);
}

/* Like the big Buy button, the small ones keep their black lettering and the green deepens. */
a.rhr-shop__link:hover .rhr-art,
a.rhr-shop__link:focus-visible .rhr-art {
	filter: none;
}

.rhr-shop__link:hover .rhr-shop__buy::before,
.rhr-shop__link:focus-visible .rhr-shop__buy::before {
	filter: saturate(1.25) brightness(0.94);
}

.rhr-products .rhr-prices {
	justify-content: center;
}

.rhr-products .rhr-shop__price {
	justify-content: flex-end;
}

/* Where to buy, in the reading font: shops and prices at 16px, the small
   print at 13-15px, the sizes other review sites use. The product name and
   the score keep the hand. In Fraunces the price takes a typed dollar sign. */
:is(.rhr-products, .rhr-pick__media, .rhr-roundup__where) :is(.rhr-prices, .rhr-shop__name, .rhr-roundup__store, .rhr-used-check__button),
:is(.rhr-products, .rhr-pick) .rhr-pc__brand {
	font-family: var(--read);
	-webkit-text-stroke: 0;
}

:is(.rhr-products, .rhr-pick__media, .rhr-roundup__where) .rhr-prices {
	font-size: 1.125rem;
	font-weight: 600;
	font-variant-numeric: lining-nums tabular-nums;
}

:is(.rhr-products, .rhr-pick__media) :is(.rhr-shop__name, .rhr-shop__price) {
	font-size: 1rem;
}

:is(.rhr-products, .rhr-pick__media, .rhr-roundup__where) .rhr-money {
	letter-spacing: 0;
}

:is(.rhr-products, .rhr-pick__media, .rhr-roundup__where) .rhr-cur {
	width: auto;
	height: auto;
	margin: 0;
	background: none;
	vertical-align: baseline;
}

:is(.rhr-products, .rhr-pick__media, .rhr-roundup__where) .rhr-cur::before {
	content: "$";
}

:is(.rhr-products, .rhr-pick__media) .rhr-shop__note {
	font-size: 0.75rem;
	font-weight: 400;
}

.rhr-products .rhr-pc__brand {
	font-size: 0.8125rem;
	opacity: 0.8;
}

:is(.rhr-products, .rhr-pick__media) .rhr-used-check__button {
	font-size: 0.9375rem;
	text-transform: none;
}

.rhr-products .rhr-product__name {
	font-size: 1.1em;
}

/* A little less room for the small Buy buttons, so a shop name like
   "Beyerdynamic" fits on its line at the larger size. */
.rhr-products .rhr-shop__buy {
	flex-basis: 30%;
}

.rhr-products .rhr-shop__name {
	overflow-wrap: normal;
}

/* Comments under a review: hand-ruled boxes, handwriting for the people, plain ink for what they wrote. */
.rhr-comments {
	clear: both;
	margin: calc(var(--u) * 90) 0 0;
	padding: 0 calc(var(--u) * 30);
	font-size: 0.8em;
	line-height: 1.3;
}

.rhr-comments__title {
	margin: 0 0 0.6em;
	font-size: 1.5em;
}

.rhr-comments__list,
.rhr-comments .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rhr-comments .children {
	margin-left: 1.6em;
}

.rhr-comments .comment-body {
	margin: 0 0 1.1em;
	padding: 0 0 0.9em;
	background: var(--pen-underline) left bottom / 100% 0.1em no-repeat;
}

.rhr-comments .comment-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.8em;
	margin-bottom: 0.3em;
}

.rhr-comments .comment-author .fn {
	font-weight: 400;
	font-size: 1.1em;
}

.rhr-comments .comment-author .says {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.rhr-comments .comment-metadata,
.rhr-comments .comment-awaiting-moderation {
	font-size: 0.7em;
}

.rhr-comments .comment-metadata a,
.rhr-comments .reply a,
.rhr-comments__form .logged-in-as a,
#cancel-comment-reply-link {
	text-decoration: none;
}

.rhr-comments .comment-content p {
	margin: 0 0 0.6em;
}

.rhr-comments .reply {
	font-size: 0.75em;
}

.rhr-comments .reply a,
#cancel-comment-reply-link {
	padding-bottom: 0.06em;
	background: var(--pen-underline) left bottom / 100% 0.14em no-repeat;
}

.rhr-comments .reply a:hover,
.rhr-comments .reply a:focus-visible,
#cancel-comment-reply-link:hover,
#cancel-comment-reply-link:focus-visible {
	color: var(--ink-blue);
	background-image: url(assets/img/hand-drawn-underline-blue.png);
}

.rhr-comments__form-title {
	margin: 1.2em 0 0.3em;
	font-size: 1.2em;
}

.rhr-comments__form-title small {
	margin-left: 0.8em;
	font-size: 0.6em;
}

.rhr-comments__note,
.rhr-comments__closed {
	margin: 0 0 0.8em;
	font-size: 0.6em;
}

.rhr-comments__form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1.2em;
	max-width: 40em;
}

.rhr-comments__form > * {
	grid-column: 1 / -1;
	margin: 0 0 0.8em;
}

.rhr-comments__form .comment-form-author,
.rhr-comments__form .comment-form-email {
	grid-column: auto;
}

.rhr-comments__form label {
	display: block;
	margin-bottom: 0.15em;
	font-size: 0.8em;
}

.rhr-comments__hint {
	font-size: 0.8em;
}

.rhr-comments__form .comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: 0.75em;
}

.rhr-comments__form .comment-form-cookies-consent label {
	display: inline;
	margin: 0;
	font-size: 1em;
}

.rhr-comments__form input[type="checkbox"] {
	width: 1em;
	height: 1em;
	margin: 0;
	accent-color: var(--ink);
}

/* What people wrote, and the form's small print, are in the reading font.
   Names, titles and the drawn button keep the hand. */
.rhr-comments .comment-content,
.rhr-comments .comment-metadata,
.rhr-comments .comment-awaiting-moderation,
.rhr-comments .reply,
.rhr-comments__note,
.rhr-comments__closed,
.rhr-comments__form label,
.rhr-comments__hint,
.rhr-comments__form .comment-form-cookies-consent,
.rhr-comments__form .logged-in-as {
	font-family: var(--read);
	-webkit-text-stroke: 0;
}

.rhr-comments .comment-content {
	font-size: 1rem;
	line-height: 1.55;
}

.rhr-comments .comment-metadata,
.rhr-comments .comment-awaiting-moderation,
.rhr-comments__note,
.rhr-comments__closed,
.rhr-comments__hint,
.rhr-comments__form .comment-form-cookies-consent,
.rhr-comments__form .logged-in-as {
	font-size: 0.875rem;
	line-height: 1.45;
}

.rhr-comments .reply,
.rhr-comments__form label {
	font-size: 0.9375rem;
}

.rhr-comments__form .comment-form-cookies-consent label {
	font-size: 1em;
}

/* Inputs look ruled by hand: slightly uneven corners in pen ink. */
.rhr-comments__form input[type="text"],
.rhr-comments__form input[type="email"],
.rhr-comments__form textarea {
	width: 100%;
	padding: 0.35em 0.55em;
	border: 2px solid var(--ink);
	border-radius: 255px 12px 225px 12px / 12px 225px 12px 255px;
	background: var(--field);
	color: var(--ink);
	font: inherit;
	font-family: var(--read);
	font-size: 1rem;
	line-height: 1.45;
	-webkit-text-stroke: 0;
}

.rhr-comments__form textarea {
	min-height: 7em;
	border-radius: 12px 225px 12px 255px / 255px 12px 225px 12px;
	resize: vertical;
}

.rhr-comments__form input:focus,
.rhr-comments__form textarea:focus {
	border-color: var(--ink-blue);
	box-shadow: 0 0 0 1px var(--ink-blue);
}

.rhr-comments__submit {
	padding: 0.25em 1.1em 0.3em;
	border: 2.5px solid var(--ink);
	border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px;
	background: transparent;
	color: var(--ink);
	font: inherit;
	cursor: pointer;
	transition: color 0.12s ease, border-color 0.12s ease, transform 0.15s ease;
}

.rhr-comments__submit:hover,
.rhr-comments__submit:focus-visible {
	color: var(--ink-blue);
	border-color: var(--ink-blue);
	transform: rotate(-1deg);
}

/* Only bots see and fill in this field. */
.rhr-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* About the author: who wrote this, and where else to find their work. */
.rhr-author {
	clear: both;
	display: flex;
	align-items: flex-start;
	gap: calc(var(--u) * 44);
	margin: calc(var(--u) * 70) calc(var(--u) * 150) 0 calc(var(--u) * 50);
	padding: calc(var(--u) * 54) calc(var(--u) * 56) calc(var(--u) * 70) calc(var(--u) * 60);
	line-height: 1.24;
}

.rhr-author__photo {
	flex: 0 0 auto;
	width: calc(var(--u) * 190);
}

.rhr-author__text {
	min-width: 0;
}

.rhr-author__text > * {
	margin: 0 0 0.35em;
}

.rhr-author__name {
	font-size: 1.35em;
}

.rhr-author__role,
.rhr-author__bio {
	font-family: var(--read);
	-webkit-text-stroke: 0;
}

.rhr-author__role {
	font-size: 0.9375rem;
	font-style: italic;
}

.rhr-author__bio {
	font-size: 1rem;
	line-height: 1.55;
}

.rhr-author__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2em 1.4em;
	margin: 0.5em 0 0;
	padding: 0;
	list-style: none;
}

.rhr-author__links a,
.rhr-byline a {
	text-decoration: none;
	padding-bottom: 0.08em;
	background: var(--pen-underline) left bottom / 100% 0.14em no-repeat;
}

.rhr-author__links a:hover,
.rhr-author__links a:focus-visible,
.rhr-byline a:hover,
.rhr-byline a:focus-visible {
	color: var(--ink-blue);
	background-image: url(assets/img/hand-drawn-underline-blue.png);
}

.rhr-section > .rhr-author {
	margin: 0 0 calc(var(--u) * 70);
}

/* The big slider in the middle of a review. */
.rhr-central {
	clear: both;
	margin: 1.2em calc(var(--u) * 150) 1.4em calc(var(--u) * 20);
}

.rhr-central .rhr-slider {
	--gap: calc(var(--u) * 30);
}

.rhr-central .rhr-slider--inside > .rhr-slider__arrow {
	padding: calc(var(--u) * 14);
	border-radius: 50%;
	background: rgba(250, 246, 235, 0.86);
}

.rhr-central .rhr-slider--inside > .rhr-slider__arrow--prev {
	left: calc(var(--u) * 24);
}

.rhr-central .rhr-slider--inside > .rhr-slider__arrow--next {
	right: calc(var(--u) * 28);
}

/* ------------------------------------------------------------------
   12. Plain pages (About, Contact)
   ------------------------------------------------------------------ */

.rhr-plain {
	padding: 0 calc(var(--u) * 110) 0 calc(var(--u) * 60);
}

.rhr-plain__title-art {
	margin: 0;
	line-height: 0;
}

.rhr-plain__title-art .rhr-art {
	width: 100%;
}

.rhr-plain__head .rhr-title--xl {
	padding-left: calc(var(--u) * 70);
}

.rhr-plain__body {
	padding: 0 calc(var(--u) * 150) 0 calc(var(--u) * 95);
}

.rhr-plain__image {
	margin: calc(var(--u) * 80) calc(var(--u) * 170) 0 calc(var(--u) * 125);
}

/* ------------------------------------------------------------------
   13. Small screens
   ------------------------------------------------------------------ */

@media (max-width: 900px) {
	:root {
		--col: min(100vw, 620px); /* phone layout: one readable column, never wider than this */
		--vw: calc(var(--col) / 100);
		--u: calc(var(--col) / 1000);
		--au: calc(var(--col) / 880);
	}

	.rhr-header,
	.rhr-header--videos {
		flex-direction: column;
		align-items: center;
		gap: calc(var(--u) * 34);
		min-height: 0;
		padding: calc(var(--u) * 30) calc(var(--vw) * 4) 0;
	}

	.rhr-header .rhr-nav,
	.rhr-header--home .rhr-nav,
	.rhr-header--videos .rhr-nav {
		width: 100%;
		margin: 0;
	}

	.rhr-header .rhr-nav ul {
		align-items: center;
		justify-content: space-around;
		gap: calc(var(--vw) * 2);
	}

	.rhr-header .rhr-nav li {
		margin: 0 !important;
	}

	.rhr-nav .rhr-art {
		--au: calc(var(--col) / 951);
	}

	.rhr-section,
	.rhr-section--latest,
	.rhr-section--reviews,
	.rhr-section--home-deals,
	.rhr-section--lead,
	.rhr-section--grid,
	.rhr-section--video-latest,
	.rhr-section--video-more,
	.rhr-section--deals {
		margin-top: calc(var(--u) * 90) !important;
		padding: 0 calc(var(--vw) * 5);
	}

	.rhr-header + .rhr-main > .rhr-section:first-child {
		margin-top: calc(var(--u) * 50) !important;
	}

	/* Tabs sit on the top-left corner of whatever they label. */
	.rhr-label {
		position: relative;
		left: auto;
		top: auto;
		width: fit-content;
		margin: 0 0 calc(var(--u) * -62) calc(var(--u) * -16);
	}

	.rhr-label--label-latest-home,
	.rhr-label--label-latest-videos {
		margin-bottom: calc(var(--u) * -104);
	}

	/* One card at a time; arrows move underneath. */
	.rhr-slider {
		--aw: 0px;
		--gap: calc(var(--vw) * 5);
		grid-template-columns: 1fr 1fr;
		row-gap: calc(var(--u) * 20);
		margin: 0;
	}

	.rhr-slider__track {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.rhr-slider__item {
		flex-basis: calc((100% - var(--gap) * (var(--mper, 1) - 1)) / var(--mper, 1));
	}

	.rhr-section--home-deals .rhr-slider,
	.rhr-box--outer .rhr-slider {
		--mper: 1.35;
	}

	.rhr-slider__arrow {
		grid-row: 2;
		margin: 0 !important;
		padding: calc(var(--u) * 22);
	}

	.rhr-slider__arrow--prev {
		justify-self: end;
	}

	.rhr-slider__arrow--next {
		justify-self: start;
	}

	.rhr-slider--inside {
		display: grid;
	}

	.rhr-slider--inside > .rhr-slider__arrow {
		position: static;
		margin-top: 0;
		background: none;
	}

	.rhr-box--outer {
		--bu: calc(var(--u) * 0.8);
		padding: calc(var(--u) * 80) calc(var(--u) * 50) calc(var(--u) * 46) calc(var(--u) * 56);
	}

	.rhr-grid {
		grid-template-columns: 1fr;
		gap: calc(var(--u) * 60);
	}

	.rhr-grid > :nth-child(even) {
		margin-top: 0;
	}

	/* The wide "Latest" review card becomes a stacked box. */
	.rhr-fcard--split {
		--bu: calc(var(--u) * 0.8);
		aspect-ratio: auto;
		container-type: normal;
		padding: calc(var(--u) * 50) calc(var(--u) * 62) calc(var(--u) * 56);
	}

	.rhr-fcard--split::after {
		display: none;
	}

	.rhr-fcard--split::before {
		display: block;
	}

	/* Two classes so this wins over the generated desktop shape in frames.css. */
	.rhr-fcard.rhr-fcard--split > .rhr-fcard__photo {
		position: relative;
		inset: auto;
		aspect-ratio: 4 / 3;
		clip-path: none;
	}

	.rhr-fcard--split > .rhr-fcard__text,
	.rhr-fcard--split > .rhr-fcard__right,
	.rhr-fcard--split > .rhr-fcard__more {
		position: static;
	}

	.rhr-fcard--split > .rhr-fcard__text {
		margin-top: calc(var(--u) * 14);
		padding: calc(var(--u) * 34) 0 calc(var(--u) * 26);
		background: var(--pen-divider) center top / 100% calc(var(--u) * 22) no-repeat;
	}

	.rhr-fcard--split .rhr-split__title {
		font-size: 1.25em;
	}

	.rhr-fcard--split .rhr-byline {
		font-size: 1em;
	}

	.rhr-fcard--split > .rhr-fcard__right {
		font-size: 1.0625rem;
		padding-top: calc(var(--u) * 34);
		background: var(--pen-divider-2) center top / 100% calc(var(--u) * 22) no-repeat;
	}

	.rhr-fcard--split > .rhr-fcard__more {
		align-items: flex-end;
		margin-top: calc(var(--u) * 20);
	}

	.rhr-fcard--split > .rhr-fcard__more .rhr-art {
		width: 62%;
	}

	.rhr-review,
	.rhr-plain {
		padding: calc(var(--u) * 30) calc(var(--vw) * 4) 0;
	}

	.rhr-review__top--split {
		display: block;
	}

	.rhr-review__top--split .rhr-review__head,
	.rhr-review__top--split + .rhr-review__note {
		padding-left: calc(var(--vw) * 2);
	}

	.rhr-review__hero {
		margin-top: 0.8em;
	}

	.rhr-review__note,
	.rhr-review__head,
	.rhr-plain__head .rhr-title--xl,
	.rhr-plain__body,
	.rhr-prose {
		padding-inline: calc(var(--vw) * 2);
	}

	.rhr-review__head .rhr-byline,
	.rhr-disclosure {
		padding-left: 0;
	}

	/* On phones the byline is as big as the subhead above it. The hand is
	   smaller on the line than Fraunces, so it is set a fifth larger. */
	.rhr-review__head .rhr-byline {
		font-size: calc(clamp(1.15rem, 1rem + 0.45vw, 1.375rem) * 1.2);
	}

	.rhr-byline__avatar {
		width: calc(var(--u) * 110);
	}

	.rhr-products {
		float: none;
		width: min(100%, 300px);
		margin: 0 auto 1em;
		--bu: calc(var(--u) * 0.8);
	}

	.rhr-central,
	.rhr-plain__image {
		margin-inline: 0;
	}

	.rhr-author {
		--bu: calc(var(--u) * 0.8);
		margin: calc(var(--u) * 80) calc(var(--vw) * 2) 0;
		padding: calc(var(--u) * 60) calc(var(--u) * 56) calc(var(--u) * 80);
		gap: calc(var(--u) * 36);
	}

	.rhr-author__photo {
		width: calc(var(--u) * 180);
	}

	.rhr-author__links {
		flex-direction: column;
	}

	.rhr-author__links a {
		display: inline-block;
		padding-block: 6px;
	}

	.rhr-footer {
		flex-direction: column;
		align-items: center;
		gap: calc(var(--u) * 44);
		margin-top: calc(var(--u) * 90);
		padding: 0 calc(var(--vw) * 5);
	}

	.rhr-footer .rhr-art {
		--au: calc(var(--col) / 1300);
	}

	/* ---- Readability on phones ---- */

	.rhr-page {
		width: min(100%, 620px);
	}

	body {
		font-size: 1.4rem;
	}

	.rhr-prose {
		line-height: 1.32;
	}

	.rhr-review__body {
		font-size: 1.125rem;
	}

	.rhr-comments {
		padding-inline: calc(var(--vw) * 2);
		font-size: 0.94em;
	}

	.rhr-comments__form {
		grid-template-columns: 1fr;
	}

	.rhr-comments .children {
		margin-left: 0.8em;
	}

	/* Bigger navigation drawings: each page's set is scaled to fill the width. */
	.rhr-header--reviews .rhr-nav .rhr-art,
	.rhr-header--videos .rhr-nav .rhr-art {
		--au: calc(var(--col) / 760);
	}

	.rhr-header--deals .rhr-nav .rhr-art {
		--au: calc(var(--col) / 810);
	}

	/* Homepage: the flaming Deals drawing is much larger than the other two, so it gives them some room. */
	.rhr-header--home .rhr-nav .rhr-art {
		--au: calc(var(--col) / 860);
	}

	.rhr-header--home .rhr-nav__item--deals .rhr-art {
		--au: calc(var(--col) / 1150);
	}

	.rhr-nav a {
		padding-block: 6px;
	}

	.rhr-label .rhr-art {
		--au: calc(var(--col) / 800);
	}

	/* Arrows, page numbers and "Read more" get finger-sized tap areas. */
	.rhr-slider__arrow {
		display: grid;
		place-items: center;
		min-width: 56px;
		min-height: 52px;
	}

	.rhr-slider__arrow .rhr-art {
		--au: calc(var(--col) / 700);
	}

	.page-numbers {
		display: inline-grid;
		place-items: center;
		min-width: 44px;
		min-height: 44px;
	}

	.rhr-fcard--split > .rhr-fcard__more {
		padding-block: 12px;
	}

	/* Homepage review cards: larger author and summary text. */
	.rhr-fcard--home-a .rhr-fcard__title,
	.rhr-fcard--home-b .rhr-fcard__title {
		font-size: 7.4cqw;
	}

	.rhr-fcard--home-a .rhr-byline,
	.rhr-fcard--home-b .rhr-byline {
		font-size: 6.1cqw;
	}

	.rhr-fcard--home-a .rhr-fcard__excerpt,
	.rhr-fcard--home-b .rhr-fcard__excerpt {
		font-size: 5.3cqw;
	}

	/* Deals: one card at a time so names and prices are large. */
	.rhr-box--outer .rhr-slider {
		--mper: 1.06;
	}

	.rhr-section--home-deals .rhr-slider {
		--mper: 1.25;
	}

	.rhr-fcard--deal-a .rhr-deal__name,
	.rhr-fcard--deal-b .rhr-deal__name {
		font-size: 7.4cqw;
	}

	.rhr-fcard--deal-a .rhr-prices,
	.rhr-fcard--deal-b .rhr-prices {
		margin-top: 0.3cqw;
		font-size: 8.2cqw;
	}

	.rhr-caption,
	.rhr-product__name {
		font-size: 1em;
	}
}

/* ------------------------------------------------------------------
   Search and every deal
   ------------------------------------------------------------------ */

/* Fields and buttons look ruled by hand, like the comment form. */
.rhr-field {
	min-width: 0;
	padding: 0.32em 0.55em;
	border: 2px solid var(--ink);
	border-radius: 255px 12px 225px 12px / 12px 225px 12px 255px;
	background: var(--field);
	color: var(--ink);
	font: inherit;
	font-family: var(--read);
	font-size: max(16px, 0.62em); /* 16px or more, or phones zoom in on the box */
	line-height: 1.35;
	-webkit-text-stroke: 0;
}

.rhr-field:focus {
	border-color: var(--ink-blue);
	box-shadow: 0 0 0 1px var(--ink-blue);
}

select.rhr-field {
	padding-right: 1.8em;
	background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.3c1.7 1.9 3.2 3.6 5 5.4 1.6-1.9 3.3-3.6 5-5.3' fill='none' stroke='%230a0c12' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 0.6em center / 0.7em auto;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.rhr-button {
	flex: none;
	padding: 0.2em 0.9em 0.25em;
	border: 2.5px solid var(--ink);
	border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px;
	background: transparent;
	color: var(--ink);
	font: inherit;
	font-size: 0.8em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.12s ease, border-color 0.12s ease, transform 0.15s ease;
}

.rhr-button:hover,
.rhr-button:focus-visible {
	color: var(--ink-blue);
	border-color: var(--ink-blue);
	transform: rotate(-1deg);
}

.rhr-search {
	display: flex;
	align-items: center;
	gap: 0.4em;
}

.rhr-search__input {
	flex: 1;
}

/* The magnifying glass in the top corner of every page. */
.rhr-header {
	position: relative;
}

.rhr-find {
	position: absolute;
	z-index: 40;
	top: calc(var(--u) * 34);
	right: calc(var(--u) * 46);
}

.rhr-find__toggle {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.05em;
	padding: 0.2em;
	font-size: 0.72em;
	line-height: 1;
	text-transform: uppercase;
	list-style: none;
	cursor: pointer;
	transition: color 0.12s ease, transform 0.15s ease;
}

.rhr-find__toggle::-webkit-details-marker {
	display: none;
}

.rhr-find__toggle:hover,
.rhr-find[open] .rhr-find__toggle {
	color: var(--ink-blue);
	transform: rotate(-3deg) scale(1.04);
}

.rhr-magnifier {
	display: block;
	width: max(30px, calc(var(--u) * 66));
	height: auto;
}

.rhr-find__panel {
	position: absolute;
	top: calc(100% + 0.3em);
	right: 0;
	width: min(88vw, 520px);
	padding: 0.55em;
	border: 2.5px solid var(--ink);
	border-radius: 12px 225px 12px 255px / 255px 12px 225px 12px;
	background: var(--paper-bg);
	box-shadow: 4px 6px 0 var(--lift);
}

/* The search page. */
.rhr-section--search,
.rhr-section--all-deals {
	margin-top: calc(var(--u) * 40);
	padding: 0 calc(var(--u) * 185);
}

.rhr-search--page {
	max-width: 760px;
	margin: 0.4em 0 0.2em;
}

.rhr-search--page .rhr-field {
	font-size: max(17px, 0.75em);
}

.rhr-search-note,
.rhr-deal-count {
	margin: 0.5em 0 0;
	font-family: var(--read);
	font-size: 1rem;
	-webkit-text-stroke: 0;
}

.rhr-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em 0.5em;
	margin: 0.8em 0 0;
	font-size: 0.8em;
}

.rhr-chip {
	padding: 0.1em 0.7em 0.15em;
	border: 2px solid var(--ink);
	border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
	text-decoration: none;
	text-transform: uppercase;
}

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

.rhr-chip[aria-current="page"] {
	background: var(--ink);
	color: var(--paper);
}

.rhr-chip__n {
	font-size: 0.8em;
	opacity: 0.75;
}

.rhr-results {
	margin-top: calc(var(--u) * 80);
}

.rhr-results__title {
	margin: 0 0 calc(var(--u) * 40);
	font-size: 1.25em;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	-webkit-text-stroke: 0.024em currentColor;
}

.rhr-results__title::after {
	content: "";
	display: block;
	width: 3.2em;
	height: 3px;
	margin-top: 0.12em;
	border-radius: 3px;
	background: currentColor;
	transform: rotate(-1deg);
}

.rhr-results__videos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: calc(var(--u) * 50);
}

.rhr-more,
.rhr-all-deals-link {
	margin: calc(var(--u) * 40) 0 0;
	text-align: right;
	font-size: 0.85em;
}

.rhr-more a,
.rhr-all-deals-link a,
.rhr-back a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.18em;
}

.rhr-more a:hover,
.rhr-all-deals-link a:hover,
.rhr-back a:hover {
	color: var(--ink-blue);
}

/* Every deal: three across, each card as on the Deals page. */
.rhr-deal-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: calc(var(--u) * 60) calc(var(--u) * 46);
	margin-top: calc(var(--u) * 40);
}

.rhr-deal-grid__item[hidden] {
	display: none;
}

.rhr-deal-grid__off {
	margin: 0.3em 0 0;
	font-size: 0.66em;
	text-align: center;
	text-transform: uppercase;
}

.rhr-back {
	margin: 0 0 0.3em;
	font-size: 0.75em;
}

/* Search and order, on the Deals page and above every deal. */
.rhr-deal-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.5em 0.7em;
	margin-top: 0.7em;
}

.rhr-deal-tools__field {
	display: flex;
	flex-direction: column;
	gap: 0.12em;
}

.rhr-deal-tools__field--q {
	flex: 1 1 14em;
}

.rhr-deal-tools label {
	font-size: 0.62em;
	text-transform: uppercase;
}

.rhr-section--deal-tools {
	margin-top: calc(var(--u) * 10) !important;
	margin-bottom: calc(var(--u) * 120);
}

.rhr-section--deal-tools .rhr-deal-tools {
	margin-top: 0;
}

.rhr-section--deal-tools .rhr-all-deals-link {
	margin-top: 0.5em;
}

.rhr-all-deals-link--end {
	margin: calc(var(--u) * 70) calc(var(--u) * 185) 0;
	text-align: center;
	font-size: 1em;
}

@media (max-width: 900px) {
	.rhr-find {
		top: calc(var(--u) * 20);
		right: calc(var(--vw) * 3);
	}

	.rhr-find__toggle {
		font-size: 0.62em;
	}

	.rhr-find__panel {
		width: calc(100vw - var(--vw) * 6);
		max-width: 520px;
	}

	.rhr-section--search,
	.rhr-section--all-deals {
		padding: 0 calc(var(--vw) * 5);
	}

	.rhr-deal-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: calc(var(--u) * 70) calc(var(--u) * 40);
	}

	.rhr-section--deal-tools {
		margin-bottom: calc(var(--u) * 130);
	}

	.rhr-all-deals-link--end {
		margin-inline: calc(var(--vw) * 5);
	}
}

@media (max-width: 600px) {
	.rhr-deal-grid,
	.rhr-results__videos {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Sort and shop share a row with Go, under the search box. */
	.rhr-deal-tools__field--q {
		flex-basis: 100%;
	}

	.rhr-deal-tools__field:not(.rhr-deal-tools__field--q) {
		flex: 1 1 0;
		min-width: 0;
	}

	.rhr-deal-tools__field select {
		width: 100%;
		text-overflow: ellipsis;
	}
}

/* ------------------------------------------------------------------
   Newsletter signup
   ------------------------------------------------------------------ */

/* A note pinned above the footer of every page, ruled like the search panel. */
/* Image credits: who took or supplied each picture on the page, in the handwriting. */
.rhr-credits {
	max-width: 820px;
	margin: calc(var(--u) * 110) auto 0;
	padding: 0 0.8em;
	font-family: var(--hand);
	font-size: 0.62em;
	line-height: 1.3;
	text-align: center;
	opacity: 0.85;
}

.rhr-credits__label {
	margin-right: 0.2em;
}

.rhr-credits a {
	color: inherit;
	text-decoration: none;
	background: var(--pen-underline) left bottom / 100% 0.12em no-repeat;
}

.rhr-credits a:hover,
.rhr-credits a:focus-visible {
	color: var(--ink-blue);
	background-image: url(assets/img/hand-drawn-underline-blue.png);
}

/* The newsletter box sits closer when the credits come first. */
.rhr-credits + .rhr-newsletter {
	margin-top: calc(var(--u) * 70);
}

.rhr-newsletter {
	max-width: 820px;
	margin: calc(var(--u) * 130) auto 0;
	padding: 0.6em 0.8em 0.7em;
	border: 2.5px solid var(--ink);
	border-radius: 12px 225px 12px 255px / 255px 12px 225px 12px;
	background: var(--paper-bg);
	box-shadow: 4px 6px 0 var(--lift);
	text-align: center;
	transform: rotate(-0.4deg);
}

.rhr-newsletter--inline {
	margin: 1.2em auto;
	font-family: var(--hand);
	font-size: 1.66em; /* back up to the page's size from the smaller review text */
	line-height: 1.3;
}

.rhr-newsletter__title,
.rhr-prose .rhr-newsletter__title {
	margin: 0;
	font-size: 1.15em;
}

.rhr-newsletter__text {
	max-width: 36em;
	margin: 0.35em auto 0.55em;
	font-family: var(--read);
	font-size: 1rem;
	line-height: 1.45;
	-webkit-text-stroke: 0;
}

.rhr-newsletter__form {
	display: flex;
	align-items: center;
	gap: 0.4em;
	max-width: 560px;
	margin: 0 auto;
}

.rhr-newsletter__form[hidden] {
	display: none;
}

.rhr-newsletter__email {
	flex: 1;
}

.rhr-newsletter__go[disabled],
.rhr-newsletter__go[aria-disabled="true"] {
	opacity: 0.5;
	cursor: wait;
}

.rhr-newsletter__message {
	margin: 0.4em 0 0;
	outline: none;
	font-family: var(--read);
	font-size: 0.9375rem;
	-webkit-text-stroke: 0;
}

/* Kept on the page while empty so screen readers announce what appears in it. */
.rhr-newsletter__message:empty {
	margin: 0;
}

.rhr-newsletter__message--error {
	color: var(--error);
}

@media (max-width: 900px) {
	.rhr-newsletter {
		margin: calc(var(--u) * 110) calc(var(--vw) * 4) 0;
		padding: 0.55em 0.6em 0.65em;
	}

	.rhr-newsletter--inline {
		margin-inline: 0;
		font-size: 1.25em;
	}
}

@media (max-width: 420px) {
	.rhr-newsletter__form {
		flex-wrap: wrap;
	}

	.rhr-newsletter__email,
	.rhr-newsletter__go {
		flex: 1 1 100%;
	}
}

/* ------------------------------------------------------------------
   Roundups: the picks at the top of a buying guide
   ------------------------------------------------------------------ */

.rhr-roundup,
.rhr-prose > .rhr-roundup,
.rhr-review__text > .rhr-roundup {
	clear: both;
	margin: 1.6em 0 2em;
}

.rhr-prose .rhr-roundup__title {
	margin: 0 0 0.5em;
}

/* The quick list: a ruled box with each pick's label, name and lowest price. */
.rhr-roundup__list {
	margin: 0 0 1.6em;
	padding: calc(var(--u) * 46) calc(var(--u) * 52) calc(var(--u) * 66) calc(var(--u) * 50);
	list-style: none;
	counter-reset: pick;
}

.rhr-roundup__item {
	display: flex;
	align-items: center;
	gap: 0.9em;
	padding: 0.5em 0 0.55em;
	counter-increment: pick;
}

/* A pen line between the picks. */
.rhr-roundup__item + .rhr-roundup__item {
	background: var(--pen-divider) left top / 100% 0.22em no-repeat;
}

.rhr-roundup__jump,
.rhr-prose a.rhr-roundup__jump {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: 1.4em minmax(0, 1fr);
	align-items: baseline;
	column-gap: 0.3em;
	min-width: 0;
	padding: 0;
	background: none;
	color: inherit;
	text-decoration: none;
}

.rhr-roundup__jump::before {
	content: counter(pick) ".";
	grid-row: 1 / span 2;
	font-size: 1.35em;
	line-height: 1;
	-webkit-text-stroke: 0.03em currentColor;
}

.rhr-roundup__label {
	grid-column: 2;
	font-size: 0.8em;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.8;
}

.rhr-roundup__name {
	grid-column: 2;
	font-size: 1.2em;
	line-height: 1.05;
	text-transform: uppercase;
	-webkit-text-stroke: 0.024em currentColor;
}

.rhr-roundup__jump:hover .rhr-roundup__name,
.rhr-roundup__jump:focus-visible .rhr-roundup__name {
	color: var(--ink-blue);
}

.rhr-roundup__shop,
.rhr-prose a.rhr-roundup__shop {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0;
	background: none;
	color: inherit;
	text-decoration: none;
}

.rhr-roundup__where {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.05;
}

.rhr-roundup__where .rhr-prices {
	font-size: 1.125rem;
}

.rhr-roundup__store {
	font-size: 0.875rem;
}

.rhr-roundup__shop .rhr-shop__buy {
	flex: 0 0 auto;
	width: 5.2em;
}

.rhr-roundup__shop:hover .rhr-roundup__store,
.rhr-roundup__shop:focus-visible .rhr-roundup__store {
	color: var(--ink-blue);
}

.rhr-roundup__shop:hover .rhr-shop__buy,
.rhr-roundup__shop:focus-visible .rhr-shop__buy {
	transform: rotate(-1.5deg) scale(1.03);
}

a.rhr-roundup__shop:hover .rhr-art,
a.rhr-roundup__shop:focus-visible .rhr-art {
	filter: none;
}

.rhr-roundup__shop:hover .rhr-shop__buy::before,
.rhr-roundup__shop:focus-visible .rhr-shop__buy::before {
	filter: saturate(1.25) brightness(0.94);
}

/* One pick: label and name over the text on the right, the photo and shops on the left. */
.rhr-pick {
	display: grid;
	grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"media head"
		"media text";
	column-gap: calc(var(--u) * 70);
	row-gap: 0.5em;
	margin: 0 0 1.5em;
	padding: calc(var(--u) * 52) calc(var(--u) * 60) calc(var(--u) * 78) calc(var(--u) * 56);
	line-height: 1.24;
	scroll-margin-top: 1em;
}

.rhr-pick__head {
	grid-area: head;
}

.rhr-pick__label {
	margin: 0 0 0.35em;
	line-height: 1;
}

/* The label is coloured in with the yellow of the logo. */
.rhr-pick__label > span {
	display: inline-block;
	padding: 0.22em 0.55em 0.16em;
	border-radius: 0.2em 0.6em 0.25em 0.5em / 0.5em 0.25em 0.6em 0.2em;
	background: var(--marker);
	color: var(--on-marker);
	font-size: 0.8em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transform: rotate(-1.2deg);
	-webkit-text-stroke: 0.024em currentColor;
}

.rhr-pick .rhr-pc__brand {
	margin: 0;
	font-size: 0.8125rem;
}

.rhr-prose .rhr-pick__name {
	margin: 0.05em 0 0;
	font-size: 1.65em;
	line-height: 0.98;
}

.rhr-pick__media {
	grid-area: media;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5em;
	min-width: 0;
}

.rhr-pick__buy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3em;
	width: min(100%, 15em);
	font-size: 1.15em;
	line-height: 1.1;
}

.rhr-pick__buy > .rhr-prices {
	justify-content: center;
}

.rhr-pick__buy .rhr-buy {
	width: min(100%, 8.5em);
}

.rhr-pick__buy .rhr-shop__price {
	justify-content: flex-end;
}

.rhr-pick__text {
	grid-area: text;
	min-width: 0;
}

.rhr-pick__text > * {
	margin: 0 0 0.75em;
}

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

.rhr-prose .rhr-pick__text h2,
.rhr-prose .rhr-pick__text h3,
.rhr-prose .rhr-pick__text h4 {
	margin: 0.9em 0 0.3em;
	font-size: 1.1em;
}

.rhr-roundup .rhr-pc__people {
	max-width: 40em;
	margin: 0 auto;
}

/* The line about real people (under the first product card, and in a
   roundup) is in the reading font, like the affiliate disclaimer. */
:is(.rhr-products, .rhr-roundup) .rhr-pc__people {
	font-family: var(--read);
	font-size: 0.875rem;
	line-height: 1.45;
	opacity: 0.85;
	-webkit-text-stroke: 0;
}

@media (max-width: 900px) {
	.rhr-roundup__list {
		--bu: calc(var(--u) * 0.8);
		padding: calc(var(--u) * 50) calc(var(--u) * 46) calc(var(--u) * 70) calc(var(--u) * 46);
	}

	.rhr-roundup__item {
		gap: 0.6em;
	}

	.rhr-roundup__name {
		font-size: 1.05em;
	}

	/* On phones the price sits over a smaller Buy button. */
	.rhr-roundup__shop,
	.rhr-prose a.rhr-roundup__shop {
		flex-direction: column;
		align-items: flex-end;
		gap: 0.15em;
	}

	.rhr-roundup__shop .rhr-shop__buy {
		width: 4.4em;
	}

	/* Then each pick stacks: label and name, photo, shops, and what was written. */
	.rhr-pick {
		--bu: calc(var(--u) * 0.8);
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-template-areas:
			"head"
			"media"
			"text";
		row-gap: 0.6em;
		padding: calc(var(--u) * 56) calc(var(--u) * 54) calc(var(--u) * 80) calc(var(--u) * 54);
	}

	.rhr-pick__head {
		text-align: center;
	}

	.rhr-pick__image {
		width: min(100%, 300px);
	}

	.rhr-pick__buy {
		width: min(100%, 320px);
	}

	.rhr-pick__text {
		margin-top: 0.3em;
	}
}

/* ------------------------------------------------------------------
   Scores: the box at the top of a review, and the small score on cards
   ------------------------------------------------------------------ */

.rhr-score,
.rhr-prose > .rhr-score {
	clear: both;
	margin: 0 0 1.6em;
	padding: calc(var(--u) * 46) calc(var(--u) * 56) calc(var(--u) * 68) calc(var(--u) * 52);
	line-height: 1.24;
	scroll-margin-top: 1em;
}

/* A pen line between the parts that were filled in. */
.rhr-score > * + * {
	margin-top: 0.9em;
	padding-top: 0.9em;
	background: var(--pen-divider) left top / 100% 0.22em no-repeat;
}

.rhr-score__top {
	display: flex;
	align-items: center;
	gap: 1em;
}

/* The score, circled in pen. */
.rhr-score__mark {
	flex: 0 0 auto;
	display: flex;
	align-items: baseline;
	justify-content: center;
	box-sizing: border-box;
	width: 4.4em;
	height: 4.4em;
	margin: 0;
	padding-top: 0.9em;
	border: 0.13em solid var(--ink);
	border-radius: 52% 48% 55% 45% / 47% 55% 45% 53%;
	transform: rotate(-4deg);
}

.rhr-score__num {
	font-size: 2.3em;
	line-height: 0.8;
	-webkit-text-stroke: 0.03em currentColor;
}

/* "7.5" needs more room inside the circle than "7". */
.rhr-score__mark--half .rhr-score__num {
	font-size: 1.75em;
}

.rhr-score__of {
	margin-left: 0.05em;
	font-size: 1.15em;
}

.rhr-score__head {
	min-width: 0;
}

.rhr-prose .rhr-score__title {
	margin: 0 0 0.3em;
	font-size: 1em;
	line-height: 1;
	-webkit-text-stroke: 0;
}

/* The word for the score is coloured in with the yellow of the logo, like a roundup label. */
.rhr-score__title > span {
	display: inline-block;
	padding: 0.22em 0.55em 0.16em;
	border-radius: 0.2em 0.6em 0.25em 0.5em / 0.5em 0.25em 0.6em 0.2em;
	background: var(--marker);
	color: var(--on-marker);
	font-size: 0.9em;
	letter-spacing: 0.06em;
	transform: rotate(-1.2deg);
	-webkit-text-stroke: 0.024em currentColor;
}

.rhr-score__verdict {
	margin: 0;
	font-size: 1.3em;
	line-height: 1.12;
}

.rhr-score__when {
	margin: 0.45em 0 0;
	font-size: 0.8em;
}

/* The rest of the score opens on a tap. */
.rhr-score__more > summary {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding-bottom: 0.08em;
	background: var(--pen-underline) left bottom / 100% 0.14em no-repeat;
	font-size: 0.9em;
	cursor: pointer;
	list-style: none;
}

.rhr-score__more > summary::-webkit-details-marker {
	display: none;
}

.rhr-score__more > summary::after {
	content: "\25B8";
	content: "\25B8" / ""; /* Screen readers already hear "collapsed" or "expanded". */
	transition: transform 0.15s ease;
}

.rhr-score__more[open] > summary::after {
	transform: rotate(90deg);
}

.rhr-score__more > summary:hover,
.rhr-score__more > summary:focus-visible {
	color: var(--ink-blue);
	background-image: url(assets/img/hand-drawn-underline-blue.png);
}

.rhr-score__more > summary + * {
	margin-top: 0.9em;
}

.rhr-score__more > :not(summary) + :not(summary) {
	margin-top: 0.9em;
	padding-top: 0.9em;
	background: var(--pen-divider) left top / 100% 0.22em no-repeat;
}

/* With nothing filled in but the score, or nothing above a closed toggle, the box shrinks to fit. */
.rhr-score--short,
.rhr-prose > .rhr-score--short,
.rhr-prose > .rhr-score--bare:has(> .rhr-score__more:not([open])) {
	width: fit-content;
	max-width: 100%;
	box-sizing: border-box;
}

/* With no score or verdict, "Our verdict" sits straight over the toggle, with no line between. */
.rhr-score--bare > .rhr-score__top + * {
	margin-top: 0.6em;
	padding-top: 0;
	background: none;
}

.rhr-score__fit,
.rhr-score__notes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15em), 1fr));
	gap: 0.6em 2em;
	margin-bottom: 0;
}

.rhr-score__fit dt,
.rhr-prose .rhr-score__notes h3 {
	margin: 0 0 0.15em;
	font-size: 0.9em;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	-webkit-text-stroke: 0.02em currentColor;
}

.rhr-score__fit dd {
	margin: 0;
}

.rhr-prose .rhr-score__notes ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rhr-score__notes li {
	position: relative;
	margin: 0 0 0.3em;
	padding-left: 1.1em;
}

.rhr-score__notes li::before {
	position: absolute;
	left: 0;
	top: -0.02em;
	font-size: 1.15em;
	line-height: 1;
	-webkit-text-stroke: 0.03em currentColor;
}

.rhr-score__pros li::before {
	content: "+";
}

.rhr-score__cons li::before {
	content: "\2212";
}

.rhr-prose .rhr-score__facts {
	margin-bottom: 0;
	padding: 0.9em 0 0;
	list-style: none;
	font-size: 0.9375rem;
}

.rhr-score__facts li + li {
	margin-top: 0.25em;
}

.rhr-score__fact-label {
	font-weight: 600;
}

/* The score box's small print is in the reading font: the date line, the
   toggle, and the text that opens under it. The score, its word, the
   verdict and the headings keep the hand. */
.rhr-score__when,
.rhr-score__more > summary,
.rhr-score__fit dd,
.rhr-score__notes li,
.rhr-score__facts li {
	font-family: var(--read);
	-webkit-text-stroke: 0;
}

.rhr-score__when {
	font-size: 0.9375rem;
}

.rhr-score__more > summary {
	font-size: 1rem;
}

.rhr-score__fit dd,
.rhr-score__notes li {
	font-size: 1rem;
	line-height: 1.45;
}

/* On product cards and roundup picks: "8/10 Recommended", linking to the review. */
.rhr-score-tag {
	margin: 0.15em 0 0.2em;
	font-size: 0.8em;
	line-height: 1;
}

.rhr-score-tag a,
.rhr-prose .rhr-score-tag a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0;
	background: none;
	color: inherit;
	text-decoration: none;
}

.rhr-score-tag__mark {
	display: inline-block;
	padding: 0.2em 0.45em 0.12em;
	border-radius: 0.2em 0.6em 0.25em 0.5em / 0.5em 0.25em 0.6em 0.2em;
	background: var(--marker);
	color: var(--on-marker);
	transform: rotate(-1.5deg);
	-webkit-text-stroke: 0.024em currentColor;
}

.rhr-score-tag__num {
	font-size: 1.25em;
}

.rhr-score-tag__word {
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.rhr-score-tag a:hover .rhr-score-tag__word,
.rhr-score-tag a:focus-visible .rhr-score-tag__word {
	color: var(--ink-blue);
}

.rhr-pick__head .rhr-score-tag {
	margin: 0.45em 0 0;
	font-size: 0.85em;
}

@media (max-width: 900px) {
	.rhr-score,
	.rhr-prose > .rhr-score {
		--bu: calc(var(--u) * 0.8);
		padding: calc(var(--u) * 50) calc(var(--u) * 46) calc(var(--u) * 72) calc(var(--u) * 46);
	}

	.rhr-score__top {
		gap: 0.75em;
	}

	.rhr-score__mark {
		font-size: 0.85em;
	}

	.rhr-score__verdict {
		font-size: 1.15em;
	}
}

/* ------------------------------------------------------------------
   Reading layout: the review in a column about 65 characters wide, with
   the product card and an index of sections in the margin beside it
   ------------------------------------------------------------------ */

/* With nothing for the margin (a roundup, or no card and no sections), the
   lines of text still stop at a comfortable length; the picks stay wide. */
.rhr-review__body:not(.rhr-review__body--rail) > .rhr-review__text > :is(p, ul, ol, blockquote, h2, h3, h4) {
	max-width: 40rem;
}

/* A pen line across the column above each section, so a skimmer sees where one starts. */
.type-rhr_review .rhr-review__text > h2 {
	margin-top: 1.5em;
	padding-top: 0.6em;
	background: url(assets/img/hand-drawn-divider-line.png) left top / 100% 0.16em no-repeat;
	scroll-margin-top: 0.6em;
}

.type-rhr_review .rhr-review__text > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	background: none;
}

html:has(.rhr-toc) {
	scroll-behavior: smooth;
}

/* "In this review" (beside the text) or "Jump to" (on phones): the sections, as a drawn list. */
.rhr-toc {
	padding: calc(var(--u) * 40) calc(var(--u) * 40) calc(var(--u) * 58) calc(var(--u) * 44);
	line-height: 1.15;
}

.rhr-toc__title {
	display: flex;
	align-items: center;
	gap: 0.4em;
	font-size: 1.15em;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	-webkit-text-stroke: 0.024em currentColor;
	cursor: pointer;
	list-style: none;
}

.rhr-toc__title::-webkit-details-marker {
	display: none;
}

.rhr-toc__title::after {
	content: "\25B8";
	font-size: 0.8em;
	transition: transform 0.15s ease;
}

.rhr-toc[open] > .rhr-toc__title::after {
	transform: rotate(90deg);
}

.rhr-toc__title:hover,
.rhr-toc__title:focus-visible {
	color: var(--ink-blue);
}

.rhr-toc__narrow {
	display: none;
}

.rhr-toc__list {
	margin: 0.45em 0 0;
	padding: 0;
	list-style: none;
	counter-reset: rhr-toc;
}

.rhr-toc__list li {
	display: flex;
	gap: 0.35em;
	margin: 0.3em 0 0;
	counter-increment: rhr-toc;
}

.rhr-toc__list li::before {
	content: counter(rhr-toc) ".";
	flex: 0 0 1.1em;
}

.rhr-prose .rhr-toc__list a {
	margin: -0.06em -0.3em 0;
	padding: 0.06em 0.3em 0.08em;
}

/* The section being read is coloured in with the logo's yellow, like the pick labels. */
.rhr-prose .rhr-toc__list a[aria-current] {
	border-radius: 0.2em 0.6em 0.25em 0.5em / 0.5em 0.25em 0.6em 0.2em;
	background: #f9c80e;
	color: inherit;
}

@media (min-width: 901px) {
	.rhr-review__body--rail {
		display: grid;
		grid-template-columns: minmax(0, 1fr) calc(var(--u) * 430);
		grid-auto-flow: row dense;
		column-gap: calc(var(--u) * 64);
		align-items: start;
	}

	.rhr-review__body--rail > * {
		grid-column: 1;
	}

	.rhr-review__body--rail > .rhr-score {
		grid-column: 1 / -1;
	}

	/* The margin keeps the card and the index in view while the text scrolls past.
	   When they are taller than the window, theme.js lets the top go off screen
	   so the bottom is never out of reach. */
	.rhr-review__body--rail > .rhr-rail {
		grid-column: 2;
		position: sticky;
		top: var(--rail-top, 20px);
	}

	.rhr-review__text {
		min-width: 0;
	}

	.rhr-rail .rhr-products {
		float: none;
		width: 100%;
		margin: 0 0 0.6em;
	}
}

@media (max-width: 900px) {
	.rhr-rail {
		display: flex;
		flex-direction: column;
	}

	.rhr-rail .rhr-toc {
		order: -1;
		--bu: calc(var(--u) * 0.8);
		margin: 0 0 1.4em;
		padding: calc(var(--u) * 50) calc(var(--u) * 56) calc(var(--u) * 76) calc(var(--u) * 56);
	}

	.rhr-toc__wide {
		display: none;
	}

	.rhr-toc__narrow {
		display: inline;
	}

	.rhr-toc__list {
		font-size: 1.1em;
		line-height: 1.3;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		scroll-behavior: auto !important;
	}
}