/*
 * article.css
 * ReyBelen Standalone Theme — Article Reading System
 *
 * Authority: REYBELEN-COMPONENT-BLUEPRINT-SYSTEM.md §15 (Article System Blueprint)
 *            REYBELEN-VISUAL-SYSTEM-ARCHITECTURE.md §02.2 (Typography), §08.5 (Article sequence)
 *            REYBELEN-STANDALONE-THEME-ARCHITECTURE.md §03.4 (single.php), §05.4 (ownership)
 *
 * Owns: .rb-article-hero shell and all child elements,
 *       .rb-article-body shell and .rb-article-body__inner reading column,
 *       .a-* typography class system (article body reading register),
 *       .rb-article-nav and all child elements.
 *
 * Does not own: .rb-label visual treatment (components.css — used in hero for series label),
 *               .rb-cta-strip (components.css — called after nav in single.php),
 *               .rb-btn (components.css), .rb-hl (components.css),
 *               @media rules (responsive.css).
 *
 * Typography ownership note: .a-pull and .a-quote are defined independently here
 * per CBS §01.2 ownership isolation. Their values coincide with .rb-pull and
 * .rb-blockquote in components.css. The identity is coincidental, not a coupling.
 * F-03 resolution approved 2026-06-06.
 *
 * No gradients. No icon systems. No secondary accent colors.
 * No GeneratePress selectors. No !important. No @media rules.
 */


/* ══════════════════════════════════════════════════════════════════════════
   ARTICLE HERO
   ══════════════════════════════════════════════════════════════════════════ */


/* ── Article Hero: Shell ─────────────────────────────────────────────────── */

/*
 * Dark navy surface. CBS §15: "Dark navy background."
 * Padding: 64px top / 48px bottom — CBS §15 (verbatim).
 * Not min-height: 100vh — article heroes are navigational, not declarative.
 * The title is the dominant event; it does not need full-viewport space.
 */

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


/* ── Article Hero: Meta Row ──────────────────────────────────────────────── */

/*
 * Contains: .rb-label (series classification), __date, __read-time.
 * Flex row — label left, date and read-time follow with separator spacing.
 * Gap: --sp-3 (24px) between meta elements.
 * Margin-bottom: --sp-3 (24px) — standard eyebrow-to-headline gap (VSA §06.4).
 */

.rb-article-hero__meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}


/* ── Article Hero: Date ──────────────────────────────────────────────────── */

/*
 * DM Mono 11px, rgba(255,255,255,0.45) — CBS §15 (verbatim).
 * AM-13 §13.3: date is a primary trust signal on insight/article content.
 * 0.45 opacity on dark surface is correct — present, not dominant.
 */

.rb-article-hero__date {
  font-family: var(--rb-font-mono);
  font-weight: 400;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.45);
}


/* ── Article Hero: Read Time ─────────────────────────────────────────────── */

/*
 * DM Mono 11px, rgba(255,255,255,0.45) — CBS §15 (verbatim).
 * Same register as date — both are DM Mono metadata at equal visual weight.
 */

.rb-article-hero__read-time {
  font-family: var(--rb-font-mono);
  font-weight: 400;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.45);
}


/* ── Article Hero: Meta Separator ────────────────────────────────────────── */

/*
 * Visual separator between date and read time within the meta row.
 * DM Mono dot at low opacity — present but not an element in its own right.
 * Not specified in CBS §15; derived from the meta row structure. YELLOW.
 */

.rb-article-hero__meta-sep {
  font-family: var(--rb-font-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.25);
  line-height: 1;
}


/* ── Article Hero: Title ─────────────────────────────────────────────────── */

/*
 * CBS §15: "Fraunces 400, T4 scale (20–22px base, but for article hero: 26–32px)."
 * Approved implementation: 28px fixed (midpoint of 26–32px range).
 * F-01 resolution, approved 2026-06-06.
 *
 * Weight 400 — not 300. This is deliberate: article titles carry more editorial
 * mass than section headlines. Fraunces 400 is denser than 300 at this scale.
 * VSA §02.2: "Weight 400 (article titles, secondary emphasis headings)."
 *
 * Line-height: 1.3 — CBS §15 T4 line-height is 1.4 (VSA §02.2);
 * at 28px within a dark hero, 1.3 reads as a tighter editorial title register.
 * letter-spacing: -0.01em — VSA §02.2 T4 value.
 * max-width: 720px — constrains line length without cutting short titles.
 */

.rb-article-hero__title {
  font-family: var(--rb-font-heading);
  font-weight: 400;
  font-style: normal;
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  margin: 0;
  padding: 0;
  max-width: 720px;
}


