/*
 * archive.css
 * ReyBelen Standalone Theme — Archive, Insight Card, Search
 *
 * Authority: REYBELEN-COMPONENT-BLUEPRINT-SYSTEM.md §13 (Insight Card Blueprint)
 *            REYBELEN-COMPONENT-BLUEPRINT-SYSTEM.md §14 (Archive Blueprint)
 *            REYBELEN-VISUAL-SYSTEM-ARCHITECTURE.md §08.4 (Insights Index)
 *            REYBELEN-STANDALONE-THEME-ARCHITECTURE.md §03.5, §03.6, §04 (Insight Card)
 *            REYBELEN-ARCHITECTURAL-AMENDMENTS.md AM-13 §13.3, §13.5
 *
 * Owns: .rb-archive-hero (archive and series entry hero),
 *       .rb-archive-listing shell and inner,
 *       .rb-insight-card and all child elements,
 *       .rb-tag (category tag — archive.css scoped per F-03 resolution),
 *       .rb-pagination and all child elements,
 *       .rb-search-hero (search results hero),
 *       .rb-no-results (empty state).
 *
 * Does not own: .rb-label (components.css — used in archive hero for series eyebrow),
 *               .rb-cta-strip (components.css — appears after pagination),
 *               .rb-btn (components.css), @media rules (responsive.css).
 *
 * AM-13 §13.5 supersedes CBS §13 on card hover behavior:
 * Micro-lift (translateY(-2px)) and box-shadow are approved and implemented.
 * CBS §13 "No card lift on hover / No card shadow on hover" is superseded.
 *
 * AM-13 §13.3 amends CBS §13 HTML model:
 * .rb-insight-card__date added to meta row. Color: --rb-cognac (recency signal).
 * Meta row hierarchy: Category • Date • Read Time.
 *
 * No gradients. No icon systems. No secondary accent colors.
 * No GeneratePress selectors. No !important. No @media rules.
 */


/* ══════════════════════════════════════════════════════════════════════════
   ARCHIVE HERO
   ══════════════════════════════════════════════════════════════════════════ */


/* ── Archive Hero: Shell ─────────────────────────────────────────────────── */

/*
 * CBS §14: "Dark navy, DM Mono label in cognac, T2 headline in Fraunces 300 white."
 * Padding: 80px top / 64px bottom — CBS §14 verbatim.
 * Taller than page hero (64px/48px) — archive pages are series entry points,
 * not single-page destinations. Greater structural weight is correct.
 * Content-type agnostic: the .rb-label text is controlled by the template.
 */

.rb-archive-hero {
  width: 100%;
  background-color: var(--rb-navy);
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-8);
}


/* ── Archive Hero: Headline ──────────────────────────────────────────────── */

/*
 * CBS §14: "T2 headline in Fraunces 300 white."
 * T2 scale: clamp(36px, 4.5vw, 56px) — VSA §02.2 (verbatim).
 * Line-height: 1.08 — VSA §02.2 T2 value.
 * max-width: 800px — prevents overlong archive headlines on wide viewports.
 */

.rb-archive-hero__headline {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0;
  padding: 0;
  max-width: 800px;
  margin-top: var(--sp-2);
}


/* ── Archive Hero: Description ───────────────────────────────────────────── */

/*
 * CBS §14: "Brief series description — optional, 1 sentence."
 * System sans — body reading register.
 * AM-13 §13.3: copy frames the collection as active ("current thinking,"
 * "recent observations") — copy responsibility is in the template, not CSS.
 * Opacity 0.62: subordinate to headline, consistent with hero desc pattern.
 * Gap above: --sp-2 (16px) — closer to headline than a section description
 * would be; this is a subtitle, not a standalone statement.
 */

