/* ============================================================
   Binding Chaos Encyclopedia — Components
   Built exclusively on the Design Brief v1.2 tokens.
   Flat surfaces, hairline borders, one civic navy accent,
   per-system inks always paired with a label.
   The signature element is the SYSTEM SPINE: a slim colored
   rule keyed to the entry's system, running down the left of
   cards and across the top of entry headers.
   ============================================================ */

/* ---------- Layout primitives ---------- */
.bc-container { max-width: var(--layout-max); margin: 0 auto; padding: 0 var(--gutter); }
.bc-measure   { max-width: calc(var(--measure-reading) + 2 * var(--gutter)); }
.bc-section   { padding: var(--space-16) 0; }
.bc-section-tint { background: var(--surface-card); border-top: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline); }
.bc-section-tint .bc-section-head { padding-top: var(--space-16); }
.bc-section-tint .bc-question-list, .bc-section-tint .bc-twocol { padding-bottom: var(--space-16); }
.bc-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); padding-top: var(--space-16); }
@media (max-width: 860px) { .bc-twocol { grid-template-columns: 1fr; } }

.bc-skip { position: absolute; left: -9999px; top: 0; background: var(--action-bg); color: var(--action-fg); padding: var(--space-2) var(--space-4); z-index: 100; }
.bc-skip:focus { left: var(--space-4); }

:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }

/* ---------- Type roles ---------- */
.bc-display { font: var(--type-display-weight) var(--type-display-size)/var(--type-display-leading) var(--type-display-font); letter-spacing: var(--tracking-tight); color: var(--text-strong); margin: var(--space-3) 0; }
.bc-lead    { font: var(--type-lead-weight) var(--type-lead-size)/var(--type-lead-leading) var(--type-lead-font); color: var(--text-secondary); max-width: var(--measure-reading); }
.bc-eyebrow { font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-font); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); display: inline-block; }
.bc-eyebrow-heading { font: var(--type-h2-weight) var(--type-h2-size)/var(--type-h2-leading) var(--type-h2-font); color: var(--text-strong); margin: 0 0 var(--space-4); }
.bc-eyebrow-heading .bc-eyebrow { display: block; margin-bottom: var(--space-2); }
.bc-note { font: var(--type-ui-weight) var(--type-ui-size)/var(--type-ui-leading) var(--type-ui-font); color: var(--text-muted); }

.bc-prose { max-width: var(--measure-reading); font: 400 18px/30px var(--font-serif); }
.bc-prose p { margin: 0 0 var(--space-4); }
.bc-prose a { color: var(--text-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bc-prose a:hover { color: var(--text-link-hover); }
.bc-prose blockquote { margin: 0; padding-left: var(--space-6); border-left: 2px solid var(--border-hairline); font-style: italic; color: var(--text-secondary); }
.bc-prose-lead p { font: var(--type-lead-weight) var(--type-lead-size)/var(--type-lead-leading) var(--type-lead-font); }

/* ---------- Header ---------- */
.bc-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border-hairline); transition: box-shadow var(--dur-normal) var(--ease-standard); }
.bc-header.is-scrolled { box-shadow: var(--elevation-overlay); }
.bc-header-inner { max-width: var(--layout-max); margin: 0 auto; padding: 0 var(--gutter); height: var(--header-height); display: flex; align-items: center; gap: var(--space-8); }

.bc-logotype { font: var(--weight-medium) 20px/1 var(--font-serif); color: var(--text-strong); text-decoration: none; display: inline-flex; align-items: baseline; gap: var(--space-2); white-space: nowrap; }
.bc-logotype-mark { width: 10px; height: 10px; border-radius: 2px; background: var(--accent); align-self: center; transform: rotate(45deg); }
.bc-logotype-sub { font: var(--type-meta-weight) var(--type-meta-size)/1 var(--type-meta-font); letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--text-muted); }

.bc-nav { margin-left: auto; }
.bc-nav-list { list-style: none; display: flex; gap: var(--space-6); margin: 0; padding: 0; }
.bc-nav-list a { font: var(--type-ui-weight) var(--type-ui-size)/var(--type-ui-leading) var(--type-ui-font); color: var(--text-secondary); text-decoration: none; padding: var(--space-2) 0; border-bottom: 2px solid transparent; transition: color var(--dur-fast) var(--ease-standard); }
.bc-nav-list a:hover { color: var(--text-strong); border-bottom-color: var(--accent); }
@media (max-width: 900px) { .bc-nav { display: none; } }

.bc-search-trigger { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--type-ui-weight) var(--type-ui-size)/1 var(--type-ui-font); color: var(--text-secondary); background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-round); padding: var(--space-2) var(--space-4); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-standard); }
.bc-search-trigger:hover { border-color: var(--accent); color: var(--text-strong); }
.bc-search-trigger kbd { font: var(--type-mono-weight) 11px/1 var(--type-mono-font); border: 1px solid var(--border-hairline); border-radius: 3px; padding: 1px 5px; color: var(--text-muted); }

/* ---------- Search overlay ---------- */
.bc-search-overlay { position: fixed; inset: 0; z-index: 90; background: color-mix(in srgb, var(--ink-1) 32%, transparent); display: flex; justify-content: center; align-items: flex-start; padding: 12vh var(--space-4) var(--space-4); }
.bc-search-overlay[hidden] { display: none; }
.bc-search-panel { background: var(--surface-overlay); border: 1px solid var(--border-hairline); border-radius: var(--radius-card); box-shadow: var(--elevation-overlay); width: min(680px, 100%); padding: var(--space-4); }
.bc-search-form { display: flex; gap: var(--space-2); }
.bc-search-form input[type=search], .bc-hero-search input[type=search] { flex: 1; font: var(--type-ui-weight) 17px/1.4 var(--type-ui-font); color: var(--text-body); background: var(--surface-page); border: 1px solid var(--border-hairline); border-radius: var(--radius-round); padding: var(--space-3) var(--space-6); }
.bc-search-form input:focus, .bc-hero-search input:focus { border-color: var(--accent); outline: none; }
.bc-search-close { background: none; border: none; font-size: 26px; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 0 var(--space-2); }
.bc-search-results { margin-top: var(--space-2); max-height: 50vh; overflow: auto; }
.bc-search-result { display: block; padding: var(--space-3) var(--space-4); border-radius: var(--radius-pill); text-decoration: none; color: var(--text-body); }
.bc-search-result:hover, .bc-search-result.is-active { background: var(--surface-accent); }
.bc-search-result-title { font: var(--weight-medium) 17px/1.4 var(--font-serif); color: var(--text-strong); display: block; }
.bc-search-result-type { font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-font); letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--text-muted); }
.bc-search-hint { font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-font); color: var(--text-muted); margin: var(--space-2) var(--space-2) 0; }

/* ---------- Hero ---------- */
.bc-hero { padding: var(--space-16) 0 var(--space-12); border-bottom: 1px solid var(--border-hairline); background:
	linear-gradient(to bottom, var(--surface-card), var(--surface-page) 70%); }
.bc-hero-search { display: flex; gap: var(--space-2); max-width: 560px; margin: var(--space-8) 0 var(--space-3); }
.bc-hero-paths { font: var(--type-ui-weight) var(--type-ui-size)/var(--type-ui-leading) var(--type-ui-font); color: var(--text-muted); }
.bc-hero-paths a { color: var(--text-link); }

.bc-button { font: var(--type-ui-weight) var(--type-ui-size)/1 var(--type-ui-font); color: var(--action-fg); background: var(--action-bg); border: none; border-radius: var(--radius-round); padding: var(--space-3) var(--space-6); cursor: pointer; transition: background var(--dur-fast) var(--ease-standard); }
.bc-button:hover { background: var(--action-bg-hover); }

