/*
Theme Name:   Soledad Child — Network 2026
Theme URI:    https://oneninety8.com/
Description:  One child theme for the network sites (Gear Up Travel, Everyday Home Gym,
              Garage Tool Authority). The RobbSutton.com 2026 design system, with everything
              site-specific — accent colour, categories, homepage copy — in site-config.php,
              keyed by hostname. Parent theme: Soledad by PenciDesign.
Author:       Robb Sutton
Version:      1.2.0
Template:     soledad
Text Domain:  soledad-child-network
*/

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 0 — DESIGN TOKENS
   Everything below references these. Retune here, never hard-code a value.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --rs-bg:          #fbfbfa;   /* page ground */
  --rs-surface:     #f1f1ef;   /* input + hover fill */
  --rs-card:        #ffffff;   /* card fill */
  --rs-ink:         #1a1c1e;   /* body ink */
  --rs-ink-70:      color-mix(in srgb, #1a1c1e 70%, transparent);
  --rs-ink-55:      color-mix(in srgb, #1a1c1e 55%, transparent);

  --rs-accent:      #3a6a99;   /* the single accent */
  --rs-accent-100:  #eef5fb;
  --rs-accent-200:  #dbe8f4;
  --rs-accent-300:  #a8c8e6;
  --rs-accent-600:  #31597f;
  --rs-accent-700:  #2b4d6e;   /* accent-coloured small text (contrast-safe) */
  --rs-deep:        #182734;   /* dark fields: guides plate, newsletter, utility bar */

  --rs-divider:     color-mix(in srgb, #1a1c1e 12%, transparent);

  /* TYPOGRAPHY ROLES
     --rs-font-heading (condensed) is deliberately rationed. It carries the
     brand, and it stops feeling distinctive if everything wears it. It is for:
       · the hero title
       · section headings (H1/H2)
       · category names on the pillar cards
       · The Long Guides
     --rs-font-title is what every *listed* article title uses — feed cards,
     pillar links, archive rows, sidebar items. Regular width, because these
     are read in bulk and condensed type slows that down.
     Flip --rs-font-title to var(--rs-font-heading) to undo the whole change
     in one line. */
  --rs-font-heading: "Barlow Condensed", system-ui, -apple-system, sans-serif;
  --rs-font-body:    "Barlow", system-ui, -apple-system, sans-serif;
  --rs-font-title:   "Barlow", system-ui, -apple-system, sans-serif;
  --rs-font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* (Header sizing tokens removed — the header is Customizer-controlled now.
     See the "HEADER: DELIBERATELY NOT STYLED HERE" note in Layer 1.) */

  --rs-radius:      10px;
  --rs-radius-sm:   8px;
  --rs-shadow:      0 10px 28px rgba(26,28,30,.10);
  --rs-shadow-sm:   0 1px 2px rgba(26,28,30,.12);

  /* 0 because the homepage now sits directly inside Soledad's .container,
     which is 1170px wide (--pcctain) and already centred. Adding our own
     gutter on top would inset the homepage relative to every archive page —
     which is exactly the mismatch we were seeing. */
  --rs-gutter:      0px;
  --rs-max:         none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 1 — GLOBAL PASS  (site-wide; element-level so it works regardless of
   the parent theme's class names)
   ═══════════════════════════════════════════════════════════════════════ */
body,
body.penci-body-single,
body.archive,
body.home {
  background: var(--rs-bg);
  color: var(--rs-ink);
  font-family: var(--rs-font-body);
  -webkit-font-smoothing: antialiased;
}

/* h1–h3 are structural headings and keep the condensed face. h4–h6 are almost
   always widget titles, card sub-heads and supporting labels, so they take the
   regular width — that alone removes most of the over-use. */
h1, h2, h3 {
  font-family: var(--rs-font-heading);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--rs-ink);
}
h4, h5, h6 {
  font-family: var(--rs-font-body);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--rs-ink);
}

/* ── ACCENT UNIFICATION ───────────────────────────────────────────────────
   Soledad pipes its accent through --pcaccent-cl, used 364× in main.css.
   Remapping it here is what keeps archive headings, category labels, links
   and hovers on the same blue as the rest of the design system.

   This is NOT a header rule — it is site-wide colour. Set
   penci_color_accent to #3a6a99 in the Customizer and this block can be
   deleted. */
html body {
  --pcaccent-cl: var(--rs-accent);
  --pcaccent-cl-dk: var(--rs-accent-700);
}

/* ── HEADER: DELIBERATELY NOT STYLED HERE ────────────────────────────────
   The header is controlled entirely from the Customizer, by request. This
   child theme overrides nothing about the logo band, its background, its
   padding or the logo size — so what you set in Appearance → Customize is
   what renders.

   The settings that shape it, and where they land in the markup:

     Header Background Color   → penci_header_background_color
                                 #header .inner-header { background-color }
     Header Background Image   → penci_header_background_image
     Logo                      → penci_logo
     Set A Max Width for Logo  → penci_logo_max_width        (currently 750)
     Logo Padding Top & Bottom → penci_header_padding        (currently 1)
                                 #header .inner-header .container { padding }
     Main bar background       → penci_main_bar_bg           (currently #ffffff)
     Header layout             → penci_header_layout         (currently header-5)
     Menu height / sticky      → penci_mainmenu_height, penci_mainmenu_height_sticky
     Header container width    → penci_header_ctwidth        (currently 1400)

   To shorten the band, "Set A Max Width for Logo" is the effective control —
   the logo renders at its natural height, so its width is what drives the
   height. "Logo Padding Top & Bottom" trims what is left.

   There is also a per-page override, if the homepage ever wants its own
   header: the post meta penci_pmeta_page_header carries header_bgcolor,
   header_bgimg, main_bar_bg, custom_logo and penci_mainmenu_height. */

/* ── GAP BELOW THE HEADER ─────────────────────────────────────────────────
   The dead space between the navigation and the trust bar is Soledad's own:

       #header { margin-bottom: var(--pchd-mg) }   and   --pchd-mg: 60px

   set in main.css line 3826. (A 40px variant exists, but it only applies to
   single-post styles 5, 6 and 10 — the homepage gets the full 60px.)

   This is NOT one of the header Customizer fields — there is no setting for
   it, the value is hard-coded in the theme's stylesheet — so overriding it
   here takes no control away from you. It is a custom property, so we retune
   it rather than fight a rule: set on body, inherited by #header.

   Scoped to the homepage. Archives and single posts keep the roomier 60px,
   where a page title sits in that space and it reads as intentional. */
:root { --rs-header-gap: 16px; }
body.rs-home-page { --pchd-mg: var(--rs-header-gap); }

/* First block in the homepage shouldn't add its own top margin on top of that. */
.rs-home > *:first-child { margin-top: 0; }

a { color: var(--rs-ink); transition: color .12s ease; }
a:hover, a:focus { color: var(--rs-accent); }

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

/* Single-post reading column — comfortable measure, larger body size */
.rs-scope-single .entry-content,
.single-post .entry-content {
  font-size: 17px;
  line-height: 1.72;
  color: var(--rs-ink);
}
.single-post .entry-content p { margin: 0 0 1.15em; }
/* Sized DOWN from 30/23. Soledad renders the article H1 from
   penci_single_title_font_size, currently 27px — so a 30px H2 made every
   subheading LARGER than the title above it. Inverted hierarchy. These now
   sit safely below 27px, and stay correct if that setting is raised later. */
.single-post .entry-content h2 { font-size: 24px; margin: 1.8em 0 .5em; }
.single-post .entry-content h3 { font-size: 19px; margin: 1.5em 0 .4em; }

/* ── SINGLE-POST HEADER ──────────────────────────────────────────────────
   Markup from content-single.php:
     .header-standard.header-classic.single-header
       .penci-standard-cat > .cat > a.penci-cat-name
       h1.post-title.single-post-title.entry-title
       .post-box-meta-single > .author-post.byline, .penci-post-countview-number,
                               .single-readtime
   ─────────────────────────────────────────────────────────────────────── */

/* ⚠ CONTRAST FIX. Soledad paints these chips near-black
   (background: rgba(0,0,0,.8)) with white text. Our global link colour was
   overriding the text to #2b4d6e — dark blue on black, roughly 2.2:1, well
   under the 4.5:1 minimum. This restyles the chip to the same pill used in
   the feed and on archives, so it is both legible and consistent. */
.single-header .cat > a.penci-cat-name,
.single-header .cat > a.penci-cat-name:link,
.single-header .cat > a.penci-cat-name:visited {
  display: inline-block; background: var(--rs-accent-100);
  color: var(--rs-accent-700); font-family: var(--rs-font-body);
  font-weight: 600; font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; line-height: 1.5; padding: 3px 9px;
  margin: 0 6px 8px 0; border-radius: 999px; text-decoration: none;
}
.single-header .cat > a.penci-cat-name:hover {
  background: var(--rs-accent); color: #fff;
}

/* The meta row shipped italic 12px grey. Match the evidence line used on the
   homepage and archives so one voice runs through the whole site. */
.single-header .post-box-meta-single,
.single-header .post-box-meta-single span,
.single-header .post-box-meta-single a {
  font-family: var(--rs-font-body); font-style: normal; font-size: 12px;
  color: var(--rs-ink-55); letter-spacing: 0;
}
.single-header .post-box-meta-single a { text-decoration: none; }
.single-header .post-box-meta-single a:hover { color: var(--rs-accent); }
.single-header .post-title.single-post-title { margin: 0 0 10px; }
/* body. prefix is load-bearing. Soledad's Customizer emits
       .container-single .post-entry a { color: #304ffe; }
   at the same specificity as this rule, and its <style> block sits AFTER our
   stylesheet in the head — so on a tie it won, and every in-article link on
   the site rendered in the old bright blue instead of the design accent.
   One extra element in the selector settles it. */
body.single-post .entry-content a,
.single-post .entry-content a { color: var(--rs-accent-700); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px; }
body.single-post .entry-content a:hover,
.single-post .entry-content a:hover { color: var(--rs-accent); }
.single-post .entry-content img { border-radius: var(--rs-radius-sm); }
.single-post .entry-content blockquote {
  border-left: 3px solid var(--rs-accent);
  padding: 4px 0 4px 20px; margin: 1.6em 0; font-style: normal;
  color: var(--rs-ink-70);
}
.single-post .entry-content table { border-collapse: collapse; width: 100%; font-size: 15px; }
.single-post .entry-content th,
.single-post .entry-content td { border: 1px solid var(--rs-divider); padding: 9px 12px;
  text-align: left; }
.single-post .entry-content thead th { background: var(--rs-surface);
  font-family: var(--rs-font-heading); font-size: 15px; letter-spacing: .02em; }

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 2 — SHARED COMPONENTS  (used by the homepage and portable elsewhere)
   ═══════════════════════════════════════════════════════════════════════ */
/* Scoped border-box rather than a global `*` reset — a global reset on a
   mature parent theme is a good way to break layouts you didn't intend to
   touch. This covers our own components wherever they're used. */
.rs-home, .rs-home *, .rs-home *::before, .rs-home *::after,
.rs-card, .rs-card *, .rs-btn, .rs-input, .rs-side-card, .rs-side-card * {
  box-sizing: border-box;
}

/* Eyebrows are small uppercase labels — regular width reads cleaner at 12px
   and keeps the condensed face for things that are actually headings. */
.rs-eyebrow {
  font-family: var(--rs-font-body); font-weight: 700; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; margin: 0;
}
.rs-mono {
  font-family: var(--rs-font-mono); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase;
}
.rs-muted { color: var(--rs-ink-55); }

.rs-card {
  background: var(--rs-card);
  border: 1px solid var(--rs-divider);
  border-radius: var(--rs-radius);
  overflow: hidden;
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
a.rs-card:hover, .rs-card:hover {
  box-shadow: var(--rs-shadow);
  border-color: color-mix(in srgb, var(--rs-ink) 20%, transparent);
  transform: translateY(-2px);
}

.rs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--rs-font-body); font-weight: 600; font-size: 13px;
  padding: 10px 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--rs-divider); background: var(--rs-card); color: var(--rs-ink);
  text-decoration: none; transition: all .14s ease;
}
.rs-btn:hover { background: var(--rs-surface); color: var(--rs-ink);
  border-color: color-mix(in srgb, var(--rs-ink) 22%, transparent); }
