/*
Theme Name:   Soledad Child — RS 2026
Theme URI:    https://robbsutton.com/
Description:  Child theme for RobbSutton.com carrying the 2026 redesign design system
              ("Version B — softened modern"). Global type and colour, homepage sections,
              feed cards, sidebar modules and footer. Parent theme: Soledad by PenciDesign.
Author:       Robb Sutton
Version:      1.1.0
Template:     soledad
Text Domain:  soledad-child-rs2026
*/

/* ═══════════════════════════════════════════════════════════════════════════
   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);

  --rs-font-heading: "Barlow Condensed", system-ui, -apple-system, sans-serif;
  --rs-font-body:    "Barlow", system-ui, -apple-system, sans-serif;
  --rs-font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  --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);

  --rs-gutter:      32px;
  --rs-max:         1180px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   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, h2, h3, h4, h5, h6 {
  font-family: var(--rs-font-heading);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--rs-ink);
}

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; }
.single-post .entry-content h2 { font-size: 30px; margin: 1.9em 0 .5em; }
.single-post .entry-content h3 { font-size: 23px; margin: 1.6em 0 .45em; }
.single-post .entry-content a { color: var(--rs-accent-700); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px; }
.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;
}

.rs-eyebrow {
  font-family: var(--rs-font-heading); font-weight: 600; font-size: 13px;
  letter-spacing: .08em; 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 rgba(58,106,153,.28); }
.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); }

/* ═══════════════════════════════════════════════════════════════════════════
   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; }

/* 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 lays out its own sidebar, so suppress Soledad's if the page
   template still prints one. */
.rs-home-page .penci-single-sidebar,
.rs-home-page #sidebar.penci-sidebar-widgets { display: none; }

/* -- 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 a { color: var(--rs-bg); text-decoration: none; opacity: .85; }
.rs-util a:hover { color: #fff; opacity: 1; text-decoration: underline; }

/* -- section heads ------------------------------------------------------- */
.rs-sec-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 0 0 18px; }
/* :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;
}
.rs-home .rs-hero-media { display: block; margin: 0; background: var(--rs-surface);
  min-height: 100%; overflow: hidden; }
.rs-home .rs-hero-media img { width: 100%; height: 100%; min-height: 320px;
  object-fit: cover; display: block; transition: transform .4s ease; }
.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 img { 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); }
.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; }
.rs-pillar-loop ul, .rs-pillar-loop ol { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px; }
.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-heading); font-weight: 600; font-size: 15px;
  line-height: 1.2; text-decoration: none; color: var(--rs-ink);
}
.rs-pillar-loop .wp-block-post-title a:hover { color: var(--rs-accent); }

/* -- 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. */
.rs-home .rs-body,
.rs-home .rs-body.wp-block-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 36px;
  align-items: start;
  padding: 30px var(--rs-gutter) 34px;
}
.rs-home .rs-body > .rs-feed,
.rs-home .rs-body > .rs-feed.wp-block-group { grid-column: 1; min-width: 0; }
.rs-home .rs-body > .rs-side,
.rs-home .rs-body > .rs-side.wp-block-group { grid-column: 2; display: block; }

/* -- 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-heading); font-weight: 600; font-size: 22px;
  line-height: 1.15; margin: 0 0 5px;
}
.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-heading); 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.
   ═══════════════════════════════════════════════════════════════════════ */

/* nav items — UNCONFIRMED, verify after activation */
#navigation .menu > li > a,
.penci-menuhbg-toggle + #navigation .menu > li > a,
#navigation.primary-navigation .menu li a {
  font-family: var(--rs-font-heading); font-weight: 600; font-size: 15px;
  letter-spacing: .04em; text-transform: uppercase;
}
#navigation .menu > li.current-menu-item > a { color: var(--rs-accent); }

/* 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-heading); font-weight: 600;
  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 > a */
.widget-social { display: flex; flex-wrap: wrap; gap: 8px; }
.widget-social a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px; background: var(--rs-surface);
  color: var(--rs-ink-70); text-decoration: none; font-size: 12.5px; font-weight: 600;
  transition: background .14s ease, color .14s ease;
}
.widget-social a:hover { background: var(--rs-accent-100); color: var(--rs-accent-700); }
.widget-social.penci-social-colored a { background: var(--rs-surface); }

/* "Recent Posts" widget — CONFIRMED markup: .side-newsfeed > li.penci-feed */
.side-newsfeed li.penci-feed { margin: 0; padding: 12px 0;
  border-top: 1px solid var(--rs-divider); }
.side-newsfeed li.penci-feed:first-child { border-top: 0; padding-top: 0; }
.side-newsfeed .side-item { display: grid; grid-template-columns: 74px 1fr; gap: 12px;
  align-items: start; }
.side-newsfeed .side-image a { display: block; aspect-ratio: 4/3;
  background-size: cover; background-position: center;
  border: 1px solid var(--rs-divider); border-radius: var(--rs-radius-sm); }
.side-newsfeed .side-title-post { margin: 0 0 4px; font-family: var(--rs-font-heading);
  font-weight: 600; font-size: 15px; line-height: 1.2; }
.side-newsfeed .side-title-post a { text-decoration: none; }
.side-newsfeed .grid-post-box-meta,
.side-newsfeed .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);
}

/* ═══════════════════════════════════════════════════════════════════════════
   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; }
}

/* The sidebar drops under the feed at 900px, not 1024px — a 1000px-wide
   window is still comfortably wide enough for 1fr + 300px, and collapsing
   that early made desktop-ish widths look broken. Below 900px the three
   sidebar modules sit 2-up rather than in one long stack. */
@media (max-width: 900px) {
  .rs-home .rs-body,
  .rs-home .rs-body.wp-block-group { grid-template-columns: minmax(0, 1fr); }
  .rs-home .rs-body > .rs-feed,
  .rs-home .rs-body > .rs-feed.wp-block-group,
  .rs-home .rs-body > .rs-side,
  .rs-home .rs-body > .rs-side.wp-block-group { grid-column: 1; }
  .rs-home .rs-body > .rs-side,
  .rs-home .rs-body > .rs-side.wp-block-group {
    display: grid; grid-template-columns: repeat(2, 1fr);
    align-items: start; gap: 18px;
  }
}
@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) {
  :root { --rs-gutter: 18px; }
  .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; }
}