@charset "UTF-8";
/* ==========================================================================
   Bcall Magazine — editorial design system
   Single stylesheet. Logical properties only, so one file serves RTL + LTR.
   1 tokens · 2 reset · 3 typography · 4 layout · 5 header · 6 article patterns
   7 home · 8 archive · 9 single · 10 forms · 11 footer · 12 utils · 13 motion
   ========================================================================== */


/* Estedad.woff2 is a subset of Estedad.ttf; see scripts/subset-font.mjs. */
@font-face {
  font-family: 'Estedad-VF';
  src: url('../fonts/estedad/Estedad.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal italic;
  font-display: swap;
}


/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Brand — burgundy is for recognition, not for decoration. */
  --bc-burgundy: #591a26;
  --bc-burgundy-bright: #7e2535;
  /* the official logo fill */
  --bc-burgundy-soft: #f7eff1;
  --bc-ink: #131936;
  /* deep ink, from the Bcall identity */
  --bc-ink-soft: #2b3152;

  /* Paper + neutrals */
  --bc-paper: #f7f7f8;
  /* neutral ground — a screen, not a sheet of paper */
  --bc-paper-raised: #ffffff;
  --bc-paper-deep: #efeff1;
  --bc-text: #17171c;
  --bc-text-muted: #61616c;
  --bc-text-faint: #6b6b76;
  /* 4.6:1 on the ground — AA for small text */
  --bc-rule: #eaeaee;
  --bc-rule-strong: #d8d8de;
  /* decorative dividers only */
  --bc-border-control: #8e8e99;
  /* 3.1:1 on the ground — borders of real controls */

  /* Type */
  --bc-font: "Estedad-VF", "Estedad VF", "Vazirmatn", "Peyda", "IRANSans",
    "Segoe UI", Tahoma, system-ui, sans-serif;
  --bc-font-latin: "Estedad-VF", "Inter", "Segoe UI", system-ui, sans-serif;
  --bc-font-mono: "JetBrains Mono", "Cascadia Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid editorial scale. Persian needs more leading than Latin. */
  --bc-fs-kicker: 0.75rem;
  --bc-fs-meta: 0.8125rem;
  --bc-fs-small: 0.875rem;
  --bc-fs-body: 1rem;
  --bc-fs-lead: clamp(1rem, 0.96rem + 0.22vw, 1.0625rem);
  --bc-fs-h4: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --bc-fs-h3: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --bc-fs-h2: clamp(1.1875rem, 1.1rem + 0.45vw, 1.4375rem);
  --bc-fs-h1: clamp(1.5rem, 1.28rem + 1.1vw, 2.125rem);
  --bc-fs-display: clamp(1.4375rem, 1.25rem + 0.95vw, 1.9375rem);

  --bc-lh-head: 1.45;
  --bc-lh-body: 2;

  /* Rhythm — a 4px base, used everywhere. */
  --bc-s1: 0.25rem;
  --bc-s2: 0.5rem;
  --bc-s3: 0.75rem;
  --bc-s4: 1rem;
  --bc-s5: 1.5rem;
  --bc-s6: 2rem;
  --bc-s7: 3rem;
  --bc-s8: 4rem;
  --bc-s9: 6rem;

  --bc-gutter: clamp(1rem, 0.5rem + 2.2vw, 2.5rem);
  --bc-max: 1240px;
  --bc-max-text: 44rem;
  --bc-radius: 3px;
  --bc-radius-img: 4px;

  --bc-focus: 0 0 0 2px var(--bc-paper), 0 0 0 4px var(--bc-burgundy);
  --bc-ease: cubic-bezier(0.2, 0, 0.1, 1);
  --bc-header-h: 4rem;
}

/* The brand font is self-hosted and optional: if the file is absent the stack
   falls through to Vazirmatn / Tahoma without a failed request blocking render.
   See readme.md for how to add it. */
@font-face {
  font-family: "Estedad";
  src: local("Estedad"), local("Estedad-VF"),
    url("../fonts/Estedad-VF.woff2") format("woff2-variations"),
    url("../fonts/Estedad-VF.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0600-06FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF;
}

/* ---------- 2. Reset ----------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--bc-header-h) + 1.5rem);
}

body {
  margin: 0;
  background: var(--bc-paper);
  color: var(--bc-text);
  font-family: var(--bc-font);
  font-size: var(--bc-fs-body);
  line-height: var(--bc-lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 700;
  line-height: var(--bc-lh-head);
  color: var(--bc-ink);
}

p,
ul,
ol,
figure,
blockquote,
pre,
table {
  margin: 0;
}

img,
svg,
video,
iframe {
  max-width: 100%;
  display: block;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--bc-focus);
  border-radius: var(--bc-radius);
}

::selection {
  background: var(--bc-burgundy);
  color: #fff;
}

.bc-skip-link {
  position: absolute;
  inset-inline-start: var(--bc-s4);
  inset-block-start: -100%;
  z-index: 999;
  padding: var(--bc-s3) var(--bc-s5);
  background: var(--bc-ink);
  color: #fff;
  border-radius: var(--bc-radius);
  font-size: var(--bc-fs-small);
}

.bc-skip-link:focus {
  inset-block-start: var(--bc-s4);
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  position: fixed !important;
  inset-block-start: var(--bc-s4);
  inset-inline-start: var(--bc-s4);
  width: auto;
  height: auto;
  clip-path: none;
  padding: var(--bc-s3) var(--bc-s5);
  background: var(--bc-ink);
  color: #fff;
  z-index: 1000;
}

/* ---------- 4. Layout ---------------------------------------------------- */
.bc-wrap {
  inline-size: 100%;
  max-inline-size: var(--bc-max);
  margin-inline: auto;
  padding-inline: var(--bc-gutter);
}

.bc-site {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
}

.bc-main {
  flex: 1 0 auto;
}

.bc-section {
  margin-block: var(--bc-s8);
}

.bc-grid {
  display: grid;
  gap: var(--bc-s6) var(--bc-s5);
}

@media (min-width: 48em) {
  .bc-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 48em) and (max-width: 61.999em) {
  .bc-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62em) {
  .bc-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Ratio boxes keep CLS at zero even before the image decodes. */
.bc-figure {
  position: relative;
  overflow: hidden;
  background: var(--bc-paper-deep);
  border-radius: var(--bc-radius-img);
  margin: 0;
}

.bc-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgb(19 25 54 / 7%);
  border-radius: inherit;
  pointer-events: none;
}

.bc-figure img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--bc-ease);
}

.bc-figure--wide {
  aspect-ratio: 16 / 9;
}

.bc-figure--lead {
  aspect-ratio: 3 / 2;
}

.bc-figure--card {
  aspect-ratio: 5 / 3;
}

.bc-figure--square {
  aspect-ratio: 1 / 1;
}