/* ══════════════════════════════════════════════════════════════════════════
   ARTICLE BODY
   ══════════════════════════════════════════════════════════════════════════ */


/* ── Article Body: Section Shell ─────────────────────────────────────────── */

/*
 * Light surface — follows dark article hero.
 * CBS §15: "Background: --rb-bg. Body section padding: 64px top / 80px bottom."
 * VSA §08.5: "Article pages are reading experiences."
 */

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


/* ── Article Body: Reading Column ────────────────────────────────────────── */

/*
 * CBS §15: "max-width 680px, centered within the 1120px container."
 * VSA §08.5 reading column rule: "680px maximum width for article body text."
 * "At 17px, a 680px column produces approximately 75–80 characters per line —
 * the editorial standard."
 *
 * This value is load-bearing. It cannot be adjusted without an amendment.
 * margin-inline: auto centers within the .rb-container (1120px max-width).
 */

.rb-article-body__inner {
  max-width: 680px;
  margin-inline: auto;
  width: 100%;
}


/* ══════════════════════════════════════════════════════════════════════════
   ARTICLE TYPOGRAPHY SYSTEM — .a-* CLASS SYSTEM
   ══════════════════════════════════════════════════════════════════════════ */

/*
 * The .a-* class system governs all typographic elements within the article
 * body reading column. These classes are applied by the WordPress block editor
 * via the [hl] shortcode and direct block-level class assignment.
 *
 * All .a-* rules are scoped to the article body reading context.
 * They do not inherit from or couple to components.css class names.
 * F-03 resolution: .a-pull and .a-quote are independent of .rb-pull / .rb-blockquote.
 */


/* ── Body Paragraph ──────────────────────────────────────────────────────── */

/*
 * CBS §15: "17px | 400 | 1.82 | --rb-ink"
 * VSA §02.4: grey body text permanently prohibited on light surfaces.
 * Line-height 1.82 — the most generous in the type system.
 * Article body is the longest reading context; 1.82 is correct at 17px.
 */

.a-p {
  font-family: var(--rb-font);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.82;
  color: var(--rb-ink);
  margin: 0;
  padding: 0;
}

.a-p + .a-p {
  margin-top: var(--sp-3);
}


/* ── Section Heading ─────────────────────────────────────────────────────── */

/*
 * CBS §15: "Fraunces 300, 28–32px | 300 | 1.2 | --rb-ink"
 * F-02 resolution: 30px fixed (midpoint). No clamp() — 680px column
 * does not require viewport-variable heading sizes. Approved 2026-06-06.
 *
 * Fraunces 300 on light surface — same weight as section headlines,
 * appropriate scale for an in-article structural marker.
 * Gap above: --sp-6 (48px) — breathing room between sections.
 * Gap below: --sp-3 (24px) — standard headline-to-body gap.
 */

.a-h2 {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-style: normal;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--rb-ink);
  margin: 0;
  padding: 0;
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-3);
}


/* ── Sub-heading ─────────────────────────────────────────────────────────── */

/*
 * CBS §15: "Fraunces 300, 22–24px | 300 | 1.3 | --rb-ink"
 * F-02 resolution: 23px fixed (midpoint). Approved 2026-06-06.
 *
 * Subordinate to .a-h2 in the heading hierarchy.
 * Gap above: --sp-5 (40px) — smaller than .a-h2 top gap; signals sub-level.
 * Gap below: --sp-2 (16px) — tighter than .a-h2; closer to its content.
 */

.a-h3 {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-style: normal;
  font-size: 23px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--rb-ink);
  margin: 0;
  padding: 0;
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-2);
}


/* ── Framing Statement ───────────────────────────────────────────────────── */

/*
 * CBS §15: "System sans 18px, italic | 400 italic | 1.6 | --rb-ink"
 * "Appears at the opening of an article or at the opening of a major section."
 * "A voice shift, from exposition to direct address."
 *
 * Margin above: 32px (--sp-4) — CBS §15 verbatim.
 * Margin below: 24px (--sp-3) — CBS §15 verbatim.
 * Width: matches body column — no additional max-width needed (680px from __inner).
 *
 * System sans italic — not Fraunces. This is a register distinction:
 * Fraunces italic = literary/editorial; system sans italic = voice/address.
 */

.a-framing {
  font-family: var(--rb-font);
  font-weight: 400;
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  color: var(--rb-ink);
  margin: 0;
  padding: 0;
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-3);
}


/* ── Inline Blockquote ───────────────────────────────────────────────────── */

/*
 * CBS §15: "Fraunces 300 italic | 20px | 1.5 | --rb-navy"
 * F-03 resolution: defined independently of .rb-blockquote (components.css).
 * Values are coincidentally identical; the coupling is not architectural.
 *
 * --rb-navy on light surface: authoritative, distinguished from --rb-ink body copy.
 * Used for attribution quotes within body — not for pull-out emphasis (.a-pull).
 */