/* Reveal on load — restrained, respects reduced motion. */
.bc-reveal { opacity: 0; transform: translateY(8px); animation: bc-reveal var(--dur-normal) var(--ease-standard) forwards; }
.bc-reveal:nth-child(2) { animation-delay: 60ms; } .bc-reveal:nth-child(3) { animation-delay: 120ms; }
.bc-reveal:nth-child(4) { animation-delay: 180ms; } .bc-reveal:nth-child(5) { animation-delay: 200ms; }
@keyframes bc-reveal { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bc-reveal { animation: none; opacity: 1; transform: none; } }

/* ---------- Section heads ---------- */
.bc-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.bc-more { font: var(--type-ui-weight) var(--type-ui-size)/var(--type-ui-leading) var(--type-ui-font); color: var(--text-link); text-decoration: none; white-space: nowrap; }
.bc-more:hover { color: var(--text-link-hover); }

/* ---------- Cards (system spine on the left) ---------- */
.bc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: var(--space-4); }
.bc-card { --card-sys: var(--accent); display: block; background: var(--surface-page); border: 1px solid var(--border-hairline); border-left: 3px solid var(--card-sys); border-radius: var(--radius-card); text-decoration: none; color: var(--text-body); transition: border-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
.bc-card:hover { border-color: var(--card-sys); transform: translateY(-2px); }
.bc-card-body { padding: var(--space-4) var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); min-height: 130px; }
.bc-card-system { font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-font); letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--card-sys); }
.bc-card-title { font: var(--weight-medium) 21px/1.3 var(--font-serif); color: var(--text-strong); margin: 0; }
.bc-card-def { font: var(--type-ui-weight) 14px/1.55 var(--type-ui-font); color: var(--text-secondary); margin: 0; }
.bc-card-meta { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.bc-card-meta code { font: var(--type-mono-weight) var(--type-mono-size)/1 var(--type-mono-font); color: var(--text-muted); }
.bc-card-arrow { color: var(--card-sys); transition: transform var(--dur-fast) var(--ease-standard); }
.bc-card:hover .bc-card-arrow { transform: translateX(3px); }

/* ---------- System grid ---------- */
.bc-system-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.bc-system-grid-large { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.bc-system-card { --card-sys: var(--accent); --card-sys-wash: var(--accent-wash); display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); background: var(--surface-page); border: 1px solid var(--border-hairline); border-top: 3px solid var(--card-sys); border-radius: var(--radius-card); text-decoration: none; transition: background var(--dur-normal) var(--ease-standard); }
a.bc-system-card:hover { background: var(--card-sys-wash); }
.bc-system-card-name { font: var(--weight-medium) 22px/1.2 var(--font-serif); color: var(--card-sys); }
.bc-system-card-def { font: var(--type-ui-weight) 14px/1.55 var(--type-ui-font); color: var(--text-secondary); }
.bc-system-card-count { margin-top: auto; font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-font); color: var(--text-muted); }

/* ---------- Question rows ---------- */
.bc-question-list { display: flex; flex-direction: column; }
.bc-question-row { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr auto; align-items: center; gap: var(--space-6); padding: var(--space-4) var(--space-2); border-bottom: 1px solid var(--border-hairline); text-decoration: none; transition: background var(--dur-fast) var(--ease-standard); }
.bc-question-row:hover { background: var(--surface-accent); }
.bc-question-q { font: var(--weight-medium) 19px/1.4 var(--font-serif); color: var(--text-link); }
.bc-question-a { font: var(--type-ui-weight) 14px/1.5 var(--type-ui-font); color: var(--text-secondary); }
@media (max-width: 720px) { .bc-question-row { grid-template-columns: 1fr auto; } .bc-question-a { display: none; } }

/* ---------- Pills ---------- */
.bc-pill { display: inline-flex; align-items: center; gap: 6px; font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-font); letter-spacing: var(--tracking-meta); text-transform: uppercase; border: 1px solid var(--border-hairline); border-radius: var(--radius-pill); padding: 3px 9px; }
.bc-pill-dot { width: 7px; height: 7px; border-radius: var(--radius-round); background: currentColor; }
.bc-pill-link { text-decoration: none; }
.bc-pill-canon { color: var(--sys-life); background: var(--sys-life-wash); }
.bc-pill-candidate { color: var(--draft-ink); background: var(--draft-wash); }
.bc-pill-neutral { color: var(--text-secondary); background: var(--surface-card); }

/* ---------- Entry pages ---------- */
body { --entry-sys: var(--accent); --entry-sys-wash: var(--accent-wash); }
.bc-entry-header { padding: var(--space-8) 0 var(--space-8); border-bottom: 1px solid var(--border-hairline); background: linear-gradient(to bottom, var(--entry-sys-wash), var(--surface-page) 85%); border-top: 3px solid var(--entry-sys); }
.bc-entry-pills { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-4) 0 var(--space-2); }
.bc-entry-title { font: var(--type-h1-weight) var(--type-h1-size)/var(--type-h1-leading) var(--type-h1-font); letter-spacing: var(--tracking-tight); color: var(--text-strong); margin: var(--space-2) 0; }
.bc-entry-lead { font: var(--type-lead-weight) var(--type-lead-size)/var(--type-lead-leading) var(--type-lead-font); color: var(--text-secondary); max-width: var(--measure-reading); margin: 0 0 var(--space-4); }
.bc-entry-machine { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.bc-machine-item { font: var(--type-mono-weight) var(--type-mono-size)/var(--type-mono-leading) var(--type-mono-font); color: var(--text-muted); }
.bc-machine-item code { color: var(--text-secondary); }
button.bc-copy-cite { background: none; border: 1px dashed var(--border-hairline); border-radius: var(--radius-pill); padding: 2px 10px; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-standard); }
button.bc-copy-cite:hover { border-color: var(--accent); color: var(--accent); }

.bc-breadcrumbs { font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-font); color: var(--text-muted); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bc-breadcrumbs a { color: var(--text-muted); text-decoration: none; }
.bc-breadcrumbs a:hover { color: var(--text-link); }
.bc-crumb-sep { color: var(--border-strong); }

.bc-entry-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-12); padding-top: var(--space-8); }
@media (max-width: 960px) { .bc-entry-layout { grid-template-columns: 1fr; } }
.bc-entry-main { min-width: 0; }
.bc-defsection { margin: 0 0 var(--space-12); }
.bc-section .bc-eyebrow-heading, .bc-defsection .bc-eyebrow-heading { margin-bottom: var(--space-4); }

.bc-side-card { position: sticky; top: calc(var(--header-height) + var(--space-4)); background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-card); padding: var(--space-6); }
.bc-side-dl { margin: var(--space-3) 0 0; }
.bc-side-dl dt { font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-font); letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--text-muted); margin-top: var(--space-4); }
.bc-side-dl dd { margin: var(--space-2) 0 0; font: var(--type-ui-weight) var(--type-ui-size)/var(--type-ui-leading) var(--type-ui-font); color: var(--text-body); }
.bc-side-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- Source status callout ---------- */
.bc-source-status { max-width: var(--measure-reading); border: 1px solid var(--border-hairline); border-left: 3px solid var(--draft-ink); border-radius: var(--radius-card); background: var(--draft-wash); padding: var(--space-4) var(--space-6); margin: var(--space-8) 0; }
.bc-source-status.is-confirmed { border-left-color: var(--sys-life); background: var(--sys-life-wash); }
.bc-source-status-label { font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-font); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.bc-source-status p { margin: var(--space-2) 0 0; font: 400 16.5px/1.6 var(--font-serif); color: var(--text-secondary); }

.bc-source-list { list-style: none; margin: 0; padding: 0; max-width: var(--measure-reading); }
.bc-source-list li { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-hairline); }
.bc-source-book { font: var(--weight-medium) 17px/1.4 var(--font-serif); font-style: italic; }
.bc-source-author { font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-font); color: var(--text-muted); align-self: center; white-space: nowrap; }