.rs-btn-primary { background: var(--rs-accent); border-color: var(--rs-accent); color: #fff;
  box-shadow: var(--rs-shadow-sm); }
.rs-btn-primary:hover { background: var(--rs-accent-600); border-color: var(--rs-accent-600);
  color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--rs-accent) 28%, transparent); }
.rs-btn-ghost { background: none; border-color: transparent; color: var(--rs-accent-700);
  padding: 8px 12px; }
.rs-btn-ghost:hover { background: var(--rs-accent-100); color: var(--rs-accent-700); }
.rs-btn-block { width: 100%; }

.rs-tag {
  display: inline-block; font-family: var(--rs-font-body); font-weight: 600;
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; background: var(--rs-surface);
  color: var(--rs-ink-70); text-decoration: none; border: 1px solid transparent;
}
.rs-tag:hover { background: var(--rs-accent-100); color: var(--rs-accent-700); }

.rs-input {
  font-family: var(--rs-font-body); font-size: 13px; padding: 10px 14px;
  border-radius: 999px; border: 1px solid var(--rs-divider);
  background: var(--rs-card); color: var(--rs-ink); caret-color: var(--rs-accent);
}
.rs-input:hover { border-color: color-mix(in srgb, var(--rs-ink) 30%, transparent); }
.rs-input:focus { outline: none; border-color: var(--rs-accent);
  box-shadow: 0 0 0 3px var(--rs-accent-100); }

/* -- review score badge (v1.20.0) ----------------------------------------
   The circular verdict number. White ground with an accent ring rather
   than a solid accent fill — it sits on photographs, and a solid disc
   read as a UI control there. Sizes: default overlays the hero photo;
   --inline sits beside text (the single-post kicker). */
.rs-score-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%; flex: none;
  background: var(--rs-card);
  box-shadow: inset 0 0 0 2.5px var(--rs-accent), var(--rs-shadow-sm);
  font-family: var(--rs-font-heading); font-weight: 600; font-size: 21px;
  color: var(--rs-accent-700); letter-spacing: -.01em;
}
.rs-score-badge--inline { width: 44px; height: 44px; font-size: 17px; }

/* overlay position inside the hero photo */
.rs-home .rs-hero-media { position: relative; }
.rs-home .rs-hero-media .rs-score-badge {
  position: absolute; top: 14px; right: 14px; z-index: 2;
}

/* the feed's score chip, sharing .rs-type's chip geometry — white ground,
   accent ring, so it reads as the number next to the REVIEW label rather
   than a second label */
.rs-type.rs-score-chip {
  background: var(--rs-card); color: var(--rs-accent-700);
  box-shadow: inset 0 0 0 1px var(--rs-accent);
  font-weight: 700; letter-spacing: 0;
}

/* single post: badge above the title */
.single-header .rs-post-kicker { margin: 0 0 10px; }

/* video facade (functions.php section 14) — poster + real button; the
   iframe only exists after activation. Inside a wp:embed block core's
   aspect-ratio padding already sizes the wrapper, so the facade fills it. */
.rs-yt { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--rs-radius, 10px); overflow: hidden; }
.wp-has-aspect-ratio .wp-block-embed__wrapper .rs-yt { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.rs-yt-play { display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: #000; cursor: pointer; position: relative; }
.rs-yt-poster { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .92; transition: opacity .2s ease; }
.rs-yt-play:hover .rs-yt-poster, .rs-yt-play:focus-visible .rs-yt-poster { opacity: 1; }
.rs-yt-icon { position: absolute; left: 50%; top: 50%; width: 72px; height: 50px; transform: translate(-50%, -50%); border-radius: 14px; background: rgba(0, 0, 0, .72); transition: background .15s ease; }
.rs-yt-icon::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-40%, -50%); border-style: solid; border-width: 11px 0 11px 20px; border-color: transparent transparent transparent #fff; }
.rs-yt-play:hover .rs-yt-icon, .rs-yt-play:focus-visible .rs-yt-icon { background: var(--rs-accent, #3a6a99); }
.rs-yt-play:focus-visible { outline: 3px solid #fff; outline-offset: -4px; }
.rs-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 3 — HOMEPAGE  (scoped to .rs-home; these classes are set by the
   block markup on the homepage page, so they are fully under our control)
   ═══════════════════════════════════════════════════════════════════════ */
.rs-home { max-width: var(--rs-max); margin: 0 auto; }

/* ── HOMEPAGE WIDTH ───────────────────────────────────────────────────────
   Soledad's global page layout is "small-width", which adds
   .penci-page-container-smaller and caps every Page at 900px
   (penci_page_custom_width). Archives use the uncapped .container at
   1170px (--pcctain), so the homepage sat visibly narrower than the rest
   of the site.

   Lifting the cap here — and only on the homepage — makes it match, and
   leaves About, Disclaimer and the other prose pages at their comfortable
   900px reading width.

   Doing it in CSS rather than via the penci_sidebar_page_pos post meta is
   deliberate: Soledad's meta box rewrites that field on every page save,
   so a value set there would silently revert the next time the page is
   edited. This survives. */
.rs-home-page .container.penci-page-container-smaller,
.rs-home-page .container.container-single-page.penci-page-container-smaller {
  max-width: none;
}

/* The utility strip spans the full container, so it carries its own inset
   rather than relying on the (now zero) global gutter. */
.rs-home .rs-util { padding-left: 20px; padding-right: 20px; }

/* On the homepage, Soledad's page-title block and breadcrumb ("Home ›
   Homepage 2026" above a big HOMEPAGE 2026 heading) are noise — the page
   introduces itself. Scoped to the .rs-home-page body class that
   functions.php adds, so no other page is affected.

   Belt and braces: the preferred fix is Soledad's own per-page settings
   (penci_page_display_title / penci_page_breadcrumb, or Page Title →
   pheader_show in the page's Soledad panel). These rules cover the case
   where those aren't set, and are harmless if they are. */
.rs-home-page .page-header,
.rs-home-page .penci-page-header,
.rs-home-page #penci-page-header,
.rs-home-page .penci-pheader,
.rs-home-page .page-header-wrap,
.rs-home-page .archive-box,
.rs-home-page .penci-breadcrumb,
.rs-home-page .penci-breadcrumbs,
.rs-home-page .breadcrumbs,
.rs-home-page #breadcrumbs,
.rs-home-page .entry-title.page-title {
  display: none !important;
}

/* The homepage now USES Soledad's sidebar, so nothing is suppressed here.
   (An earlier version hid it — that rule has been removed deliberately.)
   Style the three homepage modules, which render as aside.widget.rs-side-card
   inside #sidebar. They carry both classes, so Layer 4's aside.widget card
   styling and our .rs-side-card styling land on the same element with the
   same values rather than stacking up. */
#sidebar .rs-side-card.rs-dark { background: var(--rs-deep); border-color: var(--rs-deep); }
#sidebar .rs-side-card.rs-dark .rs-eyebrow { color: var(--rs-accent-300); }
#sidebar .rs-side-card.rs-dark .rs-newsletter-line { color: var(--rs-bg); }
#sidebar .rs-side-card.rs-dark .rs-input {
  background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35);
}
#sidebar .rs-side-card.rs-dark .rs-input::placeholder { color: rgba(255, 255, 255, .55); }
#sidebar .rs-widget-method p {
  font-size: 13px; line-height: 1.55; color: var(--rs-ink-70); margin: 0 0 12px;
}
/* Soledad's widget titles are h4/h3 with .widget-title; ours are plain h2
   eyebrows, so give them the spacing the themed ones get. */
#sidebar .rs-side-card .rs-eyebrow { display: block; margin-bottom: 12px; }

/* -- utility strip ------------------------------------------------------- */
.rs-util {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 8px var(--rs-gutter); background: var(--rs-deep); color: var(--rs-bg);
  font-size: 12px;
}
.rs-util .rs-util-line { font-family: var(--rs-font-heading); font-weight: 600;
  letter-spacing: .14em; }
.rs-util .rs-util-links { margin-left: auto; display: flex; gap: 14px; flex-wrap: wrap; }
.rs-util a { color: var(--rs-bg); text-decoration: none; opacity: .85; }
.rs-util a:hover { color: #fff; opacity: 1; text-decoration: underline; }

/* -- section heads ------------------------------------------------------- */
/* Positioning line under the hero — quiet, one sentence, doing the job a
   decorative hero banner would otherwise take a screenful to do. */
/* This line is now the page's <h1>. The homepage had no h1 at all — the
   Soledad page title is hidden, so the document began at h2 and every section
   heading and post title sat at the same level with nothing above them. It is
   an h1 semantically and still reads as a standfirst, so the type is unchanged
   from when it was a paragraph — it just has to beat the heading defaults. */
.rs-home h1.rs-positioning,
.rs-home .rs-positioning {
  margin: 16px 0 0; padding: 0;
  font-family: var(--rs-font-body); font-weight: 400;
  font-size: 15px; line-height: 1.5; letter-spacing: 0;
  color: var(--rs-ink-70); text-align: center; text-transform: none;
}

.rs-sec-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 0 0 18px; }
/* Stacked variant: heading above a full sentence of standfirst, rather than
   a heading with a fragment sitting on its baseline. Both homepage section
   heads ("Browse by setup" and "Latest tests & guides") use this, so they
   read as the same rank.
   The .rs-home prefix is there to outrank Soledad's .entry-content h2, which
   the homepage sits inside and which would otherwise resize these. */
.rs-sec-head-stacked { display: block; }
.rs-home .rs-sec-head-stacked h2,
.rs-sec-head-stacked h2 {
  font-family: var(--rs-font-heading); font-weight: 600; font-size: 27px;
  line-height: 1.1; letter-spacing: -.015em; text-transform: none;
  margin: 0 0 4px;
}
.rs-home .rs-sec-head-stacked .rs-muted,
.rs-sec-head-stacked .rs-muted {
  display: block; font-size: 14px; line-height: 1.5; color: var(--rs-ink-55);
}
.rs-home .rs-pillars .rs-sec-head-stacked { margin-bottom: 20px; }
/* :not(.rs-eyebrow) so a section head that IS an eyebrow keeps its 13px —
   without this the later, more specific rule wins and blows it up to 27px. */
.rs-sec-head h2:not(.rs-eyebrow) { margin: 0; font-size: 27px; }
.rs-sec-head .rs-eyebrow { margin: 0; }

/* -- pillar row ---------------------------------------------------------- */
/* NOTE ON SPECIFICITY
   Every structural rule below is prefixed with .rs-home. Soledad ships layout
   rules that outrank a bare single-class selector — that is what was stacking
   the sidebar under the feed instead of beside it, and what was recolouring
   the links. The prefix costs nothing and keeps our layout deterministic.
   Keep it on any new rule you add here. */
/* -- featured review hero ------------------------------------------------ */
/* Deliberately not a decorative banner: it's the lead review, at a size that
   says so. Image first on mobile, side-by-side from 860px up. */
.rs-home .rs-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0;
  margin: 30px var(--rs-gutter) 0;
  background: var(--rs-card);
  border: 1px solid var(--rs-divider);
  border-radius: calc(var(--rs-radius) + 4px);
  overflow: hidden;
  align-items: stretch;
}
/* The photo FILLS a frame; it never sets the frame's size. The image is taken
   out of flow, so the hero is as tall as its text column (never under 340px)
   whatever shape the featured image is. It used to be height:100% of a parent
   with no definite height — which resolves to auto, so the photo's own
   proportions decided the hero's height. Invisible while every featured image
   was landscape; on Garage Tool Authority a 578×1024 product shot made the
   hero 890px tall. (network 1.0.3) */
