.rbb {
  --ink: #132743;
  --muted: #435b77;
  --surface: #fff;
  --soft: #edf4ff;
  --line: #cbd9ec;
  --accent: #194fb0;
  box-sizing: border-box;
  max-width: 1260px;
  margin-inline: auto;
  padding: clamp(18px, 4vw, 52px);
  color: var(--ink);
}
[data-theme="dark"] .rbb, .dark .rbb {
  --ink: #edf4ff;
  --muted: #b8cce8;
  --surface: #13233b;
  --soft: #182f50;
  --line: #304b70;
  --accent: #a8caff;
}
.rbb :where(h1,h2,h3,p) { margin: 0; color: inherit; }
.rbb :where(a) { color: var(--accent); text-underline-offset: .22em; }
.rbb a:focus-visible { outline: 3px solid #4a8dff; outline-offset: 5px; border-radius: 4px; }
.rbb-intro, .rbb-grid { display: grid; gap: clamp(12px, 2vw, 22px); }
.rbb-intro { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); }
.rbb-hero, .rbb-channel, .rbb-card, .rbb-guide, .rbb-story {
  border-radius: clamp(18px, 2.5vw, 32px);
  padding: clamp(20px, 4vw, 42px);
  min-width: 0;
  overflow-wrap: anywhere;
}
.rbb-hero { background: linear-gradient(125deg, #102344 10%, #194a9a); color: #fff; }
.rbb h1 { font-size: clamp(32px, 5.4vw, 72px); line-height: 1.02; letter-spacing: -.045em; }
.rbb-hero h1 { max-width: 14ch; margin-block: 16px; }
.rbb-hero p { max-width: 50ch; color: #e6efff; }
.rbb-eyebrow { font-size: .77rem; font-weight: 750; letter-spacing: .12em; }
.rbb-hero .rbb-button {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 24px;
  padding-inline: 16px; background: #fff; color: #183a73; border-radius: 12px; font-weight: 750;
}
.rbb-channel, .rbb-guide { background: var(--soft); border: 1px solid var(--line); }
.rbb-channel { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.rbb-channel a { margin-top: auto; padding-block: 10px; }
.rbb h2 { font-size: clamp(21px, 3vw, 34px); line-height: 1.14; }
.rbb-badge { display: inline-block; padding: 5px 11px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); color: var(--accent); font-size: .78rem; font-weight: 750; }
.rbb-section-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-block: 38px 18px; }
.rbb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rbb-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 13px; padding: clamp(18px, 2.4vw, 28px); background: var(--surface); border: 1px solid var(--line); }
.rbb-card:first-child { grid-column: span 2; background: var(--soft); }
.rbb-card:focus-within, .rbb-card:hover { border-color: var(--accent); }
.rbb-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font-size: .87rem; }
.rbb :where(time,.rbb-card p,.rbb-channel p) { color: var(--muted); }
.rbb-card h3 { font-size: clamp(19px, 2.4vw, 30px); line-height: 1.2; }
.rbb-card h3 a { color: inherit; text-decoration: none; }
.rbb-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.rbb-read { margin-top: auto; padding-top: 5px; font-weight: 700; color: var(--accent); }
.rbb-guide { margin-top: 28px; }
.rbb-guide a, .rbb-pagination a { display: inline-flex; align-items: center; min-height: 44px; margin-right: 14px; }
.rbb-pagination { margin-top: 18px; }
.rbb-story { max-width: 900px; margin-inline: auto; background: var(--surface); border: 1px solid var(--line); }
.rbb-back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 16px; }
.rbb-story h1 { margin-block: 10px 18px; font-size: clamp(28px, 4.5vw, 55px); }
.rbb-copy { margin-top: 30px; max-width: 70ch; line-height: 1.72; }
.rbb-copy p { margin-block: 0 1em; }
.rbb-copy pre { overflow: auto; }
@media (max-width: 840px) { .rbb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .rbb-intro, .rbb-grid { grid-template-columns: minmax(0, 1fr); }
  .rbb-card:first-child { grid-column: auto; }
}
/* Keep blog hero contrast independent of theme heading and button rules. */
.rbb .rbb-hero h1 { color: #fff !important; }
.rbb .rbb-hero a.rbb-button,
.rbb .rbb-hero a.rbb-button:visited { color: #153568 !important; background: #fff !important; }
.rbb .rbb-hero a.rbb-button:hover,
.rbb .rbb-hero a.rbb-button:focus-visible { color: #102344 !important; background: #e2eeff !important; }
/* REDICO brand accents for the blog and article template. */
#content.rbb {
  --rbb-brand: #df241b;
  --rbb-link: #a52119;
  --rbb-tint: #fff2f0;
  --rbb-border: #ecc3bf;
}
html[data-rx-theme="dark"] #content.rbb {
  --ink: #f4f6fb;
  --muted: #c3cddd;
  --surface: #182131;
  --soft: #232d40;
  --line: #45516a;
  --rbb-link: #ffaaa1;
  --rbb-tint: #322329;
  --rbb-border: #705058;
}
#content.rbb .rbb-hero {
  border-top: 5px solid var(--rbb-brand);
  background: radial-gradient(ellipse at 100% 0%, #572535 0%, transparent 58%), linear-gradient(125deg, #102344, #16366b);
}
#content.rbb .rbb-hero .rbb-eyebrow { color: #ffc8c2 !important; }
#content.rbb .rbb-hero a.rbb-button {
  border: 2px solid var(--rbb-brand);
  background: #fff2f0 !important;
}
#content.rbb .rbb-hero a.rbb-button:is(:hover,:focus-visible) {
  background: #ffdcd6 !important;
}
#content.rbb :is(.rbb-channel,.rbb-card:first-child) {
  background: var(--rbb-tint);
  border-color: var(--rbb-border);
}
#content.rbb :is(.rbb-channel,.rbb-card,.rbb-guide,.rbb-story,.rbb-section-head) :is(h1,h2,h3) {
  color: var(--ink) !important;
}
#content.rbb :is(.rbb-badge,.rbb-read,.rbb-back,.rbb-story .rbb-eyebrow) {
  color: var(--rbb-link) !important;
}
#content.rbb .rbb-badge { background: var(--rbb-tint); border-color: var(--rbb-border); }
#content.rbb :is(.rbb-channel,.rbb-section-head,.rbb-guide,.rbb-pagination,.rbb-copy) a {
  color: var(--rbb-link) !important;
}
#content.rbb .rbb-card h3 a { color: inherit !important; }
#content.rbb .rbb-card:is(:hover,:focus-within) { border-color: var(--rbb-brand); }
#content.rbb a:focus-visible { outline-color: var(--rbb-brand); }
/* Match the REDICO site grid and theme palette. */
#content.rbb {
  --ink: #101319;
  --muted: #5e6570;
  --surface: #fff;
  --soft: #f5f6f8;
  --line: #e3e7ec;
  --rbb-link: #a52119;
  --rbb-tint: #fdece9;
  --rbb-border: #f2c9c4;
  --rbb-gap: clamp(12px, 1.5vw, 22px);
  --rbb-radius: clamp(16px, 1.6vw, 24px);
  width: min(1280px, calc(100% - 36px));
  max-width: none;
  padding: clamp(20px, 3.4vw, 44px) 0;
}
html[data-rx-theme="dark"] #content.rbb {
  --ink: #f5f7fb;
  --muted: #bac3cf;
  --surface: #191e27;
  --soft: #222935;
  --line: #353e4c;
  --rbb-link: #ffaaa1;
  --rbb-tint: #322527;
  --rbb-border: #624144;
}
#content.rbb :is(.rbb-intro,.rbb-grid) { gap: var(--rbb-gap); }
#content.rbb .rbb-intro { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
#content.rbb :is(.rbb-hero,.rbb-channel,.rbb-card,.rbb-guide,.rbb-story) {
  border-radius: var(--rbb-radius);
  box-sizing: border-box;
}
#content.rbb .rbb-hero {
  border: 1px solid var(--line);
  border-top: 4px solid var(--rbb-brand);
  background: var(--surface);
  color: var(--ink);
}
#content.rbb .rbb-hero h1 { max-width: 19ch; font-size: clamp(34px, 4.2vw, 60px); line-height: 1.04; }
#content.rbb .rbb-hero p { color: var(--muted); }
#content.rbb .rbb-hero .rbb-eyebrow { color: var(--rbb-link) !important; }
#content.rbb .rbb-hero a.rbb-button {
  background: var(--rbb-brand) !important;
  border-color: transparent;
  text-decoration: none;
}
#content.rbb .rbb-hero a.rbb-button:is(:hover,:focus-visible) { background: #b82119 !important; }
#content.rbb #rbb-feed { margin-inline: 0; padding-inline: 0; width: 100%; max-width: none; scroll-margin-top: 105px; }
#content.rbb .rbb-section-head { margin-block: clamp(22px, 3vw, 40px) var(--rbb-gap); }
#content.rbb .rbb-card { gap: 10px; }
#content.rbb .rbb-card h3 { font-size: clamp(18px, 1.65vw, 25px); }
#content.rbb .rbb-card p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
#content.rbb .rbb-guide { margin-top: var(--rbb-gap); }
@media (min-width: 841px) {
  #content.rbb .rbb-grid:has(> .rbb-card:nth-child(12):last-child) > .rbb-card:nth-child(9),
  #content.rbb .rbb-grid:has(> .rbb-card:nth-child(12):last-child) > .rbb-card:nth-child(11) { grid-column: span 2; }
}
@media (min-width: 601px) and (max-width: 840px) {
  #content.rbb .rbb-grid:has(> .rbb-card:nth-child(even):last-child) > .rbb-card:nth-child(2) { grid-column: span 2; }
}
@media (max-width: 600px) {
  #content.rbb .rbb-intro { grid-template-columns: minmax(0, 1fr); }
}