/* Renéra · Post Detail — long-form single-post article page (desktop).
   Recreates the Claude Design "Post Detail (Desktop)" mockup inside the live
   theme. Loaded after chrome.css (shared chrome + design tokens) and posts.css
   (the .rn-post-card chrome reused by the Related grid). Mobile devices layer
   post-detail-mobile.css on top via the .rn-m body class.

   Key adaptation vs the prototype: the prototype hand-tagged each <h2> with a
   data-num attribute and wrapped its text in a <span>. Real the_content() markup
   has neither, so headings here auto-number with a CSS counter and the numeral is
   absolutely positioned to the left — no grid-splitting of the heading text.
   All colours come from var(--renera-*) tokens; never hard-code hex. */

/* =========================================
   BREADCRUMB
   ========================================= */
.rn-crumbs {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--renera-font-mono);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--renera-mute);
}
.rn-crumbs a {
  color: var(--renera-mute);
  text-decoration: none;
  transition: color var(--renera-dur-fast) var(--renera-ease);
}
.rn-crumbs a:hover { color: var(--renera-olive-700); }
.rn-crumbs__sep { opacity: 0.45; }
.rn-crumbs__here { color: var(--renera-olive-700); }

/* =========================================
   ARTICLE HERO — three layouts
   ========================================= */
.rn-article-hero {
  position: relative;
  background: var(--renera-sand-300);
  padding: 36px 0 0;
}

/* shared: meta row */
.rn-meta-row {
  display: inline-flex; flex-wrap: wrap; align-items: center;
  gap: 14px 18px;
  font-family: var(--renera-font-mono);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--renera-mute);
}
.rn-meta-row .dot { opacity: 0.45; }
.rn-meta-row__cat { color: var(--renera-olive-700); }
.rn-meta-row__author {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--renera-ink-soft, var(--renera-ink));
}
.rn-meta-row__avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--renera-olive-300);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--renera-olive-900);
}

/* ── Editorial: centered masthead (default for the live template) ── */
.rn-article-hero--editorial {
  padding: 40px 0 18px;
}
.rn-article-hero--editorial .rn-article-hero__inner {
  max-width: 940px; margin: 0 auto;
  padding: 0 40px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: 36px;
}
.rn-article-hero--editorial .rn-article-title {
  font-family: var(--renera-font-serif);
  font-size: clamp(44px, 5.6vw, 76px); line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--renera-ink);
  margin: 0;
  text-wrap: balance;
}
.rn-article-hero--editorial .rn-article-deck {
  font-family: var(--renera-font-serif);
  font-style: italic;
  font-size: 22px; line-height: 1.45;
  color: var(--renera-mute);
  margin: 0; max-width: 720px;
  text-wrap: pretty;
}
.rn-article-hero--editorial .rn-article-meta {
  padding: 18px 0;
  border-top: 1px solid var(--renera-clay-300);
  border-bottom: 1px solid var(--renera-clay-300);
  width: 100%; max-width: 720px;
  display: flex; align-items: center; justify-content: center;
}

