/*
Theme Name:   Red Sky Adventures
Theme URI:    https://redskyadventures.com/
Description:  Child theme of Kadence for Red Sky Adventures. Carries the whole
              design: palette, typography, layout widths, the product and
              comparison components inside articles, and the responsive rules.
              Built from measurements of OutdoorGearLab, Territory Supply,
              Gear Patrol, Switchback Travel and CleverHiker rather than from
              a stock demo.
Author:       Red Sky Adventures
Template:     kadence
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  kadence-redsky
Tags:         blog, news, two-columns, custom-colors, custom-menu, featured-images
*/

/* =============================================================
   Everything below is generated from redesign/redsky/*.css by
   redesign/build_child_theme.py. Edit those files, not this one,
   and rebuild — otherwise the next build overwrites the change.
   ============================================================= */

/* ======== tokens.css ======== */
/* =============================================================
   Tokens: palette, type, spacing, and Kadence's own variables
   =============================================================
   Every value here comes from the build specification produced by measuring
   six affiliate and information publications — rtings, housefresh, Serious
   Eats, Healthline, Tom's Guide and CleverHiker — with each measurement
   re-checked by a second pass that corrected 125 of them.

   Kadence renders from CSS custom properties it prints on :root from the
   Customizer, which the REST API cannot write. Overriding those properties
   here reaches the same place and keeps the whole design in one file that
   can be read and diffed, instead of a hundred Customizer fields that
   cannot.

   Contrast was recomputed from the hex values rather than taken on trust:
   all eleven pairs clear WCAG AA, the tightest being accent on tint at
   4.53:1.
   ============================================================= */

/* ── fonts ─────────────────────────────────────────────────────
   Serif headings against a sans body. Every one of the six sites measured
   uses a sans for headings, and they all look like each other; a text serif
   in the headline is the cheapest signal available that this is a
   publication rather than a storefront.

   The fallback overrides are measured, not estimated — each font's average
   lowercase advance, ascent and descent were read out of the woff2 with
   fontTools, so the system face occupies the same space as the web face and
   the swap does not move the page. The specification suggested 107% for
   Inter against Arial; the files say 109.56%, and the files win.
   ────────────────────────────────────────────────────────────── */
/* The two faces are served from this theme, not from the WordPress Font
   Library. The Library registers a family but only prints its @font-face
   rules for block themes — on Kadence the page carried both family names
   and no font file at all, so every heading silently fell back to Georgia.
   Shipping the woff2 inside the theme removes that dependency and the
   third-party connection with it: zero requests to fonts.googleapis.com,
   which two of the six sites measured were marked down for. Two files,
   170 KB, latin subset, variable so one file covers every weight used. */