.rb-archive-hero__desc {
  font-family: var(--rb-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.78;
  color: rgba(255, 255, 255, 0.62);
  max-width: 640px;
  margin: 0;
  padding: 0;
  margin-top: var(--sp-2);
}


/* ══════════════════════════════════════════════════════════════════════════
   ARCHIVE LISTING
   ══════════════════════════════════════════════════════════════════════════ */


/* ── Archive Listing: Shell ──────────────────────────────────────────────── */

/*
 * CBS §14: "Background: light (--rb-bg). Listing section padding: 64px top / 80px bottom."
 * VSA §08.4: "The card listing breathes. Rows are separated by --rb-border lines
 * with generous vertical padding between each row."
 * CBS §14 prohibition: grid layout is prohibited — single column only.
 */

.rb-archive-listing {
  width: 100%;
  background-color: var(--rb-bg);
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-10);
}


/* ── Archive Listing: Inner ──────────────────────────────────────────────── */

/*
 * Stacked single-column list. The border-bottom on each card
 * creates the --rb-border row separators described in VSA §08.4.
 * CBS §14: "Cards are not in a grid — they are a vertical list."
 */

.rb-archive-listing__inner {
  display: flex;
  flex-direction: column;
}


/* ══════════════════════════════════════════════════════════════════════════
   INSIGHT CARD
   ══════════════════════════════════════════════════════════════════════════ */


/* ── Insight Card: Shell ─────────────────────────────────────────────────── */

/*
 * CBS §13: <article> element. Internal two-column grid: "64px 1fr".
 * Card padding: 32px top/bottom (--sp-4) — CBS §13 spacing table.
 * Border-bottom: 1px solid --rb-border — CBS §13 spacing table.
 * Always on light surface — CBS §13 Required/Prohibited (verbatim):
 * "Dark background variant (insight cards are always on light surface) — Prohibited."
 *
 * Hover: AM-13 §13.5 micro-lift — supersedes CBS §13 "No card lift on hover."
 * translateY(-2px), box-shadow: 0 4px 16px rgba(13, 27, 42, 0.08).
 * transition covers transform and box-shadow at 150ms.
 */

.rb-insight-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--rb-border);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.rb-insight-card:last-child {
  border-bottom: none;
}

.rb-insight-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(13, 27, 42, 0.08);
}


/* ── Insight Card: Number ────────────────────────────────────────────────── */

/*
 * CBS §13: "DM Mono 400, 11px uppercase, --rb-text-meta."
 * Positioned in the 64px left column of the card grid.
 * Padding-top aligns the number with the first line of the body column.
 * --rb-text-meta: classification index, not navigation. VSA §02.4 permits
 * --rb-text-meta for non-prose metadata elements.
 */

.rb-insight-card__number {
  font-family: var(--rb-font-mono);
  font-weight: 400;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--rb-text-meta);
  padding-top: 3px;
}


/* ── Insight Card: Body Column ───────────────────────────────────────────── */

/*
 * Right column of the card grid (1fr).
 * Stacks meta row, title, excerpt, read link vertically.
 * Gaps derived from CBS §13 spacing table.
 */

.rb-insight-card__body {
  display: flex;
  flex-direction: column;
}


/* ── Insight Card: Meta Row ──────────────────────────────────────────────── */

/*
 * Contains: .rb-tag (category), __date, __read-time.
 * F-02 resolution: hierarchy = Category • Date • Read Time.
 * AM-13 §13.3: date is a primary trust signal — not secondary metadata.
 * Flex row; align-items: center; gap handles spacing between elements.
 * Separator dots rendered as __meta-sep elements in the template.
 * Gap below to title: 12px — CBS §13 spacing table.
 */

.rb-insight-card__meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px; /* CBS §13: Meta to title gap: 12px */
}


/* ── Insight Card: Meta Separator ────────────────────────────────────────── */

/*
 * Visual separator between category, date, and read time.
 * Small dot rendered by the template (<span aria-hidden="true">•</span>).
 * Low opacity — present but not structural.
 */