/* ── Magazine: 2-col asymmetric with index numerals ── */
.rn-article-hero--magazine {
  padding: 24px 0 0;
}
.rn-article-hero--magazine .rn-article-hero__inner {
  max-width: 1280px; margin: 0 auto; padding: 0 40px;
  display: grid; grid-template-columns: minmax(140px, 200px) 1fr minmax(140px, 220px);
  gap: 48px;
  align-items: end;
}
.rn-article-hero--magazine .rn-article-hero__index {
  font-family: var(--renera-font-serif); font-style: italic;
  font-size: 64px; line-height: 1; color: var(--renera-clay-500);
  letter-spacing: -0.02em;
  padding-bottom: 8px;
}
.rn-article-hero--magazine .rn-article-hero__index small {
  display: block;
  font-family: var(--renera-font-mono); font-style: normal;
  font-size: 10px; letter-spacing: 0.22em;
  color: var(--renera-mute);
  text-transform: uppercase;
  margin-top: 14px;
}
.rn-article-hero--magazine .rn-article-title {
  font-family: var(--renera-font-serif);
  font-size: clamp(44px, 5vw, 68px);
  line-height: 1.08; letter-spacing: -0.016em;
  color: var(--renera-ink); margin: 0;
  text-wrap: pretty;
}
.rn-article-hero--magazine .rn-article-deck {
  font-family: var(--renera-font-serif);
  font-style: italic;
  font-size: 18px; line-height: 1.5;
  color: var(--renera-mute);
  margin: 18px 0 0; max-width: 640px;
}
.rn-article-hero--magazine .rn-article-hero__side {
  display: flex; flex-direction: column; gap: 14px;
  padding-bottom: 8px;
  text-align: right;
}
.rn-article-hero--magazine .rn-article-hero__side span {
  font-family: var(--renera-font-mono);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--renera-mute);
}
.rn-article-hero--magazine .rn-article-hero__side strong {
  font-family: var(--renera-font-serif);
  font-style: italic; font-weight: 400;
  font-size: 28px; color: var(--renera-olive-700);
  letter-spacing: -0.01em;
}
.rn-article-hero--magazine .rn-article-meta {
  padding: 22px 0 24px;
  margin-top: 36px;
  border-top: 1px solid var(--renera-clay-300);
  border-bottom: 1px solid var(--renera-clay-300);
  grid-column: 1 / -1;
}

/* ── Cover: full-bleed olive panel ── */
.rn-article-hero--cover {
  background: var(--renera-olive-700);
  color: var(--renera-sand-200);
  padding: 60px 0 68px;
  margin-top: -1px;
  position: relative; overflow: hidden;
}
.rn-article-hero--cover::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 100% 0%, rgba(174,220,145,0.08), transparent 70%),
    radial-gradient(ellipse 60% 60% at 0% 100%, rgba(232,187,168,0.06), transparent 70%);
  pointer-events: none;
}
.rn-article-hero--cover .rn-article-hero__inner {
  max-width: 1080px; margin: 0 auto; padding: 0 40px;
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 36px;
}
.rn-article-hero--cover .rn-eyebrow,
.rn-article-hero--cover .rn-crumbs,
.rn-article-hero--cover .rn-crumbs a,
.rn-article-hero--cover .rn-meta-row {
  color: rgba(246,238,232,0.7);
}
.rn-article-hero--cover .rn-crumbs__here {
  color: var(--renera-olive-300);
}
.rn-article-hero--cover .rn-meta-row__cat { color: var(--renera-olive-300); }
.rn-article-hero--cover .rn-article-title {
  font-family: var(--renera-font-serif);
  font-size: clamp(48px, 6vw, 84px); line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--renera-sand-200);
  margin: 0;
  max-width: 920px;
  text-wrap: pretty;
}
.rn-article-hero--cover .rn-article-deck {
  font-family: var(--renera-font-serif);
  font-style: italic;
  font-size: 21px; line-height: 1.5;
  color: rgba(246,238,232,0.82);
  margin: 0; max-width: 680px;
}
.rn-article-hero--cover .rn-meta-row__avatar {
  background: var(--renera-olive-300);
  color: var(--renera-olive-900);
}
.rn-article-hero--cover .rn-meta-row .dot {
  color: rgba(246,238,232,0.5);
}
.rn-article-hero--cover .rn-baroque {
  position: absolute; top: 32px; right: -40px;
  width: 220px; height: 220px;
  opacity: 0.35;
  filter: brightness(2.5) saturate(0.3);
  pointer-events: none;
}

/* =========================================
   FEATURED IMAGE — full-bleed and contained variants
   ========================================= */
/* The figure mirrors .rn-article__inner's grid and drops the image into the same
   centre column, so it frames to exactly the body-copy width at every viewport
   instead of running the full 1200px out under the TOC. Matching the grid rather
   than hard-coding a width matters because the centre track is minmax(0,720px)
   and shrinks between 1181-1280px. */