/* No featured image: the brand mark, quietly. Never an empty hole. */
.bc-figure--empty {
  display: grid;
  place-items: center;
}

.bc-figure--empty svg {
  inline-size: 28%;
  max-inline-size: 90px;
  opacity: 0.16;
  fill: var(--bc-ink);
}

/* ---------- 5. Header ---------------------------------------------------- */
.bc-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bc-paper) 92%, transparent);
  backdrop-filter: saturate(1.1) blur(8px);
  border-block-end: 1px solid var(--bc-rule);
}

@supports not (backdrop-filter: blur(1px)) {
  .bc-header {
    background: var(--bc-paper);
  }
}

.bc-header__bar {
  display: flex;
  align-items: center;
  gap: var(--bc-s4);
  block-size: var(--bc-header-h);
}

.bc-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--bc-s3);
  flex: none;
}

.bc-brand__mark {
  color: var(--bc-burgundy-bright);
  inline-size: 2.25rem;
  flex: none;
}

.bc-brand__mark svg {
  inline-size: 100%;
  block-size: auto;
  fill: currentColor;
}

.bc-brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.bc-brand__name {
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--bc-ink);
  letter-spacing: -0.01em;
}

.bc-brand__tag {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--bc-text-faint);
  letter-spacing: 0.04em;
}

.bc-brand img {
  inline-size: auto;
  max-block-size: 2.5rem;
}

.bc-nav {
  display: none;
}

@media (min-width: 62em) {
  .bc-nav {
    display: block;
    margin-inline-start: var(--bc-s5);
  }
}

.bc-nav ul {
  display: flex;
  align-items: center;
  gap: var(--bc-s5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.bc-nav a {
  display: inline-block;
  font-size: var(--bc-fs-small);
  font-weight: 600;
  color: var(--bc-ink-soft);
  padding-block: var(--bc-s2);
  border-block-end: 2px solid transparent;
  transition: color 0.18s var(--bc-ease), border-color 0.18s var(--bc-ease);
}

.bc-nav a:hover {
  color: var(--bc-burgundy);
}

.bc-nav .current-menu-item>a,
.bc-nav .current-menu-parent>a,
.bc-nav .current-menu-ancestor>a,
.bc-nav a[aria-current="page"] {
  color: var(--bc-burgundy);
  border-block-end-color: var(--bc-burgundy);
}

.bc-header__end {
  display: flex;
  align-items: center;
  gap: var(--bc-s3);
  margin-inline-start: auto;
}

.bc-header__search {
  display: none;
}

@media (min-width: 62em) {
  .bc-header__search {
    display: block;
    inline-size: 13rem;
  }
}

.bc-headerlink {
  display: none;
  font-size: var(--bc-fs-small);
  font-weight: 600;
  color: #fff;
  background: var(--bc-burgundy);
  padding: 0.45rem 0.9rem;
  border-radius: var(--bc-radius);
  transition: background 0.18s var(--bc-ease);
}

.bc-headerlink:hover {
  background: var(--bc-burgundy-bright);
  color: #fff;
}

@media (min-width: 48em) {
  .bc-headerlink {
    display: inline-block;
  }
}

.bc-burger {
  display: inline-grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  background: none;
  border: 1px solid var(--bc-border-control);
  border-radius: var(--bc-radius);
  cursor: pointer;
  color: var(--bc-ink);
}

@media (min-width: 62em) {
  .bc-burger {
    display: none;
  }
}

.bc-burger svg {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.bc-burger__close {
  display: none;
}

.bc-burger[aria-expanded="true"] .bc-burger__open {
  display: none;
}

.bc-burger[aria-expanded="true"] .bc-burger__close {
  display: block;
}

.bc-mobilenav {
  border-block-start: 1px solid var(--bc-rule);
  background: var(--bc-paper);
  padding-block: var(--bc-s5) var(--bc-s6);
  max-block-size: calc(100vh - var(--bc-header-h));
  overflow-y: auto;
}

.bc-mobilenav[hidden] {
  display: none;
}

@media (min-width: 62em) {
  .bc-mobilenav {
    display: none !important;
  }
}

.bc-mobilenav ul {
  list-style: none;
  margin: 0 0 var(--bc-s5);
  padding: 0;
}

.bc-mobilenav li+li {
  border-block-start: 1px solid var(--bc-rule);
}

.bc-mobilenav a {
  display: block;
  padding-block: var(--bc-s3);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--bc-ink);
}

.bc-mobilenav a:hover {
  color: var(--bc-burgundy);
}

.bc-mobilenav .bc-headerlink {
  display: inline-block;
  margin-block-start: var(--bc-s4);
  color: #fff;
}

/* ---------- 9. Single article -------------------------------------------- */
.bc-article {
  padding-block-end: var(--bc-s8);
}

.bc-article__head {
  max-inline-size: var(--bc-max-text);
  margin-inline: auto;
  padding-block: var(--bc-s6) var(--bc-s5);
  display: flex;
  flex-direction: column;
  gap: var(--bc-s4);
}

.bc-article__title {
  font-size: var(--bc-fs-h1);
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.bc-article__standfirst {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.95;
  color: var(--bc-text-muted);
}

.bc-byline {
  display: flex;
  align-items: center;
  gap: var(--bc-s3);
  padding-block-start: var(--bc-s2);
}

.bc-byline img {
  border-radius: 999px;
  flex: none;
}

.bc-byline__name {
  font-size: var(--bc-fs-small);
  font-weight: 700;
  color: var(--bc-ink);
}

.bc-byline__name a:hover {
  color: var(--bc-burgundy);
}

.bc-hero {
  margin-block: var(--bc-s5) var(--bc-s6);
}

.bc-hero figcaption,
.bc-prose figcaption,
.bc-prose .wp-element-caption {
  font-size: var(--bc-fs-meta);
  color: var(--bc-text-faint);
  line-height: 1.8;
  margin-block-start: var(--bc-s2);
  padding-inline-start: var(--bc-s3);
  border-inline-start: 2px solid var(--bc-rule);
  text-align: start;
}

.bc-article__layout {
  display: grid;
  gap: var(--bc-s6);
}

@media (min-width: 68em) {

  /* Three columns, the outer two equal, so the reading column stays centred on
     the page and lines up with the article header while the contents list
     hangs in the margin beside it. */
  .bc-article__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--bc-max-text)) minmax(0, 1fr);
    column-gap: var(--bc-s6);
    justify-content: center;
  }

  .bc-article__aside {
    grid-column: 1;
  }

  .bc-article__body {
    grid-column: 2;
  }
}

.bc-toc {
  position: sticky;
  inset-block-start: calc(var(--bc-header-h) + var(--bc-s5));
  font-size: var(--bc-fs-small);
}

.bc-toc__title {
  font-size: var(--bc-fs-kicker);
  letter-spacing: 0.06em;
  color: var(--bc-text-faint);
  font-weight: 700;
  margin-block-end: var(--bc-s3);
}