.rs-home .rs-hero-media { display: block; position: relative; margin: 0;
  background: var(--rs-surface); min-height: 340px; overflow: hidden; }
.rs-home .rs-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; transition: transform .4s ease; }

/* Portrait images (flagged in PHP, functions.php 9d) are fitted whole rather
   than cropped: a tall product shot cropped to a wide frame shows the middle
   of the product and nothing else. White behind, because that is what product
   photography sits on. Applies to the hero, the pillar pictures and the feed
   thumbnails alike. */
.rs-home img.rs-img-portrait { object-fit: contain !important; background: #fff; }

/* The same on a single post (1.0.4). Soledad prints the featured image at its
   natural shape, so a portrait product shot filled the reading column at
   617×1094 — a full screen of compressor before the first word. A portrait
   featured image gets a 3:2 frame and is fitted whole inside it; landscape
   images are left exactly as they were. Styled on the <img> alone, so it
   needs no :has() (the critical-CSS generator drops those). */
.post-image img.pc-singlep-img.rs-img-portrait {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; /* 16:9 since 1.2.0: the frame is 860px wide now */
  background: #fff; border: 1px solid var(--rs-divider);
  border-radius: var(--rs-radius); box-sizing: border-box; }
.rs-home .rs-hero:hover .rs-hero-media img { transform: scale(1.02); }
.rs-home .rs-hero-body { padding: 30px 32px; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center; }
.rs-home .rs-hero-eyebrow { color: var(--rs-accent-700); margin-bottom: 12px; }
.rs-home .rs-hero-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.rs-home .rs-hero-tags .rs-tag-accent { background: var(--rs-accent-100);
  color: var(--rs-accent-700); }
/* clamp() rather than a fixed 38px: your headlines run long ("Vernal Core3
   L-Shaped Standing Desk Review: Worth $810?"), and at a fixed size that was
   spilling to four lines in the narrower half of the hero. */
.rs-home .rs-hero-title { font-family: var(--rs-font-heading); font-weight: 600;
  font-size: clamp(27px, 2.5vw, 34px); line-height: 1.06; letter-spacing: -.02em;
  margin: 0 0 10px; }
.rs-home .rs-hero-title a,
.rs-home .rs-hero-title a:link,
.rs-home .rs-hero-title a:visited { color: var(--rs-ink); text-decoration: none; }
.rs-home .rs-hero-title a:hover { color: var(--rs-accent); }
.rs-home .rs-hero-verdict { font-size: 15px; line-height: 1.6; color: var(--rs-ink-70);
  margin: 0 0 10px; }
.rs-home .rs-hero .rs-meta-line { font-size: 11px; color: var(--rs-ink-55);
  margin: 0 0 18px; }
.rs-home .rs-hero-cta { margin-top: auto; }

@media (max-width: 860px) {
  .rs-home .rs-hero { grid-template-columns: minmax(0, 1fr); }
  .rs-home .rs-hero-media { min-height: 0; aspect-ratio: 16/9; }
  .rs-home .rs-hero-body { padding: 22px 20px; }
  .rs-home .rs-hero-title { font-size: 29px; }
}

.rs-home .rs-pillars { padding: 30px var(--rs-gutter) 6px; }
.rs-home .rs-pillar-grid,
.rs-home .rs-pillar-grid.wp-block-columns { display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; }
.rs-home .rs-pillar-grid > .wp-block-column { flex-basis: auto !important; margin: 0 !important; }
.rs-home .rs-pillar,
.rs-home .rs-pillar.wp-block-column { display: flex; flex-direction: column; }
.rs-pillar figure, .rs-pillar .rs-pillar-img { margin: 0; overflow: hidden;
  background: var(--rs-surface); }
/* Each pillar image links to the test it was shot for. The anchor must be a
   block — as an inline element it collapses to the line box, which leaves a
   few dead pixels under the image and makes the hover zoom clip strangely.
   line-height:0 removes the descender gap; the padding reset stops Soledad's
   content-area link padding from inflating it. */
.rs-pillar .rs-pillar-img a {
  display: block; line-height: 0; padding: 0; border: 0; text-decoration: none;
}
.rs-pillar .rs-pillar-img a:focus-visible {
  outline: 2px solid var(--rs-accent); outline-offset: -3px;
}
.rs-pillar .rs-pillar-img img { width: 100%; aspect-ratio: 16/9; object-fit: cover;
  display: block; transition: transform .3s ease; }
.rs-pillar:hover .rs-pillar-img img { transform: scale(1.03); }
/* flex + margin-top:auto on the CTA keeps the three "All N tests →" links on a
   common baseline even when the standfirsts and post titles wrap to different
   heights. */
.rs-pillar-body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.rs-pillar-body > .rs-btn-ghost { margin-top: auto; align-self: flex-start; }
.rs-pillar-top { display: flex; align-items: baseline; gap: 9px; margin-bottom: 6px; }
.rs-pillar-num { font-family: var(--rs-font-mono); font-weight: 600; font-size: 12px;
  color: var(--rs-accent); letter-spacing: 0; }
.rs-pillar-top h3 { margin: 0; font-size: 25px; }
.rs-pillar-stand { font-size: 13px; line-height: 1.55; margin: 0 0 14px;
  color: color-mix(in srgb, var(--rs-ink) 72%, transparent); }

/* the category Query Loop inside each pillar */
.rs-pillar-loop { border-top: 1px solid var(--rs-divider); padding-top: 12px;
  margin-bottom: 14px; }
/* Wider gaps and lighter titles: the card is about the *category*, and three
   equally-bold post titles were competing with it for attention. */
.rs-pillar-loop ul, .rs-pillar-loop ol { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 14px; }
.rs-pillar-loop li { margin: 0; }

/* Soledad decorates list items inside content with its own square marker via
   li::before. Core's Query Loop renders <ul><li>, so those markers showed up
   next to every post title. Kill them for our loops only. */
.rs-pillar-loop ul, .rs-pillar-loop ol, .rs-pillar-loop li,
.rs-feed .wp-block-post-template, .rs-feed .wp-block-post-template li {
  list-style: none !important;
}
.rs-pillar-loop li::before, .rs-pillar-loop li::after,
.rs-feed .wp-block-post-template li::before,
.rs-feed .wp-block-post-template li::after {
  content: none !important; display: none !important;
}
.rs-pillar-loop li::marker,
.rs-feed .wp-block-post-template li::marker { content: "" !important; }
/* ::after is used for our own feed dividers — restore that one deliberately */
.rs-feed .wp-block-post + .wp-block-post::before {
  content: "" !important; display: block !important;
}
.rs-pillar-loop .wp-block-post-title { margin: 0; }
.rs-pillar-loop .wp-block-post-title a {
  font-family: var(--rs-font-title); font-weight: 500; font-size: 14px;
  line-height: 1.4; text-decoration: none;
  color: color-mix(in srgb, var(--rs-ink) 82%, transparent);
}
.rs-pillar-loop .wp-block-post-title a:hover { color: var(--rs-accent); }

/* -- pillar CTA ---------------------------------------------------------- */
/* A bordered pill rather than a bare text link: the card's job is to send
   people into the category, and the ghost button was disappearing under the
   three post links above it. */
.rs-home .rs-pillar-cta,
.rs-home .rs-pillar-cta:link,
.rs-home .rs-pillar-cta:visited {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--rs-font-body); font-weight: 700; font-size: 13px;
  letter-spacing: .01em; padding: 10px 18px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--rs-accent) 35%, transparent);
  background: var(--rs-accent-100); color: var(--rs-accent-700);
  text-decoration: none; transition: all .14s ease;
}
.rs-home .rs-pillar-cta:hover {
  background: var(--rs-accent); border-color: var(--rs-accent); color: #fff;
}

/* -- content type badges ------------------------------------------------- */
/* Four visually distinct labels so the feed reads as an editorial mix rather
   than one repeating card. Derived in PHP — see rs2026_content_type(). */
.rs-type {
  display: inline-block; font-family: var(--rs-font-body); font-weight: 700;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 3px; margin-right: 2px;
  background: var(--rs-surface); color: var(--rs-ink-70);
}
.rs-type-review       { background: var(--rs-accent);      color: #fff; }
.rs-type-comparison   { background: var(--rs-deep);        color: #fff; }
.rs-type-guide        { background: var(--rs-accent-200);  color: var(--rs-accent-700); }
.rs-type-buyers-guide { background: var(--rs-accent-200);  color: var(--rs-accent-700); }
.rs-type-tutorial     { background: transparent; color: var(--rs-accent-700);
                        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rs-accent) 40%, transparent); }
.rs-type-article      { background: var(--rs-surface); color: var(--rs-ink-70); }

/* The single remaining category chip, next to the badge. Quieter than the
   badge on purpose — the badge says what kind of thing it is, this says what
   it is about. */
.rs-home .rs-feed .rs-type-tags {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 7px; font-size: 0;
}
.rs-home .rs-feed .rs-cat,
.rs-home .rs-feed .rs-cat:link,
.rs-home .rs-feed .rs-cat:visited {
  font-family: var(--rs-font-body); font-weight: 600; font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  color: var(--rs-ink-55);
}
.rs-home .rs-feed .rs-cat:hover { color: var(--rs-accent); }

