/*
 * Biblical Names Concordance — base stylesheet.
 *
 * Palette:
 *   --bbn-navy   : trust / authority      (primary headings, links)
 *   --bbn-gold   : warmth / scripture     (accents, dividers)
 *   --bbn-cream  : background             (page bg)
 *   --bbn-ink    : readable body          (body copy)
 *   --bbn-boy / girl / unisex : soft section tints
 *
 * Typography:
 *   Serif (display): "Cormorant Garamond" w/ Georgia fallback
 *   Sans (body)    : system stack
 */

:root {
  --bbn-navy:    #1f2a4a;
  --bbn-navy-2:  #344066;
  --bbn-gold:    #b78a3e;
  --bbn-gold-2:  #d6b277;
  --bbn-cream:   #faf6ef;
  --bbn-paper:   #fefcf8;
  --bbn-ink:     #2b2d33;
  --bbn-ink-2:   #525663;
  --bbn-rule:    #e7e0d2;

  --bbn-boy-tint:    #eef2fa;
  --bbn-boy-line:    #c4d2ea;
  --bbn-girl-tint:   #faeef1;
  --bbn-girl-line:   #ecc6cf;
  --bbn-neutral-tint:#f3eee3;

  --bbn-tier-1:  #2e7d32;
  --bbn-tier-2:  #8e7a26;
  --bbn-tier-3:  #6c6c72;

  --bbn-radius:  10px;
  --bbn-shadow:  0 1px 3px rgba(31,42,74,0.06), 0 2px 8px rgba(31,42,74,0.04);

  --bbn-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --bbn-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.bbn-name {
  max-width: 860px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
  color: var(--bbn-ink);
  font-family: var(--bbn-body);
  line-height: 1.6;
}

.bbn-name h1, .bbn-name h2, .bbn-name h3 {
  font-family: var(--bbn-display);
  color: var(--bbn-navy);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.bbn-breadcrumbs {
  font-size: .875rem;
  color: var(--bbn-ink-2);
  margin-bottom: 1.5rem;
}
.bbn-breadcrumbs a {
  color: var(--bbn-navy-2);
  text-decoration: none;
}
.bbn-breadcrumbs a:hover { text-decoration: underline; }
.bbn-breadcrumbs span[aria-hidden] { margin: 0 .35rem; color: var(--bbn-gold); }

/* ==========================================================================
   Hero
   ========================================================================== */

.bbn-hero {
  text-align: center;
  padding: 2.5rem 1rem 2rem;
  background: var(--bbn-paper);
  border-radius: var(--bbn-radius);
  border: 1px solid var(--bbn-rule);
  position: relative;
  margin-bottom: 2rem;
}
.bbn-hero::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--bbn-gold-2);
  opacity: .35;
  border-radius: calc(var(--bbn-radius) - 4px);
  pointer-events: none;
}
.bbn-hero__eyebrow {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--bbn-ink-2);
  margin: 0 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center;
}
.bbn-hero__name {
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  margin: 0 0 .5rem;
  line-height: 1;
}
.bbn-hero__meaning {
  font-family: var(--bbn-display);
  font-style: italic;
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  color: var(--bbn-navy-2);
  margin: 0 0 1rem;
}
.bbn-hero__pron {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 0 1.5rem;
  font-size: 1.1rem;
}
.bbn-translit {
  font-style: italic;
  color: var(--bbn-ink-2);
}
.bbn-hero__actions {
  display: flex;
  gap: .6rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
}

/* ==========================================================================
   Badges
   ========================================================================== */

.bbn-badge {
  display: inline-block;
  background: var(--bbn-cream);
  border: 1px solid var(--bbn-rule);
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: .04em;
  color: var(--bbn-navy-2);
}
.bbn-badge--gender { background: var(--bbn-navy); color: #fff; border-color: var(--bbn-navy); }
.bbn-gender-boy   .bbn-badge--gender { background: #3552a0; border-color: #3552a0; }
.bbn-gender-girl  .bbn-badge--gender { background: #b03c5b; border-color: #b03c5b; }
.bbn-gender-unisex.bbn-badge--gender { background: var(--bbn-gold); border-color: var(--bbn-gold); }
.bbn-badge--tier-1 { color: var(--bbn-tier-1); border-color: var(--bbn-tier-1); }
.bbn-badge--tier-2 { color: var(--bbn-tier-2); border-color: var(--bbn-tier-2); }
.bbn-badge--tier-3 { color: var(--bbn-tier-3); border-color: var(--bbn-tier-3); }

/* ==========================================================================
   Save / share buttons
   ========================================================================== */

.bbn-save, .bbn-share {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--bbn-rule);
  background: #fff;
  color: var(--bbn-navy);
  font-size: .9rem;
  text-decoration: none;
  cursor: pointer;
  transition: all .15s ease;
}
.bbn-save:hover, .bbn-share:hover {
  border-color: var(--bbn-gold);
  background: var(--bbn-paper);
}
.bbn-save[data-saved="1"] {
  background: var(--bbn-gold);
  color: #fff;
  border-color: var(--bbn-gold);
}

/* ==========================================================================
   Sections
   ========================================================================== */

.bbn-section {
  margin: 2.5rem 0;
  padding: 1.5rem;
  background: var(--bbn-paper);
  border: 1px solid var(--bbn-rule);
  border-radius: var(--bbn-radius);
}
.bbn-section h2 {
  font-size: 1.55rem;
  margin: 0 0 1rem;
  display: flex;
  align-items: baseline;
  gap: .6rem;
}
.bbn-section h2::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--bbn-gold);
}
.bbn-section__subtle { color: var(--bbn-ink-2); margin-top: -.5rem; }