@font-face {
	font-family: "Inter";
	src: url("fonts/inter-latin-var.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Serif 4";
	src: url("fonts/source-serif-4-latin-var.woff2") format("woff2");
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter Fallback";
	src: local("Arial"), local("Helvetica Neue"), local("Segoe UI");
	size-adjust: 109.56%;
	ascent-override: 88.42%;
	descent-override: 22.02%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Source Serif Fallback";
	src: local("Georgia"), local("Times New Roman");
	size-adjust: 102.24%;
	ascent-override: 101.33%;
	descent-override: 32.77%;
	line-gap-override: 0%;
}

:root {
	--rs-sans: "Inter", "Inter Fallback", Arial, sans-serif;
	--rs-serif: "Source Serif 4", "Source Serif Fallback", Georgia, serif;

	/* ── palette ───────────────────────────────────────────────
	   Eleven values. Not one is a retailer's: the previous design used
	   Amazon orange #FF9900 and Amazon navy #232F3E as the site's own
	   accents, and on all six sites measured the Amazon button is
	   byte-identical to every other merchant's. */
	--rs-accent: #C2452D;        /* CTAs and links, nothing else  5.02:1 */
	--rs-accent-hover: #9C3623;  /*                               7.08:1 */
	--rs-ink: #22262B;           /* body and headings            15.22:1 */
	--rs-muted: #5A6068;         /* byline, caption, disclosure   6.35:1 */
	--rs-rule: #E6E4E0;          /* structural rules                    */
	--rs-rule-light: #F0EEEA;    /* table cell separators               */
	--rs-tint: #F5F3EF;          /* disclosure, short answer, thead     */
	--rs-zebra: #FAF9F7;         /* table even rows                     */
	--rs-ground: #FFFFFF;
	--rs-pro: #2E6B4F;           /* the pros label only           6.30:1 */
	--rs-con: #B03A2E;           /* the cons label only           6.02:1 */

	/* ── layout ───────────────────────────────────────────────
	   660px content inside a 1200px shell. The site ran at 94 characters
	   per line, the worst measure of every site compared; the fault was
	   the column width, not the type size, so the type goes up and the
	   column comes in. */
	--rs-shell: 1200px;
	--rs-content: 660px;
	--rs-wide: 900px;
	--rs-rail: 200px;
	--rs-header-h: 64px;

	/* ── spacing: one scale, every value a multiple of four ──── */
	--rs-1: 4px;   --rs-2: 8px;   --rs-3: 12px;  --rs-4: 16px;
	--rs-5: 20px;  --rs-6: 24px;  --rs-8: 32px;  --rs-10: 40px;
	--rs-12: 48px; --rs-16: 64px; --rs-20: 80px;

	/* ── Kadence's own variables, so the theme agrees with all of the
	   above without anyone opening the Customizer ─────────────── */
	--global-palette1: #C2452D;
	--global-palette2: #9C3623;
	--global-palette3: #22262B;
	--global-palette4: #22262B;
	--global-palette5: #5A6068;
	--global-palette6: #E6E4E0;
	--global-palette7: #F5F3EF;
	--global-palette8: #FAF9F7;
	--global-palette9: #FFFFFF;
	--global-palette-highlight: #C2452D;
	--global-palette-highlight-alt: #9C3623;
	--global-palette-highlight-alt2: #FFFFFF;
	--global-palette-btn: #FFFFFF;
	--global-palette-btn-bg: #C2452D;
	--global-palette-btn-hover: #FFFFFF;
	--global-palette-btn-bg-hover: #9C3623;

	--global-content-width: 660px;
	--global-calc-content-width: 660px;
	--global-content-narrow-width: 660px;
	--global-content-wide-width: 1200px;
	--global-calc-wide-content-width: 1200px;
	--global-content-edge-padding: 24px;
	--global-content-boxed-padding: 24px;

	--global-body-font-family: "Inter", "Inter Fallback", Arial, sans-serif;
	--global-heading-font-family: "Source Serif 4", "Source Serif Fallback", Georgia, serif;
	--global-primary-nav-font-family: "Inter", "Inter Fallback", Arial, sans-serif;

	--global-font-size-small: 15px;
	--global-font-size-medium: 18px;
	--global-font-size-large: 21px;
	--global-font-size-larger: 30px;
	--global-font-size-xxlarge: 42px;

	/* tokens the article stylesheet reads, kept so it does not depend on
	   whether a theme.json preset happens to be generated */
	--wp--preset--color--base: #FFFFFF;
	--wp--preset--color--contrast: #22262B;
	--wp--preset--color--muted: #5A6068;
	--wp--preset--color--accent: #C2452D;
	--wp--preset--color--surface: #F5F3EF;
	--wp--preset--color--line: #E6E4E0;
	--wp--preset--font-family--body: "Inter", "Inter Fallback", Arial, sans-serif;
	--wp--preset--font-family--display: "Source Serif 4", "Source Serif Fallback", Georgia, serif;
	--wp--preset--font-size--small: 15px;
	--wp--preset--font-size--medium: 18px;
	--wp--preset--font-size--large: 21px;
	--wp--preset--font-size--x-large: 24px;
	--wp--preset--spacing--20: 8px;
	--wp--preset--spacing--30: 16px;
	--wp--preset--spacing--40: 24px;
	--wp--preset--spacing--50: 32px;
	--wp--preset--spacing--60: 48px;
	--wp--preset--spacing--70: 64px;
	--wp--preset--spacing--80: 80px;
}

/* ── the type scale ────────────────────────────────────────────
   One value per tag; no tag gets two visual sizes anywhere on the site.
   The defect this replaces: H3 rendered at 17px against 16px body text, so
   a subheading did not read as a heading at all.
   ────────────────────────────────────────────────────────────── */
body {
	font-family: var(--rs-sans);
	font-size: 18px;
	line-height: 29px;
	color: var(--rs-ink);
	background: var(--rs-ground);
	-webkit-font-smoothing: antialiased;
}

h1, h2, .entry-title, .site-branding .site-title {
	font-family: var(--rs-serif);
	font-weight: 600;
	color: var(--rs-ink);
}

h3, h4, h5, h6 {
	font-family: var(--rs-sans);
	color: var(--rs-ink);
}

h1, .entry-title { font-size: 42px; line-height: 48px; letter-spacing: -0.01em; }
h2 { font-size: 30px; line-height: 36px; letter-spacing: -0.005em; }
h3 { font-size: 24px; line-height: 30px; font-weight: 600; }
h4 {
	font-size: 15px;
	line-height: 22px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* ── the vertical rhythm ───────────────────────────────────────
   Bottom margins only, so nothing collapses unpredictably, and the space
   above a heading is three times the space below it. Two verifiers
   independently named that asymmetry as the mechanism that binds a heading
   to its own section instead of leaving it floating between two.
   ────────────────────────────────────────────────────────────── */
.entry-content p { margin: 0 0 var(--rs-6); }
.entry-content ul,
.entry-content ol { margin: 0 0 var(--rs-6); padding-left: var(--rs-6); }
.entry-content li { margin-bottom: var(--rs-2); }
.entry-content h1 { margin: var(--rs-6) 0 var(--rs-3); }
.entry-content h2 { margin: var(--rs-12) 0 var(--rs-4); }
.entry-content h3 { margin: var(--rs-8) 0 var(--rs-3); }
.entry-content h4 { margin: var(--rs-6) 0 var(--rs-2); }
.entry-content figure { margin: var(--rs-8) 0; }
.entry-content figcaption {
	margin-top: var(--rs-2);
	font-size: 14px;
	line-height: 20px;
	color: var(--rs-muted);
}
.entry-content blockquote {
	margin: var(--rs-8) 0;
	padding-left: var(--rs-5);
	border-left: 3px solid var(--rs-accent);
	font-size: 20px;
	line-height: 30px;
	font-style: normal;
}

/* ── links ─────────────────────────────────────────────────────
   Every in-body link is underlined, including the paid ones. Removing the
   underline from affiliate links is a distinction the reader cannot
   interpret and a pattern that looks designed to be missed.
   ────────────────────────────────────────────────────────────── */
.entry-content a {
	color: var(--rs-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.entry-content a:hover { color: var(--rs-accent-hover); }

.entry-content .rs-cta,
.entry-content .rs-cta--alt,
.entry-content .psc-cta,
.entry-content .wp-block-button__link { text-decoration: none; }

/* ── mobile ────────────────────────────────────────────────────
   The body does not shrink. The two most readable sites measured both hold
   18px on a phone.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	body { font-size: 18px; line-height: 28px; }
	h1, .entry-title { font-size: 30px; line-height: 36px; }
	h2 { font-size: 24px; line-height: 30px; }
	h3 { font-size: 20px; line-height: 26px; }
	h4 { font-size: 14px; line-height: 20px; }
	.entry-content p { margin-bottom: var(--rs-5); }
	.entry-content h2 { margin: var(--rs-10) 0 var(--rs-4); }
	.entry-content h3 { margin: 28px 0 var(--rs-3); }
	.entry-content figure { margin: var(--rs-6) 0; }
	:root { --global-content-edge-padding: 20px; }
}


/* ======== layout.css ======== */
/* =============================================================
   Page furniture
   =============================================================
   The frame around the article: masthead, navigation, the article header,
   archive cards, footer. Kadence supplies the markup; this decides what it
   looks like.
   ============================================================= */

/* ── the shell ─────────────────────────────────────────────────
   660px of text centred in a 1200px page. Both the text column and the
   900px breakout are centred on the same axis — asserted rather than
   assumed, because one of the audited sites turned out to have an
   off-centre column nobody had noticed.
   ────────────────────────────────────────────────────────────── */
.content-container,
.site-container,
.content-width-narrow .content-container {
	max-width: var(--rs-shell);
	margin-inline: auto;
	padding-inline: var(--rs-6);
}

.single .entry-content,
.page .entry-content {
	max-width: var(--rs-content);
	margin-inline: auto;
}

.rs-wide {
	max-width: var(--rs-wide);
	margin-inline: auto;
	width: 100%;
}

/* Kadence boxes the article by default — a white card with a shadow and a
   radius floating on grey. Not one of the publications measured does that;
   they set the article on the page itself. */
.content-bg,
.single .content-bg,
.archive .content-bg,
.loop-entry.content-bg {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}

/* No rail on articles. Red Sky runs no ad network, so a 300px sidebar
   carries nothing commercial — it is 300px taken from the only thing the
   page is for. */
.single .primary-sidebar,
.single .secondary-sidebar,
.single-post .primary-sidebar { display: none; }

.single .content-area { width: 100%; max-width: none; }

/* ── masthead ──────────────────────────────────────────────────
   One 64px row that stays put and never condenses into a second bar. A
   157px header plus a 61px jump strip eats 218px of a 900px fold, which is
   what most desktop readers actually have.
   ────────────────────────────────────────────────────────────── */
.site-header {
	background: var(--rs-ground);
	border-bottom: 1px solid var(--rs-rule);
}

.site-header .site-header-row {
	min-height: var(--rs-header-h);
}

.site-branding .site-title {
	font-family: var(--rs-serif);
	font-size: 24px;
	line-height: 30px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-transform: none;
}

.site-branding .site-title a { text-decoration: none; color: var(--rs-ink); }

.primary-menu-container > ul > li > a,
.header-navigation a,
.mobile-navigation a {
	font-family: var(--rs-sans);
	font-size: 15px;
	line-height: 22px;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--rs-ink);
}

.primary-menu-container > ul > li > a:hover { color: var(--rs-accent); }

/* ── the article header ────────────────────────────────────────
   Order from the top: breadcrumb, disclosure, kicker, H1, standfirst,
   byline, image. The disclosure sits above the H1 because the reader has
   to meet it before any paid link, and every site measured puts it there.
   ────────────────────────────────────────────────────────────── */
.entry-hero,
.entry-header {
	max-width: var(--rs-content);
	margin-inline: auto;
}

.entry-title { margin: 0 0 var(--rs-3); }

.entry-taxonomies,
.rs-kicker {
	font-family: var(--rs-sans);
	font-size: 14px;
	line-height: 18px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: var(--rs-2);
}

.entry-taxonomies a,
.rs-kicker a { color: var(--rs-accent); text-decoration: none; }

.entry-meta {
	font-family: var(--rs-sans);
	font-size: 15px;
	line-height: 22px;
	color: var(--rs-muted);
	padding-bottom: var(--rs-5);
	border-bottom: 1px solid var(--rs-rule);
	margin-bottom: var(--rs-8);
}

.entry-meta a { color: var(--rs-muted); }

.post-thumbnail,
.entry-content > figure.wp-block-image.alignwide {
	max-width: var(--rs-wide);
	margin-inline: auto;
}

.post-thumbnail img { width: 100%; height: auto; }

/* ── author box ───────────────────────────────────────────────
   Who wrote this, on a site whose whole proposition is that somebody did.
   ────────────────────────────────────────────────────────────── */
.entry-author-style-normal,
.author-box,
.rs-author {
	max-width: var(--rs-content);
	margin: var(--rs-12) auto;
	padding-top: var(--rs-8);
	border-top: 1px solid var(--rs-rule);
	background: transparent;
	border-radius: 0;
}

.author-box .author-title,
.rs-author h2 {
	font-family: var(--rs-sans);
	font-size: 15px;
	line-height: 22px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--rs-muted);
	margin: 0 0 var(--rs-2);
}

/* ── archive and homepage cards ────────────────────────────────
   A curated hub, not a date-sorted river. The one site in the set that
   ships a pure reverse-chronological archive was marked down by its own
   verifier for throwing away the site's value proposition.
   ────────────────────────────────────────────────────────────── */
.archive-title,
.page-title {
	font-family: var(--rs-serif);
	font-size: 38px;
	line-height: 44px;
	font-weight: 600;
	margin: 0 0 var(--rs-3);
}

.archive-description,
.taxonomy-description {
	font-size: 21px;
	line-height: 30px;
	color: var(--rs-muted);
	max-width: var(--rs-content);
	margin: 0 0 var(--rs-12);
}

.loop-entry {
	border-top: 1px solid var(--rs-rule);
	padding-top: var(--rs-6);
}

.loop-entry .entry-title {
	font-family: var(--rs-serif);
	font-size: 20px;
	line-height: 26px;
	font-weight: 600;
	margin: var(--rs-2) 0 var(--rs-2);
}

.loop-entry .entry-title a { text-decoration: none; color: var(--rs-ink); }
.loop-entry .entry-title a:hover { color: var(--rs-accent); }

.loop-entry .entry-summary {
	font-size: 15px;
	line-height: 22px;
	color: var(--rs-muted);
}

.loop-entry .post-thumbnail img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 0;
}

.grid-cols { column-gap: var(--rs-6); row-gap: var(--rs-8); }

/* ── pagination ────────────────────────────────────────────── */
.pagination a,
.pagination span {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--rs-sans);
	font-size: 15px;
	font-weight: 600;
	border-radius: 0;
}