/* ---------- Pagination & footer ---------- */
.bc-pagination { margin-top: var(--space-8); font: var(--type-ui-weight) var(--type-ui-size)/var(--type-ui-leading) var(--type-ui-font); }
.bc-pagination .page-numbers { display: inline-block; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-hairline); border-radius: var(--radius-pill); text-decoration: none; color: var(--text-secondary); margin-right: var(--space-2); }
.bc-pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: var(--action-fg); }

.bc-footer { border-top: 1px solid var(--border-hairline); background: var(--surface-card); margin-top: var(--space-16); }
.bc-footer-inner { max-width: var(--layout-max); margin: 0 auto; padding: var(--space-12) var(--gutter); display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-12); }
@media (max-width: 820px) { .bc-footer-inner { grid-template-columns: 1fr; gap: var(--space-8); } }
.bc-footer-about p { font: 400 16px/1.6 var(--font-serif); color: var(--text-secondary); max-width: 44ch; }
.bc-footer-col ul { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.bc-footer-col li { margin-bottom: var(--space-2); }
.bc-footer-col a { font: var(--type-ui-weight) var(--type-ui-size)/var(--type-ui-leading) var(--type-ui-font); color: var(--text-secondary); text-decoration: none; }
.bc-footer-col a:hover { color: var(--text-link); }
.bc-footer-legal { border-top: 1px solid var(--border-hairline); }
.bc-footer-legal p { max-width: var(--layout-max); margin: 0 auto; padding: var(--space-4) var(--gutter); font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-font); color: var(--text-muted); }

@media (max-width: 640px) {
	:root { --gutter: var(--space-4); }
	.bc-display { font-size: 34px; line-height: 42px; }
	.bc-entry-title { font-size: 28px; line-height: 36px; }
}

/* ============================================================
   Encyclopedia articles
   ============================================================ */

/* Pronunciation, alternate names */
.bc-pronunciation { font: var(--type-ui-weight) 15px/1.5 var(--type-ui-font); color: var(--text-secondary); margin: 0 0 var(--space-3); display: flex; gap: var(--space-4); flex-wrap: wrap; }
.bc-pron-ipa { font-family: var(--font-serif); font-style: italic; }
.bc-pron-respell { font: var(--type-mono-weight) 13px/1.6 var(--type-mono-font); color: var(--text-muted); letter-spacing: .04em; }
.bc-alt-names { font: var(--type-ui-weight) 14px/1.6 var(--type-ui-font); color: var(--text-secondary); margin: 0 0 var(--space-4); display: flex; flex-direction: column; gap: 2px; max-width: var(--measure-reading); }
.bc-pill-topic { color: var(--accent); background: var(--accent-wash); }

/* Table of contents */
.bc-toc { border: 1px solid var(--border-hairline); border-radius: var(--radius-card); background: var(--surface-card); padding: var(--space-4) var(--space-6); margin: 0 0 var(--space-12); display: inline-block; min-width: 240px; }
.bc-toc ol { margin: var(--space-2) 0 0; padding: 0 0 0 var(--space-6); }
.bc-toc li { margin: var(--space-1) 0; font: var(--type-ui-weight) 15px/1.6 var(--type-ui-font); }
.bc-toc a { color: var(--text-link); text-decoration: none; }
.bc-toc a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Infobox */
.bc-infobox { position: sticky; top: calc(var(--header-height) + var(--space-4)); background: var(--surface-card); border: 1px solid var(--border-hairline); border-top: 3px solid var(--accent); border-radius: var(--radius-card); padding: var(--space-6); }
.bc-infobox-title { display: block; font: var(--weight-semibold) 18px/1.3 var(--font-serif); color: var(--text-strong); text-align: center; margin-bottom: var(--space-4); }
.bc-infobox-figure { margin: 0 0 var(--space-4); }
.bc-infobox-figure img { width: 100%; height: auto; border-radius: var(--radius-pill); display: block; }
.bc-infobox-figure figcaption { font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-font); color: var(--text-muted); text-align: center; margin-top: var(--space-2); }
.bc-infobox-rows { margin: 0; }
.bc-infobox-row { display: grid; grid-template-columns: 42% 1fr; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--border-hairline); }
.bc-infobox-row dt { font: var(--weight-semibold) 13px/1.5 var(--font-ui); color: var(--text-secondary); }
.bc-infobox-row dd { margin: 0; font: var(--type-ui-weight) 13px/1.5 var(--type-ui-font); color: var(--text-body); overflow-wrap: anywhere; }
.bc-infobox-trans { margin-top: var(--space-4); }

/* Timeline */
.bc-timeline { list-style: none; margin: 0; padding: 0; max-width: var(--measure-reading); border-left: 2px solid var(--border-strong); }
.bc-timeline-event { display: grid; grid-template-columns: 88px 1fr; gap: var(--space-4); padding: 0 0 var(--space-6) var(--space-6); position: relative; }
.bc-timeline-event::before { content: ""; position: absolute; left: -6px; top: 7px; width: 10px; height: 10px; border-radius: var(--radius-round); background: var(--accent); border: 2px solid var(--paper); }
.bc-timeline-year { font: var(--type-mono-weight) 14px/1.6 var(--type-mono-font); color: var(--accent); white-space: nowrap; }
.bc-timeline-title { font: var(--weight-medium) 17px/1.5 var(--font-serif); color: var(--text-strong); display: block; }
.bc-timeline-body p { margin: var(--space-1) 0 0; font: var(--type-ui-weight) 14px/1.6 var(--type-ui-font); color: var(--text-secondary); }
@media (max-width: 560px) { .bc-timeline-event { grid-template-columns: 1fr; gap: var(--space-1); } }

/* Facts, statistics, charts */
.bc-facts { margin: 0 0 var(--space-8); padding: 0; list-style: none; max-width: var(--measure-reading); }
.bc-facts li { padding: var(--space-3) 0 var(--space-3) var(--space-6); border-bottom: 1px solid var(--border-hairline); position: relative; font: 400 17px/1.65 var(--font-serif); }
.bc-facts li::before { content: ""; position: absolute; left: 0; top: 19px; width: 8px; height: 8px; background: var(--accent); border-radius: 2px; transform: rotate(45deg); }
.bc-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-4); margin: 0 0 var(--space-8); }
.bc-stat { background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-card); padding: var(--space-4) var(--space-6); }
.bc-stat dd { margin: 0; font: var(--weight-semibold) 30px/1.15 var(--font-serif); color: var(--accent); }
.bc-stat dt { font: var(--type-ui-weight) 13px/1.5 var(--type-ui-font); color: var(--text-secondary); margin-top: var(--space-1); }
.bc-stat-source { display: block; font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-font); color: var(--text-muted); margin-top: 2px; }
.bc-chart { margin: 0 0 var(--space-8); max-width: var(--measure-reading); }
.bc-chart figcaption { font: var(--weight-semibold) 15px/1.5 var(--font-ui); color: var(--text-strong); margin-bottom: var(--space-3); }
.bc-chart-row { display: grid; grid-template-columns: minmax(110px, 22%) 1fr 64px; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.bc-chart-label { font: var(--type-ui-weight) 13px/1.4 var(--type-ui-font); color: var(--text-secondary); text-align: right; }
.bc-chart-track { background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: 3px; height: 18px; overflow: hidden; }
.bc-chart-bar { display: block; height: 100%; background: var(--accent); }
.bc-chart-value { font: var(--type-mono-weight) 13px/1 var(--type-mono-font); color: var(--text-body); }

/* Tables */
.bc-table-wrap { margin: 0 0 var(--space-8); overflow-x: auto; }
.bc-table { border-collapse: collapse; width: 100%; max-width: var(--measure-reading); font: var(--type-ui-weight) 14px/1.55 var(--type-ui-font); }
.bc-table caption { text-align: left; font: var(--weight-semibold) 15px/1.5 var(--font-ui); color: var(--text-strong); padding-bottom: var(--space-3); }
.bc-table th { text-align: left; font-weight: var(--weight-semibold); color: var(--text-strong); background: var(--surface-card); border-bottom: 2px solid var(--border-strong); padding: var(--space-2) var(--space-4); }
.bc-table td { border-bottom: 1px solid var(--border-hairline); padding: var(--space-2) var(--space-4); }
.bc-table tbody tr:hover { background: var(--surface-accent); }

/* Maps, diagrams, figures */
.bc-map iframe { width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--border-hairline); border-radius: var(--radius-card); display: block; }
.bc-map, .bc-figure { margin: 0 0 var(--space-8); max-width: var(--measure-reading); }
.bc-figure img { width: 100%; height: auto; border: 1px solid var(--border-hairline); border-radius: var(--radius-card); display: block; }
.bc-map figcaption, .bc-figure figcaption { font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-font); color: var(--text-muted); margin-top: var(--space-2); }