.rn-feature-img {
  margin: 48px auto 0;
  position: relative;
  max-width: 1280px; padding: 0 40px;
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 720px) minmax(140px, 220px);
  gap: 0 56px;
}
.rn-feature-img__frame {
  grid-column: 2;
  max-width: none; margin: 0; padding: 0;
}
.rn-feature-img__media {
  width: 100%; aspect-ratio: 1985 / 1100;
  background: center/cover no-repeat var(--renera-clay-200);
  border-radius: var(--renera-r-lg);
  border: 1px solid var(--renera-clay-300);
  overflow: hidden;
}
/* Bleed opts out of the grid entirely and spans the viewport. */
.rn-feature-img--bleed {
  display: block; max-width: none; padding: 0;
}
.rn-feature-img--bleed .rn-feature-img__frame { max-width: none; padding: 0; }
.rn-feature-img--bleed .rn-feature-img__media {
  border-radius: 0; border-left: 0; border-right: 0;
}
.rn-feature-img__cap {
  grid-column: 2;
  margin: 16px 0 0;
  max-width: none; padding: 0;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--renera-font-mono);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--renera-mute);
}
.rn-feature-img__cap::before {
  content: ""; display: block;
  width: 28px; height: 1px; background: var(--renera-clay-300); flex: none;
}

/* =========================================
   ARTICLE LAYOUT — main + sticky rails
   ========================================= */
.rn-article {
  background: var(--renera-sand-300);
  padding: 60px 0 68px;
  position: relative;
}
.rn-article__inner {
  max-width: 1280px; margin: 0 auto; padding: 0 40px;
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 720px) minmax(140px, 220px);
  gap: 56px;
  align-items: start;
}
.rn-article--no-toc .rn-article__inner {
  grid-template-columns: minmax(140px, 220px) minmax(0, 720px) minmax(140px, 220px);
}
.rn-article--no-toc .rn-toc { visibility: hidden; }

/* Sticky rails */
.rn-rail {
  position: sticky; top: 32px;
  display: flex; flex-direction: column; gap: 24px;
}
.rn-rail--left { padding-top: 12px; }
.rn-rail--right { padding-top: 12px; }

/* Share buttons (left rail) */
.rn-share {
  display: flex; flex-direction: column; gap: 10px;
}
.rn-share__label {
  font-family: var(--renera-font-mono);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--renera-mute);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin-bottom: 8px;
  align-self: flex-start;
  padding-left: 6px;
  position: relative;
}
.rn-share__label::before {
  content: ""; position: absolute;
  left: 0; top: -18px;
  width: 1px; height: 12px;
  background: var(--renera-clay-300);
}
.rn-share__btn {
  width: 46px; height: 46px;
  border: 1px solid var(--renera-clay-300);
  border-radius: 50%;
  background: var(--renera-sand-300);
  color: var(--renera-olive-700);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--renera-dur-fast) var(--renera-ease),
              color var(--renera-dur-fast) var(--renera-ease),
              border-color var(--renera-dur-fast) var(--renera-ease);
}
.rn-share__btn:hover {
  background: var(--renera-olive-700);
  color: var(--renera-sand-200);
  border-color: var(--renera-olive-700);
}
/* Larger, slightly bolder glyphs so the share icons read clearly in the circle.
   CSS width/height/stroke-width override the inline 16px / 1.5 SVG attributes. */
.rn-share__btn svg { width: 24px; height: 24px; stroke-width: 1.7; }