/* ── footer ────────────────────────────────────────────────── */
.site-footer {
	background: var(--rs-tint);
	border-top: 1px solid var(--rs-rule);
	font-size: 15px;
	line-height: 22px;
}

.site-footer a { color: var(--rs-ink); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ── buttons everywhere else ───────────────────────────────────
   Nothing but the affiliate call to action is a filled accent rectangle.
   That is what makes a filled accent rectangle mean something.
   ────────────────────────────────────────────────────────────── */
.wp-block-button__link,
.button,
input[type="submit"],
.kadence-back-to-top {
	border-radius: 4px;
	font-family: var(--rs-sans);
	font-weight: 600;
	letter-spacing: 0.01em;
	background: transparent;
	color: var(--rs-accent);
	border: 2px solid var(--rs-accent);
	box-shadow: none;
}

.wp-block-button__link:hover,
.button:hover,
input[type="submit"]:hover {
	background: var(--rs-accent);
	color: var(--rs-ground);
}

/* ── images reserve their space ────────────────────────────────
   Layout shift from an image that arrives late is the cheapest CLS on any
   site to remove, and it costs one line.
   ────────────────────────────────────────────────────────────── */
.entry-content img,
.loop-entry img,
.post-thumbnail img { height: auto; }

.entry-content img[width][height] { aspect-ratio: attr(width) / attr(height); }

/* ── nothing may push the page sideways ────────────────────── */
html, body { overflow-x: clip; }

@media (max-width: 900px) {
	.site-header .site-header-row { min-height: 56px; }
	:root { --rs-header-h: 56px; }
}

@media (max-width: 768px) {
	.archive-title, .page-title { font-size: 30px; line-height: 36px; }
	.archive-description { font-size: 18px; line-height: 26px; }
	.content-container, .site-container { padding-inline: var(--rs-5); }
}


/* ======== components.css ======== */
/* =============================================================
   Article components
   =============================================================
   The parts of a review that the theme never reaches, because they live
   inside post content: the affiliate notice, the ranked product entries,
   the comparison table, pros and cons, callouts.

   All of it used to be painted inline in Amazon's own colours — #FF9900
   orange numbered circles, a #232F3E navy button, a green pill, rounded
   corners, a drop shadow. 13,652 inline style attributes across 630 posts.
   That is what made the site read as an affiliate page, and no stylesheet
   could override it, because inline styles win.
   ============================================================= */

/* ── the affiliate notice ──────────────────────────────────────
   Above the H1, before any paid link in document order, and worded as an
   explanation of how the site is funded rather than as a warning. Not one
   of the six sites measured uses an icon, a border or an alert colour for
   this; housefresh's wording — saying what the money is FOR — is the one
   worth copying.
   ────────────────────────────────────────────────────────────── */
.affiliate-disclosure {
	background: var(--rs-tint);
	border-radius: 4px;
	padding: var(--rs-3) var(--rs-4);
	margin: 0 0 var(--rs-6);
	font-size: 14px;
	line-height: 21px;
	color: var(--rs-muted);
	font-style: normal;
}

.affiliate-disclosure a { color: inherit; }

/* ── "last checked" ────────────────────────────────────────── */
.rs-updated {
	font-family: var(--rs-sans);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--rs-muted);
	margin: 0 0 var(--rs-4);
}