/* Quotations */
.bc-quotation { margin: 0 0 var(--space-6); padding: var(--space-4) var(--space-8); border-left: 3px solid var(--accent); background: var(--surface-card); border-radius: 0 var(--radius-card) var(--radius-card) 0; max-width: var(--measure-reading); }
.bc-quotation p { margin: 0; font: 400 19px/1.6 var(--font-serif); font-style: italic; color: var(--text-strong); }
.bc-quotation footer { margin-top: var(--space-2); font: var(--type-ui-weight) 13px/1.5 var(--type-ui-font); color: var(--text-secondary); }
.bc-quotation-who { font-style: normal; font-weight: var(--weight-semibold); }

/* References, bibliography, external links */
.bc-references { margin: 0; padding: 0 0 0 var(--space-8); max-width: var(--measure-reading); font: 400 16px/1.7 var(--font-serif); color: var(--text-secondary); }
.bc-references li { margin-bottom: var(--space-2); padding-left: var(--space-2); }
.bc-references a { color: var(--text-link); overflow-wrap: anywhere; }
ul.bc-bibliography { list-style: none; padding-left: 0; }
ul.bc-bibliography li { border-bottom: 1px solid var(--border-hairline); padding: var(--space-2) 0; }
.bc-external-links { list-style: none; margin: 0; padding: 0; max-width: var(--measure-reading); }
.bc-external-links li { padding: var(--space-2) 0; border-bottom: 1px solid var(--border-hairline); font: var(--type-ui-weight) 15px/1.6 var(--type-ui-font); display: flex; justify-content: space-between; gap: var(--space-4); }
.bc-external-links a { color: var(--text-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Article body prose extras (headings, inline images, editor tables) */
.bc-article-body .bc-prose h2 { font: var(--type-h2-weight) var(--type-h2-size)/var(--type-h2-leading) var(--type-h2-font); color: var(--text-strong); margin: var(--space-8) 0 var(--space-3); }
.bc-article-body .bc-prose h3 { font: var(--weight-medium) 20px/1.4 var(--font-serif); color: var(--text-strong); margin: var(--space-6) 0 var(--space-2); }
.bc-article-body .bc-prose img { max-width: 100%; height: auto; border-radius: var(--radius-card); }
.bc-article-body .bc-prose figcaption { font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-font); color: var(--text-muted); }
.bc-article-body .bc-prose table { border-collapse: collapse; width: 100%; }
.bc-article-body .bc-prose th, .bc-article-body .bc-prose td { border-bottom: 1px solid var(--border-hairline); padding: var(--space-2) var(--space-4); text-align: left; }
.bc-article-body .bc-prose th { background: var(--surface-card); border-bottom: 2px solid var(--border-strong); }

/* Category cards and article cards */
.bc-category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.bc-category-card { background: var(--surface-page); border: 1px solid var(--border-hairline); border-top: 3px solid var(--accent); border-radius: var(--radius-card); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.bc-category-name { font: var(--weight-medium) 21px/1.3 var(--font-serif); color: var(--text-strong); text-decoration: none; }
.bc-category-name:hover { color: var(--text-link); }
.bc-category-def { margin: 0; font: var(--type-ui-weight) 14px/1.55 var(--type-ui-font); color: var(--text-secondary); }
.bc-category-subs { list-style: none; margin: var(--space-1) 0 0; padding: 0; }
.bc-category-subs li { display: flex; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) 0; border-top: 1px solid var(--border-hairline); font: var(--type-ui-weight) 14px/1.6 var(--type-ui-font); }
.bc-category-subs a { color: var(--text-link); text-decoration: none; }
.bc-category-subs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bc-category-count { margin-top: auto; font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-font); color: var(--text-muted); }
.bc-card-media img { width: 100%; height: 150px; object-fit: cover; display: block; border-radius: calc(var(--radius-card) - 2px) calc(var(--radius-card) - 2px) 0 0; }
.bc-topics-cloud { padding-bottom: var(--space-4); }

@media (max-width: 960px) { .bc-infobox { position: static; } .bc-article-layout { display: flex; flex-direction: column-reverse; } }

/* ============================================================
   v1.1 design implementation (handoff bundle)
   ============================================================ */

/* Paper grain — fixed low-opacity noise wash over the page */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 40; opacity: 0.05; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); background-size: 140px 140px; }

/* Header refinements: quieter divider, larger mark, subdued kbd */
.bc-header { border-bottom-color: color-mix(in srgb, var(--border-hairline) 55%, transparent); }
.bc-logotype { font-size: 24px; gap: var(--space-3); align-items: center; }
.bc-logotype-mark { width: 14px; height: 14px; }
.bc-nav-list { gap: var(--space-8); }
.bc-search-trigger { margin-left: var(--space-4); }
.bc-search-trigger kbd { border-color: transparent; opacity: 0.7; }

/* Mobile menu */
.bc-mobile-toggle { display: none; background: none; border: none; color: var(--text-strong); cursor: pointer; padding: 0; width: 40px; height: 40px; align-items: center; justify-content: center; }
@media (max-width: 760px) {
	.bc-nav, .bc-search-trigger { display: none; }
	.bc-mobile-toggle { display: inline-flex; margin-left: auto; }
	.bc-header-inner { height: 56px; }
	.bc-logotype { font-size: 21px; }
}
.bc-mobile-menu { position: fixed; inset: 0; z-index: 80; background: var(--surface-page); display: flex; flex-direction: column; padding: 11px var(--gutter) var(--space-8); }
.bc-mobile-menu[hidden] { display: none; }
.bc-mobile-menu-head { display: flex; align-items: center; justify-content: space-between; height: 42px; margin-bottom: var(--space-10); }
.bc-mobile-menu-title { font: var(--weight-medium) 21px/1 var(--font-serif); color: var(--text-strong); }
.bc-mobile-menu-head button { background: none; border: none; color: var(--text-strong); cursor: pointer; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.bc-mobile-menu nav { display: flex; flex-direction: column; }
.bc-mobile-menu nav a { font: var(--weight-medium) 27px/1.3 var(--font-serif); color: var(--text-strong); text-decoration: none; padding: var(--space-4) 0; border-bottom: 1px solid var(--border-hairline); }
.bc-mobile-menu-search { margin-top: var(--space-8); align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-2); }