/* Long-form types get a touch more room and a tinted ground, so scrolling the
   feed has a rhythm instead of a uniform beat. Requires :has() — where it is
   unsupported the cards simply render identically, which is the old behaviour. */
.rs-feed .wp-block-post:has(.rs-type-guide),
.rs-feed .wp-block-post:has(.rs-type-buyers-guide) {
  background: color-mix(in srgb, var(--rs-accent-100) 55%, transparent);
  padding-top: 22px; padding-bottom: 22px;
}
.rs-feed .wp-block-post:has(.rs-type-comparison) .wp-block-post-title { font-weight: 700; }

/* -- credibility section ------------------------------------------------- */
/* This sits inside Soledad's page content wrapper, which styles ul, li and a
   for article bodies. That was giving each proof point BOTH a theme bullet and
   our tick, and inflating the button. Everything here is reset explicitly. */
.rs-home .rs-trust {
  display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 26px;
  align-items: center; margin: 30px 0 0; padding: 24px 26px;
  background: var(--rs-card); border: 1px solid var(--rs-divider);
  border-radius: calc(var(--rs-radius) + 4px);
}
.rs-home .rs-trust.rs-trust-nophoto { grid-template-columns: minmax(0, 1fr); }
.rs-home .rs-trust-photo img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
  border-radius: var(--rs-radius-sm); border: 1px solid var(--rs-divider);
}
.rs-home .rs-trust-title {
  font-family: var(--rs-font-heading); font-weight: 600; font-size: 27px;
  line-height: 1.05; letter-spacing: -.02em; margin: 0 0 8px;
}
.rs-home .rs-trust-lede {
  font-size: 14.5px; line-height: 1.55; color: var(--rs-ink-70); margin: 0 0 16px;
  max-width: 68ch;
}

/* list reset — kills the theme's bullet, indent and any ::marker */
.rs-home .rs-trust-points,
.rs-home .rs-trust-points li {
  list-style: none !important; margin-left: 0; padding-left: 0;
}
.rs-home .rs-trust-points li::marker { content: "" !important; }
.rs-home .rs-trust-points {
  margin: 0 0 18px; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px;
}
.rs-home .rs-trust-points li {
  position: relative; padding-left: 24px; font-size: 13.5px; line-height: 1.45;
  color: var(--rs-ink);
}
/* An SVG tick rather than two rotated borders — the border trick was picking
   up the theme's own li styling and rendering as a solid diamond. */
.rs-home .rs-trust-points li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 15px; height: 15px;
  background: no-repeat center / 15px 15px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233a6a99' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.4l3.3 3.3L13 5'/%3E%3C/svg%3E");
  border: 0; transform: none;
}
/* the theme pads content links generously; the CTA is a button, not prose */
.rs-home .rs-trust .rs-btn {
  padding: 10px 20px; line-height: 1.2; height: auto; min-height: 0;
  text-decoration: none;
}

/* -- newsletter band ----------------------------------------------------- */
/* The main column is ~780px once Soledad's sidebar takes its share, so a fixed
   420px form column squeezed the copy to about 300px and the headline broke
   badly. Proportional columns keep both readable at any container width. */
.rs-home .rs-newsletter {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 28px; align-items: center; margin: 34px 0 0; padding: 28px 30px;
  background: var(--rs-deep); color: var(--rs-bg);
  border-radius: calc(var(--rs-radius) + 4px);
}
.rs-home .rs-newsletter .rs-eyebrow { color: var(--rs-accent-300); margin-bottom: 8px; }
.rs-home .rs-newsletter .rs-newsletter-line {
  font-family: var(--rs-font-heading); font-weight: 600; font-size: 28px;
  line-height: 1.05; letter-spacing: -.02em; margin-bottom: 6px; color: var(--rs-bg);
}
.rs-home .rs-newsletter-sub {
  font-size: 14px; line-height: 1.55; margin: 0; opacity: .78;
}
/* The action column. The button and the note under it are one unit and share
   an edge — previously the button centred itself while the note started at the
   column's left edge, so the two never lined up. */
.rs-home .rs-newsletter .rs-newsletter-form {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  justify-self: end; text-align: left;
}

/* The signup form (v1.17.0 — a real form again, now that the Substack
   publication exists; it GETs to /subscribe with the email carried across).
   On the navy field the accent blue reads washed out and slightly unfinished,
   so the submit button inverts instead: light fill, dark text. It is the only
   action in the band and looks like it. */
.rs-home .rs-newsletter form.rs-newsletter-form { margin: 0; width: 100%; max-width: 360px; }
.rs-home .rs-newsletter .rs-newsletter-fields {
  display: flex; gap: 8px; width: 100%; flex-wrap: wrap;
}
.rs-home .rs-newsletter .rs-newsletter-input {
  flex: 1 1 170px; min-width: 0;
  background: transparent; color: #fff;
  border-color: rgba(255, 255, 255, .35);
}
.rs-home .rs-newsletter .rs-newsletter-input::placeholder { color: rgba(255, 255, 255, .55); }
.rs-home .rs-newsletter .rs-newsletter-input:focus {
  border-color: var(--rs-accent-300);
  box-shadow: 0 0 0 3px rgba(168, 200, 230, .25);
}
.rs-home .rs-newsletter .rs-newsletter-cta,
.rs-home .rs-newsletter .rs-newsletter-cta:link,
.rs-home .rs-newsletter .rs-newsletter-cta:visited {
  font-size: 14px; padding: 13px 26px; white-space: nowrap;
  background: var(--rs-bg); border-color: var(--rs-bg); color: var(--rs-deep);
}
.rs-home .rs-newsletter .rs-newsletter-cta:hover,
.rs-home .rs-newsletter .rs-newsletter-cta:focus {
  background: #fff; border-color: #fff; color: var(--rs-deep);
}
.rs-home .rs-newsletter .rs-newsletter-note {
  margin: 0; font-size: 12px; opacity: .55; color: var(--rs-bg);
}

@media (max-width: 782px) {
  .rs-home .rs-trust,
  .rs-home .rs-trust.rs-trust-nophoto { grid-template-columns: minmax(0, 1fr); }
  .rs-home .rs-trust-points { grid-template-columns: minmax(0, 1fr); }
  .rs-home .rs-newsletter { grid-template-columns: minmax(0, 1fr); }
  .rs-home .rs-newsletter .rs-newsletter-form { justify-self: start; }
  .rs-home .rs-trust-title { font-size: 25px; }
  .rs-home .rs-newsletter .rs-newsletter-line { font-size: 23px; }
}

/* -- THE GEAR BOX, TARGETED DIRECTLY -------------------------------------
   The page source finally showed the plugin's own stylesheet, so the classes
   are no longer a guess:

       .rs-aal-box · .rs-aal-box-title · .rs-aal-box-list
       .rs-aal-box-item · .rs-aal-box-name · .rs-aal-box-btn

   And it showed WHY the button label was blue. The plugin sets color:#fff on
   .rs-aal-box .rs-aal-box-btn — specificity 0,2,0. Soledad's Customizer emits

       .container-single .post-entry a { color: #304ffe; }

   at 0,2,1, which outranks it on every single post. The plugin was never at
   fault and neither was the markup; one Soledad rule was simply more specific.
   That is what four rounds of selector guessing was chasing.

   !important here is deliberate: .rs-aal-box-btn exists only inside the box,
   so nothing in the article's prose can be reached by these rules. */

.entry-content .rs-aal-box,
.post-entry .rs-aal-box {
  background: var(--rs-card);
  border: 1px solid var(--rs-divider);
  border-radius: var(--rs-radius);
  padding: 20px 22px;
  margin: 28px 0;
}
.entry-content .rs-aal-box-title,
.post-entry .rs-aal-box-title {
  font-family: var(--rs-font-body); font-weight: 700;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--rs-ink-55); margin: 0 0 14px;
}
.entry-content .rs-aal-box-item,
.post-entry .rs-aal-box-item { border-bottom-color: var(--rs-divider); }
.entry-content .rs-aal-box-name,
.post-entry .rs-aal-box-name {
  font-family: var(--rs-font-body); font-weight: 600;
  font-size: 15px; color: var(--rs-ink);
}
.entry-content .rs-aal-box .rs-aal-box-btn,
.entry-content .rs-aal-box .rs-aal-box-btn:link,
.entry-content .rs-aal-box .rs-aal-box-btn:visited,
.post-entry .rs-aal-box .rs-aal-box-btn,
.post-entry .rs-aal-box .rs-aal-box-btn:link,
.post-entry .rs-aal-box .rs-aal-box-btn:visited {
  font-family: var(--rs-font-body); font-weight: 600; font-size: 13px;
  line-height: 1; letter-spacing: .01em;
  padding: 11px 18px;
  border-radius: 999px !important;
  background: var(--rs-accent) !important;
  border: 1px solid var(--rs-accent);
  color: #fff !important;
  text-decoration: none !important;
  opacity: 1 !important;
  transition: background .14s ease, border-color .14s ease;
}
.entry-content .rs-aal-box .rs-aal-box-btn:hover,
.entry-content .rs-aal-box .rs-aal-box-btn:focus,
.post-entry .rs-aal-box .rs-aal-box-btn:hover,
.post-entry .rs-aal-box .rs-aal-box-btn:focus {
  background: var(--rs-accent-600) !important; border-color: var(--rs-accent-600);
  color: #fff !important; text-decoration: none !important; opacity: 1 !important;
}

/* -- "Gear mentioned in this post" (RS Amazon Auto Linker) ----------------
   The plugin injects this box into the_content with no class we can rely on,
   and it auto-links product keywords inline in the prose using the SAME
   affiliate href as the box button — so CSS alone cannot tell the two apart.
   Three attempts to infer the box from its shape all failed; one of them
   turned inline mentions into pills mid-sentence.

   CSS cannot match on text. PHP can. Section 9b of functions.php now finds the
   box by its LABEL TEXT at render time and stamps these classes on it:

       .rs-gear         the box
       .rs-gear-title   the "Gear mentioned in this post" label
       .rs-gear-list    the product list, if it is a list
       .rs-gear-row     each product row
       .rs-gear-btn     each Amazon link inside the box

   So everything below is keyed to classes that cannot exist anywhere in the
   article's prose. No :has(), no attribute guessing, no collateral damage.
   If the plugin is removed or its label changes, the classes stop being
   applied and every rule here simply stops matching. */

.entry-content .rs-gear {
  background: var(--rs-card);
  border: 1px solid var(--rs-divider);
  border-radius: var(--rs-radius);
  padding: 20px 22px;
  margin: 28px 0;
}

/* The plugin emits the label as a real heading, which on a single post renders
   larger than the article's own H2s. Demote it so it stops competing with the
   actual section headings around it. */
.entry-content .rs-gear-title {
  font-family: var(--rs-font-body); font-weight: 700;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--rs-ink-55); margin: 0 0 14px; padding: 0; border: 0;
}

.entry-content .rs-gear-list { list-style: none; margin: 0; padding: 0; }

/* One row per product: name left, button right. Works whether the plugin
   emits <li>s or plain divs — .rs-gear-row is applied to list items, and a
   non-list box falls back to the direct-child rule underneath. */