.rb-insight-card__meta-sep {
  font-family: var(--rb-font-mono);
  font-size: 9px;
  color: var(--rb-text-meta);
  opacity: 0.5;
  line-height: 1;
}


/* ── Category Tag (.rb-tag) ──────────────────────────────────────────────── */

/*
 * F-03 resolution: .rb-tag owned by archive.css.
 * CBS §13: "DM Mono 10px uppercase, tracking 0.14em, --rb-cognac."
 * Classifies the article by series/category. Cognac = classificatory signal.
 * Distinct from .rb-label (components.css): smaller, inline, no margin-bottom.
 */

.rb-tag {
  font-family: var(--rb-font-mono);
  font-weight: 400;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--rb-cognac);
  display: inline;
}


/* ── Insight Card: Date ──────────────────────────────────────────────────── */

/*
 * AM-13 §13.3 (verbatim): "The insight card's date element must use a color
 * that signals recency — not --rb-text-meta. Cognac or high-opacity white
 * on dark surfaces is preferred."
 * Cognac color — matches category tag; both are active signals, not metadata.
 * DM Mono 10px — same scale as category tag and read time.
 */

.rb-insight-card__date {
  font-family: var(--rb-font-mono);
  font-weight: 400;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--rb-cognac);
  display: inline;
}


/* ── Insight Card: Read Time ─────────────────────────────────────────────── */

/*
 * CBS §13: "DM Mono 10px, --rb-text-meta."
 * Secondary metadata — how long it takes, not what it is or when.
 * --rb-text-meta: lower visual weight than category and date. Correct.
 */

.rb-insight-card__read-time {
  font-family: var(--rb-font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.10em;
  line-height: 1;
  color: var(--rb-text-meta);
  display: inline;
}


/* ── Insight Card: Title ─────────────────────────────────────────────────── */

/*
 * CBS §13: "Fraunces 400, T4 scale (20–22px), --rb-ink."
 * T4: VSA §02.2 — 20–22px, weight 400, line-height 1.4, -0.01em.
 * Implementation: 21px fixed (midpoint of 20–22px range).
 * Fixed value appropriate within 1fr column; no clamp needed in card context.
 *
 * The title element contains the <a> link. Hover is on the <a>.
 * Gap below: 12px — CBS §13 "Title to excerpt gap: 12px."
 */

.rb-insight-card__title {
  font-family: var(--rb-font-heading);
  font-weight: 400;
  font-style: normal;
  font-size: 21px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--rb-ink);
  margin: 0;
  padding: 0;
  margin-bottom: 12px; /* CBS §13: Title to excerpt gap: 12px */
}

.rb-insight-card__title a {
  color: var(--rb-ink);
  text-decoration: none;
  transition: color 150ms ease;
}

.rb-insight-card__title a:hover {
  color: var(--rb-cognac);
}


/* ── Insight Card: Excerpt ───────────────────────────────────────────────── */

/*
 * CBS §13: "System sans 15px, --rb-ink."
 * 2 sentences maximum — enforced by template truncation, not CSS.
 * VSA §02.4: --rb-ink on light surface. No grey body text.
 * Gap below: 16px (--sp-2) — CBS §13 "Excerpt to read-link gap: --sp-2."
 */

.rb-insight-card__excerpt {
  font-family: var(--rb-font);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  color: var(--rb-ink);
  margin: 0;
  padding: 0;
  margin-bottom: var(--sp-2);
}


/* ── Insight Card: Read Link ─────────────────────────────────────────────── */

/*
 * CBS §13: "DM Mono 10px uppercase, --rb-ink."
 * The link text is "Read →" — the arrow is a separate __arrow span.
 * No underline on the link (CBS §13: "No underline").
 */

.rb-insight-card__link {
  font-family: var(--rb-font-mono);
  font-weight: 400;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--rb-ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 150ms ease;
  align-self: flex-start;
}


/* ── Insight Card: Arrow ─────────────────────────────────────────────────── */