/* Home hero — centered, orbital watermark, underline search */
.bc-hero-home { position: relative; overflow: hidden; padding: var(--space-8) 0 var(--space-16); }
.bc-hero-orbits { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -48%); color: var(--accent); opacity: 0.045; pointer-events: none; }
.bc-hero-center { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.bc-hero-title { max-width: 16ch; font-size: clamp(40px, 6vw, 56px); line-height: 1.04; margin: var(--space-2) 0 var(--space-4); }
.bc-hero-center .bc-lead { max-width: 800px; }
.bc-hero-searchwrap { width: 100%; max-width: 660px; margin-top: var(--space-8); text-align: left; }
.bc-underline-search { display: flex; align-items: center; gap: var(--space-2); border-bottom: 1px solid var(--text-secondary); padding-bottom: var(--space-3); }
.bc-underline-search svg { color: var(--text-muted); flex: 0 0 auto; }
.bc-underline-search input[type=search] { flex: 1; min-width: 0; font: var(--weight-medium) 21px/1.4 var(--font-ui); color: var(--text-body); background: transparent; border: none; outline: none; padding: var(--space-2) 0; cursor: pointer; }
.bc-underline-search .bc-button { font-size: 14px; padding: var(--space-2) var(--space-6); border-radius: var(--radius-card); }
.bc-popular { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); margin-top: var(--space-6); }
.bc-popular-label { font: 700 11.5px/1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary); margin-right: var(--space-2); }
.bc-popular a { font: var(--weight-medium) 15px/1.4 var(--font-ui); color: var(--text-strong); text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.bc-popular a:hover, .bc-popular a:focus { color: var(--text-link); text-decoration: underline; }
.bc-popular-sep { color: var(--text-muted); font-size: 14px; }

/* "Look up a term" section + term rows */
.bc-section-lookup { background: var(--surface-card); border-top: 1px solid var(--border-hairline); }
.bc-lookup-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-6); }
.bc-lookup-more { margin: var(--space-4) 0 0; }
.bc-term-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-8); }
@media (max-width: 760px) { .bc-term-list { grid-template-columns: 1fr; } }
.bc-term-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); align-items: baseline; text-decoration: none; padding: var(--space-4) var(--space-3); border-bottom: 1px solid var(--border-hairline); border-left: 3px solid transparent; transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); }
.bc-term-row:hover, .bc-term-row:focus { background: var(--surface-card); border-left-color: var(--row-sys, var(--accent)); }
.bc-term-titleline { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.bc-term-title { font: var(--weight-medium) 17px/1.2 var(--font-serif); color: var(--text-strong); }
.bc-term-title.is-core { font-size: 19px; }
.bc-term-tag { font: 700 10px/1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; border: 1px solid var(--border-hairline); color: var(--text-muted); }
.bc-term-tag.is-core-tag { color: var(--text-link); background: var(--accent-wash); }
.bc-term-metaline { display: flex; align-items: baseline; gap: var(--space-2); margin-top: 5px; min-width: 0; }
.bc-term-sys { font: 700 10.5px/1 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--row-sys, var(--accent)); white-space: nowrap; flex: 0 0 auto; }
.bc-term-def { font: var(--weight-medium) 13.5px/1.5 var(--font-ui); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.bc-term-arrow { color: var(--row-sys, var(--accent)); font-size: 16px; align-self: center; }

/* Chips (white ovals with system dots) */
.bc-chip-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.bc-chip { display: inline-flex; align-items: center; gap: 6px; font: var(--weight-medium) 13.5px/1 var(--font-ui); padding: 8px 14px; border-radius: var(--radius-round); cursor: pointer; border: 1px solid var(--border-hairline); background: #ffffff; color: var(--text-body); transition: border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); }
.bc-chip:hover { border-color: var(--accent); color: var(--accent); }
.bc-chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--action-fg, #fff); }
.bc-chip-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.bc-chip.is-active .bc-chip-dot { background: rgba(255,255,255,0.9) !important; }
.bc-filter-block { margin-bottom: var(--space-8); }
.bc-filter-label { font: 700 11px/1 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: var(--space-3); }

/* Inline round search input */
.bc-inline-searchwrap { position: relative; flex: 1 1 280px; min-width: 0; max-width: 420px; }
.bc-inline-searchwrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.bc-inline-search { width: 100%; box-sizing: border-box; font: var(--weight-medium) 14px/1.4 var(--font-ui); color: var(--text-body); background: #ffffff; border: 1px solid var(--border-hairline); border-radius: var(--radius-round); padding: 9px 34px; }
.bc-inline-search:focus { border-color: var(--accent); outline: none; }

/* Articles index */
.bc-featured-wrap { padding-top: var(--space-8); }
.bc-featured { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--space-8); align-items: center; text-decoration: none; border: 1px solid var(--border-hairline); border-left: 3px solid var(--card-sys, var(--accent)); border-radius: var(--radius-card); background: var(--surface-page); padding: var(--space-8); transition: border-color var(--dur-normal) var(--ease-standard); }
.bc-featured:hover { border-color: var(--card-sys, var(--accent)); }
@media (max-width: 760px) { .bc-featured { grid-template-columns: 1fr; } }
.bc-featured-title { font: var(--weight-medium) clamp(30px, 4vw, 38px)/1.12 var(--font-serif); letter-spacing: var(--tracking-tight); color: var(--text-strong); margin: var(--space-3) 0; }
.bc-featured-def { font: 400 19px/1.6 var(--font-serif); color: var(--text-secondary); margin: 0; max-width: 54ch; }
.bc-featured-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-6); font: var(--weight-medium) 15px/1 var(--font-ui); color: var(--text-link); }
.bc-featured-meta { display: flex; flex-direction: column; gap: var(--space-2); }
.bc-featured-meta-row { display: flex; justify-content: space-between; gap: var(--space-3); padding-bottom: 4px; }
.bc-featured-meta-row span:last-child { font: var(--weight-medium) 13px/1.4 var(--font-ui); color: var(--text-secondary); text-align: right; }

