/*
Theme Name: Renolyst
Theme URI: https://renolyst.com
Description: Custom GeneratePress child theme for Renolyst — a home renovation cost and financing authority site. Warm-neutral palette, long-form reading typography, and well-spaced ad zones tuned for Core Web Vitals and AdSense policy compliance.
Author: Renolyst
Author URI: https://renolyst.com
Template: generatepress
Version: 3.0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: renolyst
Tags: blog, custom-colors, custom-menu, two-columns, right-sidebar, translation-ready
*/

/* ==========================================================================
   RENOLYST DESIGN SYSTEM
   Three-layer tokens: primitive -> semantic -> component.
   Never reference a primitive directly in a component rule; go through the
   semantic layer so the palette can be retuned in one place.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PRIMITIVE TOKENS — raw values, no meaning attached
   -------------------------------------------------------------------------- */

:root {
  /* Warm neutral scale. Hue held ~32deg so the greys read as paper, not
     concrete. This is the deliberate move away from generic cool-grey blog. */
  --rl-sand-50:  #faf7f2;
  --rl-sand-100: #f4efe7;
  --rl-sand-200: #e8e1d5;
  --rl-sand-300: #d6ccbc;
  --rl-sand-400: #b0a492;
  --rl-sand-500: #8a7e6c;
  --rl-sand-600: #6b6152;
  --rl-sand-700: #4f473c;
  --rl-sand-800: #332e27;
  --rl-sand-900: #1f1b17;
  --rl-sand-950: #12100d;

  /* Terracotta — the single confident accent. Muted enough to sit under
     long-form text without shouting, saturated enough to carry a CTA. */
  --rl-clay-50:  #fdf3ef;
  --rl-clay-100: #fae3da;
  --rl-clay-200: #f2c4b3;
  --rl-clay-300: #e59d83;
  --rl-clay-400: #d4734f;
  --rl-clay-500: #bc5a36;
  --rl-clay-600: #9e4728;
  --rl-clay-700: #7d3720;
  --rl-clay-800: #5e2a19;

  /* Forest — reserved for "verified / savings / positive" data points only.
     Not a second brand colour. Using it as one would dilute the terracotta. */
  --rl-moss-100: #e3ebe3;
  --rl-moss-500: #4a6b4d;
  --rl-moss-600: #3a553c;
  --rl-moss-700: #2c412e;

  /* Signal colours for comparison tables (cost up / cost down). */
  --rl-amber-100: #fbf0d9;
  --rl-amber-700: #8a6108;
  --rl-rust-100:  #f9e4e0;
  --rl-rust-700:  #92351f;

  /* Spacing — 4px base unit. */
  --rl-space-1:  0.25rem;
  --rl-space-2:  0.5rem;
  --rl-space-3:  0.75rem;
  --rl-space-4:  1rem;
  --rl-space-5:  1.25rem;
  --rl-space-6:  1.5rem;
  --rl-space-8:  2rem;
  --rl-space-10: 2.5rem;
  --rl-space-12: 3rem;
  --rl-space-16: 4rem;
  --rl-space-20: 5rem;
  --rl-space-24: 6rem;

  /* Type scale. Body is 18px because this site is read at length; the scale
     steps are a ~1.25 ratio, tightened at the top so mobile headings don't
     eat the viewport. */
  --rl-text-xs:   0.8125rem; /* 13px */
  --rl-text-sm:   0.9375rem; /* 15px */
  --rl-text-base: 1.125rem;  /* 18px */
  --rl-text-lg:   1.25rem;   /* 20px */
  --rl-text-xl:   1.375rem;  /* 22px */
  --rl-text-2xl:  1.625rem;  /* 26px */
  --rl-text-3xl:  2rem;      /* 32px */
  --rl-text-4xl:  2.5rem;    /* 40px */

  --rl-leading-tight:   1.2;
  --rl-leading-snug:    1.35;
  --rl-leading-normal:  1.5;
  --rl-leading-relaxed: 1.7;

  --rl-weight-normal:   400;
  --rl-weight-medium:   500;
  --rl-weight-semibold: 600;
  --rl-weight-bold:     700;

  --rl-tracking-tight: -0.02em;
  --rl-tracking-wide:   0.02em;
  --rl-tracking-caps:   0.06em;

  /* Radius — restrained. Big pill shapes read "startup landing page", which
     is the wrong signal for financial content. */
  --rl-radius-sm: 3px;
  --rl-radius-md: 6px;
  --rl-radius-lg: 10px;

  /* Shadows are warm-tinted, not neutral black, so cards sit on the cream
     background instead of floating above a grey one. */
  --rl-shadow-sm: 0 1px 2px rgba(51, 46, 39, 0.06);
  --rl-shadow-md: 0 2px 6px rgba(51, 46, 39, 0.07), 0 1px 2px rgba(51, 46, 39, 0.05);
  --rl-shadow-lg: 0 8px 24px rgba(51, 46, 39, 0.09), 0 2px 6px rgba(51, 46, 39, 0.05);

  --rl-duration-fast: 140ms;
  --rl-duration-base: 220ms;
  --rl-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* System font stack. A deliberate choice, not a shortcut: a webfont would
     add a render-blocking round trip and hurt LCP, and Core Web Vitals feed
     directly into AdSense RPM. */
  --rl-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --rl-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                  "Liberation Mono", monospace;
}

/* --------------------------------------------------------------------------
   2. SEMANTIC TOKENS — purpose aliases
   -------------------------------------------------------------------------- */

:root {
  --rl-bg-page:     var(--rl-sand-50);
  --rl-bg-surface:  #ffffff;
  --rl-bg-sunken:   var(--rl-sand-100);
  --rl-bg-inverse:  var(--rl-sand-900);

  --rl-text-primary:   var(--rl-sand-900);
  --rl-text-secondary: var(--rl-sand-700);
  --rl-text-muted:     var(--rl-sand-600);
  --rl-text-inverse:   var(--rl-sand-50);

  --rl-border-subtle: var(--rl-sand-200);
  --rl-border-strong: var(--rl-sand-300);

  --rl-accent:       var(--rl-clay-600);
  --rl-accent-hover: var(--rl-clay-700);
  --rl-accent-soft:  var(--rl-clay-50);
  --rl-accent-line:  var(--rl-clay-200);

  --rl-positive:      var(--rl-moss-600);
  --rl-positive-soft: var(--rl-moss-100);

  --rl-focus-ring: var(--rl-clay-500);

  /* Reading measure. 46rem = 736px, inside the 700-750px target from the
     brief — roughly 70-75 characters at 18px, which is where sustained
     reading comfort peaks. */
  --rl-measure: 46rem;
  --rl-measure-wide: 68rem;
}

/* --------------------------------------------------------------------------
   2b. GENERATEPRESS BRIDGE
   GeneratePress 3.x drives its Customizer output through its own global
   colour variables and prints those rules inline in <head> — i.e. after this
   stylesheet. Rather than fight that with !important on every component, we
   remap GP's variables to the Renolyst palette once, here. Every GP rule
   (.site-info, buttons, links, nav) then inherits the warm palette for free.

   The doubled :root:root raises specificity to (0,2,0) so these definitions
   beat GP's own :root block (0,1,0) regardless of source order.
   -------------------------------------------------------------------------- */

:root:root {
  --base:       var(--rl-sand-100);
  --base-2:     var(--rl-sand-50);
  --base-3:     var(--rl-bg-surface);
  --contrast:   var(--rl-sand-900);
  --contrast-2: var(--rl-sand-700);
  --contrast-3: var(--rl-sand-400);
  --accent:     var(--rl-clay-600);
}

/* --------------------------------------------------------------------------
   3. BASE
   -------------------------------------------------------------------------- */

body {
  background-color: var(--rl-bg-page);
  color: var(--rl-text-primary);
  font-family: var(--rl-font-sans);
  font-size: var(--rl-text-base);
  line-height: var(--rl-leading-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--rl-font-sans);
  color: var(--rl-text-primary);
  font-weight: var(--rl-weight-bold);
  letter-spacing: var(--rl-tracking-tight);
  line-height: var(--rl-leading-tight);
}