/* ── a ranked product entry ────────────────────────────────────
   A rule above and air around it. Not a card: a boxed, shadowed, rounded
   panel is an e-commerce widget, and none of the publications measured
   uses one. The block is long — CleverHiker's run to nearly two screens —
   so it needs a visible boundary, which is the 1px rule, not a border.
   ────────────────────────────────────────────────────────────── */
.product-showcase-card {
	margin: var(--rs-12) 0;
	padding-top: var(--rs-8);
	border-top: 1px solid var(--rs-rule);
}

.psc-head {
	display: flex;
	align-items: baseline;
	gap: var(--rs-3);
}

.psc-rank {
	font-family: var(--rs-serif);
	font-size: 34px;
	line-height: 1;
	font-weight: 600;
	color: var(--rs-accent);
	flex: 0 0 auto;
	font-variant-numeric: lining-nums tabular-nums;
}

.psc-heading { flex: 1 1 auto; min-width: 0; }

/* The award chip. Uppercase in the rendering, sentence case in the markup,
   so a screen reader is not made to spell it out. */
.psc-badge {
	display: inline-block;
	font-family: var(--rs-sans);
	font-size: 14px;
	line-height: 18px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--rs-accent);
	margin-bottom: var(--rs-2);
}

.psc-badge--our-pick,
.psc-badge--top-pick,
.psc-badge--best-overall {
	background: var(--rs-accent);
	color: var(--rs-ground);
	padding: 2px var(--rs-2);
}