/* Table of contents (right rail) */
.rn-toc {
  border-top: 1px solid var(--renera-clay-300);
  padding-top: 20px;
}
.rn-toc__label {
  font-family: var(--renera-font-mono);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--renera-mute);
  margin-bottom: 22px;
  display: block;
}
.rn-toc__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0;
}
.rn-toc__item {
  display: block;
}
.rn-toc__link {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--renera-clay-200);
  text-decoration: none;
  color: var(--renera-mute);
  transition: color var(--renera-dur-fast) var(--renera-ease);
  font-family: var(--renera-font-sans);
  font-size: 13px; line-height: 1.4;
}
.rn-toc__item:first-child .rn-toc__link { border-top: 0; }
.rn-toc__link:hover { color: var(--renera-olive-700); }
.rn-toc__link.is-on { color: var(--renera-ink); }
.rn-toc__link.is-on .rn-toc__num { color: var(--renera-olive-700); }
.rn-toc__num {
  font-family: var(--renera-font-mono);
  font-size: 10px; letter-spacing: 0.18em;
  color: var(--renera-clay-500);
  padding-top: 2px;
}
.rn-toc__item--active .rn-toc__link {
  color: var(--renera-ink);
}

/* Progress bar (top of article) */
.rn-read-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 80;
  background: transparent;
  pointer-events: none;
}
.rn-read-progress__fill {
  height: 100%; width: 0%;
  background: var(--renera-olive-700);
  transition: width 120ms linear;
}

/* =========================================
   ARTICLE BODY — rich typography (applied to the_content output)
   ========================================= */
.rn-prose {
  font-family: var(--renera-font-sans);
  color: var(--renera-ink);
  font-size: 17px; line-height: 1.78;
  letter-spacing: 0.005em;
  counter-reset: rn-h2;
}
.rn-prose > * + * { margin-top: 1.45em; }
.rn-prose p { margin: 0; text-wrap: pretty; }

/* Justified body copy — flush on BOTH margins, the way Word's justify reads.
   Direct children only, so pull quotes and the CTA panel keep their ragged
   right. Hyphenation is what keeps justification from opening rivers of white
   space between words, and matters most in the narrow mobile column. */
.rn-prose > p,
.rn-prose > ul li,
.rn-prose > ol li {
  text-align: justify;
  text-wrap: auto;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.rn-prose strong, .rn-prose b { font-weight: 600; color: var(--renera-ink); }
.rn-prose em, .rn-prose i { font-style: italic; }
.rn-prose a {
  color: var(--renera-olive-700);
  text-decoration: underline;
  text-decoration-color: var(--renera-clay-300);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color var(--renera-dur-fast) var(--renera-ease),
              text-decoration-color var(--renera-dur-fast) var(--renera-ease);
}
.rn-prose a:hover {
  color: var(--renera-olive-500);
  text-decoration-color: var(--renera-olive-500);
}

/* Headings — H2 auto-numbered via counter; numeral sits left of the title,
   so any heading content (incl. <em>) wraps as one block. */
.rn-prose h2 {
  font-family: var(--renera-font-serif);
  font-weight: 400; font-size: 34px; line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--renera-ink);
  margin: 2em 0 0;
  scroll-margin-top: 100px;
  position: relative;
  padding-left: 58px;
  counter-increment: rn-h2;
  text-wrap: balance;
}
.rn-prose h2::before {
  content: counter(rn-h2, decimal-leading-zero);
  position: absolute; left: 0; top: 0.5em;
  font-family: var(--renera-font-mono);
  font-style: normal; font-weight: 400;
  font-size: 11px; letter-spacing: 0.22em;
  color: var(--renera-olive-500);
  padding-top: 10px;
  border-top: 2px solid var(--renera-olive-500);
  width: 36px;
}
.rn-prose h2 em { color: var(--renera-olive-700); }
.rn-prose h3 {
  font-family: var(--renera-font-serif);
  font-weight: 400; font-size: 26px; line-height: 1.25;
  color: var(--renera-ink);
  margin: 1.6em 0 0;
}

/* Lead paragraph (rendered for the opening graph when present) */
.rn-prose .rn-lead-graph {
  font-family: var(--renera-font-serif);
  font-style: italic;
  font-size: 24px; line-height: 1.5;
  color: var(--renera-ink);
  margin: 0;
  letter-spacing: -0.005em;
  padding-bottom: 8px;
}