.bc-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-inline-start: 1px solid var(--bc-rule);
}

.bc-toc li {
  line-height: 1.7;
}

.bc-toc a {
  display: block;
  padding: var(--bc-s2) var(--bc-s3);
  color: var(--bc-text-muted);
  border-inline-start: 2px solid transparent;
  margin-inline-start: -1px;
  transition: color 0.18s var(--bc-ease), border-color 0.18s var(--bc-ease);
}

.bc-toc a:hover {
  color: var(--bc-ink);
}

.bc-toc a.is-current {
  color: var(--bc-burgundy);
  border-inline-start-color: var(--bc-burgundy);
  font-weight: 600;
}

.bc-toc li.is-sub a {
  padding-inline-start: var(--bc-s5);
  font-size: var(--bc-fs-meta);
}

/* Collapsible TOC on narrow screens — native <details>, no JS. */
.bc-toc--inline {
  margin-block: var(--bc-s5);
  border: 1px solid var(--bc-rule);
  border-radius: var(--bc-radius);
  padding: var(--bc-s4);
}

.bc-toc--inline summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--bc-ink);
  font-size: var(--bc-fs-small);
}

.bc-toc--inline ol {
  margin-block-start: var(--bc-s3);
}

@media (min-width: 68em) {
  .bc-toc--inline {
    display: none;
  }
}

@media (max-width: 67.999em) {
  .bc-article__aside .bc-toc {
    display: none;
  }
}

/* The article body — the most important typography in the theme. */
.bc-prose {
  max-inline-size: var(--bc-max-text);
  font-size: var(--bc-fs-lead);
  line-height: 2.05;
  color: var(--bc-text);
}

.bc-prose>*+* {
  margin-block-start: var(--bc-s5);
}

.bc-prose p {
  text-align: start;
}

.bc-prose h2 {
  font-size: var(--bc-fs-h2);
  line-height: 1.6;
  margin-block-start: var(--bc-s7);
  letter-spacing: -0.015em;
}

.bc-prose h3 {
  font-size: var(--bc-fs-h3);
  line-height: 1.55;
  margin-block-start: var(--bc-s6);
}

.bc-prose h4 {
  font-size: var(--bc-fs-h4);
  margin-block-start: var(--bc-s5);
}

.bc-prose :is(h2, h3, h4):first-child {
  margin-block-start: 0;
}

.bc-prose a:not(.wp-block-button__link) {
  color: var(--bc-burgundy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: color-mix(in srgb, var(--bc-burgundy) 35%, transparent);
  transition: text-decoration-color 0.18s var(--bc-ease);
}

.bc-prose a:not(.wp-block-button__link):hover {
  text-decoration-color: currentColor;
}

.bc-prose :is(ul, ol) {
  padding-inline-start: var(--bc-s5);
}

.bc-prose li+li {
  margin-block-start: var(--bc-s2);
}

.bc-prose li::marker {
  color: var(--bc-burgundy);
}

.bc-prose blockquote {
  margin-block: var(--bc-s6);
  padding-inline-start: var(--bc-s5);
  border-inline-start: 3px solid var(--bc-burgundy);
  font-size: var(--bc-fs-h4);
  line-height: 1.9;
  color: var(--bc-ink);
  font-weight: 500;
}

.bc-prose blockquote cite,
.bc-prose .wp-block-quote__citation,
.bc-prose blockquote footer {
  display: block;
  margin-block-start: var(--bc-s3);
  font-size: var(--bc-fs-meta);
  font-style: normal;
  font-weight: 600;
  color: var(--bc-text-faint);
}

.bc-prose .wp-block-pullquote {
  border-block: 2px solid var(--bc-ink);
  padding-block: var(--bc-s5);
  text-align: center;
}

.bc-prose .wp-block-pullquote blockquote {
  border: 0;
  padding-inline: 0;
}

.bc-prose figure,
.bc-prose .wp-block-image {
  margin-block: var(--bc-s6);
}

.bc-prose img {
  border-radius: var(--bc-radius-img);
}

.bc-prose hr,
.bc-prose .wp-block-separator {
  border: 0;
  border-block-start: 1px solid var(--bc-rule);
  margin-block: var(--bc-s7);
  max-inline-size: none;
}

.bc-prose code,
.bc-prose kbd {
  font-family: var(--bc-font-mono);
  font-size: 0.875em;
  background: var(--bc-paper-deep);
  padding: 0.15em 0.4em;
  border-radius: var(--bc-radius);
  direction: ltr;
  unicode-bidi: embed;
}

.bc-prose pre,
.bc-prose .wp-block-code {
  font-family: var(--bc-font-mono);
  background: var(--bc-ink);
  color: #e8eaf4;
  padding: var(--bc-s5);
  border-radius: var(--bc-radius);
  overflow-x: auto;
  direction: ltr;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.8;
}

.bc-prose pre code {
  background: none;
  padding: 0;
  color: inherit;
}

/* Tables scroll instead of breaking the measure on mobile. */
.bc-prose .wp-block-table,
.bc-prose figure.wp-block-table {
  overflow-x: auto;
}

.bc-prose table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--bc-fs-small);
  line-height: 1.8;
  min-inline-size: 28rem;
}

.bc-prose :is(th, td) {
  padding: var(--bc-s3);
  border-block-end: 1px solid var(--bc-rule);
  text-align: start;
  vertical-align: top;
}

.bc-prose th {
  font-weight: 700;
  color: var(--bc-ink);
  background: var(--bc-paper-deep);
}

.bc-prose .wp-block-embed {
  margin-block: var(--bc-s6);
}

.bc-prose .wp-block-embed__wrapper iframe,
.bc-prose iframe[src*="youtube"],
.bc-prose iframe[src*="aparat"],
.bc-prose iframe[src*="vimeo"] {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  block-size: auto;
  border: 0;
  border-radius: var(--bc-radius-img);
}

.bc-prose .wp-block-button__link {
  background: var(--bc-burgundy);
  color: #fff;
  border-radius: var(--bc-radius);
  padding: 0.6rem 1.4rem;
  font-weight: 700;
  text-decoration: none;
}

.bc-prose .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--bc-burgundy);
  border: 1px solid currentColor;
}

.bc-prose .is-style-bc-notice {
  background: var(--bc-burgundy-soft);
  border-inline-start: 3px solid var(--bc-burgundy);
  padding: var(--bc-s5);
  border-radius: var(--bc-radius);
  font-size: var(--bc-fs-body);
}

.bc-prose .wp-block-gallery {
  margin-block: var(--bc-s6);
}

.bc-prose :is(.alignleft, .alignright) {
  max-inline-size: 50%;
}

.bc-prose .alignleft {
  float: left;
  margin: 0 0 var(--bc-s4) var(--bc-s5);
}