/*
 * CBS §13: "--rb-cognac. Hover: moves 4px to the right on card hover,
 * transitions over 150ms."
 * The arrow is a <span> inside .rb-insight-card__link.
 * Transform is triggered by hover on the parent .rb-insight-card (not the link)
 * to create the card-level directional cue described in CBS §13.
 */

.rb-insight-card__arrow {
  color: var(--rb-cognac);
  display: inline-block;
  transition: transform 150ms ease;
}

.rb-insight-card:hover .rb-insight-card__arrow {
  transform: translateX(4px);
}


/* ══════════════════════════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════════════════════════ */


/* ── Pagination: Shell ───────────────────────────────────────────────────── */

/*
 * CBS §14: "Pagination appears below the listing, within the light-surface section."
 * Padding-top: --sp-8 (64px) — separates from last card.
 * Layout: flex row, centered — F-06 derivation. YELLOW.
 */

.rb-pagination {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding-top: var(--sp-8);
}


/* ── Pagination: Previous / Next Links ───────────────────────────────────── */

/*
 * CBS §14: "DM Mono 11px uppercase. --rb-text-meta default, --rb-ink on hover.
 * Arrows in --rb-cognac."
 * Transition on the text element provides the color change.
 */

.rb-pagination__prev,
.rb-pagination__next {
  font-family: var(--rb-font-mono);
  font-weight: 400;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--rb-text-meta);
  text-decoration: none;
  transition: color 150ms ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rb-pagination__prev:hover,
.rb-pagination__next:hover {
  color: var(--rb-ink);
}


/* ── Pagination: Arrow Characters ────────────────────────────────────────── */

/*
 * CBS §14: "Arrows in --rb-cognac."
 * Rendered as ← and → HTML entities in the template.
 * Wrapped in a span to allow cognac coloring independent of link text.
 */

.rb-pagination__arrow {
  color: var(--rb-cognac);
}


/* ── Pagination: Current Page ────────────────────────────────────────────── */

/*
 * CBS §14: DM Mono 11px uppercase, --rb-text-meta.
 * Not a link — a positional indicator only.
 */

.rb-pagination__current {
  font-family: var(--rb-font-mono);
  font-weight: 400;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--rb-text-meta);
}


/* ══════════════════════════════════════════════════════════════════════════
   SEARCH HERO
   ══════════════════════════════════════════════════════════════════════════ */


/* ── Search Hero: Shell ──────────────────────────────────────────────────── */

/*
 * STA §03.6: "A dark search hero with the query string in DM Mono
 * and a T2 results heading."
 * Reuses archive hero padding — same structural weight, different content.
 */

.rb-search-hero {
  width: 100%;
  background-color: var(--rb-navy);
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-8);
}


/* ── Search Hero: Query String ───────────────────────────────────────────── */

/*
 * STA §03.6: query string displayed in DM Mono.
 * Appears above the results heading as context for what was searched.
 * Opacity 0.62: present but subordinate to the heading.
 */

.rb-search-hero__query {
  font-family: var(--rb-font-mono);
  font-weight: 400;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
  padding: 0;
  margin-bottom: var(--sp-3);
}


/* ── Search Hero: Results Heading ────────────────────────────────────────── */

/*
 * STA §03.6: "T2 results heading."
 * T2 scale: clamp(36px, 4.5vw, 56px) / line-height 1.08 — VSA §02.2.
 * White on dark navy. Same treatment as archive hero headline.
 */

.rb-search-hero__heading {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0;
  padding: 0;
  max-width: 800px;
}


/* ══════════════════════════════════════════════════════════════════════════
   NO-RESULTS / EMPTY STATE
   ══════════════════════════════════════════════════════════════════════════ */


/* ── No Results: Shell ───────────────────────────────────────────────────── */

/*
 * STA §03.6: "handles the no-results case with a dark section and a single CTA."
 * Dark navy — maintains the search/archive dark register when no content is present.
 * Centered: the message is brief; centering reads as direct, not padded.
 */