/* Drop cap — first letter of the opening paragraph */
.rn-prose--drop > p:first-of-type::first-letter {
  font-family: var(--renera-font-serif);
  float: left;
  font-size: 92px;
  line-height: 0.85;
  padding: 8px 14px 0 0;
  color: var(--renera-olive-700);
  font-weight: 400;
}

/* Lists */
.rn-prose ul, .rn-prose ol {
  margin: 1.2em 0;
  padding-left: 0;
  list-style: none;
}
.rn-prose ul li, .rn-prose ol li {
  position: relative;
  padding-left: 36px;
  margin-top: 0.6em;
}
.rn-prose ul li::before {
  content: ""; position: absolute;
  left: 0; top: 0.7em;
  width: 18px; height: 1px;
  background: var(--renera-olive-500);
}
.rn-prose ol { counter-reset: rn-ol; }
.rn-prose ol li { counter-increment: rn-ol; }
.rn-prose ol li::before {
  content: counter(rn-ol, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--renera-font-mono);
  font-size: 11px; letter-spacing: 0.18em;
  color: var(--renera-olive-500);
  padding-top: 0.45em;
}

/* Figures (and stray content images) */
/* No negative breakout: -56px consumed the whole 56px gutter, so a figure's
   right edge landed flush against the TOC at >=1181px and overlapped it by 24px
   at the 32px-gutter breakpoint. In-article images frame to the copy column,
   same as the feature image. */
.rn-prose figure {
  margin: 2.2em 0;
  display: flex; flex-direction: column; gap: 14px;
}
.rn-prose figure img,
.rn-prose > img {
  width: 100%; height: auto; display: block;
  border-radius: var(--renera-r-md);
  border: 1px solid var(--renera-clay-300);
  background: var(--renera-clay-200);
}
.rn-prose figure figcaption {
  font-family: var(--renera-font-mono);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--renera-mute);
  padding-left: 20px;
  position: relative;
}
.rn-prose figure figcaption::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 12px; height: 1px; background: var(--renera-clay-500);
}

/* Pull quote — styles native <blockquote> from the editor too */
.rn-pullquote,
.rn-prose blockquote {
  margin: 2.4em 0;
  padding: 36px 40px;
  background: var(--renera-sand-200);
  border-left: 2px solid var(--renera-olive-500);
  border-radius: 0 var(--renera-r-md) var(--renera-r-md) 0;
  position: relative;
}
.rn-pullquote p,
.rn-prose blockquote p {
  font-family: var(--renera-font-serif);
  font-style: italic;
  font-size: 28px; line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--renera-ink);
  margin: 0;
}
.rn-pullquote em,
.rn-prose blockquote em { color: var(--renera-olive-700); }
.rn-pullquote__attr {
  margin-top: 20px;
  font-family: var(--renera-font-mono);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--renera-mute);
  display: inline-flex; align-items: center; gap: 14px;
}
.rn-pullquote__attr::before {
  content: ""; display: block; width: 28px; height: 1px;
  background: var(--renera-clay-500);
}

/* Aside / sidenote callout */
.rn-aside {
  margin: 2.2em 0;
  padding: 28px 32px;
  background: var(--renera-sand-200);
  border: 1px solid var(--renera-clay-300);
  border-radius: var(--renera-r-md);
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
}
.rn-aside__icon {
  width: 44px; height: 44px; border-radius: 22%;
  background: var(--renera-olive-700);
  color: var(--renera-sand-200);
  display: inline-flex; align-items: center; justify-content: center;
}
.rn-aside__body {
  font-family: var(--renera-font-sans);
  font-size: 14px; line-height: 1.65;
  color: var(--renera-ink);
}
.rn-aside__body strong {
  display: block;
  font-family: var(--renera-font-mono);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--renera-olive-700);
  margin-bottom: 8px; font-weight: 500;
}