.bc-articles-browse { padding-top: var(--space-12); padding-bottom: var(--space-16); }
.bc-browse-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.bc-browse-controls { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-8); }
.bc-sort-label { display: inline-flex; align-items: center; gap: var(--space-2); }
.bc-sort-label select { font: var(--weight-medium) 13.5px/1.4 var(--font-ui); color: var(--text-body); background: #ffffff; border: 1px solid var(--border-hairline); border-radius: var(--radius-round); padding: 8px 12px; }
.bc-view-toggle { display: inline-flex; border: 1px solid var(--border-hairline); border-radius: var(--radius-round); overflow: hidden; }
.bc-view-toggle button { font: var(--weight-medium) 13px/1 var(--font-ui); padding: 8px 14px; border: none; cursor: pointer; background: transparent; color: var(--text-secondary); }
.bc-view-toggle button[aria-pressed="true"] { background: var(--accent); color: var(--action-fg, #fff); }

.bc-alpha-strip { position: sticky; top: calc(var(--header-height) + 4px); z-index: 5; display: flex; flex-wrap: wrap; gap: 2px; background: var(--paper); padding: var(--space-2) 0; margin-bottom: var(--space-4); border-bottom: 1px solid var(--border-hairline); }
.bc-alpha-strip button { width: 24px; height: 24px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 4px; font: 600 12.5px/1 var(--font-ui); color: var(--text-link); cursor: pointer; padding: 0; }
.bc-alpha-strip button[disabled] { color: var(--text-muted); opacity: 0.35; cursor: default; }
.bc-alpha-head { font: var(--weight-medium) 24px/1.2 var(--font-serif); color: var(--accent); margin: 0 0 var(--space-2); padding-bottom: 4px; border-bottom: 2px solid var(--border-hairline); }
.bc-alpha-group { scroll-margin-top: calc(var(--header-height) + 44px); margin-bottom: var(--space-8); }
.bc-term-cell[hidden] { display: none; }
.bc-flat-list[hidden] { display: none; }
.bc-articles-browse.is-grid .bc-term-list { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: var(--space-4); }
.bc-articles-browse.is-grid .bc-term-row { border: 1px solid var(--border-hairline); border-left: 3px solid var(--row-sys, var(--accent)); border-radius: var(--radius-card); grid-template-columns: 1fr; padding: var(--space-6); min-height: 110px; }
.bc-articles-browse.is-grid .bc-term-arrow { display: none; }
.bc-articles-browse.is-grid .bc-alpha-head { display: none; }

/* Quick-search overlay (underline style) */
.bc-search-overlay { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background: color-mix(in srgb, var(--ink-1) 45%, transparent); align-items: center; padding: var(--space-8) var(--space-4); }
.bc-search-panel { padding: var(--space-6) var(--space-8); }
.bc-search-form { align-items: center; gap: var(--space-4); border-bottom: 1.5px solid var(--text-strong); padding-bottom: var(--space-3); }
.bc-search-form input[type=search] { font: var(--weight-medium) 20px/1.4 var(--font-ui); background: transparent; border: none; border-radius: 0; padding: var(--space-2) 0; }
.bc-search-go { font-size: 14px; padding: var(--space-3) var(--space-6); }
.bc-search-result { display: flex; align-items: center; gap: var(--space-3); }
.bc-search-result-tag { flex: 0 0 auto; font: 700 10.5px/1 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: 4px; padding: 3px 7px; }
.bc-search-result-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-search-result-open { flex: 0 0 auto; font: 600 12px/1 var(--font-ui); color: var(--text-muted); }
.bc-answer { margin-bottom: var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid var(--border-hairline); }
.bc-answer-lede { font: 400 18px/1.5 var(--font-serif); color: var(--text-strong); margin: var(--space-3) 0 var(--space-4); }
.bc-answer-path { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.bc-answer-path a { font: 600 13px/1 var(--font-ui); color: var(--text-link); text-decoration: none; border: 1px solid var(--border-hairline); border-radius: var(--radius-pill); padding: 4px 12px; }
.bc-answer-path a:hover { border-color: var(--text-link); }
.bc-answer-path span { color: var(--text-muted); font-size: 15px; }
.bc-answer-cards { display: flex; flex-direction: column; gap: var(--space-2); }
.bc-answer-cards a { display: block; padding: var(--space-3) var(--space-4); border-radius: var(--radius-card); text-decoration: none; border: 1px solid var(--border-hairline); }
.bc-answer-cards a:hover { background: var(--surface-card); }
.bc-answer-card-top { display: flex; align-items: baseline; gap: var(--space-3); }
.bc-answer-term { font: 600 16px/1.3 var(--font-serif); color: var(--text-strong); }
.bc-answer-tag { font: 700 10.5px/1 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
.bc-answer-def { display: block; font: 400 14.5px/1.5 var(--font-serif); color: var(--text-secondary); margin-top: 4px; }
.bc-direct-head { margin: 0 0 var(--space-2); }

/* 16-section article components */
.bc-entry-main { padding-top: 40px; padding-bottom: var(--space-16); }
.bc-placement-row { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: baseline; padding: var(--space-4) 0 var(--space-8); border-bottom: 1px solid var(--border-hairline); margin: 0 0 40px; }
.bc-placement-row > span { display: inline-flex; align-items: baseline; gap: var(--space-2); font: var(--weight-medium) 14px/1.4 var(--font-ui); color: var(--text-body); }
.bc-answer-box { background: var(--surface-card); border: 1px solid var(--border-hairline); border-left: 3px solid var(--entry-sys, var(--accent)); border-radius: var(--radius-card); padding: var(--space-6) var(--space-8); max-width: var(--measure-reading); }
.bc-answer-box p { margin: 0 0 var(--space-3); font: 400 19px/1.55 var(--font-serif); color: var(--text-strong); }
.bc-answer-box p:last-child { margin-bottom: 0; }
.bc-helps-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-hairline); max-width: var(--measure-reading); }
.bc-helps-list li { display: grid; grid-template-columns: 18px 1fr; gap: var(--space-3); align-items: baseline; padding: var(--space-4) var(--space-2); border-bottom: 1px solid var(--border-hairline); font: 400 18px/1.5 var(--font-serif); color: var(--text-body); }
.bc-helps-list li::before { content: ""; width: 7px; height: 7px; margin-top: 8px; background: var(--entry-sys, var(--accent)); transform: rotate(45deg); }
.bc-disambig { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); max-width: var(--measure-reading); margin-bottom: var(--space-6); }
@media (max-width: 760px) { .bc-disambig { grid-template-columns: 1fr; } }
.bc-disambig-common, .bc-disambig-bc { border: 1px solid var(--border-hairline); border-radius: var(--radius-card); padding: 20px var(--space-6); background: var(--surface-page); }
.bc-disambig-bc { border-left: 3px solid var(--entry-sys, var(--accent)); background: var(--surface-card); }
.bc-disambig-bc .bc-eyebrow { color: var(--entry-sys, var(--accent)); }
.bc-disambig p { margin: var(--space-3) 0 0; font: 400 17px/1.55 var(--font-serif); color: var(--text-secondary); }
.bc-disambig-bc p { color: var(--text-strong); }
.bc-mechanism { list-style: none; margin: 0 0 var(--space-6); padding: 0; counter-reset: mech; display: flex; flex-direction: column; gap: var(--space-3); max-width: var(--measure-reading); }
.bc-mechanism li { counter-increment: mech; display: grid; grid-template-columns: 32px 1fr; gap: var(--space-4); align-items: baseline; font: 400 17px/1.55 var(--font-serif); color: var(--text-body); }
.bc-mechanism li::before { content: counter(mech); font: 600 14px/1 var(--font-mono); color: var(--entry-sys, var(--accent)); }
.bc-example-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-4); }
.bc-example-card { border: 1px solid var(--border-hairline); border-left: 3px solid var(--entry-sys, var(--accent)); border-radius: var(--radius-card); padding: var(--space-6); background: var(--surface-page); }
.bc-example-title { font: var(--weight-medium) 17px/1.3 var(--font-serif); color: var(--text-strong); margin-bottom: var(--space-2); }
.bc-example-card p { margin: 0; font: 400 16px/1.6 var(--font-serif); color: var(--text-secondary); }
.bc-provenance-checklist { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); max-width: var(--measure-reading); }
.bc-provenance-checklist li { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--weight-medium) 13px/1 var(--font-ui); color: var(--text-muted); }
.bc-provenance-checklist li.is-ok { color: var(--text-body); }
.bc-provenance-checklist li::before { content: ""; width: 15px; height: 15px; flex: 0 0 auto; display: inline-flex; border-radius: 50%; border: 1px solid var(--border-hairline); }
.bc-provenance-checklist li.is-ok::before { content: "\2713"; align-items: center; justify-content: center; border-color: var(--entry-sys, var(--accent)); color: var(--entry-sys, var(--accent)); font-size: 10px; line-height: 13px; text-align: center; }
.bc-attr-type { display: inline-flex; align-items: center; gap: var(--space-2); border: 1px solid var(--border-hairline); border-left: 3px solid var(--entry-sys, var(--accent)); border-radius: var(--radius-card); padding: 6px 14px; margin: 0 0 var(--space-4); font: var(--weight-medium) 14px/1.4 var(--font-ui); color: var(--text-strong); }
.bc-reading-path { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); max-width: var(--measure-reading); }
.bc-rp-here { display: inline-flex; align-items: center; font: 600 16px/1 var(--font-serif); color: var(--text-strong); border: 1px solid var(--entry-sys, var(--accent)); border-radius: var(--radius-round); padding: 6px 14px; background: var(--surface-card); }
.bc-rp-arrow { color: var(--entry-sys, var(--accent)); font-size: 16px; }
.bc-reading-path a { font: 400 16px/1 var(--font-serif); color: var(--text-link); text-decoration: none; border: 1px solid var(--border-hairline); border-radius: var(--radius-round); padding: 6px 14px; transition: border-color var(--dur-fast) var(--ease-standard); }
.bc-reading-path a:hover { border-color: var(--entry-sys, var(--accent)); }
.bc-then-read { margin-top: var(--space-6); }
.bc-book-link { color: inherit; text-decoration: none; }
.bc-book-link:hover { color: var(--text-link); }
.bc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .bc-grid-2 { grid-template-columns: 1fr; } }