.psc-title {
	font-family: var(--rs-serif);
	font-size: 24px;
	line-height: 30px;
	font-weight: 600;
	margin: 0;
}

.psc-media {
	margin: var(--rs-6) 0 0;
	text-align: center;
}

.psc-media img {
	max-width: 100%;
	max-height: 320px;
	width: auto;
	height: auto;
}

.psc-media figcaption { margin-top: var(--rs-4); }

/* The review image blocks: the primary shot carries its own call to action in
   a figcaption, the secondary one is an image alone. Both are wider than a
   catalogue thumbnail because they are the only look at the product a reader
   gets before clicking. */
.psc-media--review img,
.psc-media--secondary img { max-height: 380px; }

.psc-media--secondary { margin-top: var(--rs-8); }

/* ── the call to action ────────────────────────────────────────
   One filled object on the whole site means one thing. The newsletter
   button is outlined, pagination is text, back-to-top is an outlined
   circle — so a filled accent rectangle can only be "this link earns us a
   commission".

   The label names the retailer in words and nowhere else: no logo, no
   merchant colour. Because it never carries a price it never goes stale
   across 630 posts, which is a disclosure problem as much as a maintenance
   one; and because it carries no logo, changing affiliate programme costs
   no design work.
   ────────────────────────────────────────────────────────────── */
