.bb-section { margin-bottom: 72px; }
  .bb-section__head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 24px; }
  .bb-section__num { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.18em; color: var(--gold); }
  .bb-section__title { font-family: var(--font-head); font-size: 32px; color: var(--ink); margin: 0; }
  .bb-section__head::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); align-self: center; margin-left: 12px; }
  .bb-lede { font-size: 14px; color: var(--ink-soft); line-height: 1.65; max-width: 760px; margin: -8px 0 24px; }

  /* Cover */
  .bb-cover {
    margin-bottom: 56px;
    padding: 80px 48px;
    background:
      radial-gradient(600px 300px at 50% 35%, rgba(231,200,120,0.18), transparent 65%),
      linear-gradient(180deg, #0a0d18, #08070c);
    border: 1px solid var(--line);
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .bb-cover::before, .bb-cover::after {
    content: ''; position: absolute; width: 28px; height: 28px;
    border: 1px solid var(--gold); opacity: 0.5;
  }
  .bb-cover::before { top: 16px; left: 16px; border-right: none; border-bottom: none; }
  .bb-cover::after  { bottom: 16px; right: 16px; border-left: none; border-top: none; }
  .bb-cover__eyebrow {
    font-family: var(--font-ui); font-size: 12px;
    letter-spacing: 0.4em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 28px;
    display: flex; align-items: center; gap: 16px; justify-content: center;
  }
  .bb-cover__eyebrow::before, .bb-cover__eyebrow::after { content: ''; width: 60px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
  .bb-cover__eyebrow::after { background: linear-gradient(-90deg, transparent, var(--gold)); }
  .bb-cover__title {
    font-family: var(--font-head); font-weight: 500;
    font-size: 96px; line-height: 0.9; letter-spacing: 0.16em;
    margin: 0; text-transform: uppercase;
    background: linear-gradient(180deg, #fff3c8 0%, #e7c878 40%, #c9a44a 60%, #8a6a26 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .bb-cover__sub { font-family: var(--font-head); font-style: italic; font-size: 24px; color: var(--parch); margin-top: 8px; letter-spacing: 0.32em; text-transform: uppercase; }
  .bb-cover__meta { margin-top: 36px; font-size: 11px; color: var(--ink-mute); letter-spacing: 0.16em; text-transform: uppercase; }

  /* TOC */
  .bb-toc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 32px; padding: 24px 28px; background: var(--bg-panel); border: 1px solid var(--line-soft); margin-bottom: 56px; }
  .bb-toc a { display: flex; gap: 12px; align-items: baseline; padding: 6px 0; font-size: 13px; color: var(--ink-soft); transition: color 0.18s; }
  .bb-toc a:hover { color: var(--gold-bright); }
  .bb-toc a span { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--gold); letter-spacing: 0.18em; }

  /* Logo specs */
  .bb-logo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .bb-logo-card { padding: 36px; background: var(--bg-panel); border: 1px solid var(--line); text-align: center; }
  .bb-logo-card--light { background: #efe2b8; }
  .bb-logo-card__caption { margin-top: 18px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
  .bb-logo-card--light .bb-logo-card__caption { color: rgba(101,65,22,0.7); }
  .bb-logo-mark { font-family: var(--font-head); font-size: 64px; font-weight: 500; letter-spacing: 0.16em; line-height: 1; text-transform: uppercase; background: linear-gradient(180deg, #fff3c8 0%, #e7c878 40%, #c9a44a 60%, #8a6a26 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .bb-logo-card--light .bb-logo-mark { background: linear-gradient(180deg, #6f4a18 0%, #5a3a10 35%, #3a2208 70%, #1a0e04 100%); -webkit-background-clip: text; background-clip: text; }
  .bb-logo-sub { font-family: var(--font-head); font-style: italic; font-size: 16px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--parch); margin-top: 4px; }
  .bb-logo-card--light .bb-logo-sub { color: rgba(101,65,22,0.7); }

  .bb-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px; }
  .bb-rule { padding: 16px 20px; background: var(--bg-panel); border: 1px solid var(--line-soft); font-size: 13px; color: var(--ink-soft); line-height: 1.55; display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
  .bb-rule__mark { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 1px solid currentColor; flex-shrink: 0; }
  .bb-rule__mark svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; }
  .bb-rule.ok .bb-rule__mark { color: #6bd57f; }
  .bb-rule.no .bb-rule__mark { color: var(--fury-2); }
  .bb-rule strong { color: var(--ink); display: block; margin-bottom: 2px; }

  /* Color swatches */
  .swatch-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
  .swatch { aspect-ratio: 1 / 1.1; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; border: 1px solid var(--line-soft); position: relative; }
  .swatch__name { font-family: var(--font-head); font-size: 14px; letter-spacing: 0.04em; }
  .swatch__hex { font-family: 'JetBrains Mono', monospace; font-size: 10px; margin-top: 2px; }
  .swatch__var { font-family: 'JetBrains Mono', monospace; font-size: 9px; opacity: 0.75; margin-top: 2px; letter-spacing: 0.04em; }
  .swatch--dark { color: var(--parch); }
  .swatch--dark .swatch__hex, .swatch--dark .swatch__var { color: rgba(255,255,255,0.6); }
  .swatch--light { color: #1a1208; }
  .swatch--light .swatch__hex, .swatch--light .swatch__var { color: rgba(26,18,8,0.65); }
  .palette-group { margin-bottom: 24px; }
  .palette-group__title { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }

  /* Type */
  .type-row { display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px dashed var(--line-soft); align-items: center; }
  .type-row:last-child { border-bottom: none; }
  .type-row__meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-mute); line-height: 1.55; }
  .type-row__meta strong { color: var(--gold); font-weight: 500; }
  .type-row__demo { color: var(--ink); }

  /* Buttons / specimens */
  .specimen { display: flex; gap: 12px; flex-wrap: wrap; padding: 24px; background: repeating-linear-gradient(45deg, rgba(201,164,74,0.02) 0 2px, transparent 2px 16px), var(--bg-panel); border: 1px solid var(--line-soft); margin-bottom: 16px; align-items: center; }
  .specimen-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; align-items: center; text-align: center; }
  .state-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-top: 8px; }

  /* Components grid */
  .comp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .comp-card { padding: 24px; background: var(--bg-panel); border: 1px solid var(--line-soft); }
  .comp-card h3 { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-bright); margin: 0 0 14px; }
  .comp-card__note { font-size: 11.5px; color: var(--ink-mute); margin-top: 12px; line-height: 1.5; }
  .comp-card__note code { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--gold); background: rgba(201,164,74,0.06); padding: 1px 5px; border-radius: 2px; }

  /* Icon style */
  .icon-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; }
  .icon-tile { aspect-ratio: 1; border: 1px solid var(--line-soft); display: grid; place-items: center; background: var(--bg-panel); color: var(--gold); }
  .icon-tile svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.4; }
  .icon-tile__name { display: none; }

  /* Form specimens */
  .form-demo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .form-demo label { display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px; }

  /* Voice */
  .voice { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .voice-card { padding: 20px 22px; background: var(--bg-panel); border: 1px solid var(--line-soft); }
  .voice-card h3 { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 10px; }
  .voice-card.is-do h3 { color: #6bd57f; }
  .voice-card.is-no h3 { color: var(--fury-2); }
  .voice-card ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
  .voice-card li { margin-bottom: 4px; }

  /* Grid / layout */
  .grid-demo { background: repeating-linear-gradient(90deg, rgba(201,164,74,0.06) 0 1px, transparent 1px calc(100%/12)), var(--bg-panel); border: 1px solid var(--line-soft); padding: 20px; }
  .grid-demo__row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; margin-bottom: 10px; }
  .grid-demo__cell { background: rgba(201,164,74,0.18); height: 28px; border: 1px solid rgba(201,164,74,0.35); font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--gold-bright); display: grid; place-items: center; }
  .spacing-scale { display: flex; gap: 14px; align-items: flex-end; padding: 24px; background: var(--bg-panel); border: 1px solid var(--line-soft); }
  .spacing-block { background: linear-gradient(180deg, var(--gold-bright), var(--gold-2)); width: 56px; text-align: center; padding-bottom: 6px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #0b0d12; }