.bc-prose .alignright {
  float: right;
  margin: 0 var(--bc-s5) var(--bc-s4) 0;
}

.bc-prose .aligncenter {
  margin-inline: auto;
}

.bc-prose .alignwide {
  inline-size: min(100%, 62rem);
}

@media (max-width: 47.999em) {
  .bc-prose :is(.alignleft, .alignright) {
    float: none;
    max-inline-size: 100%;
    margin-inline: 0;
  }
}

/* Latin fragments inside Persian text keep their own rhythm. */
.bc-prose :lang(en) {
  font-family: var(--bc-font-latin);
}

/* Reading progress — a 2px rule driven by scroll-timeline where supported,
   by a passive listener otherwise. */
.bc-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  z-index: 60;
  pointer-events: none;
}

.bc-progress__bar {
  block-size: 100%;
  background: var(--bc-burgundy);
  transform-origin: 0 50%;
  transform: scaleX(var(--bc-progress, 0));
}

[dir="rtl"] .bc-progress__bar {
  transform-origin: 100% 50%;
}

@supports (animation-timeline: scroll()) {
  .bc-progress__bar {
    animation: bc-progress-grow linear both;
    animation-timeline: scroll(root block);
    transform: scaleX(0);
  }
}

@keyframes bc-progress-grow {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.bc-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bc-s3);
  margin-block-start: var(--bc-s6);
  padding-block-start: var(--bc-s4);
  border-block-start: 1px solid var(--bc-rule);
}

.bc-share__label {
  font-size: var(--bc-fs-meta);
  font-weight: 700;
  color: var(--bc-text-faint);
}

.bc-share a,
.bc-share button {
  display: inline-grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border: 1px solid var(--bc-border-control);
  border-radius: var(--bc-radius);
  background: none;
  color: var(--bc-ink-soft);
  cursor: pointer;
  transition: border-color 0.18s var(--bc-ease), color 0.18s var(--bc-ease);
}

.bc-share a:hover,
.bc-share button:hover {
  border-color: var(--bc-burgundy);
  color: var(--bc-burgundy);
}

.bc-share svg {
  inline-size: 1.0625rem;
  block-size: 1.0625rem;
  fill: currentColor;
}

.bc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bc-s2);
  margin-block-start: var(--bc-s5);
}

.bc-adjacent {
  display: grid;
  gap: var(--bc-s4);
  margin-block-start: var(--bc-s7);
}

@media (min-width: 48em) {
  .bc-adjacent {
    grid-template-columns: repeat(2, 1fr);
  }
}

.bc-adjacent__item {
  padding: var(--bc-s4);
  border: 1px solid var(--bc-rule);
  border-radius: var(--bc-radius);
  display: flex;
  flex-direction: column;
  gap: var(--bc-s2);
  transition: border-color 0.18s var(--bc-ease);
}

.bc-adjacent__item:hover {
  border-color: var(--bc-burgundy);
}

.bc-adjacent__dir {
  font-size: var(--bc-fs-meta);
  color: var(--bc-text-faint);
  font-weight: 600;
}

.bc-adjacent__title {
  font-size: var(--bc-fs-small);
  font-weight: 700;
  line-height: 1.8;
  color: var(--bc-ink);
}

.bc-adjacent__item--next {
  text-align: end;
}

.bc-related {
  margin-block-start: var(--bc-s8);
  padding-block-start: var(--bc-s6);
  border-block-start: 1px solid var(--bc-rule);
}

/* ---------- 10. Forms ---------------------------------------------------- */
.bc-search {
  display: flex;
  position: relative;
}

.bc-search input[type="search"] {
  inline-size: 100%;
  font: inherit;
  font-size: var(--bc-fs-small);
  padding: 0.5rem 0.75rem;
  padding-inline-end: 2.25rem;
  background: var(--bc-paper-raised);
  border: 1px solid var(--bc-border-control);
  border-radius: var(--bc-radius);
  color: var(--bc-text);
  min-inline-size: 0;
  transition: border-color 0.18s var(--bc-ease);
}

.bc-search input[type="search"]::placeholder {
  color: var(--bc-text-faint);
}

.bc-search input[type="search"]:focus {
  border-color: var(--bc-burgundy);
}

.bc-search__submit {
  position: absolute;
  inset-inline-end: 0;
  inset-block: 0;
  inline-size: 2.25rem;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--bc-text-muted);
}

.bc-search__submit:hover {
  color: var(--bc-burgundy);
}

.bc-search__submit svg {
  inline-size: 1rem;
  block-size: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.bc-search--lg input[type="search"] {
  font-size: var(--bc-fs-lead);
  padding: 0.85rem 1rem;
  padding-inline-end: 3rem;
}

.bc-search--lg .bc-search__submit {
  inline-size: 3rem;
}

/* ---------- 11. Footer --------------------------------------------------- */
.bc-footer {
  position: relative;
  overflow: hidden;
  margin-block-start: var(--bc-s9);
  background: var(--bc-ink);
  color: rgb(255 255 255 / 80%);
  padding-block: var(--bc-s7) var(--bc-s5);
}

.bc-footer a:hover {
  color: #fff;
}

/* The drawn gesture, barely there, anchored to the outer corner. */
.bc-footer__ink {
  position: absolute;
  inset-block-start: -10%;
  inset-inline-start: -4%;
  inline-size: min(38%, 340px);
  color: #fff;
  opacity: 0.07;
  pointer-events: none;
}

@media (max-width: 47.999em) {
  .bc-footer__ink {
    display: none;
  }
}

.bc-footer>.bc-wrap {
  position: relative;
  z-index: 1;
}

/* Storey one: the brand, and the one action the magazine supports. */
.bc-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bc-s5);
  padding-block-end: var(--bc-s6);
  border-block-end: 1px solid rgb(255 255 255 / 12%);
}

.bc-footer__brand {
  max-inline-size: 46ch;
}

.bc-footer .bc-brand__name {
  color: #fff;
}

.bc-footer .bc-brand__tag {
  color: rgb(255 255 255 / 55%);
}

.bc-footer .bc-brand__mark {
  color: #fff;
}

.bc-footer__about {
  margin-block-start: var(--bc-s4);
  font-size: var(--bc-fs-small);
  line-height: 1.95;
  color: rgb(255 255 255 / 62%);
}

.bc-footer__action {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--bc-s3);
}

.bc-footer__prompt {
  font-size: var(--bc-fs-h4);
  font-weight: 700;
  color: #fff;
}

/* Storey two: the columns. */
.bc-footer__grid {
  display: grid;
  gap: var(--bc-s6);
  padding-block-start: var(--bc-s6);
}

@media (min-width: 40em) {
  .bc-footer__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.bc-footer__title {
  font-size: var(--bc-fs-meta);
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #fff;
  margin-block-end: var(--bc-s4);
}

.bc-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bc-s3);
  font-size: var(--bc-fs-small);
}