.rb-no-results {
  width: 100%;
  background-color: var(--rb-navy);
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-10);
}


/* ── No Results: Inner ───────────────────────────────────────────────────── */

.rb-no-results__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 560px;
  margin-inline: auto;
}


/* ── No Results: Message ─────────────────────────────────────────────────── */

/*
 * Fraunces 300 — the declarative register.
 * T3 scale — a clear statement, not a headline-level event.
 * White: no apologetic grey on dark surface.
 * Margin below: --sp-5 (40px) before the CTA.
 */

.rb-no-results__message {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: #FFFFFF;
  margin: 0;
  padding: 0;
  margin-bottom: var(--sp-5);
}


/* ══════════════════════════════════════════════════════════════════════════
   INSIGHTS PAGE — HERO (two-column dark)
   ══════════════════════════════════════════════════════════════════════════ */

.rb-insights-hero {
  background: var(--rb-navy);
  padding: var(--sp-12) 0 var(--sp-10);
}

.rb-insights-hero__inner {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: var(--sp-8);
  align-items: end;
}

.rb-insights-hero__left {
  padding-bottom: var(--sp-2);
}

.rb-insights-hero__kicker {
  font-family: var(--rb-font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rb-cognac);
  display: block;
  margin-bottom: var(--sp-3);
}

.rb-insights-hero__headline {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-size: clamp(36px, 4.8vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 var(--sp-5);
}

.rb-insights-hero__sub {
  font-size: 16px;
  line-height: 1.78;
  color: rgba(255, 255, 255, 0.48);
  margin: 0 0 var(--sp-6);
  max-width: 460px;
}

.rb-insights-hero__nl {
  display: flex;
  gap: 0;
  max-width: 400px;
}

.rb-insights-hero__nl input {
  flex: 1;
  padding: 13px 16px;
  font-family: var(--rb-font);
  font-size: 14px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-right: none;
  color: #fff;
  outline: none;
}

.rb-insights-hero__nl input::placeholder {
  color: rgba(255, 255, 255, 0.28);
}

.rb-insights-hero__nl button {
  padding: 13px 20px;
  background: var(--rb-cognac);
  color: #fff;
  border: none;
  font-family: var(--rb-font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}

.rb-insights-hero__nl button:hover {
  background: var(--rb-cognac-lt);
}

.rb-insights-hero__nl-note {
  font-family: var(--rb-font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.22);
  margin: 10px 0 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   INSIGHTS PAGE — FEATURED CARD (right column of hero)
   ══════════════════════════════════════════════════════════════════════════ */

.rb-featured-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: border-color 150ms ease;
}

.rb-featured-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.rb-featured-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--rb-navy-mid);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.rb-featured-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rb-featured-card:hover .rb-featured-card__img {
  transform: scale(1.03);
}

.rb-featured-card__image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rb-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.18);
}

.rb-featured-card__body {
  padding: var(--sp-5);
}

.rb-featured-card__meta {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
}

.rb-featured-card__tag {
  font-family: var(--rb-font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rb-cognac);
}

.rb-featured-card__date {
  font-family: var(--rb-font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.3);
}

.rb-featured-card__title {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.25;
  color: #fff;
  margin: 0 0 12px;
  transition: color 150ms ease;
}

.rb-featured-card:hover .rb-featured-card__title {
  color: rgba(255, 255, 255, 0.75);
}

.rb-featured-card__excerpt {
  font-size: 14px;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 var(--sp-4);
}

.rb-featured-card__link {
  font-family: var(--rb-font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rb-cognac);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}


/* ══════════════════════════════════════════════════════════════════════════
   INSIGHTS PAGE — FILTER BAR
   ══════════════════════════════════════════════════════════════════════════ */