.a-quote {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-style: italic;
  font-size: 20px;
  line-height: 1.5;
  color: var(--rb-navy);
  margin: 0;
  padding: 0;
}


/* ── Pull Quote ──────────────────────────────────────────────────────────── */

/*
 * CBS §15: "Fraunces 300 italic | 22px | 1.4 | --rb-ink"
 * Left border: 3px solid --rb-cognac. Padding left: 24px (--sp-3).
 * Margin: 40px top and bottom (--sp-5) — CBS §15 verbatim.
 * Max-width: 600px within the 680px column — CBS §15 verbatim.
 *
 * F-03 resolution: defined independently of .rb-pull (components.css).
 * Extracts a sentence from body copy for visual texture and pacing.
 * Not a testimonial. Not an attributed quote. An isolated statement.
 */

.a-pull {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--rb-ink);
  border-left: 3px solid var(--rb-cognac);
  padding-left: var(--sp-3);
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-5);
  margin-right: 0;
  margin-left: 0;
  max-width: 600px;
}


/* ── List ────────────────────────────────────────────────────────────────── */

/*
 * CBS §15: "List items use — (em-dash) as the list marker, not bullets."
 * "Color of the em-dash: --rb-cognac."
 * "List items: 16px system sans, --rb-ink. Gap between list items: 12px.
 *  Left indent: 20px from the em-dash."
 *
 * F-04: 12px gap is not on the 8px token scale. CBS §15 specifies 12px verbatim.
 * Hardcoded as cited. No token created.
 *
 * Implementation: list-style: none on .a-list; ::before pseudo-element on li
 * renders the em-dash at left: 0; padding-left: 20px indents the text content.
 */

.a-list {
  list-style: none;
  margin: var(--sp-3) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px; /* CBS §15 verbatim — not on 8px token scale */
}

.a-list li {
  font-family: var(--rb-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.78;
  color: var(--rb-ink);
  position: relative;
  padding-left: 20px; /* CBS §15: "Left indent: 20px from the em-dash" */
  margin: 0;
}

.a-list li::before {
  content: "—";
  font-family: var(--rb-font);
  color: var(--rb-cognac);
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1.78;
}


/* ══════════════════════════════════════════════════════════════════════════
   NATIVE BLOCK EDITOR SELECTORS
   Scoped to .rb-article-body__inner so WP block editor output is styled
   automatically — no manual class assignment needed per block.
   Values mirror the .a-* class system above. Both remain valid:
   native selectors handle standard block output; .a-* classes handle
   special elements (framing, pull quotes, signature) without native equivalents.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Paragraphs ──────────────────────────────────────────────────────────── */

.rb-article-body__inner p {
  font-family: var(--rb-font);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.82;
  color: var(--rb-ink);
  margin: 0;
}

.rb-article-body__inner p + p {
  margin-top: var(--sp-3);
}


/* ── Section Heading (H2) ────────────────────────────────────────────────── */

.rb-article-body__inner h2 {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-style: normal;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--rb-ink);
  margin: 0;
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-3);
}


/* ── Sub-heading (H3) ────────────────────────────────────────────────────── */

.rb-article-body__inner h3 {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-style: normal;
  font-size: 23px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--rb-ink);
  margin: 0;
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-2);
}


/* ── Blockquote ──────────────────────────────────────────────────────────── */

.rb-article-body__inner blockquote {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--rb-ink);
  border-left: 3px solid var(--rb-cognac);
  padding-left: var(--sp-3);
  margin: var(--sp-5) 0;
  max-width: 600px;
}

.rb-article-body__inner blockquote p {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
}


/* ── Unordered / Ordered Lists ───────────────────────────────────────────── */

.rb-article-body__inner ul,
.rb-article-body__inner ol {
  list-style: none;
  margin: var(--sp-3) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rb-article-body__inner ul li,
.rb-article-body__inner ol li {
  font-family: var(--rb-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.78;
  color: var(--rb-ink);
  position: relative;
  padding-left: 20px;
  margin: 0;
}

/* Em-dash marker for unordered lists */
.rb-article-body__inner ul li::before {
  content: "—";
  color: var(--rb-cognac);
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1.78;
}

/* Numbered marker for ordered lists */
.rb-article-body__inner ol {
  counter-reset: rb-ol;
}

.rb-article-body__inner ol li {
  counter-increment: rb-ol;
}

.rb-article-body__inner ol li::before {
  content: counter(rb-ol) ".";
  font-family: var(--rb-font-mono);
  font-size: 11px;
  color: var(--rb-cognac);
  position: absolute;
  left: 0;
  top: 3px;
  line-height: 1.4;
}


/* ── Images ──────────────────────────────────────────────────────────────── */

.rb-article-body__inner figure {
  margin: var(--sp-6) 0;
}

.rb-article-body__inner figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}

.rb-article-body__inner figcaption {
  margin-top: var(--sp-2);
  font-family: var(--rb-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--rb-text-meta);
  line-height: 1.6;
}

/* Standalone img block (no figure wrapper) */
.rb-article-body__inner img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
  margin: var(--sp-6) 0;
}