.bc-footer__grid a {
  display: inline-block;
  color: rgb(255 255 255 / 74%);
  transition: color 0.18s var(--bc-ease-out), transform 0.18s var(--bc-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .bc-footer__grid nav a:hover {
    transform: translateX(var(--bc-arrow-shift));
  }
}

.bc-footer__social {
  flex-direction: row;
  gap: var(--bc-s3);
}

.bc-footer__social a {
  display: inline-grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 999px;
  transition: border-color 0.18s var(--bc-ease-out), background 0.18s var(--bc-ease-out);
}

.bc-footer__social a:hover {
  border-color: #fff;
  background: rgb(255 255 255 / 10%);
  transform: none;
}

.bc-footer__social svg {
  inline-size: 1.0625rem;
  block-size: 1.0625rem;
  fill: currentColor;
}

.bc-footer__feed {
  margin-block-start: var(--bc-s4);
  font-size: var(--bc-fs-small);
}

.bc-footer__bottom {
  margin-block-start: var(--bc-s7);
  padding-block-start: var(--bc-s4);
  border-block-start: 1px solid rgb(255 255 255 / 12%);
  display: flex;
  flex-wrap: wrap;
  gap: var(--bc-s3) var(--bc-s5);
  align-items: center;
  justify-content: space-between;
  font-size: var(--bc-fs-meta);
  color: rgb(255 255 255 / 62%);
}

.bc-footer__top-link {
  color: rgb(255 255 255 / 74%);
}

/* ---------- 12. Utilities ------------------------------------------------ */
.bc-stack {
  display: flex;
  flex-direction: column;
}

.bc-stack-2 {
  gap: var(--bc-s2);
}

.bc-stack-3 {
  gap: var(--bc-s3);
}

.bc-stack-4 {
  gap: var(--bc-s4);
}

.bc-stack-5 {
  gap: var(--bc-s5);
}

.bc-hairline {
  border: 0;
  border-block-start: 1px solid var(--bc-rule);
  margin-block: var(--bc-s7);
}

.bc-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bc-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- 13. Motion + print ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .bc-card:hover .bc-figure img {
    transform: none;
  }

  .bc-progress {
    display: none;
  }
}

@media print {

  .bc-header,
  .bc-footer,
  .bc-toc,
  .bc-share,
  .bc-related,
  .bc-progress,
  .bc-adjacent,
  .bc-skip-link {
    display: none !important;
  }

  body {
    background: #fff;
    font-size: 12pt;
  }

  .bc-prose a::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }
}

.bc-section--flush {
  margin-block-start: 0;
}

.bc-prose--centered {
  margin-inline: auto;
}

.bc-search-wide {
  max-inline-size: 32rem;
  margin-block-start: var(--bc-s5);
}

.bc-search-wide .bc-search input[type="search"] {
  font-size: var(--bc-fs-lead);
  padding: 0.8rem 1rem;
  padding-inline-end: 3rem;
}

.bc-search-wide .bc-search__submit {
  inline-size: 3rem;
}

.bc-article__back {
  margin-block-start: var(--bc-s5);
}

.bc-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Mixed Persian/Latin metadata keeps each run in its own direction. */
.bc-meta>*,
.bc-meta time {
  unicode-bidi: isolate;
}

.bc-crumbs li,
.bc-cat__count {
  unicode-bidi: isolate;
}

/* ==========================================================================
   14. The cover layer
   The homepage composition, and the card refresh that follows from it.
   Loaded with the rest of the stylesheet; nothing here is page-specific CSS
   that the browser has to fetch twice.
   ========================================================================== */

:root {
  /* Two warm grounds that are not paper: the blush the hero sits on, and the
     sand that breaks the page further down. Both are desaturated relatives of
     the brand burgundy, so they never read as a second brand colour. */
  --bc-blush: #f4e3e6;
  --bc-blush-deep: #ecd4d9;
  --bc-sand: #f0eae3;

  --bc-r-panel: 28px;
  --bc-r-card: 16px;
  --bc-r-frame: 18px;
  --bc-r-pill: 999px;

  /* Built-in easings are too weak for UI; these are the two the theme uses. */
  --bc-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --bc-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --bc-arrow-shift: -4px;
  /* the reading direction's "forward" */
}

[dir="ltr"] {
  --bc-arrow-shift: 4px;
}


/* ==========================================================================
   14. Components — a blog, not a magazine
   No hairline rules above headings, no kicker dashes, no mosaics, no bands.
   Surfaces, generous spacing, and one accent. Every list is a true grid, so
   items align because of how they are built, not because of how they are sized.
   ========================================================================== */

:root {
  --bc-r-sm: 10px;
  --bc-r-md: 14px;
  --bc-r-lg: 20px;
  --bc-r-pill: 999px;

  --bc-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --bc-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --bc-arrow-shift: -4px;
  /* the reading direction's "forward" */

  /* One elevation, used only on hover. Nothing floats at rest. */
  --bc-lift: 0 6px 20px -8px rgb(23 23 28 / 16%);
}

[dir="ltr"] {
  --bc-arrow-shift: 4px;
}

/* ---------- 14.1 Small type ---------------------------------------------- */
/* The topic tag. A quiet pill, not an eyebrow with a rule through it. */
.bc-tag {
  display: inline-block;
  font-size: var(--bc-fs-meta);
  font-weight: 600;
  line-height: 1.7;
  color: var(--bc-burgundy);
  transition: color 0.18s var(--bc-ease-out);
}

.bc-tag:hover {
  color: var(--bc-burgundy-bright);
}

.bc-tag--solid {
  padding: 0.25rem 0.7rem;
  border-radius: var(--bc-r-pill);
  background: var(--bc-burgundy-soft);
}

.bc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bc-s2) var(--bc-s3);
  font-size: var(--bc-fs-meta);
  line-height: 1.7;
  color: var(--bc-text-faint);
}

.bc-meta>*,
.bc-meta time {
  unicode-bidi: isolate;
}

.bc-meta time {
  font-variant-numeric: tabular-nums;
}

.bc-meta__sep {
  color: var(--bc-rule-strong);
}

.bc-excerpt {
  color: var(--bc-text-muted);
  font-size: var(--bc-fs-small);
  line-height: 1.95;
}

/* ---------- 14.2 Section heading ----------------------------------------- */
.bc-section {
  margin-block: var(--bc-s8);
}

.bc-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bc-s4);
  margin-block-end: var(--bc-s5);
}

.bc-section__title {
  font-size: var(--bc-fs-h2);
  letter-spacing: -0.015em;
}

.bc-section__more {
  font-size: var(--bc-fs-small);
  font-weight: 600;
  color: var(--bc-burgundy);
  white-space: nowrap;
}