.bbn-gender-boy   .bbn-section { background: var(--bbn-boy-tint);    border-color: var(--bbn-boy-line); }
.bbn-gender-girl  .bbn-section { background: var(--bbn-girl-tint);   border-color: var(--bbn-girl-line); }
.bbn-gender-unisex .bbn-section { background: var(--bbn-neutral-tint); }

/* ==========================================================================
   Etymology grid
   ========================================================================== */

.bbn-etym__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.bbn-etym__cell {
  background: #fff;
  border: 1px solid var(--bbn-rule);
  border-radius: 8px;
  padding: .75rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.bbn-etym__label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--bbn-ink-2);
}
.bbn-etym__value {
  font-size: 1.05rem;
  color: var(--bbn-navy);
}
.bbn-script--hebrew, .bbn-script--greek {
  font-family: "SBL Hebrew", "SBL Greek", "Cardo", Georgia, serif;
  font-size: 1.4rem;
  direction: ltr;
}
.bbn-script--hebrew { direction: rtl; font-family: "SBL Hebrew", "Cardo", "David", Georgia, serif; }

.bbn-etym__definition {
  background: #fff;
  border-left: 3px solid var(--bbn-gold);
  padding: .8rem 1rem;
  border-radius: 4px;
}
.bbn-etym__definition p { margin: 0 0 .5rem; }
.bbn-etym__definition p:last-child { margin: 0; }
.bbn-etym__definition br { line-height: 1.2; }
.bbn-etym__summary { margin: 1rem 0 0; font-style: italic; color: var(--bbn-navy-2); }

/* ==========================================================================
   Biblical narrative
   ========================================================================== */

.bbn-narrative p {
  margin: 0 0 1rem;
  font-size: 1.05rem;
}

/* ==========================================================================
   Verses (key + display)
   ========================================================================== */

.bbn-verses {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
}
.bbn-verse {
  background: #fff;
  border: 1px solid var(--bbn-rule);
  border-left: 4px solid var(--bbn-gold);
  border-radius: 6px;
  padding: 1rem 1.1rem;
  position: relative;
}
.bbn-verse__text {
  margin: 0 0 .4rem;
  font-family: var(--bbn-display);
  font-size: 1.1rem;
  color: var(--bbn-ink);
  line-height: 1.55;
}
.bbn-verse__ref {
  font-style: normal;
  font-size: .85rem;
  color: var(--bbn-navy);
  font-weight: 600;
}
.bbn-verse__note { color: var(--bbn-ink-2); font-size: .9rem; margin: .4rem 0 0; }

/* ==========================================================================
   All references (collapsible)
   ========================================================================== */

.bbn-all-refs[open] summary .bbn-all-refs__toggle::after { content: " ▾"; }
.bbn-all-refs summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--bbn-navy);
  list-style: none;
}
.bbn-all-refs summary::-webkit-details-marker { display: none; }
.bbn-all-refs__toggle::after { content: " ▸"; color: var(--bbn-gold); }
.bbn-all-refs__body {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
.bbn-book-refs {
  background: #fff;
  border: 1px solid var(--bbn-rule);
  border-radius: 6px;
  padding: .75rem .9rem;
}
.bbn-book-refs__book {
  margin: 0 0 .4rem;
  font-size: 1rem;
}
.bbn-book-refs__count {
  font-size: .75rem;
  color: var(--bbn-ink-2);
  font-weight: 400;
}
.bbn-book-refs__list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: .82rem;
  color: var(--bbn-ink-2);
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .5rem;
}

/* ==========================================================================
   Variants + bearers + related
   ========================================================================== */

.bbn-variants { padding-left: 1.2rem; }
.bbn-variants li { margin: 0 0 .4rem; }
.bbn-variants__lang {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--bbn-ink-2);
  background: var(--bbn-cream);
  padding: .05rem .35rem;
  border-radius: 4px;
}
.bbn-variants__note { color: var(--bbn-ink-2); font-size: .92rem; }

/* Learn more (external references) */
.bbn-learnmore__box {
  padding: 1rem 1.15rem;
  background: var(--bbn-cream);
  border: 1px solid var(--bbn-rule);
  border-left: 3px solid var(--bbn-gold);
  border-radius: var(--bbn-radius);
}
.bbn-learnmore__link {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--bbn-navy);
  text-decoration: none;
}
.bbn-learnmore__link:hover { text-decoration: underline; }
.bbn-learnmore__arrow { color: var(--bbn-gold); margin-left: .15rem; }
.bbn-learnmore__meta { margin: .5rem 0 0; }
.bbn-learnmore__meta a { color: var(--bbn-ink-2); font-size: .8rem; text-decoration: none; }
.bbn-learnmore__meta a:hover { text-decoration: underline; }