/* Neighbourhood diagram */
.bc-neighbourhood { margin: 0 0 var(--space-6); border: 1px solid var(--border-hairline); border-left: 3px solid var(--entry-sys, var(--accent)); border-radius: var(--radius-card); background: var(--surface-page); padding: var(--space-8) var(--space-6) var(--space-6); }
.bc-neighbourhood svg { display: block; max-width: 480px; margin: 0 auto; width: 100%; }
.bc-nbh-label { font: 600 11px Inter, system-ui, sans-serif; fill: var(--text-secondary); }
.bc-nbh-center { font: 700 12.5px Inter, system-ui, sans-serif; letter-spacing: 0.02em; fill: var(--text-strong); }
.bc-neighbourhood a:hover .bc-nbh-label { fill: var(--text-link); }
.bc-neighbourhood figcaption { font: 400 15.5px/1.6 var(--font-serif); color: var(--text-secondary); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border-hairline); max-width: var(--measure-reading); }

/* Concept map page */
.bc-map-page { padding-top: var(--space-12); padding-bottom: var(--space-16); }
.bc-map-controls { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4) var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-6); }
.bc-map-controls .bc-chip-row { flex: 1 1 auto; }
.bc-map-search { flex: 0 0 288px; }
@media (max-width: 760px) { .bc-map-search { flex: 1 1 100%; order: -1; } }
.bc-map-wrap { position: relative; width: 100%; height: 620px; border: 1px solid color-mix(in srgb, var(--border-hairline) 55%, var(--ink-3)); border-radius: 10px; background: var(--surface-card); overflow: hidden; }
.bc-map-wrap canvas { display: block; touch-action: none; }
.bc-map-count { position: absolute; left: var(--space-4); top: var(--space-4); font: var(--type-mono-weight) var(--type-mono-size)/1 var(--type-mono-font); color: var(--text-muted); pointer-events: none; }
.bc-map-toolbar { position: absolute; right: var(--space-4); top: var(--space-4); display: flex; gap: 6px; }
.bc-map-toolbar button { min-width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-page); border: 1px solid var(--border-hairline); border-radius: var(--radius-pill); color: var(--text-secondary); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 6px; }
.bc-map-toolbar button:hover { border-color: var(--accent); color: var(--text-link); }
.bc-map-toolbar [data-map-legend-toggle] { font: 600 12px/1 var(--font-ui); letter-spacing: 0.04em; padding: 0 10px; }
.bc-map-legend { position: absolute; left: var(--space-4); top: calc(var(--space-4) + 26px); width: 252px; background: var(--surface-page); border: 1px solid var(--border-hairline); border-radius: var(--radius-card); box-shadow: var(--elevation-overlay); padding: var(--space-4) var(--space-6); z-index: 3; }
.bc-map-legend-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
.bc-map-legend-head button { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0; }
.bc-map-legend-rows { display: flex; flex-direction: column; gap: 6px; font: 400 12.5px/1.5 var(--font-ui); color: var(--text-secondary); }
.bc-map-legend-rows strong { color: var(--text-body); }
.bc-map-legend-systems { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-hairline); }
.bc-map-legend-systems span { display: inline-flex; align-items: center; gap: 5px; font: 400 11px/1.4 var(--font-ui); color: var(--text-secondary); }
.bc-map-hint { position: absolute; right: var(--space-4); bottom: var(--space-4); font: var(--weight-medium) 12.5px/1 var(--font-ui); color: var(--text-secondary); background: color-mix(in srgb, var(--surface-card) 88%, transparent); padding: 5px 12px; border-radius: var(--radius-pill); pointer-events: none; }
.bc-howto { margin-top: var(--space-4); background: var(--surface-card); border: 1px solid var(--border-hairline); border-left: 3px solid var(--accent); border-radius: var(--radius-card); padding: var(--space-4) var(--space-6); }
.bc-howto-label { font: 700 11px/1 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 4px; }
.bc-howto p { margin: 0; font: 400 16px/1.6 var(--font-serif); color: var(--text-secondary); max-width: var(--measure-reading); }

/* Term preview + book modal */
.bc-term-preview, .bc-book-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: var(--space-6); background: color-mix(in srgb, var(--ink-1) 36%, transparent); backdrop-filter: blur(6px); }
.bc-term-preview[hidden], .bc-book-modal[hidden] { display: none; }
.bc-term-preview-card, .bc-book-modal-card { width: min(460px, 100%); background: var(--surface-page); border: 1px solid var(--border-hairline); border-radius: var(--radius-card); box-shadow: var(--elevation-overlay); padding: var(--space-8); }
.bc-term-preview-card { border-left: 3px solid var(--card-sys, var(--accent)); }
.bc-book-modal-card { border-top: 3px solid var(--accent); }
.bc-term-preview-top, .bc-book-modal-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.bc-term-preview-top button, .bc-book-modal-top button { background: none; border: none; cursor: pointer; font-size: 20px; line-height: 1; color: var(--text-muted); padding: 0; }
.bc-term-preview-card h3 { font: var(--weight-medium) 26px/1.2 var(--font-serif); color: var(--text-strong); margin: var(--space-3) 0 var(--space-2); }
.bc-term-preview-card p { font: 400 16.5px/1.55 var(--font-serif); color: var(--text-secondary); margin: 0 0 var(--space-6); }
.bc-term-preview-actions { display: flex; align-items: center; gap: var(--space-4); }
.bc-linklike { background: none; border: none; cursor: pointer; font: var(--weight-medium) 14px/1 var(--font-ui); color: var(--text-muted); }
.bc-book-modal-card h3 { font: var(--weight-medium) 24px/1.2 var(--font-serif); font-style: italic; color: var(--text-strong); margin: var(--space-3) 0 2px; }
.bc-book-modal-card p { font: 400 16.5px/1.55 var(--font-serif); color: var(--text-secondary); margin: var(--space-4) 0 var(--space-6); }

/* Bibliography */
.bc-bib { padding-top: var(--space-12); padding-bottom: var(--space-12); display: flex; flex-direction: column; gap: var(--space-4); }
.bc-bib-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); align-items: center; background: var(--surface-page); border: 1px solid var(--border-hairline); border-left: 3px solid var(--accent); border-radius: var(--radius-card); padding: var(--space-8); }
@media (max-width: 760px) { .bc-bib-card { grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-6); } }
.bc-bib-title { font: var(--weight-medium) 22px/1.25 var(--font-serif); font-style: italic; color: var(--text-strong); text-decoration: none; }
.bc-bib-title:hover { color: var(--text-link); }
.bc-bib-byline { font: var(--weight-medium) var(--type-meta-size)/1.4 var(--font-ui); letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--text-muted); margin: 4px 0 var(--space-3); }
.bc-bib-note { margin: 0; font: 400 17px/1.6 var(--font-serif); color: var(--text-secondary); max-width: var(--measure-reading); }
.bc-bib-cta { font: var(--weight-medium) 14px/1 var(--font-ui); color: var(--text-link); text-decoration: none; white-space: nowrap; justify-self: start; }

/* Footer per handoff */
.bc-logotype-footer { font-size: 20px; }
.bc-footer-inner { grid-template-columns: 2fr 1fr 1fr; }

/* Directive-interpreter output */
.bc-disambig-single { grid-template-columns: 1fr; }
.bc-no-coinage { font: var(--weight-medium) 14px/1.6 var(--font-ui); color: var(--text-muted); border-top: 1px solid var(--border-hairline); padding-top: var(--space-3); max-width: var(--measure-reading); }

/* Layer cross-links */
.bc-full-article-link { margin: 0 0 var(--space-4); }
.bc-full-article-link a { display: inline-flex; align-items: center; gap: 6px; font: var(--weight-medium) 15px/1 var(--font-ui); color: var(--text-link); text-decoration: none; border: 1px solid var(--border-hairline); border-radius: var(--radius-round); padding: 8px 16px; background: var(--surface-page); transition: border-color var(--dur-fast) var(--ease-standard); }
.bc-full-article-link a:hover { border-color: var(--entry-sys, var(--accent)); }
a.bc-concept-link { color: var(--text-link); text-decoration: none; }

/* Article layout without sidebar; reference card at the bottom */
.bc-article-layout-single { padding-top: var(--space-8); }
.bc-article-layout-single .bc-entry-main { max-width: 860px; }
.bc-reference-bottom .bc-infobox { position: static; max-width: 560px; }