.bc-section__more:hover {
  color: var(--bc-burgundy-bright);
}

/* ---------- 14.3 Blog header --------------------------------------------- */
.bc-blog-head {
  padding-block: var(--bc-s7) var(--bc-s5);
}

.bc-blog-head__title {
  font-size: clamp(1.625rem, 1.35rem + 1.3vw, 2.25rem);
  letter-spacing: -0.03em;
  line-height: 1.35;
}

.bc-blog-head__line {
  margin-block-start: var(--bc-s3);
  font-size: var(--bc-fs-lead);
  color: var(--bc-text-muted);
  max-inline-size: 54ch;
  line-height: 1.85;
}

/* Topic filters. Real links that happen to look like filters. */
.bc-filters {
  display: flex;
  gap: var(--bc-s2);
  list-style: none;
  margin: var(--bc-s5) 0 0;
  padding: 0 0 var(--bc-s2);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.bc-filters::-webkit-scrollbar {
  display: none;
}

.bc-filters>li {
  flex: none;
  scroll-snap-align: start;
}

.bc-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--bc-s2);
  padding: 0.45rem 0.95rem;
  border-radius: var(--bc-r-pill);
  background: var(--bc-paper-raised);
  border: 1px solid var(--bc-rule);
  font-size: var(--bc-fs-small);
  font-weight: 600;
  color: var(--bc-text);
  white-space: nowrap;
  transition: border-color 0.18s var(--bc-ease-out), background 0.18s var(--bc-ease-out), color 0.18s var(--bc-ease-out);
}

.bc-filter svg {
  inline-size: 1rem;
  block-size: 1rem;
  color: var(--bc-burgundy);
}

.bc-filter:hover {
  border-color: var(--bc-border-control);
}

.bc-filter[aria-current="page"],
.bc-filter--active {
  background: var(--bc-ink);
  border-color: var(--bc-ink);
  color: #fff;
}

.bc-filter[aria-current="page"] svg,
.bc-filter--active svg {
  color: #fff;
}

/* ---------- 14.4 The card ------------------------------------------------ */
/*
 * One card. It stretches to its row, pins its meta to the bottom, and clamps
 * its title and excerpt — so a grid of them lines up on every edge regardless
 * of how long the Persian titles run.
 */
.bc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  block-size: 100%;
  padding: var(--bc-s3);
  background: var(--bc-paper-raised);
  border: 1px solid var(--bc-rule);
  border-radius: var(--bc-r-md);
  transition: border-color 0.2s var(--bc-ease-out), box-shadow 0.2s var(--bc-ease-out), transform 0.2s var(--bc-ease-out);
}

.bc-card__media {
  margin-block-end: var(--bc-s4);
}

.bc-card__media .bc-figure {
  border-radius: var(--bc-r-sm);
}

.bc-card__body {
  display: flex;
  flex-direction: column;
  align-items: start;
  /* a column flex parent would otherwise stretch the tag */
  gap: var(--bc-s2);
  flex: 1 0 auto;
  padding-inline: var(--bc-s2);
}

.bc-card__body> :where(h2, h3, p) {
  align-self: stretch;
}

.bc-card__title {
  font-size: var(--bc-fs-h3);
  line-height: 1.75;
  letter-spacing: -0.005em;
}

.bc-card__title a {
  color: inherit;
  transition: color 0.18s var(--bc-ease-out);
}

.bc-card__title a:hover {
  color: var(--bc-burgundy);
}

/* The whole card is the target; the title link spans it. Nested links stay
   out of the way, so there is one tab stop per article. */
.bc-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.bc-card .bc-excerpt {
  margin-block-start: var(--bc-s1);
}

.bc-card__foot {
  margin-block-start: auto;
  padding-block-start: var(--bc-s4);
  padding-inline: var(--bc-s2);
}

@media (hover: hover) and (pointer: fine) {
  .bc-card:hover {
    border-color: transparent;
    box-shadow: var(--bc-lift);
    transform: translateY(-2px);
  }

  .bc-card:hover .bc-figure img {
    transform: scale(1.03);
  }
}

.bc-card:focus-within {
  border-color: var(--bc-burgundy);
}

/* Byline: the signature of a blog rather than a masthead. */
.bc-byline-sm {
  display: flex;
  align-items: center;
  gap: var(--bc-s2);
  font-size: var(--bc-fs-meta);
  color: var(--bc-text-faint);
}

.bc-byline-sm img {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: 999px;
  flex: none;
}

.bc-byline-sm__name {
  font-weight: 600;
  color: var(--bc-text);
}

/* ---------- 14.5 Feed grid ----------------------------------------------- */
.bc-feed {
  display: grid;
  gap: var(--bc-s5);
  align-items: stretch;
}

@media (min-width: 46em) {
  .bc-feed {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 68em) {
  .bc-feed {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- 14.6 Featured ------------------------------------------------ */
/* The same card laid on its side. The text column is centred against the
   image, so the two sides stay level whatever the headline length. */
.bc-featured {
  padding: var(--bc-s3);
}

.bc-featured .bc-card__inner {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

@media (min-width: 52em) {
  .bc-featured {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--bc-s6);
    align-items: center;
  }

  .bc-featured .bc-card__media {
    margin-block-end: 0;
  }

  .bc-featured .bc-card__inner {
    padding-inline-end: var(--bc-s4);
  }

  .bc-featured .bc-card__body {
    flex: 0 1 auto;
  }

  .bc-featured .bc-card__foot {
    margin-block-start: var(--bc-s5);
    padding-block-start: 0;
  }
}

.bc-featured .bc-figure {
  border-radius: var(--bc-r-sm);
}

.bc-featured .bc-card__title {
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
  line-height: 1.55;
  letter-spacing: -0.02em;
}

.bc-featured .bc-excerpt {
  font-size: var(--bc-fs-body);
}

/* The stretched title link covers the card, so anything else that should stay
   clickable has to sit above it. */
.bc-card .bc-tag,
.bc-card .bc-byline-sm a,
.bc-row .bc-tag {
  position: relative;
  z-index: 1;
}

/* ---------- 14.7 Compact list -------------------------------------------- */
.bc-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--bc-s4);
}

@media (min-width: 52em) {
  .bc-rows {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--bc-s6);
  }
}

.bc-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 5.5rem;
  gap: var(--bc-s4);
  align-items: center;
  padding: var(--bc-s3);
  border-radius: var(--bc-r-md);
  transition: background 0.18s var(--bc-ease-out);
}

[dir="ltr"] .bc-row {
  grid-template-columns: 5.5rem 1fr;
}

[dir="ltr"] .bc-row .bc-row__body {
  order: 2;
}

.bc-row__body {
  display: flex;
  flex-direction: column;
  gap: var(--bc-s2);
  min-inline-size: 0;
}

.bc-row__title {
  font-size: var(--bc-fs-h4);
  line-height: 1.75;
}