/* ==========================================================================
   Name comparison tool
   ========================================================================== */
.bbn-compare { margin: 1rem 0; }
.bbn-compare__loading { color: var(--bbn-ink-2); padding: 1rem 0; }
.bbn-compare__bar { margin-bottom: 1.25rem; }
.bbn-compare__chips { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.bbn-compare__chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .35rem .35rem .35rem .8rem;
  border: 1px solid var(--bbn-rule); border-radius: 999px;
  background: var(--bbn-neutral-tint); font-weight: 600; color: var(--bbn-navy);
}
.bbn-compare__chip.bbn-gender-boy  { background: var(--bbn-boy-tint);  border-color: var(--bbn-boy-line); }
.bbn-compare__chip.bbn-gender-girl { background: var(--bbn-girl-tint); border-color: var(--bbn-girl-line); }
.bbn-compare__x {
  border: 0; background: transparent; cursor: pointer;
  font-size: 1.15rem; line-height: 1; color: var(--bbn-ink-2); padding: 0 .2rem;
}
.bbn-compare__x:hover { color: #b3261e; }
.bbn-compare__add { position: relative; flex: 1 1 220px; min-width: 190px; }
.bbn-compare__input {
  width: 100%; padding: .55rem .75rem; font: inherit; background: var(--bbn-paper);
  border: 1px solid var(--bbn-rule); border-radius: var(--bbn-radius);
}
.bbn-compare__input:focus { outline: 2px solid var(--bbn-gold-2); outline-offset: 1px; border-color: var(--bbn-gold); }
.bbn-compare__ac {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
  margin: 0; padding: .25rem; list-style: none; background: #fff;
  border: 1px solid var(--bbn-rule); border-radius: var(--bbn-radius);
  box-shadow: var(--bbn-shadow); max-height: 280px; overflow-y: auto;
}
.bbn-compare__ac li { margin: 0; }
.bbn-compare__ac a { display: flex; flex-direction: column; padding: .4rem .6rem; text-decoration: none; color: var(--bbn-ink); border-radius: 6px; }
.bbn-compare__ac a:hover { background: var(--bbn-cream); }
.bbn-compare__ac span { color: var(--bbn-ink-2); font-size: .85rem; }
.bbn-compare__saved { margin-top: .65rem; font-size: .85rem; color: var(--bbn-ink-2); }
.bbn-compare__savedbtn {
  border: 1px solid var(--bbn-rule); background: var(--bbn-paper); color: var(--bbn-navy);
  border-radius: 999px; padding: .18rem .6rem; margin: .25rem .25rem 0 0; cursor: pointer; font-size: .82rem;
}
.bbn-compare__savedbtn:hover { background: var(--bbn-cream); }
.bbn-compare__empty {
  padding: 2rem 1rem; text-align: center; color: var(--bbn-ink-2);
  background: var(--bbn-cream); border: 1px dashed var(--bbn-rule); border-radius: var(--bbn-radius);
}
.bbn-compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bbn-compare__table { border-collapse: collapse; width: 100%; min-width: 420px; }
.bbn-compare__table th, .bbn-compare__table td {
  border: 1px solid var(--bbn-rule); padding: .7rem .8rem; text-align: left; vertical-align: top;
}
.bbn-compare__table td { background: #fff; }
.bbn-compare__table tbody th[scope=row] {
  position: sticky; left: 0; z-index: 2; background: var(--bbn-cream); color: var(--bbn-ink-2);
  font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em;
  white-space: nowrap; min-width: 116px;
}
.bbn-compare__corner { position: sticky; left: 0; z-index: 3; background: var(--bbn-paper); border-color: transparent !important; }
.bbn-compare__head {
  min-width: 148px; background: var(--bbn-neutral-tint) !important; vertical-align: middle;
}
.bbn-compare__head.bbn-gender-boy  { background: var(--bbn-boy-tint)  !important; }
.bbn-compare__head.bbn-gender-girl { background: var(--bbn-girl-tint) !important; }
.bbn-compare__head a { font-family: var(--bbn-display); font-size: 1.35rem; font-weight: 600; color: var(--bbn-navy); text-decoration: none; }
.bbn-compare__head a:hover { text-decoration: underline; }
.bbn-compare__head .bbn-compare__x { float: right; margin-left: .4rem; }
.bbn-compare__translit { color: var(--bbn-ink-2); font-size: .85rem; }
.bbn-compare__more { color: var(--bbn-ink-2); font-size: .82rem; white-space: nowrap; }
.bbn-compare__profile { color: var(--bbn-gold); font-weight: 600; text-decoration: none; white-space: nowrap; }
.bbn-compare__profile:hover { text-decoration: underline; }
.bbn-compare__actions { margin-top: 1rem; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.bbn-compare__copy {
  border: 1px solid var(--bbn-rule); background: var(--bbn-paper); color: var(--bbn-navy);
  border-radius: var(--bbn-radius); padding: .5rem .9rem; cursor: pointer; font: inherit; font-weight: 600;
}
.bbn-compare__copy:hover { background: var(--bbn-cream); }
.bbn-compare__copied { color: var(--bbn-tier-1); font-size: .9rem; }

.bbn-bearers__grid,
.bbn-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.bbn-bearer {
  background: #fff;
  border: 1px solid var(--bbn-rule);
  border-radius: 8px;
  padding: 1rem;
}
.bbn-bearer h3 { margin: 0 0 .25rem; font-size: 1.1rem; }
.bbn-bearer p  { margin: 0 0 .4rem; font-size: .92rem; }
.bbn-bearer__meta { color: var(--bbn-ink-2); font-size: .82rem; }

.bbn-related__card {
  background: #fff;
  border: 1px solid var(--bbn-rule);
  border-radius: 8px;
  padding: 1rem;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, border-color .15s ease;
}
.bbn-related__card:hover { transform: translateY(-2px); border-color: var(--bbn-gold); }
.bbn-related__card h3 { margin: 0 0 .25rem; font-size: 1.15rem; color: var(--bbn-navy); }
.bbn-related__card p  { margin: 0; color: var(--bbn-ink-2); font-size: .85rem; }

/* ==========================================================================
   Footer nav
   ========================================================================== */

.bbn-name-footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--bbn-rule); }
.bbn-name-footer__nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.bbn-name-footer__nav a {
  color: var(--bbn-navy);
  text-decoration: none;
  font-weight: 600;
}
.bbn-name-footer__nav a:hover { color: var(--bbn-gold); }

/* ==========================================================================
   Name-of-the-Day widget
   ========================================================================== */

.bbn-notd {
  background: var(--bbn-paper);
  border: 1px solid var(--bbn-rule);
  border-radius: var(--bbn-radius);
  padding: 1.25rem;
  text-align: center;
  font-family: var(--bbn-body);
}
.bbn-notd__label { font-size: .7rem; text-transform: uppercase; color: var(--bbn-gold); letter-spacing: .12em; margin: 0; }
.bbn-notd__title { font-family: var(--bbn-display); font-size: 2rem; margin: .25rem 0; }
.bbn-notd__title a { color: var(--bbn-navy); text-decoration: none; }
.bbn-notd__meaning { font-style: italic; color: var(--bbn-ink-2); margin: 0 0 .5rem; }
.bbn-notd__cta { color: var(--bbn-gold); font-weight: 600; text-decoration: none; }

/* ==========================================================================
   Archive (explorer + A-Z)
   ========================================================================== */

.bbn-archive {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
  color: var(--bbn-ink);
  font-family: var(--bbn-body);
}
.bbn-archive__header { text-align: center; margin-bottom: 2rem; }
.bbn-archive__header h1 {
  font-family: var(--bbn-display);
  font-size: clamp( 2rem, 5vw, 3rem );
  color: var(--bbn-navy);
  margin: 0 0 .5rem;
  letter-spacing: -.01em;
}
.bbn-archive__intro {
  color: var(--bbn-ink-2);
  max-width: 600px;
  margin: 0 auto 1.5rem;
}

.bbn-az {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  justify-content: center;
  margin: 1.5rem 0;
  padding: .75rem;
  background: var(--bbn-paper);
  border: 1px solid var(--bbn-rule);
  border-radius: var(--bbn-radius);
}
.bbn-az__letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: var(--bbn-navy);
  font-weight: 600;
  text-decoration: none;
  font-size: .85rem;
  transition: all .15s ease;
}
.bbn-az__letter:hover { background: var(--bbn-cream); color: var(--bbn-gold); }
.bbn-az__letter.is-current { background: var(--bbn-navy); color: #fff; }

/* Explorer form */

.bbn-explorer { width: 100%; }
.bbn-explorer__form {
  display: grid;
  grid-template-columns: 2fr repeat(5, 1fr);
  gap: .5rem;
  margin-bottom: 1.5rem;
}
.bbn-explorer__form input,
.bbn-explorer__form select {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--bbn-rule);
  border-radius: 6px;
  background: #fff;
  color: var(--bbn-ink);
  font-size: .9rem;
  font-family: inherit;
}
.bbn-explorer__form input:focus,
.bbn-explorer__form select:focus {
  outline: 2px solid var(--bbn-gold);
  outline-offset: 1px;
  border-color: var(--bbn-gold);
}