.psc-action,
.rs-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rs-4);
	margin: 0 0 28px;
}

.psc-cta,
.rs-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--rs-2);
	min-height: 52px;
	min-width: 240px;
	justify-content: center;
	padding: 15px 26px;
	background: var(--rs-accent);
	color: var(--rs-ground);
	font-family: var(--rs-sans);
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	border: 0;
	border-radius: 4px;
	box-shadow: none;
	transition: background-color 0.15s ease;
}

.psc-cta:hover,
.psc-cta:focus-visible,
.rs-cta:hover,
.rs-cta:focus-visible {
	background: var(--rs-accent-hover);
	color: var(--rs-ground);
}

.psc-cta:focus-visible,
.rs-cta:focus-visible {
	outline: 2px solid var(--rs-ink);
	outline-offset: 2px;
}

/* The outlined variant, for a second retailer or for "read our full
   review". Two side by side read as a price comparison; one alone reads as
   an advertisement. */
.rs-cta--alt {
	background: var(--rs-ground);
	color: var(--rs-accent);
	border: 2px solid var(--rs-accent);
	padding: 13px 24px;
}

.rs-cta--alt:hover,
.rs-cta--alt:focus-visible {
	background: var(--rs-accent);
	color: var(--rs-ground);
}

/* A link inside a table cell is a link, not a button. The specification is
   explicit that no comparison table in the set carries a buy control, and
   the generator no longer emits one; this remains so that the 244 articles
   published before that change do not render a stray unstyled control. */