/* =========================================
   INLINE PRODUCT CTA — olive panel
   ========================================= */
.rn-inline-cta {
  margin: 3em 0;
  background: var(--renera-olive-700);
  color: var(--renera-sand-200);
  border-radius: var(--renera-r-lg);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 200px;
  overflow: hidden;
  position: relative;
}
.rn-inline-cta__body {
  padding: 40px 44px 40px 40px;
  display: flex; flex-direction: column; gap: 16px;
}
.rn-inline-cta__eyebrow {
  font-family: var(--renera-font-mono);
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--renera-olive-300);
  display: inline-flex; align-items: center; gap: 14px;
}
.rn-inline-cta__eyebrow::before {
  content: ""; display: block;
  width: 28px; height: 1px; background: rgba(246,238,232,0.4);
}
.rn-prose .rn-inline-cta__title {
  font-family: var(--renera-font-serif);
  font-size: 28px; line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--renera-sand-200);
  margin: 0;
}
.rn-prose .rn-inline-cta__title em {
  /* warm peach reads with far more contrast on the dark-olive panel
     than sage green did (green-on-green) */
  color: var(--renera-clay-500);
  font-style: italic;
}
.rn-inline-cta__copy {
  font-size: 14px; line-height: 1.65;
  color: rgba(246,238,232,0.78);
  margin: 0;
}
.rn-inline-cta__cta {
  margin-top: 8px;
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  background: var(--renera-sand-200);
  color: var(--renera-olive-700);
  font-family: var(--renera-font-mono);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  border: 0; border-radius: 8px; cursor: pointer;
  text-decoration: none;
  transition: opacity var(--renera-dur-fast) var(--renera-ease);
}
.rn-inline-cta__cta:hover { opacity: 0.9; }
.rn-inline-cta__media {
  position: relative;
  background:
    url('../images/brand/01-product.png') center/contain no-repeat,
    radial-gradient(circle at center, rgba(174,220,145,0.12), transparent 65%);
  border-left: 1px solid rgba(246,238,232,0.12);
}
.rn-inline-cta__media::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(174,220,145,0.1), transparent 60%);
}

/* =========================================
   REFERENCES section
   ========================================= */
.rn-refs {
  margin-top: 64px;
  padding: 36px;
  background: var(--renera-sand-200);
  border: 1px solid var(--renera-clay-300);
  border-radius: var(--renera-r-lg);
}
.rn-refs__head {
  display: flex; align-items: center; gap: 18px;
  margin-bottom: 28px;
}
.rn-refs__head h3 {
  font-family: var(--renera-font-serif);
  font-weight: 400; font-size: 22px;
  margin: 0; color: var(--renera-ink);
}
.rn-refs__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 22px;
  counter-reset: rn-ref;
}
.rn-refs__list li {
  counter-increment: rn-ref;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  padding-top: 22px;
  border-top: 1px solid var(--renera-clay-300);
  font-size: 14px; line-height: 1.65;
  color: var(--renera-ink);
}
.rn-refs__list li:first-child { border-top: 0; padding-top: 0; }
.rn-refs__list li::before {
  content: counter(rn-ref, decimal-leading-zero);
  font-family: var(--renera-font-mono);
  font-size: 11px; letter-spacing: 0.22em;
  color: var(--renera-olive-500);
  padding-top: 2px;
}
.rn-refs__list li b {
  display: block;
  font-family: var(--renera-font-serif);
  font-weight: 400; font-size: 16px;
  color: var(--renera-ink);
  margin-bottom: 4px;
}
.rn-refs__list li .meta {
  font-family: var(--renera-font-mono);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--renera-mute);
  margin-top: 8px;
}
.rn-refs__list li a {
  color: var(--renera-olive-700);
  text-decoration: underline;
  text-decoration-color: var(--renera-clay-300);
  text-underline-offset: 3px;
  word-break: break-all;
}

/* =========================================
   END NAV
   ========================================= */