.bc-row__title a {
  color: inherit;
  transition: color 0.18s var(--bc-ease-out);
}

.bc-row__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.bc-row .bc-figure {
  border-radius: var(--bc-r-sm);
}

@media (hover: hover) and (pointer: fine) {
  .bc-row:hover {
    background: var(--bc-paper-raised);
  }

  .bc-row:hover .bc-row__title a {
    color: var(--bc-burgundy);
  }
}

/* ---------- 14.8 Pill ---------------------------------------------------- */
.bc-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--bc-s2);
  padding: 0.7rem 1.35rem;
  border-radius: var(--bc-r-pill);
  background: var(--bc-ink);
  color: #fff;
  font-size: var(--bc-fs-small);
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s var(--bc-ease-out);
}

.bc-pill:hover {
  background: var(--bc-burgundy);
  color: #fff;
}

.bc-pill--light {
  background: var(--bc-paper-raised);
  color: var(--bc-ink);
}

.bc-pill--light:hover {
  background: var(--bc-burgundy-soft);
  color: var(--bc-ink);
}

.bc-pill--ghost {
  background: transparent;
  border-color: var(--bc-border-control);
  color: var(--bc-text);
}

.bc-pill--ghost:hover {
  background: var(--bc-paper-raised);
  color: var(--bc-text);
}

.bc-pill__arrow {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  flex: none;
  transition: transform 0.2s var(--bc-ease-out);
}

[dir="ltr"] .bc-pill__arrow {
  rotate: 180deg;
}

@media (hover: hover) and (pointer: fine) {
  .bc-pill:hover .bc-pill__arrow {
    transform: translateX(var(--bc-arrow-shift));
  }
}

/* ---------- 14.9 Page heads (archive, search, 404) ----------------------- */
.bc-pagehead {
  padding-block: var(--bc-s7) var(--bc-s5);
}

.bc-pagehead__title {
  font-size: var(--bc-fs-h1);
  letter-spacing: -0.025em;
  line-height: 1.35;
  margin-block-start: var(--bc-s3);
}

.bc-pagehead__desc {
  margin-block-start: var(--bc-s3);
  color: var(--bc-text-muted);
  font-size: var(--bc-fs-lead);
  line-height: 1.85;
  max-inline-size: 56ch;
}

.bc-pagehead__count {
  margin-block-start: var(--bc-s3);
  font-size: var(--bc-fs-meta);
  color: var(--bc-text-faint);
  font-variant-numeric: tabular-nums;
}

.bc-crumbs {
  font-size: var(--bc-fs-meta);
  color: var(--bc-text-faint);
  line-height: 1.9;
}

.bc-crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bc-s2);
  margin: 0;
  padding: 0;
}

.bc-crumbs li {
  unicode-bidi: isolate;
}

.bc-crumbs a:hover {
  color: var(--bc-burgundy);
}

.bc-crumbs [aria-current="page"] {
  color: var(--bc-text-muted);
}

.bc-crumbs__sep {
  color: var(--bc-rule-strong);
}

.bc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bc-s2);
  margin-block-start: var(--bc-s5);
}

.bc-chip {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--bc-border-control);
  border-radius: var(--bc-r-pill);
  font-size: var(--bc-fs-meta);
  font-weight: 600;
  color: var(--bc-text);
  transition: border-color 0.18s var(--bc-ease-out), color 0.18s var(--bc-ease-out);
}

.bc-chip:hover {
  border-color: var(--bc-burgundy);
  color: var(--bc-burgundy);
}

.bc-chip[aria-current="page"] {
  background: var(--bc-ink);
  border-color: var(--bc-ink);
  color: #fff;
}

/* ---------- 14.10 Pagination + empty ------------------------------------- */
.bc-pagination {
  margin-block: var(--bc-s8);
}

.bc-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--bc-s2);
}

.bc-pagination .page-numbers {
  display: inline-grid;
  place-items: center;
  min-inline-size: 2.5rem;
  block-size: 2.5rem;
  padding-inline: var(--bc-s3);
  border: 1px solid var(--bc-rule);
  border-radius: var(--bc-r-sm);
  background: var(--bc-paper-raised);
  font-size: var(--bc-fs-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--bc-text);
  transition: border-color 0.18s var(--bc-ease-out), color 0.18s var(--bc-ease-out);
}

.bc-pagination a.page-numbers:hover {
  border-color: var(--bc-burgundy);
  color: var(--bc-burgundy);
}

.bc-pagination .page-numbers.current {
  background: var(--bc-ink);
  border-color: var(--bc-ink);
  color: #fff;
}

.bc-pagination .page-numbers.dots {
  border-color: transparent;
  background: none;
}

.bc-empty {
  padding-block: var(--bc-s8);
  max-inline-size: var(--bc-max-text);
}

.bc-empty h2 {
  font-size: var(--bc-fs-h2);
  margin-block-end: var(--bc-s3);
}

.bc-empty p {
  color: var(--bc-text-muted);
  margin-block-end: var(--bc-s5);
}

.bc-404 {
  padding-block: var(--bc-s8) var(--bc-s9);
}

.bc-404__code {
  font-size: clamp(3.5rem, 2rem + 9vw, 7rem);
  font-weight: 800;
  line-height: 1;
  color: var(--bc-burgundy);
  opacity: 0.1;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}

/* ---------- 14.11 Figures ------------------------------------------------ */
.bc-figure {
  position: relative;
  overflow: hidden;
  background: var(--bc-paper-deep);
  border-radius: var(--bc-r-sm);
  margin: 0;
}

.bc-figure img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 0.45s var(--bc-ease-out);
}

.bc-figure--wide {
  aspect-ratio: 16 / 9;
}

.bc-figure--lead {
  aspect-ratio: 3 / 2;
}

.bc-figure--card {
  aspect-ratio: 3 / 2;
}

.bc-figure--square {
  aspect-ratio: 1 / 1;
}

.bc-figure--empty {
  display: grid;
  place-items: center;
}

.bc-figure--empty svg {
  inline-size: 26%;
  max-inline-size: 72px;
  opacity: 0.14;
  fill: var(--bc-ink);
}

/* ---------- 14.12 Header, to match --------------------------------------- */
.bc-headerlink {
  border-radius: var(--bc-r-pill);
  padding: 0.5rem 1.1rem;
}

.bc-burger {
  border-radius: var(--bc-r-sm);
}

.bc-search input[type="search"] {
  border-radius: var(--bc-r-pill);
  padding-inline-start: 1rem;
}

/* ---------- 14.13 Scroll reveal ------------------------------------------ */
.bc-reveal--armed>* {
  opacity: 0;
  transform: translateY(10px);
}

.bc-reveal--armed.is-in>* {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.4s var(--bc-ease-out) calc(var(--i, 0) * 50ms),
    transform 0.4s var(--bc-ease-out) calc(var(--i, 0) * 50ms);
}