.entry-content .rs-gear-row,
.entry-content .rs-gear > div:has(> .rs-gear-btn) {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin: 0; padding: 12px 0; font-size: 15px; font-weight: 600;
  border-top: 1px solid var(--rs-divider);
}
.entry-content .rs-gear-row:first-child,
.entry-content .rs-gear > div:has(> .rs-gear-btn):first-of-type {
  border-top: 0; padding-top: 0;
}

/* The button. The plugin paints it black but never sets a text colour, so the
   label fell through to the browser's default underlined link blue — roughly
   2:1 contrast on near-black, reading as broken markup rather than a button.

   The !important flags are deliberate and they are narrow. The plugin ships
   its own stylesheet for this button, and PHP has already stripped its inline
   style attribute; these four declarations are the belt to that braces. They
   are safe because .rs-gear-btn is applied by our own PHP and only ever inside
   the gear box — the class cannot occur anywhere in the article's prose, so no
   in-content link can be reached by this rule. */
.entry-content .rs-gear-btn,
.entry-content .rs-gear-btn:link,
.entry-content .rs-gear-btn:visited {
  display: inline-block; flex: none;
  font-family: var(--rs-font-body); font-weight: 600; font-size: 13px;
  line-height: 1; letter-spacing: .01em;
  padding: 11px 18px;
  border-radius: 999px !important;
  background: var(--rs-accent) !important;
  border: 1px solid var(--rs-accent);
  color: #fff !important;
  text-decoration: none !important;
  transition: background .14s ease, border-color .14s ease;
}
.entry-content .rs-gear-btn:hover,
.entry-content .rs-gear-btn:focus {
  background: var(--rs-accent-600) !important; border-color: var(--rs-accent-600);
  color: #fff !important; text-decoration: none !important;
}

@media (max-width: 479px) {
  .entry-content .rs-gear-row,
  .entry-content .rs-gear > div:has(> .rs-gear-btn) {
    align-items: flex-start; flex-direction: column; gap: 10px;
  }
}

/* -- legal row + affiliate disclosure ------------------------------------
   The legal row is injected into Soledad's copyright block by section 9c of
   functions.php, because Soledad only renders its own footer menu when both a
   setting and a menu assignment are in place — neither of which was true, so
   the legal pages were unreachable from the site. Assign a Footer Menu in the
   Customizer and the PHP stands down; these rules then simply stop matching. */
#footer-copyright .rs-legal,
.rs-legal {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 20px; margin: 0 0 12px;
  font-family: var(--rs-font-body); font-size: 12px; line-height: 1.4;
}
#footer-copyright .rs-legal a,
#footer-copyright .rs-legal a:link,
#footer-copyright .rs-legal a:visited {
  color: inherit; opacity: .72; text-decoration: none;
  border-bottom: 1px solid transparent;
}
#footer-copyright .rs-legal a:hover,
#footer-copyright .rs-legal a:focus {
  opacity: 1; border-bottom-color: currentColor;
}

/* The Associates disclosure, at the top of any post carrying affiliate links.
   Deliberately quiet but not hidden — it has to be readable to do its job, so
   it keeps a real contrast ratio rather than fading into the background. */
.entry-content .rs-affiliate-note {
  margin: 0 0 22px; padding: 10px 0 12px;
  border-bottom: 1px solid var(--rs-divider);
  font-family: var(--rs-font-body); font-size: 13px; line-height: 1.5;
  color: var(--rs-ink-70);
}
.entry-content .rs-affiliate-note a,
.entry-content .rs-affiliate-note a:link,
.entry-content .rs-affiliate-note a:visited {
  color: var(--rs-accent); text-decoration: underline;
  text-underline-offset: 2px;
}

/* -- guides plate -------------------------------------------------------- */
.rs-home .rs-plate {
  margin: 30px var(--rs-gutter) 0; padding: 26px 30px;
  background: var(--rs-deep); color: var(--rs-bg);
  border-radius: calc(var(--rs-radius) + 4px);
  display: grid; grid-template-columns: .85fr 1.15fr; gap: 36px; align-items: center;
}
.rs-plate .rs-eyebrow { color: var(--rs-accent-300); margin-bottom: 10px; }
.rs-plate-statement { font-family: var(--rs-font-heading); font-weight: 600;
  font-size: 32px; line-height: 1.02; letter-spacing: -.02em; }
.rs-guide-row {
  display: flex; align-items: baseline; gap: 14px; padding: 11px 0;
  border-top: 1px solid rgba(255,255,255,.22); text-decoration: none; color: var(--rs-bg);
}
.rs-guide-row:last-child { border-bottom: 1px solid rgba(255,255,255,.22); }
.rs-guide-row:hover { color: var(--rs-bg); }
.rs-guide-row:hover .rs-guide-title { color: var(--rs-accent-300); }
.rs-guide-code { font-family: var(--rs-font-mono); font-weight: 600; font-size: 11px;
  color: var(--rs-accent-300); }
.rs-guide-title { font-family: var(--rs-font-heading); font-weight: 600; font-size: 19px;
  transition: color .12s ease; }
.rs-guide-dur { margin-left: auto; font-size: 12px; opacity: .6; white-space: nowrap; }

/* -- main + sidebar ------------------------------------------------------ */
/* minmax(0,1fr) rather than 1fr: a bare 1fr track has an auto minimum, so a
   long unbroken title or a wide image can push the sidebar off the grid. */
/* The `.wp-block-group` half of each selector is a deliberate specificity
   bump, not decoration. Soledad carries rules like
   `.penci-wrapper .wp-block-group { display: block }` at the same weight as a
   plain `.rs-home .rs-body`, so which one won came down to stylesheet order.
   Naming the block class too puts us a level clear of it. Verified against a
   simulated parent stylesheet — see the note in the README. */
/* The homepage no longer builds its own two-column layout.
   `.rs-body` (a block-editor grid holding the feed and an <aside>) is gone.
   Soledad's own right-sidebar now provides the column — the same code path
   that has always worked on archives and single posts — driven by two post
   meta values on the homepage:
       penci_sidebar_page_pos            = right-sidebar
       penci_custom_sidebar_page_display = custom-sidebar-1
   The sidebar's contents come from rs2026_render_home_sidebar() in
   functions.php. See section 6 there for the full reasoning. */
.rs-home .rs-feed { padding: 30px var(--rs-gutter) 34px; min-width: 0; }

/* -- the latest-posts feed (core Query Loop, restyled) ------------------- */
.rs-feed .wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.rs-feed .wp-block-post {
  display: grid; grid-template-columns: 150px 1fr; gap: 18px;
  padding: 18px 12px; margin: 0 -12px; border-radius: var(--rs-radius);
  position: relative; transition: background .12s ease;
}
.rs-feed .wp-block-post + .wp-block-post::before {
  content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 1px;
  background: var(--rs-divider);
}
.rs-feed .wp-block-post:hover { background: var(--rs-surface); }
.rs-feed .wp-block-post:hover::before,
.rs-feed .wp-block-post:hover + .wp-block-post::before { opacity: 0; }
.rs-feed .wp-block-post-featured-image { margin: 0; align-self: start; }
.rs-feed .wp-block-post-featured-image img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border: 1px solid var(--rs-divider); border-radius: var(--rs-radius-sm);
}
.rs-feed .wp-block-post-terms { margin: 0 0 6px; display: flex; gap: 8px; flex-wrap: wrap;
  font-size: 0; }
.rs-feed .wp-block-post-terms a {
  display: inline-block; font-family: var(--rs-font-body); font-weight: 600;
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; background: var(--rs-surface);
  color: var(--rs-ink-70); text-decoration: none; border: 1px solid transparent;
}
.rs-feed .wp-block-post-terms a:first-child { background: var(--rs-accent-100);
  color: var(--rs-accent-700); }
.rs-feed .wp-block-post-terms a:hover { background: var(--rs-accent-100);
  color: var(--rs-accent-700); }
/* core prints a separator between terms; the flex gap replaces it */
.rs-feed .wp-block-post-terms .wp-block-post-terms__separator { display: none; }
.rs-feed .wp-block-post-title {
  font-family: var(--rs-font-title); font-weight: 700; font-size: 20px;
  line-height: 1.3; letter-spacing: -.005em; margin: 0 0 6px;
}
.rs-feed .wp-block-post-title a { text-decoration: none; }
.rs-feed .wp-block-post-excerpt { margin: 0 0 6px; }
.rs-feed .wp-block-post-excerpt__excerpt { font-size: 13px; line-height: 1.5;
  color: var(--rs-ink-70); margin: 0; }
.rs-feed .wp-block-post-excerpt__more-text { display: none; }
.rs-feed .rs-meta-line, .rs-feed .wp-block-post-date {
  font-size: 11px; color: var(--rs-ink-55); margin: 0;
}
.rs-feed .rs-meta-sep { opacity: .5; padding: 0 2px; }

/* pagination */
.rs-feed .wp-block-query-pagination { display: flex; gap: 8px; align-items: center;
  padding-top: 22px; flex-wrap: wrap; }
.rs-feed .wp-block-query-pagination a,
.rs-feed .wp-block-query-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--rs-divider); background: var(--rs-card);
  font-size: 13px; font-weight: 600; text-decoration: none;
}
.rs-feed .wp-block-query-pagination .page-numbers.current {
  background: var(--rs-accent); border-color: var(--rs-accent); color: #fff;
}
.rs-feed .wp-block-query-pagination a:hover { background: var(--rs-surface); }

/* -- sidebar modules ----------------------------------------------------- */
.rs-side { display: flex; flex-direction: column; gap: 22px; }
.rs-side-card { padding: 18px; background: var(--rs-card);
  border: 1px solid var(--rs-divider); border-radius: var(--rs-radius); }
.rs-side-card .rs-eyebrow { margin-bottom: 12px; }

.rs-bench-item + .rs-bench-item { margin-top: 12px; }
.rs-bench-title { font-family: var(--rs-font-title); font-weight: 600; font-size: 16px;
  line-height: 1.2; }
.rs-track { height: 3px; background: var(--rs-accent-200); margin: 6px 0 5px;
  border-radius: 2px; overflow: hidden; }
.rs-track > span { display: block; height: 100%; background: var(--rs-accent); }
.rs-bench-label { font-family: var(--rs-font-mono); font-weight: 600; font-size: 10px;
  color: var(--rs-accent-700); }

.rs-side-card.rs-dark { background: var(--rs-deep); color: var(--rs-bg);
  border-color: var(--rs-deep); }
.rs-side-card.rs-dark .rs-eyebrow { color: var(--rs-accent-300); }
.rs-side-card.rs-dark .rs-input { background: transparent; color: #fff;
  border-color: rgba(255,255,255,.35); }
.rs-side-card.rs-dark .rs-input::placeholder { color: rgba(255,255,255,.55); }
.rs-newsletter-line { font-family: var(--rs-font-heading); font-weight: 600; font-size: 20px;
  line-height: 1.1; margin-bottom: 14px; }