a {
  color: var(--rl-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color var(--rl-duration-fast) var(--rl-ease);
}

a:hover,
a:focus {
  color: var(--rl-accent-hover);
}

/* Visible focus for keyboard users only — required for accessibility and
   cheap insurance against an AdSense policy review flagging usability. */
:focus-visible {
  outline: 2px solid var(--rl-focus-ring);
  outline-offset: 2px;
  border-radius: var(--rl-radius-sm);
}

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

/* Reserve intrinsic space so images do not cause layout shift (CLS). */
img[width][height] {
  height: auto;
  aspect-ratio: attr(width) / attr(height);
}

::selection {
  background: var(--rl-accent-line);
  color: var(--rl-sand-900);
}

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */

.site-content {
  padding-block: var(--rl-space-10);
}

.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.one-container .site-content {
  background-color: var(--rl-bg-surface);
  border: 1px solid var(--rl-border-subtle);
  border-radius: var(--rl-radius-lg);
  box-shadow: var(--rl-shadow-sm);
}

.separate-containers .site-main > *:not(:last-child) {
  margin-bottom: var(--rl-space-8);
}

/* --------------------------------------------------------------------------
   5. HEADER + NAVIGATION
   -------------------------------------------------------------------------- */

.site-header {
  background-color: var(--rl-bg-surface);
  border-bottom: 1px solid var(--rl-border-subtle);
}

.site-logo img,
.site-branding img {
  max-height: 44px;
  width: auto;
}

.main-title {
  font-size: var(--rl-text-2xl);
  font-weight: var(--rl-weight-bold);
  letter-spacing: var(--rl-tracking-tight);
}

.main-title a {
  color: var(--rl-text-primary);
  text-decoration: none;
}

.main-title a:hover {
  color: var(--rl-accent);
}

.site-description {
  color: var(--rl-text-muted);
  font-size: var(--rl-text-sm);
  letter-spacing: var(--rl-tracking-wide);
}

.main-navigation {
  background-color: var(--rl-bg-surface);
  border-bottom: 1px solid var(--rl-border-subtle);
}

.main-navigation .main-nav ul li a {
  color: var(--rl-text-secondary);
  font-size: var(--rl-text-sm);
  font-weight: var(--rl-weight-medium);
  letter-spacing: var(--rl-tracking-wide);
  transition: color var(--rl-duration-fast) var(--rl-ease),
              box-shadow var(--rl-duration-fast) var(--rl-ease);
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus-within > a,
.main-navigation .main-nav ul li.current-menu-item > a {
  color: var(--rl-accent);
  background-color: transparent;
  box-shadow: inset 0 -2px 0 var(--rl-accent);
}

.main-navigation .main-nav ul ul li a {
  background-color: var(--rl-bg-surface);
  border-bottom: 1px solid var(--rl-border-subtle);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   6. HOMEPAGE HERO
   Applied via the .renolyst-hero class on a Group block, or the template
   part registered in functions.php.
   -------------------------------------------------------------------------- */

.renolyst-hero {
  background: linear-gradient(180deg, var(--rl-sand-100) 0%, var(--rl-sand-50) 100%);
  border-bottom: 1px solid var(--rl-border-subtle);
  padding-block: clamp(var(--rl-space-12), 8vw, var(--rl-space-24));
  text-align: center;
}

.renolyst-hero__inner {
  margin-inline: auto;
  max-width: var(--rl-measure);
  padding-inline: var(--rl-space-5);
}

.renolyst-hero__eyebrow {
  color: var(--rl-accent);
  font-size: var(--rl-text-xs);
  font-weight: var(--rl-weight-semibold);
  letter-spacing: var(--rl-tracking-caps);
  margin-bottom: var(--rl-space-4);
  text-transform: uppercase;
}

.renolyst-hero__title {
  font-size: clamp(var(--rl-text-3xl), 5.5vw, var(--rl-text-4xl));
  line-height: var(--rl-leading-tight);
  margin-bottom: var(--rl-space-5);
  text-wrap: balance;
}

.renolyst-hero__subtitle {
  color: var(--rl-text-secondary);
  font-size: var(--rl-text-lg);
  line-height: var(--rl-leading-normal);
  margin-inline: auto;
  max-width: 38rem;
  text-wrap: pretty;
}

.renolyst-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rl-space-3);
  justify-content: center;
  margin-top: var(--rl-space-8);
}

/* --------------------------------------------------------------------------
   7. BUTTONS
   -------------------------------------------------------------------------- */

.renolyst-btn,
.wp-block-button__link {
  border-radius: var(--rl-radius-md);
  display: inline-block;
  font-size: var(--rl-text-sm);
  font-weight: var(--rl-weight-semibold);
  letter-spacing: var(--rl-tracking-wide);
  line-height: 1;
  padding: var(--rl-space-4) var(--rl-space-6);
  text-decoration: none;
  transition: background-color var(--rl-duration-fast) var(--rl-ease),
              border-color var(--rl-duration-fast) var(--rl-ease),
              transform var(--rl-duration-fast) var(--rl-ease);
}

.renolyst-btn--primary,
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background-color: var(--rl-accent);
  color: #ffffff;
}

.renolyst-btn--primary:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background-color: var(--rl-accent-hover);
  color: #ffffff;
  transform: translateY(-1px);
}

.renolyst-btn--secondary {
  background-color: transparent;
  border: 1px solid var(--rl-border-strong);
  color: var(--rl-text-primary);
}

.renolyst-btn--secondary:hover {
  background-color: var(--rl-bg-sunken);
  border-color: var(--rl-sand-400);
  color: var(--rl-text-primary);
}

/* --------------------------------------------------------------------------
   8. ARTICLE GRID + ARCHIVE CARDS
   -------------------------------------------------------------------------- */