/* System articles share the article width */
.bc-measure-wide { max-width: var(--layout-max); }
.bc-measure-wide .bc-defsection { margin-bottom: var(--space-12); }

/* Bird logo (design assets reference: 42px desktop / 34px mobile, favicon = bird-navy) */
.bc-logo-bird { width: 42px; height: 42px; object-fit: contain; display: block; }
.bc-logo-bird-sm { width: 26px; height: 26px; }
.bc-logotype { align-items: center; }
@media (max-width: 760px) { .bc-logo-bird { width: 34px; height: 34px; } }
html, body { overflow-x: clip; }

/* ---------- Canonical article: status, meaning chain, principles, FAQ ---------- */
.bc-why-matters { margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--border-hairline); font: 400 17px/1.6 var(--font-serif); color: var(--text-secondary); }
.bc-why-matters .bc-eyebrow { display: block; margin-bottom: 4px; }
.bc-placement-row a { color: var(--text-link); text-decoration: none; text-underline-offset: 3px; }
.bc-placement-row a:hover { text-decoration: underline; }

.bc-status-block { max-width: var(--measure-reading); border: 1px solid var(--border-hairline); border-left: 3px solid var(--sys-life, #3E6B43); border-radius: var(--radius-card); background: var(--surface-card); padding: var(--space-4) var(--space-6); margin: 0 0 var(--space-12); }
.bc-status-block.is-open { border-left-color: var(--sys-self, #9A6A12); }
.bc-status-block ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.bc-status-block li { display: grid; grid-template-columns: 18px 1fr; gap: var(--space-3); align-items: baseline; padding: var(--space-2) 0; font: 400 16px/1.6 var(--font-serif); color: var(--text-secondary); }
.bc-status-block li + li { border-top: 1px solid var(--border-hairline); }
.bc-status-block li::before { content: ""; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--border-hairline); }
.bc-status-block li.is-ok::before { content: "\2713"; border-color: var(--sys-life, #3E6B43); color: var(--sys-life, #3E6B43); font-size: 9px; line-height: 11px; text-align: center; }
.bc-status-block li.is-open::before { border-color: var(--sys-self, #9A6A12); background: var(--sys-self-wash, #F3ECDB); }
.bc-status-block strong { color: var(--text-strong); font-weight: 600; }

.bc-disambig-list { margin: 0; max-width: var(--measure-reading); }
.bc-disambig-item { display: grid; grid-template-columns: 34% 1fr; gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--border-hairline); }
.bc-disambig-item:last-child { border-bottom: 1px solid var(--border-hairline); }
.bc-disambig-item dt { font: 600 15px/1.5 var(--font-serif); color: var(--text-strong); }
.bc-disambig-item dd { margin: 0; font: 400 16.5px/1.6 var(--font-serif); color: var(--text-secondary); }
@media (max-width: 640px) { .bc-disambig-item { grid-template-columns: 1fr; gap: 2px; } }

.bc-principles { list-style: none; margin: 0; padding: 0; max-width: var(--measure-reading); counter-reset: prin; }
.bc-principles li { counter-increment: prin; position: relative; padding: var(--space-3) 0 var(--space-3) var(--space-8); border-bottom: 1px solid var(--border-hairline); }
.bc-principles li::before { content: counter(prin); position: absolute; left: 0; top: var(--space-3); font: 600 13px/1.5 var(--font-mono); color: var(--entry-sys, var(--accent)); }
.bc-principle-name { display: block; font: 500 17px/1.4 var(--font-serif); color: var(--text-strong); }
.bc-principle-text { display: block; margin-top: 3px; font: 400 16.5px/1.6 var(--font-serif); color: var(--text-secondary); }

.bc-faq { max-width: var(--measure-reading); border-top: 1px solid var(--border-hairline); }
.bc-faq-item { border-bottom: 1px solid var(--border-hairline); }
.bc-faq-item summary { cursor: pointer; list-style: none; padding: var(--space-4) var(--space-8) var(--space-4) 0; position: relative; font: 500 17px/1.5 var(--font-serif); color: var(--text-strong); }
.bc-faq-item summary::-webkit-details-marker { display: none; }
.bc-faq-item summary::after { content: "+"; position: absolute; right: 4px; top: var(--space-4); color: var(--entry-sys, var(--accent)); font: 400 20px/1.2 var(--font-ui); }
.bc-faq-item[open] summary::after { content: "\2212"; }
.bc-faq-item summary:hover { color: var(--text-link); }
.bc-faq-a { padding: 0 var(--space-8) var(--space-4) 0; }
.bc-faq-a p { margin: 0; font: 400 16.5px/1.65 var(--font-serif); color: var(--text-secondary); }

/* Homepage hero: accent word, question and term chips */
.bc-accent-word { color: var(--sys-power, #8E2F2A); }
.bc-chips-block { margin-top: var(--space-6); }
.bc-chips-label { display: block; font: 700 11px/1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: var(--space-3); }
.bc-chip-q { font-family: var(--font-serif); font-size: 15px; font-weight: 400; text-align: left; }
.bc-chip-term { font-weight: 500; text-decoration: none; }
.bc-question-chips, .bc-term-chips { gap: var(--space-2); }
@media (max-width: 640px) { .bc-chip { font-size: 13px; padding: 7px 12px; } }

/* Provenance labels — compact, quiet, inside Sources and provenance */
.bc-provenance { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); max-width: var(--measure-reading); }
.bc-provenance li { display: inline-flex; align-items: center; gap: 7px; font: 500 13px/18px var(--font-sans); letter-spacing: 0.04em; color: var(--text-muted); }
.bc-provenance li::before { content: ""; width: 7px; height: 7px; border-radius: var(--radius-round); background: var(--border-strong); flex: 0 0 auto; }
.bc-provenance li.is-ok { color: var(--text-secondary); }
.bc-provenance li.is-ok::before { background: var(--entry-sys, var(--accent)); }

/* ============================================================
   site/index.html parity — page + responsive rules carried over
   from the React prototype's index.html <style> block. Only the
   rules NOT already implemented above are added here; prototype
   selectors (#root > div > header, .mobile-nav-*, .qs-*) are
   deliberately omitted because the theme markup implements the
   same behaviour with .bc-header, .bc-mobile-toggle, .bc-search-*.
   ============================================================ */
html, body { min-height: 100%; }
main, .bc-main { min-height: 60vh; }        /* keep the footer down on short pages (404, thin search) */
img, canvas, svg, video { max-width: 100%; } /* blanket media containment (prototype parity) */
summary::-webkit-details-marker { display: none; } /* broaden marker hide beyond .bc-faq-item */

/* Intermediate gutter step the theme was missing: 32 → 20 → 16.
   Bounded to 641–900px so it does NOT override the theme's 16px
   rule at 640px and below (which is defined earlier in this file). */
@media (max-width: 900px) and (min-width: 641px) { :root { --gutter: 20px; } }

/* Related-question links (fallback section on article entries) */
.bc-question-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); max-width: var(--measure-reading); }
.bc-question-link { font: 400 16px/1.4 var(--font-serif); color: var(--text-link); text-decoration: none; border: 1px solid var(--border-hairline); border-radius: var(--radius-round); padding: var(--space-2) var(--space-4); transition: border-color var(--dur-fast) var(--ease-standard); }
.bc-question-link:hover, .bc-question-link:focus { border-color: var(--accent); text-decoration: none; }

/* Compare-this-concept list (fallback section on article entries) */
.bc-compare-list { list-style: none; margin: 0; padding: 0; max-width: var(--measure-reading); }
.bc-compare-list li { padding: var(--space-3) 0; border-bottom: 1px solid var(--border-hairline); font: 400 17px/1.5 var(--font-serif); color: var(--text-secondary); }
.bc-compare-list li a { color: var(--text-link); }