/* Blog by country: home banners, country pages, post hero and side column (blog-2026-11-01).
   Brand colours only: Slate #1a2535, deep Slate #0c1622, Peach Gold #e2b273, gold ink #86561b, off-white #f5f3ee, white. */

.bc-page { background: #f5f3ee; color: #1a2535; padding: 0 0 72px; }
.bc-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.bc-page :focus-visible,
.bc-aside :focus-visible { outline: 2px solid #86561b; outline-offset: 2px; }
.bc-hero :focus-visible,
.bc-banner:focus-visible { outline-color: #f5f3ee; }
.bc-page .icon { width: 18px; height: 18px; vertical-align: 0; }

/* ---------- Intro (home) ---------- */
.bc-intro { padding: 56px 0 8px; max-width: 720px; display: flex; flex-direction: column; gap: 12px; }
.bc-eyebrow { font-family: 'DM Mono', ui-monospace, monospace; font-size: 0.6875rem; letter-spacing: .14em; text-transform: uppercase; color: #86561b; font-weight: 700; margin: 0; }
.bc-intro h1 { font-family: var(--font-display, Georgia, serif); font-size: 2.75rem; line-height: 1.1; color: #1a2535; margin: 0; }
.bc-lede { font-size: 1.0313rem; line-height: 1.55; color: rgba(26, 37, 53, .85); margin: 0; }

/* ---------- Photo + scrim (banners and heroes) ---------- */
.bc-banner,
.bc-hero { position: relative; overflow: hidden; color: #f5f3ee; background: linear-gradient(135deg, #1a2535 0%, #e2b273 160%); }
.bc-photo { position: absolute; inset: 0; display: block; }
.bc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bc-scrim { position: absolute; inset: 0; pointer-events: none; }
.bc-banner .bc-scrim { background: linear-gradient(180deg, rgba(12, 22, 34, .30) 0%, rgba(12, 22, 34, .66) 30%, rgba(12, 22, 34, .90) 100%); }
.bc-hero .bc-scrim { background: linear-gradient(180deg, rgba(12, 22, 34, .66) 0%, rgba(12, 22, 34, .74) 50%, rgba(12, 22, 34, .90) 100%); }

.bc-chip {
  display: inline-block;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: .08em;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid rgba(245, 243, 238, .6);
  color: #f5f3ee;
}
.bc-chip--ink { border-color: rgba(26, 37, 53, .45); color: rgba(26, 37, 53, .85); text-align: center; padding: 3px 8px; }
.bc-count { font-family: 'DM Mono', ui-monospace, monospace; font-size: 0.75rem; color: #f5f3ee; }

/* ---------- Home banners ---------- */
.bc-banners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 40px 0 48px; }
.bc-banner { display: flex; flex-direction: column; justify-content: flex-end; min-height: 264px; padding: 28px; border-radius: 20px; text-decoration: none; }
.bc-banner-body { position: relative; display: flex; flex-direction: column; gap: 8px; }
.bc-banner-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.bc-banner-name { font-family: var(--font-display, Georgia, serif); font-weight: 700; font-size: 2rem; line-height: 1.1; }
.bc-banner-latest { font-size: 0.875rem; color: #f5f3ee; }

/* ---------- Topic links (tabs / filters) ---------- */
.bc-topics { display: flex; gap: 8px; flex-wrap: wrap; }
.bc-tab {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 99px;
  border: 1px solid rgba(26, 37, 53, .28);
  color: rgba(26, 37, 53, .85);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.bc-tab:hover { border-color: #1a2535; color: #1a2535; }
.bc-tab[aria-current="true"] { background: #e2b273; border-color: #e2b273; color: #1a2535; font-weight: 700; }

/* ---------- Latest analysis + post rows ---------- */
.bc-latest-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.bc-latest-head h2 { font-family: var(--font-display, Georgia, serif); font-weight: 600; font-size: 1.625rem; margin: 0; color: #1a2535; }
.bc-rows { display: flex; flex-direction: column; border-top: 1px solid rgba(26, 37, 53, .14); }
.bc-row {
  display: grid;
  grid-template-columns: 44px 140px minmax(0, 1fr) 110px 20px;
  align-items: center;
  gap: 20px;
  min-height: 76px;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(26, 37, 53, .14);
  color: #1a2535;
  text-decoration: none;
}
.bc-rows--country .bc-row { grid-template-columns: 130px minmax(0, 1fr) 100px 20px; min-height: 88px; }
.bc-row-meta { display: contents; }
.bc-row:hover .bc-row-title { text-decoration: underline; }
.bc-topic { font-family: 'DM Mono', ui-monospace, monospace; font-size: 0.6875rem; letter-spacing: .1em; text-transform: uppercase; color: #86561b; font-weight: 700; }
.bc-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bc-row-title { font-family: var(--font-display, Georgia, serif); font-weight: 600; font-size: 1.125rem; line-height: 1.3; color: #1a2535; }
.bc-row-line { font-size: 0.8438rem; color: rgba(26, 37, 53, .78); line-height: 1.45; }
.bc-row-date { font-family: 'DM Mono', ui-monospace, monospace; font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(26, 37, 53, .78); }
.bc-row > .icon { color: #86561b; }
.bc-empty { padding: 32px 4px; color: rgba(26, 37, 53, .85); font-size: 0.9375rem; }

.bc-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 20px; }
.bc-pager a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid rgba(26, 37, 53, .28);
  color: #1a2535;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
}
.bc-pager-info { font-family: 'DM Mono', ui-monospace, monospace; font-size: 0.75rem; color: rgba(26, 37, 53, .78); }

/* ---------- Country hero and post hero ---------- */
.bc-hero { min-height: 340px; display: flex; flex-direction: column; justify-content: flex-end; }
.bc-hero--post { min-height: 300px; }
.bc-hero-inner { position: relative; padding-top: 40px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 12px; max-width: 1160px; }
.bc-hero--post .bc-hero-inner { padding-bottom: 36px; gap: 14px; }
.bc-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.8438rem; color: #f5f3ee; }
.bc-crumbs li + li::before { content: "/"; margin-right: 8px; }
.bc-crumbs a { color: #f5f3ee; text-decoration: underline; display: inline-flex; align-items: center; min-height: 44px; }
.bc-crumbs [aria-current="page"] { font-weight: 700; }
.bc-title { font-family: var(--font-display, Georgia, serif); font-weight: 700; font-size: 3rem; line-height: 1.05; color: #f5f3ee; margin: 0; }
.bc-hero--post .bc-title { font-size: 2.5rem; line-height: 1.12; max-width: 820px; }
.bc-summary { font-size: 1.0625rem; line-height: 1.5; color: #f5f3ee; margin: 0; max-width: 760px; }
.bc-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.bc-meta .bc-date { font-family: 'DM Mono', ui-monospace, monospace; font-size: 0.75rem; letter-spacing: .08em; text-transform: uppercase; color: #f5f3ee; }

/* ---------- Two-column layouts ---------- */
.bc-layout { display: flex; gap: 40px; align-items: flex-start; padding-top: 32px; }
.bc-layout > .bc-main { flex: 1; min-width: 0; }
.bc-country-tabs { padding-top: 32px; }
.bc-aside { width: 340px; flex: none; display: flex; flex-direction: column; gap: 20px; }
.bc-card { background: #ffffff; border: 1px solid rgba(26, 37, 53, .12); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.bc-card--dark { background: #1a2535; color: #f5f3ee; border-color: #1a2535; }
.bc-card-eyebrow { font-family: 'DM Mono', ui-monospace, monospace; font-size: 0.6875rem; letter-spacing: .14em; text-transform: uppercase; color: #86561b; font-weight: 700; }
.bc-card--dark .bc-card-eyebrow { color: #e2b273; }
.bc-card-title { font-family: var(--font-display, Georgia, serif); font-weight: 600; font-size: 1.25rem; line-height: 1.25; color: #1a2535; margin: 0; }
.bc-card--dark .bc-card-title { color: #f5f3ee; }
.bc-card p { font-size: 0.875rem; line-height: 1.5; color: rgba(26, 37, 53, .78); margin: 0; }
.bc-card--dark p { color: #f5f3ee; }
.bc-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 12px; background: #1a2535; color: #f5f3ee; font-size: 0.9063rem; font-weight: 700; text-decoration: none; }
.bc-btn--gold { background: #e2b273; color: #1a2535; }
.bc-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.875rem; font-weight: 700; color: #86561b; }
.bc-more { display: flex; flex-direction: column; gap: 3px; padding: 12px 0; border-top: 1px solid rgba(26, 37, 53, .12); color: #1a2535; text-decoration: none; min-height: 44px; }
.bc-more .bc-topic { font-size: 0.6563rem; }
.bc-more-title { font-family: var(--font-display, Georgia, serif); font-weight: 600; font-size: 1rem; line-height: 1.3; }
.bc-others { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 18px; border-radius: 12px; border: 1px solid rgba(26, 37, 53, .18); font-size: 0.875rem; font-weight: 600; }
.bc-others a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-family: 'DM Mono', ui-monospace, monospace; font-size: 0.75rem; color: #86561b; font-weight: 700; text-decoration: underline; }

/* ---------- Post page: article column keeps its own styles, aside sits beside it ---------- */
.bc-post-layout { display: flex; gap: 56px; align-items: flex-start; max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.bc-post-layout #post-body-wrap { flex: 1; min-width: 0; }
.bc-post-layout .post-article { margin: 0; padding-left: 0; padding-right: 0; }
.bc-post-layout .post-back-footer { margin: 0; padding-left: 0; padding-right: 0; }
.bc-post-layout .bc-aside { width: 360px; padding-top: 48px; }

.bc-credits { margin: 8px 0 0; text-align: center; font-size: 0.6875rem; color: rgba(245, 243, 238, .72); }
.bc-credits a { color: inherit; text-decoration: underline; }
.bc-404-link { display: inline-block; margin-top: 16px; color: #86561b; font-weight: 700; }

/* ---------- Phones ---------- */
@media (max-width: 899px) {
  .bc-layout, .bc-post-layout { flex-direction: column; gap: 32px; }
  .bc-aside, .bc-post-layout .bc-aside { width: 100%; padding-top: 0; }
}
@media (max-width: 699px) {
  .bc-wrap, .bc-post-layout { padding-left: 16px; padding-right: 16px; }
  .bc-intro { padding-top: 32px; }
  .bc-intro h1 { font-size: 2rem; }
  .bc-banners { grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 28px 0 36px; }
  .bc-banner { min-height: 232px; padding: 22px; }
  .bc-banner-name { font-size: 1.75rem; }
  .bc-hero { min-height: 300px; }
  .bc-hero--post { min-height: 280px; }
  .bc-title, .bc-hero--post .bc-title { font-size: 1.875rem; }
  .bc-topics { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
  .bc-latest-head { flex-direction: column; align-items: stretch; }
  .bc-row, .bc-rows--country .bc-row {
    grid-template-columns: minmax(0, 1fr) auto 20px;
    grid-template-areas: "main main arrow" "meta date date";
    row-gap: 8px;
    column-gap: 12px;
  }
  .bc-row .bc-row-main { grid-area: main; }
  .bc-row > .icon { grid-area: arrow; }
  .bc-row .bc-row-meta { grid-area: meta; display: flex; align-items: center; gap: 10px; }
  .bc-row .bc-row-date { grid-area: date; justify-self: end; }
}
}

/* ---------- Brief card on a post: one slot, three versions, none visible until the reader's state is known ---------- */
.bc-brief-slot { min-height: 330px; }
.bc-brief-slot.is-ready { min-height: 0; }
.bc-brief[hidden] { display: none; }
.bc-brief { padding: 24px; gap: 14px; }
.bc-brief-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.bc-brief-list li { position: relative; padding-left: 24px; font-size: .875rem; line-height: 1.45; color: #f5f3ee; }
.bc-brief-list li::before { content: ""; position: absolute; left: 0; top: .42em; width: 10px; height: 6px; border-left: 2px solid #e2b273; border-bottom: 2px solid #e2b273; transform: rotate(-45deg); }
.bc-brief .bc-btn { min-height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-weight: 700; text-align: center; }
.bc-brief-note { font-size: .78rem; line-height: 1.5; color: rgba(245, 243, 238, .78); text-align: center; }
.bc-brief-link { align-self: center; min-height: 44px; display: flex; align-items: center; font-size: .84rem; font-weight: 700; color: #e2b273; text-decoration: underline; text-underline-offset: 3px; }
.bc-brief :focus-visible { outline: 3px solid #e2b273; outline-offset: 2px; }