/* ── LINK COLOUR RECLAIM ──────────────────────────────────────────────────
   Soledad sets its own global link and :visited colours at a specificity that
   beats our component rules, which is why feed titles, the guides plate and
   the utility strip were rendering in its blue/purple rather than ours.
   Each rule below is prefixed with .rs-home purely to win that contest — it
   is scoped to the homepage, so nothing else on the site is touched.
   :visited is stated explicitly everywhere; without it, read links drift
   purple the second time someone comes back.
   ────────────────────────────────────────────────────────────────────── */

/* feed post titles */
.rs-home .rs-feed .wp-block-post-title a,
.rs-home .rs-feed .wp-block-post-title a:link,
.rs-home .rs-feed .wp-block-post-title a:visited { color: var(--rs-ink); }
.rs-home .rs-feed .wp-block-post-title a:hover,
.rs-home .rs-feed .wp-block-post-title a:focus { color: var(--rs-accent); }

/* pillar loop titles */
.rs-home .rs-pillar-loop .wp-block-post-title a,
.rs-home .rs-pillar-loop .wp-block-post-title a:link,
.rs-home .rs-pillar-loop .wp-block-post-title a:visited { color: var(--rs-ink); }
.rs-home .rs-pillar-loop .wp-block-post-title a:hover,
.rs-home .rs-pillar-loop .wp-block-post-title a:focus { color: var(--rs-accent); }

/* category tags */
.rs-home .rs-feed .wp-block-post-terms a,
.rs-home .rs-feed .wp-block-post-terms a:link,
.rs-home .rs-feed .wp-block-post-terms a:visited { color: var(--rs-ink-70); }
.rs-home .rs-feed .wp-block-post-terms a:first-child,
.rs-home .rs-feed .wp-block-post-terms a:first-child:visited { color: var(--rs-accent-700); }
.rs-home .rs-feed .wp-block-post-terms a:hover { color: var(--rs-accent-700); }

/* guides plate — light type on the dark field */
.rs-home .rs-guide-row,
.rs-home .rs-guide-row:link,
.rs-home .rs-guide-row:visited,
.rs-home .rs-guide-row .rs-guide-title,
.rs-home .rs-guide-row .rs-guide-dur { color: var(--rs-bg); }
.rs-home .rs-guide-row .rs-guide-code { color: var(--rs-accent-300); }
.rs-home .rs-guide-row:hover .rs-guide-title,
.rs-home .rs-guide-row:focus .rs-guide-title { color: var(--rs-accent-300); }

/* utility strip */
.rs-home .rs-util a,
.rs-home .rs-util a:link,
.rs-home .rs-util a:visited { color: var(--rs-bg); }
.rs-home .rs-util a:hover { color: #fff; }

/* ghost CTAs keep the accent */
.rs-home .rs-btn-ghost,
.rs-home .rs-btn-ghost:link,
.rs-home .rs-btn-ghost:visited { color: var(--rs-accent-700); }

/* newsletter + methodology buttons */
.rs-home .rs-btn-primary,
.rs-home .rs-btn-primary:link,
.rs-home .rs-btn-primary:visited { color: #fff; }
.rs-home .rs-side-card .rs-btn,
.rs-home .rs-side-card .rs-btn:visited { color: var(--rs-ink); }
.rs-home .rs-side-card.rs-dark .rs-btn-primary,
.rs-home .rs-side-card.rs-dark .rs-btn-primary:visited { color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 4 — PARENT-THEME CHROME  (header, nav, footer, sidebar widgets)

   Sidebar selectors below were CONFIRMED against the live rendered widget
   markup pulled from the REST API. Header/nav/footer selectors are a first
   pass written without seeing the live DOM — verify those after activating.
   Each rule is safe to delete on its own.
   ═══════════════════════════════════════════════════════════════════════ */

/* NAVIGATION: NOT STYLED HERE.

   This block used to set the menu's font family, weight, size, letter-spacing
   and uppercasing. Every one of those is a real Customizer setting in Soledad
   — penci_font_for_menu, penci_font_weight_menu, penci_font_size_lv,
   penci_main_bar_nav_color, penci_mainmenu_height — and overriding them from
   here meant changing them in the Customizer appeared to do nothing.

   The menu is yours. Nothing in this stylesheet touches it. */

/* widget titles — markup confirmed via the REST sidebar registration:
   <h3|h4 class="widget-title penci-border-arrow"><span class="inner-arrow">…  */
.widget-title,
.widget-title.penci-border-arrow .inner-arrow {
  font-family: var(--rs-font-body); font-weight: 700;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--rs-ink);
}
.widget-title.penci-border-arrow { border: 0; }
.widget-title.penci-border-arrow::before,
.widget-title.penci-border-arrow::after { display: none; }

aside.widget {
  background: var(--rs-card); border: 1px solid var(--rs-divider);
  border-radius: var(--rs-radius); padding: 18px; margin-bottom: 22px;
}
aside.widget ul { list-style: none; margin: 0; padding: 0; }
aside.widget li { margin: 0 0 8px; font-size: 14px; line-height: 1.35; }
aside.widget a { text-decoration: none; }

/* Search widget — CONFIRMED markup: .pc-searchform > .pc-searchform-inner */
.pc-searchform-inner { display: flex; gap: 8px; align-items: center; position: relative; }
.pc-searchform .search-input {
  flex: 1; min-width: 0; font-family: var(--rs-font-body); font-size: 13px;
  padding: 10px 14px; border-radius: 999px; border: 1px solid var(--rs-divider);
  background: var(--rs-card); color: var(--rs-ink); caret-color: var(--rs-accent);
}
.pc-searchform .search-input:focus { outline: none; border-color: var(--rs-accent);
  box-shadow: 0 0 0 3px var(--rs-accent-100); }
.pc-searchform .searchsubmit, .pc-searchform .penci-ele-btn {
  font-family: var(--rs-font-body); font-weight: 600; font-size: 13px;
  padding: 10px 18px; border-radius: 999px; border: 1px solid var(--rs-accent);
  background: var(--rs-accent); color: #fff; cursor: pointer;
  transition: background .14s ease;
}
.pc-searchform .searchsubmit:hover { background: var(--rs-accent-600); }
.pc-searchform .penciicon-magnifiying-glass { display: none; }

/* "Keep in touch" social widget — CONFIRMED markup:
     .widget-social.penci-social-colored > a > i.penci-faicon + span

   The <a> carries NO background of its own. An earlier version gave it a grey
   pill, which sat behind Soledad's brand-coloured icon tile and read as a grey
   oval around every icon. The tile is the button; the link is just a wrapper.

   Removing that padding also fixes the wrap — five icons plus pill padding
   overflowed a 300px sidebar and dropped the RSS icon onto its own row. */
.widget .widget-social,
.widget-social {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.widget-social.pc_aligncenter { justify-content: center; }
.widget-social.pc_alignleft { justify-content: flex-start; }

.widget .widget-social a,
.widget-social a,
.widget-social a:link,
.widget-social a:visited {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none;
  color: var(--rs-ink-70); text-decoration: none;
  font-family: var(--rs-font-body); font-size: 12.5px; font-weight: 600;
  transition: color .14s ease, opacity .14s ease;
}
.widget .widget-social a:hover,
.widget-social a:hover {
  background: none; color: var(--rs-accent); opacity: .85;
}
/* Soledad's own colour/shape settings drive the tile — leave them alone.
   To drop the brand colours and run these on the single accent instead,
   turn off "colored" in Customize → Social and they inherit the link colour. */

/* "Recent Posts" widget — CONFIRMED markup: .side-newsfeed > li.penci-feed
   Soledad floats .side-image and pushes .side-item-text over with a left
   margin. Our two-level grid rule lost to its five-level selectors, so the
   float stayed and the title ran underneath the thumbnail. These selectors
   match Soledad's own depth (the pattern is visible in the site's existing
   penci_custom_css), then explicitly unwind the float. */
.widget ul.side-newsfeed li.penci-feed,
.side-newsfeed li.penci-feed {
  margin: 0; padding: 14px 0; border-top: 1px solid var(--rs-divider);
  list-style: none;
}
.widget ul.side-newsfeed li.penci-feed:first-child { border-top: 0; padding-top: 0; }
.widget ul.side-newsfeed li.penci-feed:last-child { padding-bottom: 0; }

.widget ul.side-newsfeed li .side-item {
  display: grid; grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px; align-items: start;
}
.widget ul.side-newsfeed li .side-item .side-image {
  float: none; width: auto; margin: 0; padding: 0;
}
.widget ul.side-newsfeed li .side-item .side-image a {
  display: block; width: 100%; aspect-ratio: 4/3; height: auto; min-height: 0;
  background-size: cover; background-position: center;
  border: 1px solid var(--rs-divider); border-radius: var(--rs-radius-sm);
}
/* the offset Soledad added to clear its own float */
.widget ul.side-newsfeed li .side-item .side-item-text {
  margin-left: 0; padding-left: 0; min-width: 0;
}
.widget ul.side-newsfeed li .side-item .side-item-text h4,
.widget ul.side-newsfeed li .side-item .side-item-text .side-title-post {
  margin: 0 0 4px; font-family: var(--rs-font-title); font-weight: 600;
  font-size: 15px; line-height: 1.25;
}
.widget ul.side-newsfeed li .side-item .side-item-text h4 a,
.widget ul.side-newsfeed li .side-item .side-item-text h4 a:visited {
  text-decoration: none; color: var(--rs-ink); font-size: 15px;
}
.widget ul.side-newsfeed li .side-item .side-item-text h4 a:hover { color: var(--rs-accent); }
.widget ul.side-newsfeed li .side-item .side-item-text .grid-post-box-meta,
.widget ul.side-newsfeed li .side-item .side-item-text .side-item-meta {
  font-size: 11px; color: var(--rs-ink-55);
}

/* footer */
.footer-content, #footer-copyright, .penci-footer-social {
  font-family: var(--rs-font-body);
}
#footer-copyright, .footer-copyright {
  font-size: 11px; color: var(--rs-ink-55);
  border-top: 1px solid var(--rs-divider);
}

/* ── ARCHIVE / CATEGORY PAGES ─────────────────────────────────────────────
   penci_archive_layout is "list", which renders content-list.php:

     li.list-post.pclist-layout
       article.item.hentry
         div.thumbnail            > a.penci-image-holder
         div.header-list-style    > div.cat, h2.penci-entry-title, div.penci-post-box-meta
         div.item-content.entry-content
         a.penci-btn-readmore

   Selectors below are read from that template, not inferred. The goal is
   that a category page and the homepage feed look like the same site.
   ────────────────────────────────────────────────────────────────────── */
/* Soledad lays these out with floats:
     .item > .thumbnail          { width: 46.25%; float: left }
     .item > .content-list-right { width: 53.75%; float: left; padding-left: 30px }
   The float leaves the thumbnail column at 46% while the image inside sits at
   its natural size, which is where the big empty gap beside each thumbnail
   came from. We unwind both floats and drive the row with a grid instead. */
li.list-post.pclist-layout {
  list-style: none; margin: 0; padding: 20px 12px;
  border-radius: var(--rs-radius); border-top: 1px solid var(--rs-divider);
  transition: background .12s ease;
}
li.list-post.pclist-layout:first-child { border-top: 0; }
li.list-post.pclist-layout:hover { background: var(--rs-surface); }

li.list-post.pclist-layout > article.item.hentry {
  display: grid; grid-template-columns: 300px minmax(0, 1fr);
  gap: 26px; align-items: start;
}
li.list-post.pclist-layout.pc-nothumb > article.item.hentry {
  grid-template-columns: minmax(0, 1fr);
}

li.list-post.pclist-layout .item > .thumbnail {
  float: none; width: auto; max-width: none; margin: 0;
  position: relative;   /* the containing block for the post-format badge */
}
/* the media is either an <img> or a background-image <a> (penci_layout_bg),
   so both need a size — a background element has no intrinsic height.

   These key off .penci-image-holder, NOT off `a`. .thumbnail is not just the
   image — content-list.php also puts the post-format badge, the bookmark
   button and the review piechart in there, as siblings:

       <div class="thumbnail">
         …bookmark button…  …review piechart…
         <a class="penci-image-holder" href="…">…</a>
         <a class="icon-post-format" href="…"><i class="fas fa-play"></i></a>
       </div>

   A bare `.thumbnail a` matched all of them. The video badge was being handed
   display:block, width:100%, a 3:2 aspect ratio, the thumbnail's border radius
   and its 1px frame — a small round button stretched into a grey slab across
   the card. Match the media by its own class and the problem cannot recur for
   whatever Soledad adds to that div next. */
li.list-post.pclist-layout .item > .thumbnail .penci-image-holder {
  /* border-box so the 1px frame sits inside the 300px track rather than
     pushing the media 2px wider than its column */
  box-sizing: border-box;
  display: block; width: 100%; max-width: none; aspect-ratio: 3 / 2;
  background-size: cover; background-position: center;
  border-radius: var(--rs-radius-sm); overflow: hidden;
}
li.list-post.pclist-layout .item > .thumbnail .penci-image-holder img {
  display: block; width: 100%; height: 100%; max-width: none; object-fit: cover;
}
li.list-post.pclist-layout .item > .thumbnail > a.penci-image-holder {
  border: 1px solid var(--rs-divider);
}

/* ── THE POST-FORMAT BADGE ────────────────────────────────────────────────
   Video, gallery, audio, link and quote posts all get one. Everything here is
   stated outright — size, shape, colour, position — so it does not depend on
   Soledad's own rules for the class, and cannot be knocked about by them.
   ────────────────────────────────────────────────────────────────────── */
li.list-post.pclist-layout .item > .thumbnail > a.icon-post-format {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  width: 34px; height: 34px; min-width: 0; max-width: none;
  padding: 0; margin: 0; border: 0;
  aspect-ratio: auto;                      /* undo any inherited ratio */
  border-radius: 999px; overflow: visible;
  background: color-mix(in srgb, var(--rs-deep) 80%, transparent);
  color: #fff; font-size: 12px; line-height: 1; text-decoration: none;
  transition: background .12s ease, transform .12s ease;
}
li.list-post.pclist-layout .item > .thumbnail > a.icon-post-format:hover,
li.list-post.pclist-layout .item > .thumbnail > a.icon-post-format:focus-visible {
  background: var(--rs-accent); transform: scale(1.06);
}
li.list-post.pclist-layout .item > .thumbnail > a.icon-post-format i,
li.list-post.pclist-layout .item > .thumbnail > a.icon-post-format svg {
  display: block; width: auto; height: auto;
  margin: 0; padding: 0; color: inherit; fill: currentColor;
  font-size: inherit; line-height: 1;
}
/* a play triangle sits optically left of centre in a circle */
li.list-post.pclist-layout .item > .thumbnail > a.icon-post-format i.fa-play,
li.list-post.pclist-layout .item > .thumbnail > a.icon-post-format svg.fa-play {
  transform: translateX(1px);
}
@media (max-width: 767px) {
  li.list-post.pclist-layout .item > .thumbnail > a.icon-post-format {
    width: 30px; height: 30px; left: 8px; bottom: 8px; font-size: 11px;
  }
}

li.list-post.pclist-layout .item > .content-list-right {
  float: none !important; width: 100% !important;
  padding-left: 0 !important; padding-right: 0 !important; margin: 0;
}

li.list-post.pclist-layout .header-list-style { margin: 0; }
li.list-post.pclist-layout .item-content.entry-content {
  font-size: 13.5px; line-height: 1.6; color: var(--rs-ink-70); margin: 8px 0 0;
}

/* category label → the same pill the homepage feed uses */
li.list-post .header-list-style .cat > a.penci-cat-name,
li.list-post .header-list-style .cat > a.penci-cat-name:visited {
  display: inline-block; font-family: var(--rs-font-body); font-weight: 600;
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  line-height: 1.5; padding: 3px 9px; margin: 0 6px 6px 0; border-radius: 999px;
  background: var(--rs-accent-100); color: var(--rs-accent-700); text-decoration: none;
}
li.list-post .header-list-style .cat > a.penci-cat-name:hover {
  background: var(--rs-accent); color: #fff;
}

/* archive post titles */
li.list-post .penci-entry-title.entry-title,
li.list-post h2.penci-entry-title {
  font-family: var(--rs-font-title); font-weight: 700; font-size: 22px;
  line-height: 1.3; letter-spacing: -.005em; margin: 4px 0 6px;
}
li.list-post .penci-entry-title a,
li.list-post .penci-entry-title a:visited { color: var(--rs-ink); text-decoration: none; }
li.list-post .penci-entry-title a:hover { color: var(--rs-accent); }

/* meta row — Soledad ships its own read time here (.otherl-readtime) */
li.list-post .grid-post-box-meta,
li.list-post .otherl-date, li.list-post .otherl-comment,
li.list-post .otherl-readtime, li.list-post .otherl-date-author {
  font-family: var(--rs-font-body); font-size: 11px; color: var(--rs-ink-55);
  font-style: normal;
}

/* Soledad's diamond separator between category names. */
.cat > a.penci-cat-name::after,
li.list-post .cat > a.penci-cat-name::after {
  content: none !important; display: none !important;
}

/* read-more button
   The wrapper .penci-readmore-btn carries the theme's own pill border, and we
   were adding a second one to the <a> inside it — hence the double outline.
   Strip the wrapper back to a plain block and let the link be the button. */
li.list-post.pclist-layout .penci-readmore-btn {
  margin: 12px 0 0; text-align: left;
  border: 0 !important; background: none !important; padding: 0 !important;
  border-radius: 0 !important; box-shadow: none !important; display: block;
  width: auto !important; height: auto !important;
}
li.list-post.pclist-layout .penci-readmore-btn a.penci-btn-readmore {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: auto; min-width: 0; height: auto; line-height: 1.2;
  font-family: var(--rs-font-body); font-weight: 600; font-size: 12.5px;
  letter-spacing: .02em; text-transform: none;
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--rs-divider);
  background: var(--rs-card); color: var(--rs-ink); text-decoration: none;
}
li.list-post.pclist-layout .penci-readmore-btn a.penci-btn-readmore:hover {
  background: var(--rs-surface); color: var(--rs-ink);
}

