/* =========================================================
   IdeaFloat — Blog (editorial)
   Matches the homepage redesign: ivory paper, Satoshi
   headlines, IBM Plex Mono meta, hairline rules.
   Reuses tokens; load after site-chrome.css.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&display=swap');

.rd-blog {
  background: #fbfaf6;
  color: #151515;
  -webkit-font-smoothing: antialiased;
}
.rd-blog * { box-sizing: border-box; }
.rd-blog-shell { width: 100%; max-width: 1480px; margin: 0 auto; padding: 0 56px; }

/* neutralise base.css span/section overrides */
.rd-blog section { display: block; align-items: initial; justify-content: initial; overflow: visible; }
.rd-blog h1 span, .rd-blog h2 span, .rd-blog h3 span { font-size: inherit; font-weight: inherit; line-height: inherit; }

/* ---------- Masthead ---------- */
.rd-blog-masthead { padding: 72px 0 40px; border-bottom: 1px solid rgba(21,21,21,0.12); }
.rd-blog-kicker { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #6b7280; display: block; margin-bottom: 14px; }
.rd-blog-masthead h1 {
  font-family: Satoshi, sans-serif; font-weight: 900;
  font-size: clamp(40px, 6vw, 88px); line-height: 1; letter-spacing: -.04em;
  margin: 0; color: #151515; max-width: 16ch;
}
.rd-blog-masthead .lead { font-family: Satoshi, sans-serif; font-weight: 500; font-size: 18px; line-height: 1.55; color: #4b5563; max-width: 560px; margin: 22px 0 0; }

/* ---------- Layout ---------- */
.rd-blog-layout { display: grid; grid-template-columns: 1fr 320px; gap: 64px; padding: 56px 0 100px; align-items: start; }

/* ---------- Post list (ruled rows) ---------- */
.rd-blog-list { display: flex; flex-direction: column; }
.rd-post {
  display: grid; grid-template-columns: 200px 1fr; gap: 28px;
  padding: 32px 0; border-bottom: 1px solid rgba(21,21,21,0.12);
  transition: background .3s ease;
}
.rd-post:first-child { padding-top: 0; }
.rd-post:hover { background: rgba(21,21,21,0.012); }
.rd-post-thumb { display: block; border-radius: 4px; overflow: hidden; aspect-ratio: 4/3; background: #ece9e1; }
.rd-post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.rd-post:hover .rd-post-thumb img { transform: scale(1.04); }
.rd-post-body { display: flex; flex-direction: column; }
.rd-post-meta { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .04em; color: #6b7280; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.rd-post-meta a { color: #6b7280; text-decoration: none; }
.rd-post-meta a:hover { color: #151515; }
.rd-post-cat { color: #3d61df !important; font-weight: 700; }
.rd-post h2 { font-family: Satoshi, sans-serif; font-weight: 900; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 10px; }
.rd-post h2 a { color: #151515; text-decoration: none; transition: color .2s; }
.rd-post h2 a:hover { color: #3d61df; }
.rd-post-excerpt { font-family: Satoshi, sans-serif; font-weight: 500; font-size: 15px; line-height: 1.6; color: #4b5563; margin: 0; }

/* ---------- Pagination ---------- */
.rd-blog-list .pagination, .rd-blog-list .nav-links { display: flex; gap: 8px; align-items: center; margin-top: 40px; flex-wrap: wrap; }
.rd-blog-list .page-numbers {
  font-family: Satoshi, sans-serif; font-weight: 700; font-size: 14px; color: #151515;
  min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(21,21,21,0.16); border-radius: 6px; text-decoration: none; transition: all .2s ease;
}
.rd-blog-list .page-numbers:hover { border-color: #3d61df; color: #3d61df; }
.rd-blog-list .page-numbers.current { background: #151515; color: #fbfaf6; border-color: #151515; }

/* ---------- Sidebar ---------- */
.rd-blog-aside { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 36px; }
.rd-aside-block h3, .rd-aside-block .h3 { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #6b7280; margin: 0 0 16px; font-weight: 500; }
.rd-aside-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.rd-aside-cats a, .rd-aside-cats .category {
  display: inline-flex; align-items: center; padding: 7px 14px;
  border: 1px solid rgba(21,21,21,0.16); border-radius: 999px;
  font-family: Satoshi, sans-serif; font-weight: 500; font-size: 13px; color: #1f2937; text-decoration: none;
  transition: all .2s ease;
}
.rd-aside-cats a:hover, .rd-aside-cats .category:hover { border-color: #3d61df; color: #3d61df; transform: translateY(-1px); }
.rd-aside-cats .current { background: #151515; color: #fbfaf6; border-color: #151515; }
.rd-aside-note p { font-family: Satoshi, sans-serif; font-weight: 500; font-size: 14px; line-height: 1.6; color: #4b5563; margin: 0; }
.rd-aside-note strong, .rd-aside-note .blue { color: #3d61df; font-weight: 900; display: block; font-size: 16px; margin-bottom: 8px; }

.rd-aside-search form { display: flex; flex-direction: column; gap: 10px; }
.rd-aside-search input[type="search"] {
  width: 100%; background: #fff; border: 1px solid rgba(21,21,21,0.16); border-radius: 6px;
  padding: 11px 13px; font-family: Satoshi, sans-serif; font-size: 14px; color: #151515;
}
.rd-aside-search button {
  background: #3d61df; color: #fbfaf6; border: 0; border-radius: 6px; padding: 11px 18px;
  font-family: Satoshi, sans-serif; font-weight: 700; font-size: 14px; cursor: pointer; transition: background .2s;
}
.rd-aside-search button:hover { background: #2d4bb8; }

@media (max-width: 980px) {
  .rd-blog-shell { padding: 0 24px; }
  .rd-blog-layout { grid-template-columns: 1fr; gap: 48px; }
  .rd-blog-aside { position: static; flex-direction: row; flex-wrap: wrap; gap: 32px; }
  .rd-aside-block { flex: 1 1 240px; }
}
@media (max-width: 600px) {
  .rd-blog-masthead { padding: 48px 0 28px; }
  .rd-post { grid-template-columns: 1fr; gap: 14px; }
  .rd-post-thumb { aspect-ratio: 16/9; max-height: 200px; }
}

/* =========================================================
   Single Article
   ========================================================= */
.rd-article { background: #fbfaf6; color: #151515; -webkit-font-smoothing: antialiased; }
.rd-article * { box-sizing: border-box; }
.rd-article section { display: block; align-items: initial; justify-content: initial; overflow: visible; }
.rd-article-shell { width: 100%; max-width: 1480px; margin: 0 auto; padding: 0 56px; }

.rd-article-header { padding: 72px 0 40px; border-bottom: 1px solid rgba(21,21,21,0.12); }
.rd-article-meta { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #6b7280; display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.rd-article-meta a { color: #3d61df; text-decoration: none; font-weight: 700; }
.rd-article-header h1 {
  font-family: Satoshi, sans-serif; font-weight: 900;
  font-size: clamp(34px, 5vw, 68px); line-height: 1.04; letter-spacing: -.035em;
  margin: 0; color: #151515; max-width: 20ch;
}
.rd-article-header h1 span { color: #151515 !important; }
.rd-article-byline { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.rd-article-byline img { width: 40px; height: 40px; border-radius: 50%; }
.rd-article-byline .who { font-family: Satoshi, sans-serif; font-weight: 700; font-size: 14px; color: #151515; }
.rd-article-byline .when { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #6b7280; }

.rd-article-layout { display: grid; grid-template-columns: 1fr 300px; gap: 64px; padding: 48px 0 100px; align-items: start; }
.rd-article-body { max-width: 720px; }
.rd-article-body p, .rd-article-body li { font-family: Satoshi, sans-serif; font-weight: 500; font-size: 18px; line-height: 1.7; color: #1f2937; }
.rd-article-body p { margin: 0 0 24px; }
.rd-article-body h2 { font-family: Satoshi, sans-serif; font-weight: 900; font-size: 32px; letter-spacing: -.02em; line-height: 1.15; margin: 48px 0 16px; color: #151515; }
.rd-article-body h3 { font-family: Satoshi, sans-serif; font-weight: 900; font-size: 24px; letter-spacing: -.02em; margin: 36px 0 12px; color: #151515; }
.rd-article-body a { color: #3d61df; text-decoration: underline; text-underline-offset: 2px; }
.rd-article-body img { max-width: 100%; height: auto; border-radius: 6px; margin: 24px 0; }
.rd-article-body ul, .rd-article-body ol { margin: 0 0 24px; padding-left: 24px; }
.rd-article-body li { margin-bottom: 8px; }
.rd-article-body blockquote {
  border-left: 3px solid #3d61df; padding: 4px 0 4px 24px; margin: 32px 0;
  font-family: Satoshi, sans-serif; font-weight: 500; font-size: 22px; line-height: 1.45; color: #151515; font-style: italic;
}
.rd-article-body .video-item { position: relative; aspect-ratio: 16/9; margin: 24px 0; border-radius: 6px; overflow: hidden; }
.rd-article-body .video-item iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.rd-article-aside { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 36px; }

/* Article TOC */
.rd-article-toc { display: flex; flex-direction: column; gap: 10px; }
.rd-article-toc a { font-family: Satoshi, sans-serif; font-weight: 500; font-size: 14px; line-height: 1.4; color: #4b5563; text-decoration: none; padding-left: 14px; border-left: 2px solid rgba(21,21,21,0.12); transition: all .2s ease; }
.rd-article-toc a:hover { color: #3d61df; border-left-color: #3d61df; }

/* Article foot / report */
.rd-article-foot { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(21,21,21,0.12); }
.rd-article-report { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 0; cursor: pointer; font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .04em; color: #6b7280; padding: 0; }
.rd-article-report:hover { color: #e81c72; }
.rd-article-report img { width: 14px; height: 14px; }

/* Subscribe block in sidebar */
.rd-aside-subscribe p { font-family: Satoshi, sans-serif; font-weight: 500; font-size: 14px; line-height: 1.6; color: #4b5563; margin: 0 0 14px; }
.rd-aside-subscribe input[type="email"], .rd-aside-subscribe input[type="text"] { width: 100%; background: #fff; border: 1px solid rgba(21,21,21,0.16); border-radius: 6px; padding: 11px 13px; font-family: Satoshi, sans-serif; font-size: 14px; margin-bottom: 10px; }
.rd-aside-subscribe input[type="submit"] { background: #3d61df; color: #fbfaf6; border: 0; border-radius: 6px; padding: 11px 18px; font-family: Satoshi, sans-serif; font-weight: 700; font-size: 14px; cursor: pointer; }
.rd-aside-subscribe input[type="submit"]:hover { background: #2d4bb8; }

/* Related articles */
.rd-article-related { padding: 72px 0 100px; border-top: 1px solid rgba(21,21,21,0.12); }
.rd-article-related h2 { font-family: Satoshi, sans-serif; font-weight: 900; font-size: clamp(28px, 3.5vw, 44px); letter-spacing: -.03em; margin: 0 0 40px; color: #151515; }
.rd-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.rd-related-card { display: flex; flex-direction: column; }
.rd-related-thumb { display: block; border-radius: 4px; overflow: hidden; aspect-ratio: 16/10; background: #ece9e1; margin-bottom: 16px; }
.rd-related-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.rd-related-card:hover .rd-related-thumb img { transform: scale(1.04); }
.rd-related-card h3 { font-family: Satoshi, sans-serif; font-weight: 900; font-size: 19px; line-height: 1.2; letter-spacing: -.02em; margin: 8px 0 0; }
.rd-related-card h3 a { color: #151515; text-decoration: none; transition: color .2s; }
.rd-related-card h3 a:hover { color: #3d61df; }
.rd-related-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 40px; font-family: Satoshi, sans-serif; font-weight: 700; font-size: 15px; color: #3d61df; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: gap .2s ease; }
.rd-related-more:hover { gap: 14px; }

@media (max-width: 980px) {
  .rd-article-shell { padding: 0 24px; }
  .rd-article-layout { grid-template-columns: 1fr; gap: 40px; }
  .rd-article-aside { position: static; flex-direction: row; flex-wrap: wrap; gap: 32px; }
  .rd-article-aside .rd-aside-block { flex: 1 1 240px; }
  .rd-related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .rd-article-header { padding: 48px 0 28px; }
  .rd-article-body p, .rd-article-body li { font-size: 17px; }
  .rd-related-grid { grid-template-columns: 1fr; }
}