/* End-of-article nav (prev/next) */
.rn-endnav {
  margin-top: 56px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.rn-endnav__card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 28px;
  background: var(--renera-sand-300);
  border: 1px solid var(--renera-clay-300);
  border-radius: var(--renera-r-lg);
  text-decoration: none; color: inherit;
  transition: border-color var(--renera-dur-fast) var(--renera-ease);
  cursor: pointer;
}
.rn-endnav__card:hover { border-color: var(--renera-olive-500); }
.rn-endnav__card--next { text-align: right; align-items: flex-end; }
.rn-endnav__dir {
  font-family: var(--renera-font-mono);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--renera-olive-700);
  display: inline-flex; align-items: center; gap: 10px;
}
.rn-endnav__title {
  font-family: var(--renera-font-serif);
  font-size: 22px; line-height: 1.25;
  color: var(--renera-ink);
  margin: 0;
}
.rn-endnav__meta {
  font-family: var(--renera-font-mono);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--renera-mute);
}

/* =========================================
   RELATED ARTICLES SECTION
   ========================================= */
.rn-related {
  background: var(--renera-sand-200);
  padding: 68px 0;
  border-top: 1px solid var(--renera-clay-300);
}
.rn-related__head {
  max-width: 1280px; margin: 0 auto 48px;
  padding: 0 40px;
  display: grid; grid-template-columns: 1fr auto;
  align-items: end; gap: 40px;
}
.rn-related__title {
  font-family: var(--renera-font-serif);
  font-size: 48px; line-height: 1.08;
  color: var(--renera-ink);
  margin: 22px 0 0;
}
.rn-related__title em { color: var(--renera-olive-700); }
.rn-related__cta {
  font-family: var(--renera-font-mono);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--renera-olive-700);
  text-decoration: none;
}
.rn-related__cta::after {
  content: " →";
}

.rn-related__grid {
  max-width: 1280px; margin: 0 auto;
  padding: 0 40px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}

/* Mobile-only horizontal share row — hidden on desktop, shown via .rn-m */
.rn-mshare { display: none; }

/* =========================================
   RESPONSIVE — desktop browser narrowing (separate from .rn-m device reflow)
   ========================================= */
@media (max-width: 1180px) {
  .rn-article__inner { grid-template-columns: 64px 1fr 220px; gap: 32px; }
  .rn-feature-img { grid-template-columns: 64px 1fr 220px; gap: 0 32px; }
  .rn-share__label { display: none; }
}
@media (max-width: 960px) {
  .rn-article__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  /* Article is a single column here, so the image fills it too. */
  .rn-feature-img { grid-template-columns: 1fr; }
  .rn-feature-img__frame,
  .rn-feature-img__cap { grid-column: 1; }
  .rn-rail { position: static; flex-direction: row; }
  .rn-share { flex-direction: row; align-items: center; }
  .rn-share__label {
    writing-mode: horizontal-tb; transform: none;
    display: inline-block; padding: 0; margin: 0 12px 0 0;
  }
  .rn-share__label::before { display: none; }
  .rn-toc { display: none; }
  .rn-prose figure,
  .rn-prose blockquote,
  .rn-pullquote,
  .rn-aside,
  .rn-inline-cta { margin-left: 0; margin-right: 0; }
  .rn-inline-cta { grid-template-columns: 1fr; }
  .rn-inline-cta__media { height: 200px; border-left: 0; border-top: 1px solid rgba(246,238,232,0.12); }
  .rn-related__grid { grid-template-columns: 1fr; }
  .rn-related__head { grid-template-columns: 1fr; }
  .rn-endnav { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .rn-prose { font-size: 16px; }
  .rn-prose h2 { font-size: 26px; padding-left: 0; }
  .rn-prose h2::before { position: static; display: block; width: 80px; margin-bottom: 10px; top: auto; }
  .rn-feature-img__frame { padding: 0 20px; }
  .rn-related { padding: 44px 0; }
}