.renolyst-grid {
  display: grid;
  gap: var(--rl-space-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

/* Archive listing: turn GeneratePress's stacked articles into cards. */
.archive .site-main > article,
.blog .site-main > article,
.search-results .site-main > article {
  background-color: var(--rl-bg-surface);
  border: 1px solid var(--rl-border-subtle);
  border-radius: var(--rl-radius-lg);
  box-shadow: var(--rl-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--rl-duration-base) var(--rl-ease),
              transform var(--rl-duration-base) var(--rl-ease),
              border-color var(--rl-duration-base) var(--rl-ease);
}

.archive .site-main > article:hover,
.blog .site-main > article:hover,
.search-results .site-main > article:hover {
  border-color: var(--rl-border-strong);
  box-shadow: var(--rl-shadow-md);
  transform: translateY(-2px);
}

.archive .post-image img,
.blog .post-image img {
  border-radius: var(--rl-radius-md);
  object-fit: cover;
  width: 100%;
}

.archive .entry-title,
.blog .entry-title {
  font-size: var(--rl-text-xl);
  line-height: var(--rl-leading-snug);
  margin-bottom: var(--rl-space-3);
}

.archive .entry-title a,
.blog .entry-title a {
  color: var(--rl-text-primary);
  text-decoration: none;
}

.archive .entry-title a:hover,
.blog .entry-title a:hover {
  color: var(--rl-accent);
}

.entry-summary,
.archive .entry-content {
  color: var(--rl-text-secondary);
  font-size: var(--rl-text-sm);
  line-height: var(--rl-leading-normal);
}

/* Category chip */
.renolyst-chip,
.entry-meta .cat-links a {
  background-color: var(--rl-accent-soft);
  border-radius: var(--rl-radius-sm);
  color: var(--rl-clay-700);
  display: inline-block;
  font-size: var(--rl-text-xs);
  font-weight: var(--rl-weight-semibold);
  letter-spacing: var(--rl-tracking-caps);
  padding: var(--rl-space-1) var(--rl-space-2);
  text-decoration: none;
  text-transform: uppercase;
}

.entry-meta {
  color: var(--rl-text-muted);
  font-size: var(--rl-text-xs);
  letter-spacing: var(--rl-tracking-wide);
}

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

.entry-meta a:hover {
  color: var(--rl-accent);
}

/* --------------------------------------------------------------------------
   9. SINGLE ARTICLE
   -------------------------------------------------------------------------- */

.single .entry-title,
.page .entry-title {
  font-size: clamp(var(--rl-text-2xl), 4.5vw, var(--rl-text-3xl));
  line-height: var(--rl-leading-tight);
  margin-bottom: var(--rl-space-4);
  text-wrap: balance;
}

/* Constrain the reading column without touching GeneratePress's container
   width — the sidebar and ad rail still get the full grid. */
.single .entry-content > *,
.page .entry-content > * {
  margin-inline: auto;
  max-width: var(--rl-measure);
}

/* Full-bleed exceptions: these should escape the reading measure. Scoped to
   both single posts and pages — the reading clamp above applies to both, so
   the escape hatch has to as well or a full-width block on a page (the
   homepage hero, for one) gets trapped at the measure. */
:is(.single, .page) .entry-content > .alignwide,
:is(.single, .page) .entry-content > .renolyst-ad,
:is(.single, .page) .entry-content > .wp-block-table,
:is(.single, .page) .entry-content > .wp-block-latest-posts,
:is(.single, .page) .entry-content > figure.alignwide {
  max-width: var(--rl-measure-wide);
}

:is(.single, .page) .entry-content > .alignfull {
  max-width: none;
  width: auto;
}

.entry-content p {
  margin-bottom: var(--rl-space-6);
}

.entry-content h2 {
  font-size: var(--rl-text-2xl);
  margin-top: var(--rl-space-12);
  margin-bottom: var(--rl-space-4);
  padding-top: var(--rl-space-2);
  position: relative;
}

/* Short accent rule above H2s — a quiet section marker that gives long
   articles a scannable rhythm without heavy dividers. */
.entry-content h2::before {
  background-color: var(--rl-accent);
  border-radius: var(--rl-radius-sm);
  content: "";
  display: block;
  height: 3px;
  margin-bottom: var(--rl-space-4);
  width: 2.5rem;
}

.entry-content h3 {
  font-size: var(--rl-text-xl);
  margin-top: var(--rl-space-10);
  margin-bottom: var(--rl-space-3);
}

.entry-content h4 {
  font-size: var(--rl-text-lg);
  font-weight: var(--rl-weight-semibold);
  margin-top: var(--rl-space-8);
  margin-bottom: var(--rl-space-3);
}

.entry-content ul,
.entry-content ol {
  margin-bottom: var(--rl-space-6);
  padding-left: var(--rl-space-6);
}

.entry-content li {
  margin-bottom: var(--rl-space-2);
}

.entry-content li::marker {
  color: var(--rl-accent);
}

.entry-content blockquote {
  border-left: 3px solid var(--rl-accent);
  color: var(--rl-text-secondary);
  font-size: var(--rl-text-lg);
  font-style: normal;
  margin-block: var(--rl-space-8);
  padding: var(--rl-space-2) 0 var(--rl-space-2) var(--rl-space-6);
}

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

.entry-content hr,
.wp-block-separator {
  background-color: var(--rl-border-subtle);
  border: 0;
  height: 1px;
  margin-block: var(--rl-space-12);
}

.entry-content code {
  background-color: var(--rl-bg-sunken);
  border-radius: var(--rl-radius-sm);
  font-family: var(--rl-font-mono);
  font-size: 0.9em;
  padding: 0.15em 0.4em;
}

/* Body links inside prose get an underline — in financial content, a link
   that only differs by colour is too easy to miss. */
/* Underline links in running prose only. Component links (buttons, category
   cards, post-title links) opt out via :not() — otherwise the card titles
   and their mono meta lines pick up prose underlines and the drafting
   components stop reading as components. */
.entry-content a:not(.renolyst-btn):not(.wp-block-button__link):not(.renolyst-cat__link):not(.wp-block-latest-posts__post-title) {
  color: var(--rl-clay-700);
  text-decoration: underline;
}

.entry-content a:not(.renolyst-btn):not(.wp-block-button__link):not(.renolyst-cat__link):not(.wp-block-latest-posts__post-title):hover {
  background-color: var(--rl-accent-soft);
  color: var(--rl-clay-800);
}

/* --------------------------------------------------------------------------
   10. QUICK ANSWER BOX
   Block editor: Group block -> Styles -> "Quick Answer"
   Manual: <div class="renolyst-quick-answer">
   -------------------------------------------------------------------------- */

.renolyst-quick-answer,
.is-style-quick-answer {
  background-color: var(--rl-accent-soft);
  border: 1px solid var(--rl-accent-line);
  border-left: 4px solid var(--rl-accent);
  border-radius: var(--rl-radius-md);
  margin-block: var(--rl-space-8);
  padding: var(--rl-space-6);
}

.renolyst-quick-answer::before,
.is-style-quick-answer::before {
  color: var(--rl-clay-700);
  content: "Quick answer";
  display: block;
  font-size: var(--rl-text-xs);
  font-weight: var(--rl-weight-bold);
  letter-spacing: var(--rl-tracking-caps);
  margin-bottom: var(--rl-space-3);
  text-transform: uppercase;
}

.renolyst-quick-answer > *:last-child,
.is-style-quick-answer > *:last-child {
  margin-bottom: 0;
}

.renolyst-quick-answer p,
.is-style-quick-answer p {
  color: var(--rl-sand-800);
  font-size: var(--rl-text-lg);
  line-height: var(--rl-leading-normal);
}

/* Key figure callout, for "$24,000 average" style numbers. */
.renolyst-figure {
  color: var(--rl-clay-700);
  display: block;
  font-size: var(--rl-text-3xl);
  font-weight: var(--rl-weight-bold);
  letter-spacing: var(--rl-tracking-tight);
  line-height: var(--rl-leading-tight);
}

.renolyst-figure__label {
  color: var(--rl-text-muted);
  display: block;
  font-size: var(--rl-text-xs);
  font-weight: var(--rl-weight-medium);
  letter-spacing: var(--rl-tracking-caps);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   11. COMPARISON TABLES
   Block editor: Table block -> Styles -> "Comparison"
   -------------------------------------------------------------------------- */

.wp-block-table,
.renolyst-table-wrap {
  margin-block: var(--rl-space-8);
}

/* Tables must scroll inside their own container — the page body must never
   scroll horizontally on mobile. */
.wp-block-table,
.renolyst-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.entry-content table,
.wp-block-table table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--rl-text-sm);
  min-width: 32rem;
  width: 100%;
}

.entry-content th,
.wp-block-table th {
  background-color: var(--rl-bg-sunken);
  border-bottom: 2px solid var(--rl-border-strong);
  color: var(--rl-text-primary);
  font-size: var(--rl-text-xs);
  font-weight: var(--rl-weight-bold);
  letter-spacing: var(--rl-tracking-caps);
  padding: var(--rl-space-3) var(--rl-space-4);
  text-align: left;
  text-transform: uppercase;
  vertical-align: bottom;
}

.entry-content td,
.wp-block-table td {
  border-bottom: 1px solid var(--rl-border-subtle);
  line-height: var(--rl-leading-normal);
  padding: var(--rl-space-4);
  vertical-align: top;
}

.entry-content tbody tr:last-child td,
.wp-block-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Zebra striping in the warm neutral, not grey. */
.is-style-comparison tbody tr:nth-child(even) td,
.renolyst-table--comparison tbody tr:nth-child(even) td {
  background-color: var(--rl-sand-50);
}

.is-style-comparison,
.renolyst-table--comparison {
  border: 1px solid var(--rl-border-subtle);
  border-radius: var(--rl-radius-lg);
  overflow: hidden;
}

/* First column is the row label — anchor it visually. */
.is-style-comparison tbody td:first-child,
.renolyst-table--comparison tbody td:first-child {
  font-weight: var(--rl-weight-semibold);
}

/* Value signalling inside cost tables. */
.renolyst-val--low    { color: var(--rl-positive); font-weight: var(--rl-weight-semibold); }
.renolyst-val--mid    { color: var(--rl-amber-700); font-weight: var(--rl-weight-semibold); }
.renolyst-val--high   { color: var(--rl-rust-700); font-weight: var(--rl-weight-semibold); }

.renolyst-table-note {
  color: var(--rl-text-muted);
  font-size: var(--rl-text-xs);
  margin-top: var(--rl-space-3);
}

/* --------------------------------------------------------------------------
   12. FAQ BLOCK
   Block editor: Group block -> Styles -> "FAQ"
   Native <details>/<summary> — accessible and zero JavaScript.
   -------------------------------------------------------------------------- */

.renolyst-faq,
.is-style-faq {
  border-top: 1px solid var(--rl-border-subtle);
  margin-block: var(--rl-space-10);
}

.renolyst-faq details,
.is-style-faq details {
  border-bottom: 1px solid var(--rl-border-subtle);
}

.renolyst-faq summary,
.is-style-faq summary {
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: var(--rl-space-4);
  font-size: var(--rl-text-lg);
  font-weight: var(--rl-weight-semibold);
  line-height: var(--rl-leading-snug);
  list-style: none;
  padding: var(--rl-space-5) 0;
  transition: color var(--rl-duration-fast) var(--rl-ease);
}

.renolyst-faq summary::-webkit-details-marker,
.is-style-faq summary::-webkit-details-marker {
  display: none;
}

.renolyst-faq summary:hover,
.is-style-faq summary:hover {
  color: var(--rl-accent);
}

/* CSS-only +/- indicator. */
.renolyst-faq summary::after,
.is-style-faq summary::after {
  color: var(--rl-accent);
  content: "+";
  font-size: var(--rl-text-xl);
  font-weight: var(--rl-weight-normal);
  line-height: 1;
  margin-left: auto;
  transition: transform var(--rl-duration-base) var(--rl-ease);
}

.renolyst-faq details[open] summary::after,
.is-style-faq details[open] summary::after {
  content: "−";
}

.renolyst-faq details > *:not(summary),
.is-style-faq details > *:not(summary) {
  color: var(--rl-text-secondary);
  padding-bottom: var(--rl-space-5);
}

/* --------------------------------------------------------------------------
   13. AD ZONES
   Deliberately generous spacing. Cramped ads read as spam to readers and are
   a common AdSense policy rejection; they also depress viewability, which is
   what actually drives RPM.
   -------------------------------------------------------------------------- */

.renolyst-ad {
  clear: both;
  display: block;
  margin-block: var(--rl-space-12);
  text-align: center;
}

/* Reserve height so ads do not shift content when they load (CLS). */
.renolyst-ad__inner {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-inline: auto;
  min-height: 280px;
  width: 100%;
}

.renolyst-ad--leaderboard .renolyst-ad__inner {
  max-width: 728px;
  min-height: 90px;
}

.renolyst-ad--in-content .renolyst-ad__inner {
  max-width: 336px;
  min-height: 280px;
}

.renolyst-ad--sidebar .renolyst-ad__inner {
  max-width: 300px;
  min-height: 600px;
}

.renolyst-ad--below-article .renolyst-ad__inner {
  max-width: 728px;
  min-height: 280px;
}

/* Small, honest label. Required by AdSense policy when ad placement could be
   confused with editorial content, and it costs nothing in trust. */
.renolyst-ad__label {
  color: var(--rl-text-muted);
  display: block;
  font-size: 0.6875rem;
  letter-spacing: var(--rl-tracking-caps);
  margin-bottom: var(--rl-space-2);
  text-transform: uppercase;
}

/* Placeholder styling — visible only while the slot is empty, so the layout
   can be designed before AdSense approval. Once a real unit renders inside,
   it covers this. Remove the modifier class to ship. */
.renolyst-ad--placeholder .renolyst-ad__inner {
  background-color: var(--rl-bg-sunken);
  border: 1px dashed var(--rl-border-strong);
  border-radius: var(--rl-radius-md);
  color: var(--rl-text-muted);
  font-size: var(--rl-text-xs);
  letter-spacing: var(--rl-tracking-caps);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   14. SIDEBAR
   -------------------------------------------------------------------------- */

.sidebar .widget {
  background-color: var(--rl-bg-surface);
  border: 1px solid var(--rl-border-subtle);
  border-radius: var(--rl-radius-lg);
  margin-bottom: var(--rl-space-6);
  padding: var(--rl-space-6);
}

.sidebar .widget .widget-title {
  border-bottom: 1px solid var(--rl-border-subtle);
  font-size: var(--rl-text-xs);
  font-weight: var(--rl-weight-bold);
  letter-spacing: var(--rl-tracking-caps);
  margin-bottom: var(--rl-space-4);
  padding-bottom: var(--rl-space-3);
  text-transform: uppercase;
}

.sidebar .widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar .widget li {
  border-bottom: 1px solid var(--rl-border-subtle);
  padding-block: var(--rl-space-3);
}

.sidebar .widget li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.sidebar .widget a {
  color: var(--rl-text-secondary);
  font-size: var(--rl-text-sm);
  text-decoration: none;
}

.sidebar .widget a:hover {
  color: var(--rl-accent);
}

/* Sidebar ad should stick while long articles scroll — more viewable
   impressions without adding another slot. */
.renolyst-ad--sidebar {
  position: sticky;
  top: var(--rl-space-8);
}

/* --------------------------------------------------------------------------
   15. AUTHOR / TRUST BLOCK
   -------------------------------------------------------------------------- */

.renolyst-trust {
  background-color: var(--rl-bg-sunken);
  border-radius: var(--rl-radius-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--rl-space-4);
  margin-block: var(--rl-space-10);
  padding: var(--rl-space-6);
}

.renolyst-trust__body {
  flex: 1 1 16rem;
}

.renolyst-trust__title {
  font-size: var(--rl-text-sm);
  font-weight: var(--rl-weight-bold);
  letter-spacing: var(--rl-tracking-caps);
  margin-bottom: var(--rl-space-2);
  text-transform: uppercase;
}

.renolyst-trust p {
  color: var(--rl-text-secondary);
  font-size: var(--rl-text-sm);
  line-height: var(--rl-leading-normal);
  margin-bottom: 0;
}

.renolyst-updated {
  color: var(--rl-text-muted);
  font-size: var(--rl-text-xs);
  letter-spacing: var(--rl-tracking-wide);
}

/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */

.site-footer {
  background-color: var(--rl-bg-inverse);
  color: var(--rl-sand-300);
}

.site-footer a {
  color: var(--rl-sand-200);
}

.site-footer a:hover {
  color: #ffffff;
}

/* Compound selector (0,2,0) so it outranks GeneratePress's inline
   .site-info{background-color:var(--base-3)} rule. */
.site-footer .site-info {
  background-color: var(--rl-bg-inverse);
  border-top: 1px solid var(--rl-sand-800);
  color: var(--rl-sand-400);
  font-size: var(--rl-text-xs);
  padding-block: var(--rl-space-6);
}

.site-footer .site-info a {
  color: var(--rl-sand-200);
}

.site-footer .site-info a:hover {
  color: #ffffff;
}

/* GeneratePress paints .footer-widgets with var(--base-3) (white) from its
   inline Customizer block. Compound selector (0,2,0) to outrank it — without
   this the light footer link colours below land on white and fail contrast. */
.site-footer .footer-widgets {
  background-color: var(--rl-bg-inverse);
  padding-block: var(--rl-space-12);
}

.site-footer .footer-widgets .widget {
  background-color: transparent;
  border: 0;
  box-shadow: none;
  margin-bottom: 0;
  padding: 0;
}

.site-footer .footer-widgets .widget-title,
.site-footer .footer-widgets h2,
.site-footer .footer-widgets h3 {
  color: var(--rl-sand-100);
  font-size: var(--rl-text-sm);
  font-weight: var(--rl-weight-bold);
  letter-spacing: var(--rl-tracking-caps);
  margin-bottom: var(--rl-space-4);
  text-transform: uppercase;
}

.site-footer .footer-widgets p,
.site-footer .footer-widgets li {
  color: var(--rl-sand-300);
  font-size: var(--rl-text-sm);
  line-height: var(--rl-leading-normal);
}

.site-footer .footer-widgets ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer .footer-widgets li {
  border-bottom: 0;
  margin-bottom: var(--rl-space-2);
  padding: 0;
}

.site-footer .footer-widgets a {
  color: var(--rl-sand-200);
  text-decoration: none;
}

.site-footer .footer-widgets a:hover,
.site-footer .footer-widgets a:focus {
  color: #ffffff;
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   17. PAGINATION + COMMENTS
   -------------------------------------------------------------------------- */

.paging-navigation .page-numbers {
  border: 1px solid var(--rl-border-subtle);
  border-radius: var(--rl-radius-md);
  color: var(--rl-text-secondary);
  display: inline-block;
  font-size: var(--rl-text-sm);
  margin-right: var(--rl-space-2);
  padding: var(--rl-space-2) var(--rl-space-4);
  text-decoration: none;
}

.paging-navigation .page-numbers:hover,
.paging-navigation .page-numbers.current {
  background-color: var(--rl-accent);
  border-color: var(--rl-accent);
  color: #ffffff;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  background-color: var(--rl-bg-surface);
  border: 1px solid var(--rl-border-strong);
  border-radius: var(--rl-radius-md);
  color: var(--rl-text-primary);
  font-family: inherit;
  font-size: var(--rl-text-base);
  padding: var(--rl-space-3) var(--rl-space-4);
  width: 100%;
}

.comment-form input:focus,
.comment-form textarea:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus {
  border-color: var(--rl-accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--rl-accent-soft);
}

/* --------------------------------------------------------------------------
   17b. FRONT PAGE
   -------------------------------------------------------------------------- */

/* The hero carries the page's H1, so the WordPress page title ("Home") would
   be both a duplicate heading and visually redundant. Remove it rather than
   hide it, so it is not announced to screen readers either. */
.home.page .entry-title {
  display: none;
}

/* Strip the article card chrome on the front page so the hero reads as a
   full-width band rather than a panel floating inside a box. */
.home.page .inside-article {
  background-color: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.home .site-content {
  padding-top: 0;
}

.home.page .renolyst-hero {
  border-radius: var(--rl-radius-lg);
}

.home .entry-content > h2 {
  margin-top: var(--rl-space-12);
}

/* --------------------------------------------------------------------------
   17c. LATEST POSTS GRID
   Styles core's Latest Posts block to match the archive cards, so the
   homepage listing and the category listings read as one system.
   -------------------------------------------------------------------------- */

.wp-block-latest-posts.is-grid {
  display: grid;
  gap: var(--rl-space-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.wp-block-latest-posts.is-grid li {
  background-color: var(--rl-bg-surface);
  border: 1px solid var(--rl-border-subtle);
  border-radius: var(--rl-radius-lg);
  box-shadow: var(--rl-shadow-sm);
  margin: 0;
  padding: var(--rl-space-6);
  transition: box-shadow var(--rl-duration-base) var(--rl-ease),
              transform var(--rl-duration-base) var(--rl-ease),
              border-color var(--rl-duration-base) var(--rl-ease);
}

.wp-block-latest-posts.is-grid li:hover {
  border-color: var(--rl-border-strong);
  box-shadow: var(--rl-shadow-md);
  transform: translateY(-2px);
}

.wp-block-latest-posts__post-title {
  color: var(--rl-text-primary);
  display: block;
  font-size: var(--rl-text-lg);
  font-weight: var(--rl-weight-bold);
  letter-spacing: var(--rl-tracking-tight);
  line-height: var(--rl-leading-snug);
  margin-bottom: var(--rl-space-2);
  text-decoration: none;
}

.wp-block-latest-posts__post-title:hover {
  color: var(--rl-accent);
}

.wp-block-latest-posts__post-date {
  color: var(--rl-text-muted);
  display: block;
  font-size: var(--rl-text-xs);
  letter-spacing: var(--rl-tracking-wide);
  margin-bottom: var(--rl-space-3);
}

.wp-block-latest-posts__post-excerpt {
  color: var(--rl-text-secondary);
  font-size: var(--rl-text-sm);
  line-height: var(--rl-leading-normal);
  margin: 0;
}

/* --------------------------------------------------------------------------
   17d. CONTACT FORM
   -------------------------------------------------------------------------- */

.wpcf7-form p {
  margin-bottom: var(--rl-space-5);
}

.wpcf7-form label {
  color: var(--rl-text-primary);
  display: block;
  font-size: var(--rl-text-sm);
  font-weight: var(--rl-weight-semibold);
}

.wpcf7-form label input,
.wpcf7-form label textarea {
  margin-top: var(--rl-space-2);
}

.wpcf7-form textarea {
  min-height: 10rem;
  resize: vertical;
}

.wpcf7-form input[type="submit"] {
  background-color: var(--rl-accent);
  border: 0;
  border-radius: var(--rl-radius-md);
  color: #ffffff;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--rl-text-sm);
  font-weight: var(--rl-weight-semibold);
  letter-spacing: var(--rl-tracking-wide);
  padding: var(--rl-space-4) var(--rl-space-8);
  transition: background-color var(--rl-duration-fast) var(--rl-ease);
}

.wpcf7-form input[type="submit"]:hover {
  background-color: var(--rl-accent-hover);
}

.wpcf7 form .wpcf7-response-output {
  border-radius: var(--rl-radius-md);
  border-width: 1px;
  font-size: var(--rl-text-sm);
  margin: var(--rl-space-5) 0 0;
  padding: var(--rl-space-4);
}

.wpcf7-not-valid-tip {
  color: var(--rl-rust-700);
  font-size: var(--rl-text-xs);
  font-weight: var(--rl-weight-medium);
  margin-top: var(--rl-space-1);
}

/* ==========================================================================
   20. RENOVATION SPEC LANGUAGE
   The domain-native layer. Everything here borrows from architectural
   drafting — plan grids, crop brackets, dimension rules, mono annotations,
   title blocks — because that is the actual visual vocabulary of building
   work. It reads as "home renovation" without a single decorative house
   icon, and without a byte of image payload.
   ========================================================================== */

:root {
  --rl-blueprint-line: rgba(107, 97, 82, 0.10);
  --rl-blueprint-line-strong: rgba(107, 97, 82, 0.18);
  --rl-blueprint-size: 22px;
}

/* --- 20a. Plan grid ------------------------------------------------------
   Graph-paper ruling for large paper regions. Two stacked gradients give a
   fine cell with a heavier major line every 5th cell, the way plan paper
   actually rules. Kept very low contrast so body text over it stays clean. */

.renolyst-plangrid {
  background-image:
    linear-gradient(var(--rl-blueprint-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--rl-blueprint-line) 1px, transparent 1px),
    linear-gradient(var(--rl-blueprint-line-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--rl-blueprint-line-strong) 1px, transparent 1px);
  background-size:
    var(--rl-blueprint-size) var(--rl-blueprint-size),
    var(--rl-blueprint-size) var(--rl-blueprint-size),
    calc(var(--rl-blueprint-size) * 5) calc(var(--rl-blueprint-size) * 5),
    calc(var(--rl-blueprint-size) * 5) calc(var(--rl-blueprint-size) * 5);
  background-position: center center;
}

/* Fade the grid out toward the edges so it reads as a drawing surface
   rather than a tiled wallpaper. */
.renolyst-plangrid--fade {
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 40%, transparent 100%);
}

/* --- 20b. Drafting brackets ---------------------------------------------
   Corner crop marks. Used to frame the hero and spec panels the way a
   drawing sheet frames its viewport. */

.renolyst-bracketed {
  position: relative;
}

.renolyst-bracketed::before,
.renolyst-bracketed::after {
  border-color: var(--rl-accent);
  border-style: solid;
  content: "";
  height: 14px;
  position: absolute;
  width: 14px;
}

.renolyst-bracketed::before {
  border-width: 1px 0 0 1px;
  left: 0;
  top: 0;
}

.renolyst-bracketed::after {
  border-width: 0 1px 1px 0;
  bottom: 0;
  right: 0;
}

/* Four-corner variant for panels that should feel fully "sheeted". */
.renolyst-sheet {
  position: relative;
}

.renolyst-sheet > .renolyst-sheet__mark {
  border-color: var(--rl-sand-400);
  border-style: solid;
  height: 10px;
  position: absolute;
  width: 10px;
}

.renolyst-sheet__mark--tl { border-width: 1px 0 0 1px; left: -1px;  top: -1px; }
.renolyst-sheet__mark--tr { border-width: 1px 1px 0 0; right: -1px; top: -1px; }
.renolyst-sheet__mark--bl { border-width: 0 0 1px 1px; bottom: -1px; left: -1px; }
.renolyst-sheet__mark--br { border-width: 0 1px 1px 0; bottom: -1px; right: -1px; }

/* --- 20c. Mono utility type ---------------------------------------------
   Drawings annotate in mono. Metadata, spec labels, scales and units all
   live in this voice, which separates "measured fact" from "prose". */

.renolyst-mono,
.renolyst-spec__label,
.renolyst-range__scale,
.renolyst-swatch__meta,
.renolyst-rule__tick-label {
  font-family: var(--rl-font-mono);
  font-size: var(--rl-text-xs);
  letter-spacing: var(--rl-tracking-caps);
  text-transform: uppercase;
}

/* --- 20d. Dimension rule ------------------------------------------------
   A measured divider: end serifs plus tick marks, like a dimension line on
   a plan. Replaces a plain <hr> between major article sections. */

.renolyst-rule {
  align-items: center;
  color: var(--rl-sand-500);
  display: flex;
  gap: var(--rl-space-3);
  margin-block: var(--rl-space-12);
}

.renolyst-rule::before,
.renolyst-rule::after {
  background-color: var(--rl-border-strong);
  content: "";
  flex: 1;
  height: 1px;
  /* End serifs: a taller cap at each extreme of the line. */
  position: relative;
}

.renolyst-rule__label {
  color: var(--rl-text-muted);
  flex: none;
  font-family: var(--rl-font-mono);
  font-size: var(--rl-text-xs);
  letter-spacing: var(--rl-tracking-caps);
  text-transform: uppercase;
}

/* Tick-marked variant used as a section band edge. */
.renolyst-ticks {
  background-image: repeating-linear-gradient(
    90deg,
    var(--rl-border-strong) 0 1px,
    transparent 1px 12px
  );
  height: 6px;
  width: 100%;
}

/* --- 20e. Title block ----------------------------------------------------
   Every architectural drawing carries a title block: project, scale, date,
   revision. For an article the equivalent facts are project type, typical
   cost, timeline, and when the figures were last checked. Domain-native and
   genuinely useful — it is the "answer box" a cost reader wants up front. */

.renolyst-spec {
  background-color: var(--rl-bg-surface);
  border: 1px solid var(--rl-border-strong);
  border-radius: var(--rl-radius-md);
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin-block: var(--rl-space-8);
  overflow: hidden;
  position: relative;
}

/* Hairline cell dividers, drawn with the container background showing
   through the grid gap — no per-cell borders to misalign. */
.renolyst-spec::before {
  background-color: var(--rl-border-subtle);
  content: "";
  inset: 0;
  position: absolute;
  z-index: 0;
}

.renolyst-spec__cell {
  background-color: var(--rl-bg-surface);
  padding: var(--rl-space-5);
  position: relative;
  z-index: 1;
}

.renolyst-spec__label {
  color: var(--rl-text-muted);
  display: block;
  margin-bottom: var(--rl-space-2);
}

.renolyst-spec__value {
  color: var(--rl-text-primary);
  display: block;
  font-size: var(--rl-text-xl);
  font-weight: var(--rl-weight-bold);
  letter-spacing: var(--rl-tracking-tight);
  line-height: var(--rl-leading-tight);
}

.renolyst-spec__value--accent {
  color: var(--rl-accent);
}

.renolyst-spec__note {
  color: var(--rl-text-muted);
  display: block;
  font-size: var(--rl-text-xs);
  margin-top: var(--rl-space-1);
}

/* --- 20f. Cost range bar -------------------------------------------------
   The core data component for a cost site: where a project's typical spend
   sits inside the full plausible span. A number in prose is forgettable; a
   position on a scale is not. */

.renolyst-range {
  background-color: var(--rl-bg-surface);
  border: 1px solid var(--rl-border-subtle);
  border-radius: var(--rl-radius-md);
  margin-block: var(--rl-space-8);
  padding: var(--rl-space-6);
}

.renolyst-range__head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--rl-space-3);
  justify-content: space-between;
  margin-bottom: var(--rl-space-5);
}

.renolyst-range__title {
  color: var(--rl-text-primary);
  font-size: var(--rl-text-sm);
  font-weight: var(--rl-weight-semibold);
}

.renolyst-range__value {
  color: var(--rl-accent);
  font-size: var(--rl-text-lg);
  font-weight: var(--rl-weight-bold);
  letter-spacing: var(--rl-tracking-tight);
  white-space: nowrap;
}

.renolyst-range__track {
  background-color: var(--rl-bg-sunken);
  border-radius: var(--rl-radius-sm);
  height: 10px;
  position: relative;
}

/* --from / --to / --at are supplied per instance as custom properties by the
   shortcode. They carry data, not styling — all appearance stays here. */
.renolyst-range__fill {
  background-color: var(--rl-accent-line);
  border-radius: var(--rl-radius-sm);
  bottom: 0;
  left: var(--from, 0%);
  position: absolute;
  right: calc(100% - var(--to, 100%));
  top: 0;
}

.renolyst-range__marker {
  background-color: var(--rl-accent);
  border-radius: 1px;
  bottom: -4px;
  left: var(--at, 50%);
  position: absolute;
  top: -4px;
  width: 3px;
}

.renolyst-range__scale {
  color: var(--rl-text-muted);
  display: flex;
  justify-content: space-between;
  margin-top: var(--rl-space-3);
}

.renolyst-range__legend {
  color: var(--rl-text-secondary);
  font-size: var(--rl-text-xs);
  margin-top: var(--rl-space-4);
}

.renolyst-range__key {
  background-color: var(--rl-accent);
  border-radius: 1px;
  display: inline-block;
  height: 10px;
  margin-right: var(--rl-space-2);
  vertical-align: -1px;
  width: 3px;
}

/* --- 20g. Material swatches ---------------------------------------------
   Renovation decisions are material decisions. A named swatch row makes a
   finish comparison concrete in a way a bulleted list cannot. */

.renolyst-swatches {
  display: grid;
  gap: var(--rl-space-4);
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  list-style: none;
  margin-block: var(--rl-space-8);
  padding: 0;
}

.renolyst-swatch {
  margin: 0;
}

.renolyst-swatch__chip {
  border: 1px solid var(--rl-border-strong);
  border-radius: var(--rl-radius-sm);
  display: block;
  height: 3.5rem;
  margin-bottom: var(--rl-space-2);
  width: 100%;
}

.renolyst-swatch__name {
  color: var(--rl-text-primary);
  display: block;
  font-size: var(--rl-text-sm);
  font-weight: var(--rl-weight-semibold);
}

.renolyst-swatch__meta {
  color: var(--rl-text-muted);
  display: block;
}

/* --- 20h. Category cards -------------------------------------------------
   Room / project entry points, each with a line-drawn SVG mark. Stroke
   icons, not filled glyphs, so they sit in the same drafting voice as the
   grid and brackets. */

.renolyst-cats {
  display: grid;
  gap: var(--rl-space-4);
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  list-style: none;
  margin-block: var(--rl-space-8);
  padding: 0;
}

.renolyst-cat {
  margin: 0;
}

.renolyst-cat__link {
  background-color: var(--rl-bg-surface);
  border: 1px solid var(--rl-border-subtle);
  border-radius: var(--rl-radius-md);
  display: block;
  padding: var(--rl-space-5);
  text-decoration: none;
  transition: border-color var(--rl-duration-base) var(--rl-ease),
              box-shadow var(--rl-duration-base) var(--rl-ease),
              transform var(--rl-duration-base) var(--rl-ease);
}

.renolyst-cat__link:hover,
.renolyst-cat__link:focus {
  border-color: var(--rl-accent-line);
  box-shadow: var(--rl-shadow-md);
  transform: translateY(-2px);
}

.renolyst-cat__icon {
  color: var(--rl-accent);
  display: block;
  height: 28px;
  margin-bottom: var(--rl-space-4);
  width: 28px;
}

.renolyst-cat__icon svg {
  height: 100%;
  width: 100%;
}

.renolyst-cat__name {
  color: var(--rl-text-primary);
  display: block;
  font-size: var(--rl-text-base);
  font-weight: var(--rl-weight-semibold);
  margin-bottom: var(--rl-space-1);
}

.renolyst-cat__meta {
  color: var(--rl-text-muted);
  display: block;
  font-family: var(--rl-font-mono);
  font-size: var(--rl-text-xs);
  letter-spacing: var(--rl-tracking-wide);
}

/* --- 20i. Hero, re-cut as a drawing sheet -------------------------------- */

.renolyst-hero {
  overflow: hidden;
  position: relative;
}

/* Plan grid sits behind hero content. */
.renolyst-hero::before {
  background-image:
    linear-gradient(var(--rl-blueprint-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--rl-blueprint-line) 1px, transparent 1px),
    linear-gradient(var(--rl-blueprint-line-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--rl-blueprint-line-strong) 1px, transparent 1px);
  background-position: center center;
  background-size:
    var(--rl-blueprint-size) var(--rl-blueprint-size),
    var(--rl-blueprint-size) var(--rl-blueprint-size),
    calc(var(--rl-blueprint-size) * 5) calc(var(--rl-blueprint-size) * 5),
    calc(var(--rl-blueprint-size) * 5) calc(var(--rl-blueprint-size) * 5);
  content: "";
  inset: 0;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, #000 35%, transparent 100%);
          mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, #000 35%, transparent 100%);
  pointer-events: none;
  position: absolute;
}

.renolyst-hero__inner {
  position: relative;
  z-index: 1;
}

/* The eyebrow becomes a drawing-sheet reference, in mono. */
.renolyst-hero__eyebrow {
  align-items: center;
  display: inline-flex;
  font-family: var(--rl-font-mono);
  gap: var(--rl-space-2);
}

.renolyst-hero__eyebrow::before,
.renolyst-hero__eyebrow::after {
  background-color: var(--rl-accent-line);
  content: "";
  height: 1px;
  width: 18px;
}

/* Spec strip under the hero headline: the drawing's title block. */
.renolyst-hero__specs {
  border-top: 1px solid var(--rl-border-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: var(--rl-space-8);
  justify-content: center;
  margin-top: var(--rl-space-10);
  padding-top: var(--rl-space-6);
}

.renolyst-hero__spec {
  text-align: center;
}

.renolyst-hero__spec-value {
  color: var(--rl-text-primary);
  display: block;
  font-size: var(--rl-text-2xl);
  font-weight: var(--rl-weight-bold);
  letter-spacing: var(--rl-tracking-tight);
  line-height: 1.1;
}

.renolyst-hero__spec-label {
  color: var(--rl-text-muted);
  display: block;
  font-family: var(--rl-font-mono);
  font-size: var(--rl-text-xs);
  letter-spacing: var(--rl-tracking-caps);
  margin-top: var(--rl-space-2);
  text-transform: uppercase;
}

/* --- 20j. Quick answer, re-cut as a spec callout ------------------------- */

.renolyst-quick-answer,
.is-style-quick-answer {
  position: relative;
}

/* Corner brackets on the quick-answer box tie it to the drafting language. */
.renolyst-quick-answer::after,
.is-style-quick-answer::after {
  border-color: var(--rl-accent-line);
  border-style: solid;
  border-width: 0 1px 1px 0;
  bottom: 6px;
  content: "";
  height: 12px;
  position: absolute;
  right: 6px;
  width: 12px;
}

/* --- 20k. Article cards get a plan-grid header zone --------------------- */

.wp-block-latest-posts.is-grid li {
  position: relative;
}

.wp-block-latest-posts.is-grid li::before {
  background-color: var(--rl-accent);
  content: "";
  height: 2px;
  left: var(--rl-space-6);
  position: absolute;
  top: 0;
  transition: width var(--rl-duration-base) var(--rl-ease);
  width: 1.75rem;
}

.wp-block-latest-posts.is-grid li:hover::before {
  width: 3.5rem;
}

/* ==========================================================================
   21. EDITORIAL LUXURY LAYER
   Applies the high-end-visual-design skill's "Editorial Luxury" archetype —
   the one it names for real-estate and lifestyle work. Warm creams, a
   high-contrast variable serif for display type, physical paper grain, and
   nested "double-bezel" enclosures instead of flat hairline boxes.
   ========================================================================== */

/* --- 21a. Display face ---------------------------------------------------
   Self-hosted variable Playfair Display, latin subset, 37KB. Same-origin,
   preloaded, swap — no Google Fonts request and no visitor IPs sent to a
   third party. Display type only; body stays on the fast system stack. */

@font-face {
  font-family: 'Playfair Display Var';
  src: url('assets/fonts/playfair-display-var.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --rl-font-display: 'Playfair Display Var', 'Playfair Display', Georgia,
                     'Times New Roman', serif;

  /* Banned by the skill and removed from the stack: Inter, Roboto, Arial,
     Open Sans, Helvetica. What remains is genuine system UI type. */
  --rl-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans',
                  system-ui, sans-serif;

  /* Spring-weighted easing. The skill bans linear and ease-in-out outright. */
  --rl-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --rl-duration-slow: 700ms;

  /* Double-bezel tokens. */
  --rl-bezel-gap: 6px;
  --rl-bezel-shell: rgba(31, 27, 23, 0.035);
  --rl-bezel-hairline: rgba(31, 27, 23, 0.07);
  --rl-radius-xl: 1.5rem;
}

h1, h2,
.renolyst-hero__title,
.entry-title,
.renolyst-spec__value,
.renolyst-hero__spec-value,
.renolyst-range__value {
  font-family: var(--rl-font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* Serif at display sizes wants a slightly tighter line than the sans did. */
.renolyst-hero__title,
.single .entry-title,
.page .entry-title {
  line-height: 1.08;
}

.entry-content h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.15rem);
  font-weight: 600;
}

/* --- 21b. Paper grain ----------------------------------------------------
   Fixed, pointer-events-none, so it never repaints with scrolling content
   (the skill is explicit about this). Inline SVG turbulence — no request. */

body::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  content: "";
  inset: 0;
  mix-blend-mode: multiply;
  opacity: 0.032;
  pointer-events: none;
  position: fixed;
  z-index: 60;
}

/* --- 21c. Double-bezel enclosures ---------------------------------------
   The skill bans flat 1px grey borders. Rather than add wrapper markup to
   every core block, the nested shell is drawn with layered ring shadows:
   a soft inset tray, a hairline, then a diffused ambient shadow. Same
   machined-hardware read, zero extra DOM. */

.renolyst-cat__link,
.renolyst-spec,
.renolyst-range,
.wp-block-latest-posts.is-grid li,
.sidebar .widget,
.archive .site-main > article,
.blog .site-main > article {
  border: 0;
  border-radius: var(--rl-radius-xl);
  box-shadow:
    0 0 0 var(--rl-bezel-gap) var(--rl-bezel-shell),
    0 0 0 calc(var(--rl-bezel-gap) + 1px) var(--rl-bezel-hairline),
    0 18px 40px -24px rgba(51, 46, 39, 0.28),
    0 2px 8px -4px rgba(51, 46, 39, 0.10);
  transition: box-shadow var(--rl-duration-slow) var(--rl-ease),
              transform var(--rl-duration-slow) var(--rl-ease);
}

.renolyst-cat__link:hover,
.renolyst-cat__link:focus-visible,
.wp-block-latest-posts.is-grid li:hover,
.archive .site-main > article:hover,
.blog .site-main > article:hover {
  box-shadow:
    0 0 0 var(--rl-bezel-gap) var(--rl-accent-soft),
    0 0 0 calc(var(--rl-bezel-gap) + 1px) var(--rl-accent-line),
    0 28px 60px -28px rgba(51, 46, 39, 0.34),
    0 4px 12px -6px rgba(51, 46, 39, 0.12);
  transform: translateY(-3px);
}

.separate-containers .inside-article {
  border: 0;
  border-radius: var(--rl-radius-xl);
  box-shadow:
    0 0 0 var(--rl-bezel-gap) var(--rl-bezel-shell),
    0 0 0 calc(var(--rl-bezel-gap) + 1px) var(--rl-bezel-hairline),
    0 24px 60px -32px rgba(51, 46, 39, 0.26);
}

/* --- 21d. Eyebrow pill --------------------------------------------------- */

.renolyst-hero__eyebrow {
  background-color: var(--rl-accent-soft);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--rl-accent-line);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  padding: 0.4rem 0.9rem;
}

/* The flanking rules belonged to the flat version; the pill replaces them. */
.renolyst-hero__eyebrow::before,
.renolyst-hero__eyebrow::after {
  display: none;
}

/* --- 21e. Island buttons ------------------------------------------------- */

.renolyst-btn,
.wp-block-button__link,
.wpcf7-form input[type="submit"] {
  border-radius: 999px;
  padding: 0.9rem 1.6rem;
  transition: background-color var(--rl-duration-fast) var(--rl-ease),
              transform var(--rl-duration-fast) var(--rl-ease),
              box-shadow var(--rl-duration-fast) var(--rl-ease);
}

.renolyst-btn:active,
.wp-block-button__link:active,
.wpcf7-form input[type="submit"]:active {
  transform: scale(0.98);
}

/* Button-in-button: the trailing mark sits in its own circular well. */
.renolyst-btn--primary {
  align-items: center;
  display: inline-flex;
  gap: 0.75rem;
  padding-right: 0.4rem;
}

.renolyst-btn--primary::after {
  align-items: center;
  background-color: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  content: "\2197";
  display: inline-flex;
  height: 2rem;
  justify-content: center;
  transition: transform var(--rl-duration-base) var(--rl-ease),
              background-color var(--rl-duration-base) var(--rl-ease);
  width: 2rem;
}

.renolyst-btn--primary:hover::after {
  background-color: rgba(255, 255, 255, 0.26);
  transform: translate(2px, -2px) scale(1.06);
}

/* --- 21f. Icon weight ----------------------------------------------------
   The skill bans thick strokes; drop the category marks to a hairline. */

.renolyst-cat__icon svg {
  stroke-width: 1.1;
}

/* --- 21g. Scroll reveals -------------------------------------------------
   Driven by IntersectionObserver in the JS module. Elements start displaced
   and blurred, then settle. transform/opacity/filter only — no layout. */

[data-rl-reveal] {
  opacity: 0;
  transform: translateY(2.5rem);
  transition: opacity 800ms var(--rl-ease),
              transform 800ms var(--rl-ease),
              filter 800ms var(--rl-ease);
  will-change: transform, opacity;
}

[data-rl-reveal].is-revealed {
  filter: none;
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* If the module never runs, nothing may stay invisible. */
.no-js [data-rl-reveal],
[data-rl-reveal].is-forced {
  opacity: 1;
  transform: none;
}

/* --- 21h. Macro whitespace ----------------------------------------------- */

.home .entry-content > .renolyst-rule {
  margin-block: clamp(var(--rl-space-16), 9vw, var(--rl-space-24));
}

.renolyst-hero {
  padding-block: clamp(var(--rl-space-16), 11vw, var(--rl-space-24));
}

/* ==========================================================================
   22. LOADER
   ========================================================================== */

.renolyst-loader {
  align-items: center;
  background: radial-gradient(ellipse at 50% 40%, var(--rl-sand-50) 0%, var(--rl-sand-100) 70%, var(--rl-sand-200) 100%);
  display: flex;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 9000;

  /* Failsafe. If the module never boots — blocked, errored, JS off — this
     still clears the overlay and hands the page back to the reader. */
  animation: rl-loader-failsafe 200ms var(--rl-ease) 5s forwards;
}

@keyframes rl-loader-failsafe {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.renolyst-loader.is-complete {
  animation: none;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 700ms var(--rl-ease), transform 700ms var(--rl-ease);
  visibility: hidden;
}

.renolyst-loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--rl-space-6);
  width: min(90vw, 520px);
}

.renolyst-loader__canvas {
  aspect-ratio: 1;
  display: block;
  height: auto;
  width: min(62vw, 340px);
}

.renolyst-loader__word {
  color: var(--rl-text-primary);
  font-family: var(--rl-font-display);
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: var(--rl-space-4) 0 var(--rl-space-5);
}

.renolyst-loader__track {
  background-color: var(--rl-sand-300);
  border-radius: 999px;
  display: block;
  height: 2px;
  overflow: hidden;
  width: min(60vw, 220px);
}

.renolyst-loader__bar {
  background-color: var(--rl-accent);
  display: block;
  height: 100%;
  transform: scaleX(0.08);
  transform-origin: left center;
  transition: transform 180ms linear;
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .renolyst-loader {
    animation: none;
    display: none;
  }
}

/* ==========================================================================
   23. HERO 3D
   ========================================================================== */

.renolyst-hero3d {
  aspect-ratio: 4 / 3;
  margin-inline: auto;
  max-width: 420px;
  position: relative;
  width: 100%;
}

.renolyst-hero3d canvas {
  display: block;
  height: 100%;
  width: 100%;
}

/* Compact variant sits beside the article title. */
.renolyst-hero3d--compact {
  aspect-ratio: 3 / 2;
  margin: var(--rl-space-6) 0 var(--rl-space-8);
  max-width: 260px;
}

/* No WebGL: collapse rather than leave a dead rectangle. */
.renolyst-hero3d.is-unavailable {
  display: none;
}

@media (max-width: 768px) {
  .renolyst-hero3d {
    max-width: 300px;
  }

  .renolyst-hero3d--compact {
    max-width: 190px;
  }
}

/* --------------------------------------------------------------------------
   18. RESPONSIVE
   Mobile-first site: most traffic arrives from mobile search, so the small
   viewport is the primary target, not an afterthought.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  :root {
    --rl-text-base: 1.0625rem; /* 17px — slightly tighter on small screens */
  }

  .site-content {
    padding-block: var(--rl-space-6);
  }

  .separate-containers .inside-article {
    border-radius: var(--rl-radius-md);
    padding: var(--rl-space-5);
  }

  .entry-content h2 {
    margin-top: var(--rl-space-10);
  }

  .renolyst-ad {
    margin-block: var(--rl-space-10);
  }

  /* Never let a sticky ad eat a mobile viewport. */
  .renolyst-ad--sidebar {
    position: static;
  }

  .renolyst-quick-answer,
  .is-style-quick-answer {
    padding: var(--rl-space-5);
  }

  .renolyst-trust {
    padding: var(--rl-space-5);
  }
}

@media (max-width: 480px) {
  .entry-content ul,
  .entry-content ol {
    padding-left: var(--rl-space-5);
  }

  .renolyst-hero__actions .renolyst-btn {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   19. ACCESSIBILITY + PRINT
   -------------------------------------------------------------------------- */

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

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: var(--rl-bg-surface);
  border-radius: var(--rl-radius-md);
  box-shadow: var(--rl-shadow-md);
  clip: auto !important;
  color: var(--rl-accent);
  display: block;
  font-size: var(--rl-text-sm);
  font-weight: var(--rl-weight-semibold);
  height: auto;
  left: var(--rl-space-2);
  padding: var(--rl-space-3) var(--rl-space-5);
  top: var(--rl-space-2);
  width: auto;
  z-index: 100000;
}

@media print {
  .renolyst-ad,
  .sidebar,
  .main-navigation,
  .site-footer {
    display: none !important;
  }

  body {
    background: #ffffff;
    color: #000000;
    font-size: 12pt;
  }

  .entry-content a::after {
    content: " (" attr(href) ")";
    font-size: 10pt;
  }
}