/* ── Horizontal Rule ─────────────────────────────────────────────────────── */

.rb-article-body__inner hr {
  border: none;
  border-top: 1px solid var(--rb-border);
  margin: var(--sp-6) 0;
}


/* ── Strong / Em ─────────────────────────────────────────────────────────── */

.rb-article-body__inner strong {
  font-weight: 500;
  color: var(--rb-ink);
}

.rb-article-body__inner em {
  font-style: italic;
}


/* ── Inline Links ────────────────────────────────────────────────────────── */

.rb-article-body__inner a {
  color: var(--rb-cognac);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 150ms ease;
}

.rb-article-body__inner a:hover {
  color: var(--rb-cognac-lt);
}


/* ── Spacing: Block after heading ────────────────────────────────────────── */

/* Prevent double-gap when a paragraph immediately follows a heading */
.rb-article-body__inner h2 + p,
.rb-article-body__inner h3 + p {
  margin-top: 0;
}


/* ── Signature / Close ───────────────────────────────────────────────────── */

/*
 * CBS §15: "System sans 15px | 400 | 1.6 | --rb-text-meta"
 * Appears at the close of the article — final sign-off line or attribution.
 * --rb-text-meta is permitted here: this is a classification/metadata element,
 * not body reading text. VSA §02.4 prohibition applies to narrative prose only.
 * Margin above: --sp-6 (48px) — closing distance from body content.
 */

.a-sig {
  font-family: var(--rb-font);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: var(--rb-text-meta);
  margin: 0;
  padding: 0;
  margin-top: var(--sp-6);
}


/* ══════════════════════════════════════════════════════════════════════════
   ARTICLE NAVIGATION
   ══════════════════════════════════════════════════════════════════════════ */


/* ── Article Nav: Shell ──────────────────────────────────────────────────── */

/*
 * CBS §15: "Light surface. Border-top: 1px solid --rb-border. Padding: 40px top."
 * F-05 resolution: padding-bottom: var(--sp-8) — separates nav from CTA strip.
 * Background inherits --rb-bg from .rb-article-body section; no new declaration.
 *
 * Lives between .rb-article-body and .rb-cta-strip (components.css).
 * Rendered by template-parts/article/article-nav.php.
 */

.rb-article-nav {
  width: 100%;
  border-top: 1px solid var(--rb-border);
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-8);
}


/* ── Article Nav: Inner Layout ───────────────────────────────────────────── */

/*
 * CBS §15: "Layout: two-column, space-between. Previous left, Next right."
 * gap: --sp-4 (32px) ensures space between prev and next if they wrap.
 */

.rb-article-nav__inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-4);
}


/* ── Article Nav: Previous / Next Links ──────────────────────────────────── */

/*
 * Each link is a flex column: direction label above, article title below.
 * max-width: 45% prevents very long titles from crowding the other side.
 * CBS §15 specifies stacked layout on mobile — handled in responsive.css.
 */

.rb-article-nav__prev,
.rb-article-nav__next {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  text-decoration: none;
  max-width: 45%;
}

.rb-article-nav__next {
  text-align: right;
  align-items: flex-end;
}


/* ── Article Nav: Direction Label ────────────────────────────────────────── */

/*
 * CBS §15: "DM Mono 10px uppercase, --rb-cognac."
 * The smallest DM Mono size in the system — appropriate for a navigational cue.
 * VSA §02.2: 10–11px is permitted for DM Mono labels only.
 */

.rb-article-nav__dir {
  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: block;
}


/* ── Article Nav: Article Title ──────────────────────────────────────────── */

/*
 * CBS §15: "System sans 15px, --rb-ink. Hover: title transitions to
 * --rb-cognac over 150ms."
 * Transition on the anchor inherits to this element; color is the transition target.
 */

.rb-article-nav__title {
  font-family: var(--rb-font);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: var(--rb-ink);
  display: block;
  transition: color 150ms ease;
}

.rb-article-nav__prev:hover .rb-article-nav__title,
.rb-article-nav__next:hover .rb-article-nav__title {
  color: var(--rb-cognac);
}