.rb-filter-bar {
  background: var(--rb-bg);
  border-bottom: 1px solid var(--rb-border);
  padding: 0;
  position: sticky;
  top: 72px;
  z-index: 90;
}

.rb-filter-bar__inner {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.rb-filter-bar__inner::-webkit-scrollbar {
  display: none;
}

.rb-filter-item {
  font-family: var(--rb-font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rb-text-meta);
  padding: 16px 20px;
  border: none;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}

.rb-filter-item:hover {
  color: var(--rb-ink);
}

.rb-filter-item.active {
  color: var(--rb-cognac);
  border-bottom-color: var(--rb-cognac);
}


/* ══════════════════════════════════════════════════════════════════════════
   INSIGHTS PAGE — ARTICLE GRID SECTION
   ══════════════════════════════════════════════════════════════════════════ */

.rb-articles {
  background: var(--rb-bg);
  padding: var(--sp-10) 0;
}

.rb-articles__section-label {
  font-family: var(--rb-font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rb-text-meta);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--rb-border);
  margin: 0 0 var(--sp-6);
}

.rb-article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rb-border);
  margin-bottom: var(--sp-10);
}

.rb-article-wide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rb-border);
  margin-bottom: var(--sp-10);
}

.rb-article-card {
  background: var(--rb-bg);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: background 150ms ease;
}

.rb-article-card:hover {
  background: rgba(160, 82, 45, 0.03);
}

.rb-article-card__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--rb-border);
}

.rb-article-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rb-article-card:hover .rb-article-card__thumb img {
  transform: scale(1.03);
}

.rb-article-card__thumb-placeholder {
  width: 100%;
  height: 100%;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rb-navy);
  font-family: var(--rb-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.15);
}

.rb-article-card__body {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.rb-article-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.rb-article-card__tag {
  font-family: var(--rb-font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rb-cognac);
}

.rb-article-card__date {
  font-family: var(--rb-font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--rb-text-meta);
}

.rb-article-card__title {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-size: clamp(17px, 1.9vw, 22px);
  line-height: 1.28;
  color: var(--rb-ink);
  margin: 0 0 12px;
  flex: 1;
  transition: color 150ms ease;
}

.rb-article-card:hover .rb-article-card__title {
  color: var(--rb-cognac);
}

.rb-article-wide .rb-article-card__title {
  font-size: clamp(20px, 2.2vw, 28px);
}

.rb-article-card__excerpt {
  font-size: 14px;
  line-height: 1.7;
  color: var(--rb-text-meta);
  margin: 0 0 var(--sp-4);
}

.rb-article-card__link {
  font-family: var(--rb-font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rb-cognac);
  align-self: flex-start;
}


/* ══════════════════════════════════════════════════════════════════════════
   INSIGHTS PAGE — NEWSLETTER SECTION (dark)
   ══════════════════════════════════════════════════════════════════════════ */

.rb-nl {
  background: var(--rb-navy);
  padding: var(--sp-10) 0;
}

.rb-nl__inner {
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: var(--sp-8);
  align-items: center;
}

.rb-nl__headline {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.15;
  color: #fff;
  margin: 0 0 14px;
}

.rb-nl__sub {
  font-size: 15px;
  line-height: 1.78;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
}

.rb-nl__form {
  display: flex;
  gap: 0;
}

.rb-nl__form input {
  flex: 1;
  padding: 14px 16px;
  font-family: var(--rb-font);
  font-size: 15px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-right: none;
  color: #fff;
  outline: none;
}

.rb-nl__form input::placeholder {
  color: rgba(255, 255, 255, 0.28);
}

.rb-nl__form button {
  padding: 14px 24px;
  background: var(--rb-cognac);
  color: #fff;
  border: none;
  font-family: var(--rb-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms ease;
}

.rb-nl__form button:hover {
  background: var(--rb-cognac-lt);
}

.rb-nl__note {
  font-family: var(--rb-font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.22);
  margin: 12px 0 0;
}