/* Per-card share icons (heart / f / x / pin / mail) are clutter in a list of
   30 results — they belong on the single post, where someone has actually
   read the thing. Delete this rule to bring them back. */
li.list-post.pclist-layout .penci-post-box-meta.penci-post-box-listpost,
li.list-post.pclist-layout .penci-post-share-box { display: none; }

@media (max-width: 767px) {
  li.list-post.pclist-layout > article.item.hentry { grid-template-columns: minmax(0, 1fr); }
  li.list-post.pclist-layout .item > .thumbnail { margin-bottom: 0; }
  li.list-post .penci-entry-title.entry-title { font-size: 21px; }
}

.penci-grid li .item h2 a,
.penci-grid li .item h2 a:visited,
.penci-masonry .item-masonry h2 a,
.penci-masonry .item-masonry h2 a:visited,
.header-standard h2 a,
.header-standard h2 a:visited {
  font-family: var(--rs-font-title); font-weight: 700;
  color: var(--rs-ink); text-decoration: none; letter-spacing: -.015em;
}
.penci-grid li .item h2 a:hover,
.penci-masonry .item-masonry h2 a:hover,
.header-standard h2 a:hover { color: var(--rs-accent); }

.penci-post-box-meta .penci-box-meta,
.grid-post-box-meta,
.header-standard .author-post span,
.header-standard .author-post span a {
  font-family: var(--rs-font-body); color: var(--rs-ink-55);
}

/* category label above archive post titles */
.cat > a.penci-cat-name,
.cat > a.penci-cat-name:visited {
  font-family: var(--rs-font-body); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--rs-accent-700); text-decoration: none;
}
.cat > a.penci-cat-name:hover { color: var(--rs-accent); }

/* "continue reading" button on list archives */
.penci-standard-continue-reading a,
.penci-post-continue-reading a {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--rs-font-body); font-weight: 600; font-size: 13px;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--rs-divider); background: var(--rs-card);
  color: var(--rs-ink); text-decoration: none;
}
.penci-standard-continue-reading a:hover { background: var(--rs-surface); }

/* Header Subscribe pill — the .rs-cta class is stamped onto any menu item
   linking to Substack by rs2026_cta_menu_class() in functions.php; nothing
   to set in the menu editor. The header is otherwise Customizer-owned; this
   styles ONE menu item and changes nothing about the band, the logo or the
   other items. line-height:1 + own padding, because the link inherits the
   menu bar's tall line-height and would otherwise stretch the pill to the
   full bar height. */
/* The pill's list item is only as tall as the pill while its siblings fill
   the 58px bar with their line-height, and floats align to the TOP of the
   row — so on its own the pill rides high. v1.19.1 fixed that with a fixed
   13px margin, which was only right for a 12px menu font. Since 1.26.1 the
   item is made bar-height and centres the pill itself, so any menu font size
   (penci_font_size_lv1) stays centred. The 58 is Soledad's default menu
   height; if penci_mainmenu_height is ever changed, match it here. */
#navigation .menu > li.rs-cta { height: 58px; display: flex; align-items: center; }

#navigation .menu > li.rs-cta > a,
#navigation ul.menu > li.rs-cta > a {
  background: var(--rs-accent);
  color: #fff !important;
  border-radius: 999px;
  padding: 10px 18px !important;
  line-height: 1 !important;
  margin-left: 10px;
  font-weight: 600;
  transition: background .14s ease;
}
#navigation .menu > li.rs-cta > a::before,
#navigation .menu > li.rs-cta > a::after { display: none !important; }
#navigation .menu > li.rs-cta > a:hover,
#navigation .menu > li.rs-cta > a:focus {
  background: var(--rs-accent-600);
  color: #fff !important;
}
/* the same item inside the mobile / hamburger drawer — plain accent text,
   the drawer's list layout doesn't suit a pill */
