/* =============================================================================
   Pep Research -- the Research Library (/research, /research/<article>), 2026-10-22.
   A minimal extension of the V3 system: it reads only the existing brand and
   V3 tokens (css/pepvela-brand.css, css/pep-research.css) and reuses the
   existing classes (.v3-container, .v3-crumbs, .v3-label, .v3-page-lead,
   .v3-btn, .v3-link). What it adds is the reading layout: the page header,
   the one header image per page, a comfortable article measure, a figure,
   a table and the evidence note (sources stay internal: no citations or
   reference list, CEO 2026-10-22). No new colours, no
   animation (nothing here moves, so there is nothing to stop under
   prefers-reduced-motion).
   ============================================================================= */

.rs-page { background: var(--pv-abyss); color: var(--v3-on-dark); }

/* ---- page header (title, introduction, meta) ------------------------------ */
.rs-head { padding: clamp(40px, 6vw, 72px) 0 clamp(24px, 3vw, 32px); }
.rs-head__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 760px; }
.rs-head h1 { font-size: var(--t-h1); line-height: var(--t-h1-lh); font-weight: 600; letter-spacing: -0.025em; color: var(--v3-on-dark); }
.rs-head .v3-page-lead { max-width: 40rem; font-size: 17px; line-height: 28px; }
.rs-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; line-height: 20px; color: var(--v3-on-dark-soft); }
.rs-meta time { color: var(--v3-on-dark-muted); }

/* ---- the one header image (16:9) ----------------------------------------- */
.rs-hero-img { margin: 0; }
.rs-hero-img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--brand-radius-lg); border: 1px solid var(--v3-line-dark); background: var(--pv-night); }
.rs-hero-img figcaption { margin-top: 10px; font-size: 12.5px; line-height: 18px; color: var(--v3-on-dark-soft); }
.rs-hero-img--article { max-width: 1040px; }

/* ---- landing: the foundation articles as editorial rows (no cards) -------- */
.rs-sec { padding: clamp(48px, 6vw, 80px) 0; }
.rs-sec + .rs-sec { border-top: 1px solid var(--v3-line-dark); }
.rs-sec__head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; max-width: 760px; }
.rs-sec__head h2 { font-size: var(--t-h2); line-height: var(--t-h2-lh); font-weight: 600; letter-spacing: -0.02em; color: var(--v3-on-dark); }
.rs-sec__head p { font-size: 15.5px; line-height: 25px; color: var(--v3-on-dark-muted); }
.rs-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--v3-line-dark); }
.rs-list li { border-bottom: 1px solid var(--v3-line-dark); }
.rs-list a { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 6px 20px; align-items: baseline; padding: 24px 4px; color: inherit; text-decoration: none; border-radius: var(--brand-radius-sm); }
.rs-list a:focus-visible { outline: 2px solid var(--brand-focus); outline-offset: 3px; }
.rs-list__num { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; color: var(--pv-cyan); }
.rs-list__title { display: block; font-size: var(--t-h3-lg); line-height: var(--t-h3-lg-lh); font-weight: 600; letter-spacing: -0.01em; color: var(--v3-on-dark); transition: color 200ms var(--v3-ease-out); }
.rs-list__dek { display: block; margin-top: 6px; max-width: 46rem; font-size: 15px; line-height: 24px; color: var(--v3-on-dark-muted); }
.rs-list__time { font-size: 13px; color: var(--v3-on-dark-soft); white-space: nowrap; }
.rs-list a:hover .rs-list__title { color: var(--pv-lavender); }