.bbn-explorer__results {
  display: grid;
  grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
  gap: 1rem;
}
.bbn-explorer__empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--bbn-ink-2);
  padding: 3rem 1rem;
}
.bbn-explorer__more { text-align: center; margin: 2rem 0 0; }
.bbn-explorer__more button {
  padding: .75rem 1.5rem;
  border: 1px solid var(--bbn-gold);
  background: #fff;
  color: var(--bbn-navy);
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.bbn-explorer__more button:hover { background: var(--bbn-gold); color: #fff; }

.bbn-card {
  background: var(--bbn-paper);
  border: 1px solid var(--bbn-rule);
  border-radius: var(--bbn-radius);
  padding: 1rem;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.bbn-card:hover {
  transform: translateY( -2px );
  border-color: var(--bbn-gold);
  box-shadow: var(--bbn-shadow);
}
.bbn-card h3 {
  margin: 0 0 .35rem;
  font-family: var(--bbn-display);
  font-size: 1.4rem;
  color: var(--bbn-navy);
}
.bbn-card p {
  margin: 0;
  color: var(--bbn-ink-2);
  font-size: .9rem;
  line-height: 1.45;
}
.bbn-card__meta {
  margin-top: .5rem !important;
  display: flex;
  gap: .5rem;
  font-size: .75rem;
}
.bbn-card__meta span {
  background: var(--bbn-cream);
  padding: .1rem .4rem;
  border-radius: 4px;
  color: var(--bbn-ink-2);
}

.bbn-gender-boy.bbn-card,
.bbn-card.bbn-gender-boy { border-left: 4px solid var(--bbn-boy-line); }
.bbn-gender-girl.bbn-card,
.bbn-card.bbn-gender-girl { border-left: 4px solid var(--bbn-girl-line); }

/* ==========================================================================
   Header search box
   ========================================================================== */

.bbn-search {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
}
.bbn-search input {
  width: 100%;
  padding: .65rem 1rem;
  border: 1px solid var(--bbn-rule);
  border-radius: 999px;
  background: #fff;
  font-size: .95rem;
}
.bbn-search input:focus {
  outline: 2px solid var(--bbn-gold);
  border-color: var(--bbn-gold);
}
.bbn-search__results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: .35rem 0 0;
  padding: .25rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--bbn-rule);
  border-radius: 8px;
  box-shadow: var(--bbn-shadow);
  z-index: 50;
  max-height: 350px;
  overflow-y: auto;
}
.bbn-search__results li { margin: 0; }
.bbn-search__results a {
  display: block;
  padding: .55rem .85rem;
  color: var(--bbn-ink);
  text-decoration: none;
  border-radius: 4px;
}
.bbn-search__results a:hover { background: var(--bbn-cream); }
.bbn-search__results strong { display: block; color: var(--bbn-navy); }
.bbn-search__results span   { color: var(--bbn-ink-2); font-size: .82rem; }

/* ==========================================================================
   Homepage
   ========================================================================== */

.bbn-home {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
  color: var(--bbn-ink);
  font-family: var(--bbn-body);
}
.bbn-home-hero {
  text-align: center;
  padding: 3rem 1rem 2.5rem;
  background: var(--bbn-paper);
  border: 1px solid var(--bbn-rule);
  border-radius: var(--bbn-radius);
  margin-bottom: 2.5rem;
  position: relative;
}
.bbn-home-hero::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid var(--bbn-gold-2);
  opacity: .25;
  border-radius: calc( var(--bbn-radius) - 6px );
  pointer-events: none;
}
.bbn-home-hero h1 {
  font-family: var(--bbn-display);
  font-size: clamp( 2.5rem, 7vw, 4rem );
  color: var(--bbn-navy);
  margin: 0 0 .5rem;
  letter-spacing: -.02em;
}
.bbn-home-hero__lede {
  max-width: 560px;
  margin: 0 auto 1.75rem;
  color: var(--bbn-ink-2);
  font-size: 1.05rem;
}
.bbn-home-hero__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}
.bbn-home-card {
  background: #fff;
  border: 1px solid var(--bbn-rule);
  border-radius: var(--bbn-radius);
  padding: 1.25rem 1rem;
  text-decoration: none;
  color: var(--bbn-navy);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  transition: all .15s ease;
}
.bbn-home-card:hover { transform: translateY( -2px ); border-color: var(--bbn-gold); }
.bbn-home-card__icon { font-size: 1.7rem; color: var(--bbn-gold); }
.bbn-home-card strong { font-family: var(--bbn-display); font-size: 1.2rem; }
.bbn-home-card span:not(.bbn-home-card__icon) { font-size: .85rem; color: var(--bbn-ink-2); }