.penci-menu-hbg li.rs-cta > a { color: var(--rs-accent) !important; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 4b — THE 404 PAGE  (template: 404.php, ours — v1.18.0)
   Scoped to body.error404, which WordPress sets on its own; nothing here
   can reach any other template.
   ═══════════════════════════════════════════════════════════════════════ */
.error404 .rs-404 {
  max-width: 620px; margin: 0 auto; padding: 56px 20px 72px;
  text-align: center;
}

/* The code is set in the mono face at display size — the same voice as the
   pillar numbers and bench labels, scaled up. Surface-grey rather than the
   accent: it is scenery, not a call to action. */
.error404 .rs-404-code {
  font-family: var(--rs-font-mono); font-weight: 600; font-size: 96px;
  line-height: 1; letter-spacing: .04em; margin: 0 0 8px;
  color: var(--rs-accent-200);
}

.error404 .rs-404-title {
  font-family: var(--rs-font-heading); font-weight: 600;
  font-size: clamp(30px, 5vw, 40px); line-height: 1.06;
  letter-spacing: -.02em; margin: 0 0 12px;
}

.error404 .rs-404-sub {
  font-size: 15px; line-height: 1.6; color: var(--rs-ink-70);
  max-width: 46ch; margin: 0 auto 26px;
}

/* Soledad's own search form, restyled to the pill system. The submit is a
   sibling input, not a child of the field, so the two are laid out as one
   row. */
.error404 .rs-404-search { max-width: 440px; margin: 0 auto 26px; }
.error404 .rs-404-search .pc-searchform-inner { display: flex; gap: 8px; }
.error404 .rs-404-search .search-input {
  flex: 1; min-width: 0; font-family: var(--rs-font-body); font-size: 14px;
  padding: 11px 16px; border-radius: 999px;
  border: 1px solid var(--rs-divider); background: var(--rs-card);
  color: var(--rs-ink); caret-color: var(--rs-accent);
}
.error404 .rs-404-search .search-input:focus {
  outline: none; border-color: var(--rs-accent);
  box-shadow: 0 0 0 3px var(--rs-accent-100);
}
.error404 .rs-404-search .searchsubmit {
  flex: none; cursor: pointer; font-family: var(--rs-font-body);
  font-weight: 600; font-size: 13px; padding: 11px 20px;
  border-radius: 999px; border: 1px solid var(--rs-accent);
  background: var(--rs-accent); color: #fff;
  transition: background .14s ease;
}
.error404 .rs-404-search .searchsubmit:hover { background: var(--rs-accent-600); }
/* the magnifier icon Soledad absolutely-positions inside the form fights the
   pill layout — the button says what it does */
.error404 .rs-404-search .pc-searchform-inner > i { display: none; }

/* Section chips — same pill treatment as the pillar CTAs. */
.error404 .rs-404-cats {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin: 0 0 34px;
}
.error404 .rs-404-cat,
.error404 .rs-404-cat:link,
.error404 .rs-404-cat:visited {
  display: inline-flex; align-items: center;
  font-family: var(--rs-font-body); font-weight: 700; font-size: 13px;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--rs-accent) 35%, transparent);
  background: var(--rs-accent-100); color: var(--rs-accent-700);
  text-decoration: none; transition: all .14s ease;
}
.error404 .rs-404-cat:hover {
  background: var(--rs-accent); border-color: var(--rs-accent); color: #fff;
}

/* Latest posts — a quiet card, left-aligned inside the centred column. */
.error404 .rs-404-latest {
  text-align: left; background: var(--rs-card);
  border: 1px solid var(--rs-divider); border-radius: var(--rs-radius);
  padding: 20px 22px; margin: 0 0 30px;
}
.error404 .rs-404-latest .rs-eyebrow { color: var(--rs-ink-55); margin: 0 0 10px; }
.error404 .rs-404-latest ul,
.error404 .rs-404-latest li { list-style: none !important; margin: 0; padding: 0; }
.error404 .rs-404-latest li::marker { content: "" !important; }
.error404 .rs-404-latest li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 9px 0; border-top: 1px solid var(--rs-divider);
}
.error404 .rs-404-latest li:first-child { border-top: 0; padding-top: 0; }
.error404 .rs-404-latest li a {
  font-family: var(--rs-font-title); font-weight: 600; font-size: 15px;
  line-height: 1.35; color: var(--rs-ink); text-decoration: none;
}
.error404 .rs-404-latest li a:hover { color: var(--rs-accent); }
.error404 .rs-404-date {
  flex: none; font-size: 12px; color: var(--rs-ink-55);
  white-space: nowrap;
}

.error404 .rs-404-home { font-size: 14px; padding: 12px 24px; }

@media (max-width: 480px) {
  .error404 .rs-404 { padding: 36px 16px 52px; }
  .error404 .rs-404-code { font-size: 68px; }
  .error404 .rs-404-latest li { flex-direction: column; gap: 2px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 4d — SINGLE POSTS: ONE COLUMN  (1.2.0)

   Single articles have no sidebar (functions.php section 23 sets Soledad's
   "Single Posts Sidebar Layout" to "No Sidebar", once). Bike198 has read
   this way since its redesign. What the sidebar held — a search box, recent
   posts, social icons — is all in the header, the footer or under the
   article already, and on a phone it was never beside the article anyway:
   it was a second page of widgets stacked after the comments.

   The layout: one 720px reading column (about 80 characters of 18px Barlow
   a line) holding the title, the text, the tags, the post navigation and the
   comments, all on the same left edge. The featured image and the related
   posts break out to the full 860px container.

   Scoped to .penci_is_nosidebar: a single post that is given a sidebar in
   its own Soledad options keeps the ordinary two-column layout.
   ═══════════════════════════════════════════════════════════════════════ */
/* Desktop only. Soledad sizes .container with a fixed WIDTH per breakpoint
   (not a max-width), so a width set here without a media query overrides its
   phone and tablet widths too — the first draft of this ran an 860px article
   off the side of a 375px screen. Below 960px Soledad's own widths stand, and
   the 720px max-width below simply never bites. */
@media (min-width: 960px) {
  body.single-post .container.container-single.penci_is_nosidebar { width: 860px; }
  body.single-post .container.penci-breadcrumb.single-breadcrumb { width: 720px; }
}
body.single-post .penci_is_nosidebar #main { width: 100%; float: none; padding-right: 0; padding-left: 0; }
body.single-post .penci_is_nosidebar article.post > *:not(.post-image):not(.post-related) {
  max-width: 720px; margin-left: auto !important; margin-right: auto !important; } /* !important: Soledad sets side margins of 0 on the share row */
/* Soledad makes the share/comment-count row inline-block, which auto margins
   cannot centre. */
body.single-post .penci_is_nosidebar article.post > .tags-share-box { display: block; }
body.single-post .penci_is_nosidebar .post-image img { width: 100%; height: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 5 — RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .rs-home .rs-pillar-grid,
  .rs-home .rs-pillar-grid.wp-block-columns { grid-template-columns: repeat(2, 1fr); }
  .rs-home .rs-plate { grid-template-columns: 1fr; gap: 20px; }
}

/* 960px is not arbitrary — it is one of Soledad's own container steps.
   main.css sets --pcctain to 1170 / 940 / 726 / 480 at 1170 / 961 / 768 / 480.
   Collapsing at 960 means the sidebar stays beside the feed while the
   container is 940px (feed ≈ 604px, comfortable) and drops the moment the
   container falls to 726px, where 1fr + 300px would be cramped. Picking our
   own breakpoint instead would leave a band where the two disagree. */
/* Soledad handles the sidebar's own responsive collapse, so there is nothing
   for us to do at this breakpoint any more. */
@media (max-width: 700px) {
  .rs-home .rs-body > .rs-side,
  .rs-home .rs-body > .rs-side.wp-block-group { grid-template-columns: 1fr; }
}
@media (max-width: 782px) {
  .rs-plate-statement { font-size: 26px; }
  .rs-feed .wp-block-post { grid-template-columns: 110px 1fr; }
}
/* These carry the same .wp-block-columns bump as the wider breakpoints. Without
   it the 1024px rule outranks this one and the pillars stay 2-up on a phone. */
@media (max-width: 700px) {
  .rs-home .rs-pillar-grid,
  .rs-home .rs-pillar-grid.wp-block-columns { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  /* Soledad already drops --pcctain to calc(100vw - 40px) on small screens,
     so the container supplies the side margin. Keep our gutter at 0 or the
     content gets inset twice. */
  .rs-feed .wp-block-post { grid-template-columns: 1fr; }
  .rs-util { gap: 8px; }
  .single-post .entry-content { font-size: 16px; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .rs-card:hover, a.rs-card:hover { transform: none; }
  .rs-pillar:hover .rs-pillar-img img { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 6 — ACCESSIBILITY  (v1.25.0, functions.php section 17)
   ═══════════════════════════════════════════════════════════════════════ */

/* Visible focus for keyboard users. Soledad resets outlines to none; this
   restores them only for keyboard focus, so mouse clicks stay clean. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--rs-accent, #3a6a99) !important;
  outline-offset: 2px !important;
  border-radius: 3px;
}

/* Meta text was ~4:1 on the page ground; 0.72 alpha lands above 5:1. */
.single-header .post-box-meta-single,
.single-header .post-box-meta-single span,
.single-header .post-box-meta-single a,
.single-header .post-box-meta-single time,
.rs-feed .rs-meta, .rs-read-time { color: rgba(26, 28, 30, .72); }
.post-pagination .prev-post-title span, .post-pagination .next-post-title span,
.post-pagination .prev-title, .post-pagination .next-title,
.prev-post-title span, .next-post-title span { color: #5f6266 !important; }

/* Comparison tables scroll sideways on a phone instead of shrinking. */
.rs-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rs-table-scroll > table { min-width: 100%; }
.entry-content .wp-block-table, .post-entry .wp-block-table { overflow-x: auto; }

/* 1.25.1 — the last contrast items axe found on a fresh render: sidebar
   dates, and the byline author link needs to read as a link. */
#sidebar time, .widget time, .rs-side-card time, .side-newsfeed time, .side-item time,
.rs-side-card .rs-meta, .widget .rs-meta { color: rgba(26, 28, 30, .72) !important; }
.single-header .post-box-meta-single .author-post a { text-decoration: underline; text-underline-offset: 2px; }

/* 1.25.2 — related-post dates and footer legal links. */
.post-related time, .item-related time, .related-content .date, .penci-post-date, time.entry-date { color: rgba(26, 28, 30, .72) !important; }
#footer-copyright .rs-legal a, #footer-copyright .rs-legal a:link, #footer-copyright .rs-legal a:visited { color: #bdbdbd !important; }

/* 1.25.3 — CookieYes paints its "Cookie Settings" button white-on-light-grey
   (1.3:1). Its colours come from the plugin settings; this pins readable
   text whatever they are set to. */
#cookie-law-info-bar .cli_settings_button, #cookie-law-info-bar .cli-plugin-main-button.cli_settings_button { color: #1a1c1e !important; }
#cookie-law-info-bar .cli_action_button, #cookie-law-info-bar .wt-cli-accept-all-btn { color: #ffffff !important; }