/* ---------- 14.14 Motion preferences ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bc-card:hover {
    transform: none;
  }

  .bc-card:hover .bc-figure img {
    transform: none;
  }

  .bc-reveal--armed>* {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   15. Poster tiles — the opening block and the topic pictures
   ========================================================================== */

/* ---------- 15.1 The opening grid ---------------------------------------- */
/*
 * One large tile beside two stacked ones. The block is given an explicit height
 * and two equal rows, so the large tile spans exactly the height of the pair —
 * alignment is arithmetic, not a consequence of how long a headline runs.
 */
.bc-hero-grid {
  display: grid;
  gap: var(--bc-s4);
}

@media (min-width: 56em) {
  .bc-hero-grid {
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    block-size: clamp(30rem, 23rem + 16vw, 38rem);
  }

  .bc-hero-grid>.bc-poster--lead {
    grid-row: 1 / span 2;
  }

  .bc-hero-grid--solo {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
}

/* ---------- 15.2 The poster ---------------------------------------------- */
.bc-poster {
  position: relative;
  overflow: hidden;
  border-radius: var(--bc-r-md);
  background: var(--bc-ink);
  isolation: isolate;
  display: flex;
  align-items: end;
}

@media (max-width: 55.999em) {

  /* Stacked, the lead still has to read as the lead. */
  .bc-poster {
    aspect-ratio: 16 / 10;
  }

  .bc-poster--lead {
    aspect-ratio: 4 / 3;
  }
}

.bc-poster__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.bc-poster__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--bc-ease-out);
}

.bc-poster__fallback {
  display: grid;
  place-items: center;
  block-size: 100%;
  background: var(--bc-burgundy);
}

.bc-poster__fallback .bc-brand__mark {
  inline-size: 28%;
  max-inline-size: 90px;
  color: #fff;
  opacity: 0.3;
}

.bc-poster:has(.bc-poster__fallback)::after {
  opacity: 0.55;
}

/* The scrim. Strong enough at the foot that white text clears AA over any
   photograph, and gone by the top so the picture still reads. */
.bc-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
      rgb(10 10 14 / 92%) 0%,
      rgb(10 10 14 / 72%) 42%,
      rgb(10 10 14 / 22%) 76%,
      rgb(10 10 14 / 0%) 100%);
}

.bc-poster__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--bc-s2);
  inline-size: 100%;
  padding: var(--bc-s5);
}

.bc-poster--lead .bc-poster__body {
  padding: var(--bc-s6);
}

.bc-poster__title {
  color: #fff;
  font-size: var(--bc-fs-h3);
  line-height: 1.7;
  letter-spacing: -0.01em;
}

.bc-poster--lead .bc-poster__title {
  font-size: clamp(1.1875rem, 1rem + 0.9vw, 1.625rem);
  line-height: 1.6;
  letter-spacing: -0.02em;
}

.bc-poster__title a {
  color: inherit;
}

.bc-poster__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

@media (hover: hover) and (pointer: fine) {
  .bc-poster:hover .bc-poster__media img {
    transform: scale(1.04);
  }

  .bc-poster__title a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
  }
}

.bc-poster__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bc-s2);
  font-size: var(--bc-fs-meta);
  color: rgb(255 255 255 / 82%);
}

.bc-poster__meta>* {
  unicode-bidi: isolate;
}

.bc-poster__meta time {
  font-variant-numeric: tabular-nums;
}

/* The topic tag, over a picture. */
.bc-tag--ondark {
  position: relative;
  z-index: 1;
  padding: 0.25rem 0.7rem;
  border-radius: var(--bc-r-pill);
  background: rgb(255 255 255 / 92%);
  color: var(--bc-burgundy);
}

.bc-tag--ondark:hover {
  background: #fff;
  color: var(--bc-burgundy-bright);
}

/* ---------- 15.3 Topics with pictures ------------------------------------ */
.bc-topics {
  display: grid;
  gap: var(--bc-s4);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 40em) {
  .bc-topics {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64em) {
  .bc-topics {
    grid-template-columns: repeat(3, 1fr);
  }
}

.bc-topic {
  position: relative;
  display: flex;
  align-items: end;
  overflow: hidden;
  border-radius: var(--bc-r-md);
  background: var(--bc-ink);
  aspect-ratio: 3 / 2;
  isolation: isolate;
}

.bc-topic__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.bc-topic__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--bc-ease-out);
}

.bc-topic__fallback {
  display: grid;
  place-items: center;
  block-size: 100%;
  background: var(--bc-burgundy);
}

.bc-topic__fallback .bc-brand__mark {
  inline-size: 26%;
  max-inline-size: 72px;
  color: #fff;
  opacity: 0.3;
}

.bc-topic:has(.bc-topic__fallback)::after {
  opacity: 0.5;
}

.bc-topic::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(10 10 14 / 92%) 0%, rgb(10 10 14 / 70%) 46%, rgb(10 10 14 / 18%) 80%, rgb(10 10 14 / 0%) 100%);
  transition: opacity 0.3s var(--bc-ease-out);
}

.bc-topic__body {
  display: flex;
  align-items: center;
  gap: var(--bc-s3);
  inline-size: 100%;
  padding: var(--bc-s4);
}

.bc-topic__mark {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  flex: none;
  border-radius: 999px;
  background: rgb(255 255 255 / 16%);
  backdrop-filter: blur(8px);
  color: #fff;
  transition: background 0.25s var(--bc-ease-out);
}

.bc-topic__mark svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.bc-topic__mark svg :is(path, circle) {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.bc-topic__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-inline-size: 0;
}

.bc-topic__name {
  font-size: var(--bc-fs-h4);
  font-weight: 700;
  color: #fff;
  line-height: 1.6;
}

.bc-topic__count {
  font-size: var(--bc-fs-meta);
  color: rgb(255 255 255 / 78%);
  font-variant-numeric: tabular-nums;
}

@media (hover: hover) and (pointer: fine) {
  .bc-topic:hover .bc-topic__media img {
    transform: scale(1.05);
  }

  .bc-topic:hover .bc-topic__mark {
    background: rgb(255 255 255 / 28%);
  }

  .bc-topic:hover .bc-topic__mark svg :is(path, circle) {
    animation: bc-draw 0.6s var(--bc-ease-out) both;
  }
}

.bc-topic:focus-visible .bc-topic__mark svg :is(path, circle) {
  animation: bc-draw 0.6s var(--bc-ease-out) both;
}

@media (prefers-reduced-motion: reduce) {

  .bc-poster:hover .bc-poster__media img,
  .bc-topic:hover .bc-topic__media img {
    transform: none;
  }

  .bc-topic:hover .bc-topic__mark svg :is(path, circle) {
    animation: none;
  }
}