/* Blog surface — loaded only on /blog/* pages, on top of marketing.css.
 *
 * Every colour here is a token from marketing.css (:root / [data-theme]).
 * Nothing hardcoded, so both themes and the WCAG contrast guard keep working.
 *
 * Reading comfort is the brief, not density: long measure is capped at ~68ch,
 * line-height is generous, and headings get real space above them. Readers of
 * a dyslexia blog are, disproportionately, dyslexic readers.
 *
 * Signed: Kev + claude-opus-5, 2026-08-03, Confidence 0.8, Prior: Unknown
 */

/* ---- shared bits -------------------------------------------------------- */

.rr-blog-meta {
  font-size: .92rem;
  color: var(--ink-3);
  margin: 10px 0 0;
}

.rr-blog-crumbs {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: .9rem;
  color: var(--ink-3);
  margin-bottom: 18px;
}
.rr-blog-crumbs a { color: var(--ink-2); text-decoration: none; }
.rr-blog-crumbs a:hover { color: var(--blue); text-decoration: underline; }

.rr-blog-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.rr-blog-chip {
  display: inline-block;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-2);
  font-size: .9rem;
  text-decoration: none;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.rr-blog-chip:hover { border-color: var(--blue); color: var(--blue); }
.rr-blog-chip.is-current {
  background: var(--blue-wash);
  border-color: var(--blue);
  color: var(--blue-2);
}

.rr-blog-empty {
  text-align: center;
  padding: 48px 20px;
  border: 1px dashed var(--line);
  border-radius: var(--r);
}

/* ---- index -------------------------------------------------------------- */

.rr-blog-head { max-width: 760px; }

.rr-blog-feature {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.rr-blog-feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.rr-blog-feature-img { width: 100%; height: auto; display: block; object-fit: cover; }
.rr-blog-feature-body { padding: 28px 30px 32px; }

.rr-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.rr-blog-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.rr-blog-card:hover {
  transform: translateY(-3px);
  border-color: var(--blue);
  box-shadow: var(--shadow-lift);
}
.rr-blog-card-img { width: 100%; height: auto; display: block; object-fit: cover; }
.rr-blog-card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 6px; }
.rr-blog-card-title { font-family: var(--brand); font-size: 1.18rem; margin: 0; color: var(--ink); }
.rr-blog-card-dek { color: var(--ink-2); margin: 0; font-size: .98rem; line-height: 1.55; }

/* ---- article ------------------------------------------------------------ */

.rr-blog-article { max-width: 760px; }

.rr-blog-header { margin-bottom: 30px; }

.rr-blog-hero-img {
  width: 100%;
  height: auto;
  border-radius: var(--r);
  border: 1px solid var(--line);
  margin-bottom: 34px;
}

/* The disclosure. Deliberately visible — quiet, not hidden. */
.rr-blog-disclosure {
  border-left: 3px solid var(--blue);
  background: var(--blue-wash);
  border-radius: var(--r-sm);
  padding: 16px 20px;
  margin: 0 0 34px;
}
.rr-blog-disclosure p { margin: 0; color: var(--ink-2); font-size: .95rem; line-height: 1.6; }
.rr-blog-disclosure strong { color: var(--ink); }

.rr-blog-body {
  font-family: var(--body);
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--ink-2);
  max-width: 68ch;
}
.rr-blog-body > * + * { margin-top: 1.15em; }
.rr-blog-body h2 {
  font-family: var(--brand);
  font-size: 1.55rem;
  color: var(--ink);
  margin-top: 2em;
  line-height: 1.3;
  scroll-margin-top: 90px;
}
.rr-blog-body h3 {
  font-family: var(--brand);
  font-size: 1.22rem;
  color: var(--ink);
  margin-top: 1.7em;
  line-height: 1.35;
  scroll-margin-top: 90px;
}
.rr-blog-body a { color: var(--blue-2); text-underline-offset: 3px; }
.rr-blog-body ul, .rr-blog-body ol { padding-left: 1.35em; }
.rr-blog-body li + li { margin-top: .5em; }
.rr-blog-body blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--line);
  color: var(--ink);
  font-style: italic;
}
.rr-blog-body blockquote p { margin: 0; }
.rr-blog-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
  background: var(--paper-2);
  border-radius: 5px;
  padding: 2px 6px;
}
.rr-blog-body hr { border: 0; border-top: 1px solid var(--line); margin: 2.2em 0; }

/* ---- sources + author --------------------------------------------------- */