.psc-buy {
	font-family: var(--rs-sans);
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--rs-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ── the short answer ──────────────────────────────────────────
   The first block in the body: five lines, one per pick, each an in-page
   link to that product's entry. It is a list rather than a table because a
   list needs no engineering to survive a phone, which is why housefresh
   deleted its comparison table in favour of one.
   ────────────────────────────────────────────────────────────── */
.rs-short-answer {
	background: var(--rs-tint);
	border-radius: 4px;
	padding: var(--rs-6);
	margin: 0 0 var(--rs-10);
}

.rs-short-answer h2 {
	font-size: 15px;
	line-height: 22px;
	font-family: var(--rs-sans);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--rs-muted);
	margin: 0 0 var(--rs-3);
}

.rs-short-answer ul { margin: 0; padding-left: var(--rs-5); }
.rs-short-answer li { margin-bottom: var(--rs-2); }
.rs-short-answer li:last-child { margin-bottom: 0; }

/* ── the comparison table ──────────────────────────────────────
   A real <table> with <th scope>, because that is what a screen reader and
   Bing both parse without help — CSS grids of divs, which two of the six
   sites ship, parse as nothing.

   Five columns is the hard cap that makes it work: at 900px it needs no
   desktop scroll at all, and at 375px it scrolls about 1.4 times instead of
   CleverHiker's 5.7. Both axes are sticky, which is the fix for the single
   worst component found in the audit.
   ────────────────────────────────────────────────────────────── */
.rs-table-wrap,
.rsa-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: var(--rs-12) 0;
	border: 1px solid var(--rs-rule-light);
}

.rs-table-wrap:focus-visible,
.rsa-table-scroll:focus-visible {
	outline: 2px solid var(--rs-accent);
	outline-offset: 2px;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	font-size: 15px;
	line-height: 20px;
	min-width: 34rem;
}

.entry-content thead th {
	position: sticky;
	top: var(--rs-header-h);
	z-index: 3;
	background: var(--rs-tint);
	box-shadow: 0 1px 0 var(--rs-rule);
	font-family: var(--rs-sans);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-align: center;
	padding: 10px 12px;
}

.entry-content thead th:first-child { text-align: left; }

.entry-content tbody th[scope="row"],
.entry-content tbody td:first-child {
	position: sticky;
	left: 0;
	z-index: 2;
	background: var(--rs-ground);
	min-width: 180px;
	text-align: left;
	box-shadow: 1px 0 0 var(--rs-rule-light);
	font-weight: 600;
}