.bbn-home-section {
  margin: 3rem 0;
}
.bbn-home-section h2 {
  font-family: var(--bbn-display);
  font-size: clamp( 1.6rem, 4vw, 2.1rem );
  color: var(--bbn-navy);
  margin: 0 0 1.25rem;
  letter-spacing: -.01em;
}
.bbn-home-section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1.25rem;
}
.bbn-home-section__head h2 { margin: 0; }
.bbn-home-section__more {
  color: var(--bbn-gold);
  text-decoration: none;
  font-weight: 600;
}
.bbn-home-section--accent {
  text-align: center;
  background: var(--bbn-paper);
  border: 1px solid var(--bbn-rule);
  border-radius: var(--bbn-radius);
  padding: 2rem;
}
.bbn-home-section--accent .bbn-random {
  margin-top: 1rem;
  padding: .75rem 1.75rem;
  font-size: 1rem;
  background: var(--bbn-navy);
  color: #fff;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.bbn-home-section--accent .bbn-random:hover { background: var(--bbn-gold); }
.bbn-home-section--trust {
  background: var(--bbn-navy);
  color: var(--bbn-paper);
  padding: 2rem;
  border-radius: var(--bbn-radius);
}
.bbn-home-section--trust h2 { color: var(--bbn-gold-2); }
.bbn-home-section--trust p { color: rgba( 255, 255, 255, .85 ); }

.bbn-home-grid {
  display: grid;
  grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
  gap: 1rem;
}

/* ==========================================================================
   My Names List
   ========================================================================== */

.bbn-mylist__empty { text-align: center; color: var(--bbn-ink-2); padding: 2rem; }
.bbn-mylist__grid  {
  display: grid;
  grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
  gap: 1rem;
}
.bbn-mylist-card {
  background: var(--bbn-paper);
  border: 1px solid var(--bbn-rule);
  border-radius: var(--bbn-radius);
  padding: 1rem;
  position: relative;
}
.bbn-mylist-card h3 { font-family: var(--bbn-display); margin: 0 0 .25rem; }
.bbn-mylist-card h3 a { color: var(--bbn-navy); text-decoration: none; }
.bbn-mylist-card p { color: var(--bbn-ink-2); font-size: .9rem; margin: 0 0 .5rem; }
.bbn-mylist-card button {
  background: transparent;
  border: 1px solid var(--bbn-rule);
  border-radius: 999px;
  color: var(--bbn-ink-2);
  font-size: .75rem;
  padding: .15rem .55rem;
  cursor: pointer;
}
.bbn-mylist-card button:hover { color: #c0392b; border-color: #c0392b; }

/* ==========================================================================
   Newsletter
   ========================================================================== */

.bbn-newsletter {
  background: var(--bbn-paper);
  border: 1px solid var(--bbn-rule);
  border-radius: var(--bbn-radius);
  padding: 1.5rem;
  text-align: center;
}
.bbn-newsletter h3 { font-family: var(--bbn-display); color: var(--bbn-navy); margin: 0 0 1rem; }
.bbn-newsletter form { display: flex; gap: .5rem; max-width: 380px; margin: 0 auto; flex-wrap: wrap; }
.bbn-newsletter input {
  flex: 1 1 60%;
  min-width: 0;
  padding: .55rem .75rem;
  border: 1px solid var(--bbn-rule);
  border-radius: 999px;
  background: #fff;
}
.bbn-newsletter button {
  flex: 1 1 30%;
  padding: .55rem 1.2rem;
  background: var(--bbn-navy);
  color: #fff;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.bbn-newsletter__note { color: var(--bbn-ink-2); font-size: .8rem; margin-top: .75rem; }

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 700px) {
  .bbn-explorer__form { grid-template-columns: 1fr 1fr; }
  .bbn-explorer__form input { grid-column: 1 / -1; }
  .bbn-az { padding: .5rem; }
  .bbn-az__letter { width: 28px; height: 28px; font-size: .8rem; }
  .bbn-home-hero__cards { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .bbn-name { padding: 1rem .75rem 3rem; }
  .bbn-archive { padding: 1rem .75rem 3rem; }
  .bbn-hero { padding: 1.5rem .75rem; }
  .bbn-section { padding: 1.25rem 1rem; }
  .bbn-hero__actions { flex-direction: column; align-items: stretch; }
  .bbn-name-footer__nav { flex-direction: column; }
  .bbn-explorer__form { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  .bbn-hero__actions, .bbn-name-footer, .bbn-all-refs summary { display: none; }
  .bbn-section, .bbn-hero { box-shadow: none; border-color: #888; }
  .bbn-name { max-width: none; padding: 0; }
  .bbn-all-refs[open] .bbn-all-refs__body { display: block !important; }
}

/* ============================================================================
   ENRICHMENT LAYER (Phase 6)
   Ported from the name-page mockup. The signature device is the provenance
   margin: every block names its sources in the left rail, so a reader can see
   where a figure came from without leaving the page.

   No web fonts are loaded here on purpose. The mockup called for Spectral and
   IBM Plex; fetching two families from a third-party host is two extra
   connections on the critical path and a render-blocking stylesheet, which is
   the wrong trade for LCP. The stacks below keep the serif/sans/mono contrast
   using faces already on the device, and a font can be added later behind
   font-display:swap if the design warrants the cost.
   ========================================================================== */
.bbn-enrich{
  --bbn-parchment:#F7F3E9;
  --bbn-vellum:#EDE6D5;
  --bbn-ink:#16243D;
  --bbn-ink-soft:#4A5568;
  --bbn-gold:#A8842C;
  --bbn-verdigris:#3F6B62;
  --bbn-rust:#8C4A32;
  --bbn-rule:#D8CFB8;
  --bbn-display:Spectral,Georgia,'Times New Roman',serif;
  --bbn-body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --bbn-mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono','Consolas',monospace;
  font-family:var(--bbn-body);
  color:var(--bbn-ink);
  margin:32px 0;
}

.bbn-enrich .bbn-seed{
  font-family:var(--bbn-display);font-size:1.28rem;line-height:1.55;
  max-width:62ch;margin:0 0 8px;
}

/* ---- the provenance margin ---- */
.bbn-enrich .bbn-block{
  display:grid;grid-template-columns:150px 1fr;gap:28px;
  padding:34px 0;border-top:1px solid var(--bbn-rule);margin:0;
}
.bbn-enrich .bbn-prov{
  font-family:var(--bbn-mono);font-size:10.5px;line-height:1.7;
  color:var(--bbn-ink-soft);text-transform:uppercase;letter-spacing:.06em;
  padding-top:4px;
}
.bbn-enrich .bbn-prov span{
  display:block;border-left:2px solid var(--bbn-gold);
  padding-left:8px;margin-bottom:7px;
}
.bbn-enrich .bbn-prov span.bbn-gated{border-left-color:var(--bbn-rust);color:var(--bbn-rust)}
.bbn-enrich .bbn-block h2{
  font-family:var(--bbn-body);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bbn-ink-soft);margin:0 0 16px;border:0;padding:0;
}

/* ---- signature band ---- */
.bbn-enrich .bbn-band{
  background:var(--bbn-ink);color:var(--bbn-parchment);
  border-radius:3px;padding:30px 32px;
}
.bbn-enrich .bbn-band h3{
  font-family:var(--bbn-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#9FB3C8;margin:0 0 22px;font-weight:400;
}
.bbn-enrich .bbn-axis{margin-bottom:26px}
.bbn-enrich .bbn-axis-label{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-family:var(--bbn-mono);font-size:11px;color:#9FB3C8;margin-bottom:7px;
}
.bbn-enrich .bbn-axis-label b{
  color:var(--bbn-parchment);font-family:var(--bbn-body);font-size:13px;font-weight:500;
}
.bbn-enrich .bbn-bar{height:7px;background:rgba(255,255,255,.1);border-radius:4px;overflow:hidden}
.bbn-enrich .bbn-bar i{display:block;height:100%;border-radius:4px}
.bbn-enrich .bbn-bar i.bbn-cdi{background:#E8C86A}
.bbn-enrich .bbn-bar i.bbn-usage{background:#6FA89C}
.bbn-enrich .bbn-band figure{margin:0}
/* Reserve the sparkline's box before it paints — the SVG carries a fixed
   viewBox, so this costs no layout shift. */
.bbn-enrich .bbn-band figure svg{display:block;height:110px;width:100%}
.bbn-enrich .bbn-band figcaption{
  font-family:var(--bbn-mono);font-size:10.5px;color:#9FB3C8;
  margin-top:8px;letter-spacing:.03em;
}

/* ---- stat grid ---- */
.bbn-enrich .bbn-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--bbn-rule);border:1px solid var(--bbn-rule);margin:0;
}
.bbn-enrich .bbn-stat{background:var(--bbn-parchment);padding:16px 18px}
.bbn-enrich .bbn-stat dt{
  font-family:var(--bbn-mono);font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--bbn-ink-soft);margin-bottom:5px;
}
.bbn-enrich .bbn-stat dd{margin:0;font-family:var(--bbn-display);font-size:27px;line-height:1.15}
.bbn-enrich .bbn-stat dd small{
  font-family:var(--bbn-body);font-size:12px;color:var(--bbn-ink-soft);
  display:block;margin-top:3px;line-height:1.4;
}

/* ---- tables ---- */
.bbn-enrich .bbn-table{width:100%;border-collapse:collapse;font-size:14.5px;margin:0}
.bbn-enrich .bbn-table th{
  text-align:left;font-family:var(--bbn-mono);font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--bbn-ink-soft);font-weight:400;
  padding:0 12px 9px 0;border-bottom:1px solid var(--bbn-rule);background:none;
}
.bbn-enrich .bbn-table td{
  padding:11px 12px 11px 0;border-bottom:1px solid var(--bbn-rule);vertical-align:top;
}
.bbn-enrich .bbn-table td.bbn-num{font-family:var(--bbn-mono);font-size:13px}
.bbn-enrich .bbn-table + .bbn-note,
.bbn-enrich .bbn-callout + .bbn-table{margin-top:16px}

.bbn-enrich .bbn-callout{
  background:var(--bbn-vellum);border-left:3px solid var(--bbn-gold);
  padding:16px 20px;font-size:15px;
}
.bbn-enrich .bbn-callout strong{font-family:var(--bbn-display);font-size:18px}
.bbn-enrich .bbn-note{font-size:13px;color:var(--bbn-ink-soft);margin:14px 0 0}
.bbn-enrich .bbn-note--gated{color:var(--bbn-rust)}
.bbn-enrich .bbn-absence{font-size:15px;margin:0}

/* ---- related names ---- */
.bbn-enrich .bbn-rel{list-style:none;margin:0;padding:0}
.bbn-enrich .bbn-rel li{
  padding:11px 0;border-bottom:1px solid var(--bbn-rule);
  display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;
}
.bbn-enrich .bbn-rel a{
  font-family:var(--bbn-display);font-size:19px;color:var(--bbn-ink);
  text-decoration:none;border-bottom:1px solid var(--bbn-gold);
}
.bbn-enrich .bbn-rel a:hover{background:var(--bbn-vellum)}
.bbn-enrich .bbn-rel .bbn-why{font-size:13.5px;color:var(--bbn-ink-soft);flex:1;min-width:220px}
.bbn-enrich .bbn-kind{
  font-family:var(--bbn-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--bbn-verdigris);border:1px solid var(--bbn-verdigris);
  padding:2px 6px;border-radius:2px;white-space:nowrap;
}

.bbn-enrich .bbn-enrich-footer{
  margin-top:36px;padding-top:20px;border-top:2px solid var(--bbn-ink);
  font-size:13px;color:var(--bbn-ink-soft);
}
.bbn-enrich .bbn-gated-inline{color:var(--bbn-rust)}

@media(max-width:720px){
  .bbn-enrich .bbn-block{grid-template-columns:1fr;gap:14px;padding:26px 0}
  .bbn-enrich .bbn-prov{display:flex;flex-wrap:wrap;gap:6px}
  .bbn-enrich .bbn-prov span{margin:0;font-size:9.5px}
  .bbn-enrich .bbn-band{padding:22px 20px}
  .bbn-enrich .bbn-table{font-size:13.5px}
  /* Tables scroll inside their own box rather than widening the page. */
  .bbn-enrich .bbn-block-body{overflow-x:auto}
}


/* ---- tool pages (Phase 8) ---- */
.bbn-tool{max-width:760px;margin:0 auto;padding:0 20px 60px}
.bbn-tool__head h1{font-family:var(--bbn-display);font-weight:300;font-size:clamp(30px,5vw,46px);line-height:1.1;margin:18px 0 8px}
.bbn-tool__lede{font-size:17px;color:var(--bbn-ink-soft);max-width:56ch}
.bbn-tool__form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:26px 0 8px;padding:20px;background:var(--bbn-vellum);border-left:3px solid var(--bbn-gold)}
.bbn-tool__form label{display:block;width:100%;font-family:var(--bbn-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--bbn-ink-soft);margin-bottom:-4px}
.bbn-tool__form input[type=text],.bbn-tool__form select{flex:1 1 200px;min-width:0;padding:10px 12px;font-size:16px;font-family:var(--bbn-body);border:1px solid var(--bbn-rule);border-radius:2px;background:#fff;color:var(--bbn-ink)}
.bbn-tool__form button{padding:10px 22px;font-size:15px;font-family:var(--bbn-body);background:var(--bbn-ink);color:var(--bbn-parchment);border:0;border-radius:2px;cursor:pointer}
.bbn-tool__form button:hover{background:#0e1929}
.bbn-tool__hint{width:100%;margin:2px 0 0;font-size:12px;color:var(--bbn-ink-soft)}
.bbn-tool__result{margin-top:24px;min-height:60px}
.bbn-tool__result[aria-busy=true]{opacity:.55}
.bbn-tool .bbn-enrich-footer div{margin-bottom:6px}
@media(max-width:600px){.bbn-tool__form{flex-direction:column;align-items:stretch}.bbn-tool__form button{width:100%}}

/* ---- bearer section (Phase 9) ---- */
.bbn-bearers__lede{font-family:var(--bbn-display);font-size:19px;margin:0 0 18px;max-width:60ch}
.bbn-bearer-list{list-style:none;margin:0;padding:0;counter-reset:bbnbearer}
.bbn-bearer{padding:14px 0 14px 34px;border-bottom:1px solid var(--bbn-rule);position:relative;counter-increment:bbnbearer}
.bbn-bearer::before{content:counter(bbnbearer);position:absolute;left:0;top:16px;font-family:var(--bbn-mono);font-size:11px;color:var(--bbn-ink-soft)}
.bbn-bearer--lead{background:var(--bbn-vellum);padding-left:34px;padding-right:16px;border-left:3px solid var(--bbn-gold)}
.bbn-bearer__name{font-family:var(--bbn-display);font-size:20px;font-weight:400;margin:0 0 4px;line-height:1.25}
.bbn-bearer--lead .bbn-bearer__name{font-size:24px}
.bbn-bearer__meta{font-family:var(--bbn-mono);font-size:11px;letter-spacing:.03em;color:var(--bbn-ink-soft);margin:0}
.bbn-bearer__rel{font-size:14px;color:var(--bbn-ink);margin:6px 0 0}
.bbn-bearers__more{margin-top:14px}
.bbn-bearers__more summary{cursor:pointer;font-family:var(--bbn-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--bbn-verdigris);padding:10px 0}
.bbn-bearers__more[open] summary{margin-bottom:6px}

/* ---- ambiguity note (Phase 9.1) ---- */
.bbn-ambiguity{background:var(--bbn-vellum);border-left:3px solid var(--bbn-verdigris);padding:14px 18px;margin:0 0 20px;font-size:15px;line-height:1.55;max-width:62ch}
.bbn-ambiguity a{color:var(--bbn-verdigris)}