/* ---- landing: the bridge to Documentation -------------------------------- */
.rs-bridge { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.rs-bridge > div:first-child { max-width: 40rem; }
.rs-bridge__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.rs-bridge .rs-sec__head { margin-bottom: 0; }
.rs-note--page { max-width: 760px; margin-top: 0; }
.rs-sec--end { padding-top: 0; }
.rs-sec + .rs-sec--end { border-top: 0; }

/* ---- the article body: one comfortable measure --------------------------- */
.rs-body { max-width: 720px; padding: clamp(32px, 5vw, 56px) 0 clamp(48px, 6vw, 80px); }
.rs-body h2 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.015em; color: var(--v3-on-dark); scroll-margin-top: 96px; }
.rs-body > section + section { margin-top: 48px; }
.rs-body p, .rs-body li { font-size: 17px; line-height: 29px; color: var(--v3-on-dark-muted); }
.rs-body p { margin-top: 16px; }
.rs-body ul { margin: 16px 0 0; padding-left: 22px; }
.rs-body li { list-style: disc; margin-top: 8px; }
.rs-body li::marker { color: var(--pv-periwinkle); }
.rs-body strong { font-weight: 600; color: var(--v3-on-dark); }
.rs-body a { color: var(--pv-lavender); text-decoration: underline; text-decoration-color: rgba(var(--pv-line-rgb), 0.4); text-underline-offset: 3px; }
.rs-body a:hover { color: var(--v3-on-dark); }

/* a figure (an educational diagram) and a table, only where they help */
.rs-figure { margin: 28px 0 0; padding: 20px; border: 1px solid var(--v3-line-dark); border-radius: var(--brand-radius); background: var(--v3-glass); }
.rs-figure svg { display: block; width: 100%; height: auto; }
.rs-figure figcaption { margin-top: 12px; font-size: 13.5px; line-height: 21px; color: var(--v3-on-dark-soft); }
.rs-diagram text { font-family: var(--brand-font); fill: var(--v3-on-dark-muted); }
.rs-diagram .rs-d-bead { fill: var(--v3-panel-raised); stroke: var(--pv-periwinkle); stroke-width: 1.5; }
.rs-diagram .rs-d-num { fill: var(--v3-on-dark); font-weight: 700; }
.rs-diagram .rs-d-bond { stroke: var(--pv-lavender); stroke-width: 2; }
.rs-diagram .rs-d-mark { stroke: var(--pv-cyan); stroke-width: 1.5; fill: none; }
.rs-diagram .rs-d-key { fill: var(--pv-cyan); font-weight: 600; }

.rs-table-wrap { margin-top: 24px; overflow-x: auto; border: 1px solid var(--v3-line-dark); border-radius: var(--brand-radius); }
.rs-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14.5px; line-height: 22px; }
.rs-table caption { padding: 14px 16px 0; text-align: left; font-size: 13px; color: var(--v3-on-dark-soft); }
.rs-table th, .rs-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--v3-line-dark); color: var(--v3-on-dark-muted); }
.rs-table thead th { border-top: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pv-periwinkle); }
.rs-table tbody th { font-weight: 600; color: var(--v3-on-dark); }

/* the evidence / research-use note: one quiet aside, not a banner */
.rs-note { margin-top: 40px; padding: 18px 20px; border: 1px solid var(--v3-line-dark-strong); border-left: 3px solid var(--pv-periwinkle); border-radius: var(--brand-radius-sm); background: var(--v3-glass); }
.rs-note h2 { margin: 0; font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pv-lavender); }
.rs-note p { margin-top: 8px; font-size: 15px; line-height: 25px; }

/* related reading */
.rs-related { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--v3-line-dark); }
.rs-related ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.rs-related li { list-style: none; margin: 0; }
.rs-related a { font-size: 16px; font-weight: 600; text-decoration: none; }

@media (max-width: 640px) {
  .rs-list a { grid-template-columns: 1fr; gap: 4px; padding: 20px 2px; }
  .rs-list__time { order: 3; }
  .rs-body p, .rs-body li { font-size: 16.5px; line-height: 28px; }
  .rs-bridge__actions, .rs-bridge__actions .v3-btn { width: 100%; }
  .rs-figure { padding: 14px; }
}