.entry-content tbody tr:nth-child(even) th[scope="row"],
.entry-content tbody tr:nth-child(even) td:first-child {
	background: var(--rs-zebra);
}

.entry-content tbody tr:nth-child(even) { background: var(--rs-zebra); }

.entry-content td {
	padding: 10px 12px;
	text-align: center;
	vertical-align: middle;
	border-bottom: 1px solid var(--rs-rule-light);
}

.entry-content tbody th[scope="row"] {
	padding: 10px 12px;
	border-bottom: 1px solid var(--rs-rule-light);
}

/* ── pros and cons ─────────────────────────────────────────────
   Undecorated typography. No background, no border, no radius, no padding
   — colour appears only on the two labels. Not one of the six sites boxes
   them, and the two that box anything else were marked down for it.
   ────────────────────────────────────────────────────────────── */
.proscons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 36px;
	margin: 0 0 28px;
}

.proscons h3,
.proscons h4 {
	font-family: var(--rs-sans);
	font-size: 15px;
	line-height: 22px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 var(--rs-3);
}

.proscons__pros h3, .proscons__pros h4 { color: var(--rs-pro); }
.proscons__cons h3, .proscons__cons h4 { color: var(--rs-con); }

.proscons ul { margin: 0; padding-left: var(--rs-5); }
.proscons li { margin-bottom: var(--rs-2); }

/* ── callouts ──────────────────────────────────────────────────
   A rule down the left edge and nothing else. The tinted boxes these
   replace read as software UI, which a review does not.
   ────────────────────────────────────────────────────────────── */
.callout {
	border-left: 3px solid var(--rs-rule);
	padding: 0 0 0 var(--rs-5);
	margin: var(--rs-8) 0;
}

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

.callout strong:first-child {
	display: block;
	font-family: var(--rs-sans);
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: var(--rs-2);
	color: var(--rs-muted);
}

.callout--tip { border-left-color: var(--rs-accent); }
.callout--tip strong:first-child { color: var(--rs-accent); }
.callout--warning { border-left-color: var(--rs-con); }
.callout--warning strong:first-child { color: var(--rs-con); }

.callout--takeaways {
	border-left: none;
	background: var(--rs-tint);
	border-radius: 4px;
	padding: var(--rs-6);
}

.callout--takeaways h3 {
	font-family: var(--rs-sans);
	font-size: 15px;
	line-height: 22px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--rs-muted);
	margin: 0 0 var(--rs-3);
}

.callout--takeaways ul { margin: 0; padding-left: var(--rs-5); }

/* ── table of contents ─────────────────────────────────────────
   A collapsed details box in the column. The sticky rail variant only
   appears where there is room for it; CleverHiker's fixed jump strip under
   a 157px header is the pattern being avoided.
   ────────────────────────────────────────────────────────────── */
.rs-toc {
	border: 1px solid var(--rs-rule);
	border-radius: 4px;
	padding: var(--rs-3) var(--rs-4);
	margin: 0 0 var(--rs-8);
}

.rs-toc > summary {
	font-family: var(--rs-sans);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	min-height: 44px;
	display: flex;
	align-items: center;
}

.rs-toc ol { margin: var(--rs-3) 0 0; padding-left: var(--rs-5); }
.rs-toc li { margin-bottom: var(--rs-2); }

/* ── mobile ────────────────────────────────────────────────────
   The call to action does not shrink and does not become sticky. Nobody in
   the set ships a shrunken mobile button and nobody ships a sticky buy bar.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.proscons { grid-template-columns: 1fr; gap: var(--rs-6); }
	.psc-rank { font-size: 28px; }
	.psc-title { font-size: 20px; line-height: 26px; }
	.rs-short-answer { padding: var(--rs-5); }
}

@media (max-width: 420px) {
	.psc-cta,
	.rs-cta {
		width: 100%;
		max-width: 335px;
		min-width: 0;
	}
	.psc-action,
	.rs-cta-row { flex-direction: column; }
}