.rr-blog-sources { margin-top: 52px; }
.rr-blog-source-list { padding-left: 1.3em; color: var(--ink-2); font-size: .96rem; }
.rr-blog-source-list li { margin-top: .7em; line-height: 1.6; }
.rr-blog-source-list a { color: var(--blue-2); }
.rr-blog-source-pub,
.rr-blog-source-date,
.rr-blog-source-domain {
  display: inline-block;
  color: var(--ink-3);
  font-size: .88rem;
}
.rr-blog-source-pub::before,
.rr-blog-source-date::before,
.rr-blog-source-domain::before { content: " · "; }

.rr-blog-author { margin-top: 48px; }
.rr-blog-author-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  padding: 22px 24px;
  color: var(--ink-2);
  line-height: 1.6;
}
.rr-blog-author-card p { margin: 0 0 6px; }
.rr-blog-author-img { border-radius: 50%; flex: 0 0 auto; object-fit: cover; }
.rr-blog-author-name { font-family: var(--brand); color: var(--ink); font-size: 1.02rem; }
.rr-blog-author-creds { color: var(--ink-3); font-size: .9rem; }

@media (max-width: 640px) {
  .rr-blog-feature-body { padding: 22px 20px 24px; }
  .rr-blog-author-card { flex-direction: column; }
}

/* ---- pagination --------------------------------------------------------- */

.rr-blog-pager{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:40px;padding-top:26px;border-top:1px solid var(--line);
}
.rr-blog-pager-link{
  display:inline-flex;align-items:center;padding:9px 18px;
  border:1px solid var(--line);border-radius:999px;
  color:var(--ink-2);text-decoration:none;font-size:.94rem;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.rr-blog-pager-link:hover{border-color:var(--blue);color:var(--blue)}
.rr-blog-pager-count{color:var(--ink-3);font-size:.9rem}

/* ---- author page -------------------------------------------------------- */

.rr-blog-authorpage{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap}
.rr-blog-authorpage-img{
  border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:1px solid var(--line);
}
.rr-blog-authorpage .rr-hero-h1{margin:0 0 6px}
.rr-blog-authorpage .rr-kicker{margin:0 0 10px}
@media (max-width:640px){.rr-blog-authorpage{gap:18px}}

/* ---- card art ------------------------------------------------------------
 * Deterministic treatment for posts with no hero image (Post.card_variant).
 * All five variants are built from brand tokens, so the blog reads as one
 * publication rather than five — variety without leaving the palette.
 */

.rr-blog-art{
  position:relative;display:flex;align-items:center;justify-content:center;
  aspect-ratio:600/315;width:100%;overflow:hidden;
}
.rr-blog-art--feature{aspect-ratio:1200/420}
.rr-blog-art-mark{
  font-family:var(--brand);font-weight:700;font-size:3.2rem;line-height:1;
  color:#fff;opacity:.92;letter-spacing:-.02em;
}
.rr-blog-art--feature .rr-blog-art-mark{font-size:4.6rem}
.rr-blog-art-tag{
  position:absolute;left:14px;bottom:12px;
  font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.rr-blog-art--0{background:linear-gradient(135deg,#3498DB 0%,#1E3A5F 100%)}
.rr-blog-art--1{background:linear-gradient(135deg,#2A7CB8 0%,#20344B 100%)}
.rr-blog-art--2{background:linear-gradient(135deg,#57ACE6 0%,#2E4057 100%)}
.rr-blog-art--3{background:linear-gradient(135deg,#1E3A5F 0%,#3498DB 100%)}
.rr-blog-art--4{background:linear-gradient(135deg,#34A56A 0%,#1E3A5F 100%)}

/* ---- narration player ---------------------------------------------------- */

.rr-blog-listen{
  margin:0 0 30px;padding:16px 20px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--card);
}
.rr-blog-listen-label{
  display:flex;align-items:center;gap:9px;
  margin:0 0 12px;color:var(--ink);font-size:.95rem;font-weight:600;
}
.rr-blog-listen-label .ic{width:18px;height:18px;color:var(--blue)}
.rr-blog-listen audio{width:100%;height:38px}

/* ---- fenced code blocks (dev logs) --------------------------------------- */

.rr-blog-body pre{
  margin:1.5em 0;padding:16px 18px;
  background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--r-sm);overflow-x:auto;
  /* Wide code must scroll inside its own box, never the page. */
  max-width:100%;
}
.rr-blog-body pre code{
  display:block;background:none;padding:0;border-radius:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.86rem;line-height:1.62;color:var(--ink);
  white-space:pre;
}

/* ---- live data charts ----------------------------------------------------- */

.rr-blog-chart{
  margin:0 0 34px;padding:18px 16px 8px;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);color:var(--ink-2);
}
.rr-blog-chart .rr-chart{width:100%;height:auto;display:block}