/* ==========================================================================
   bonbeno.css - Shared light-mode stylesheet for every Bonbeno page.

   Single source of truth for palette, type and components. The ui_qa contrast
   linter resolves the cascade against this file, so fix contrast bugs HERE
   rather than patching individual pages.

   DESIGN DIRECTION, and why it is this and not something prettier.

   Bonbeno's product is not pet content. It is evidence under uncertainty:
   every figure carries a source, prices are published as the RANGE that
   disagreeing Indian sources actually quote, ratings are shown with their
   review count, listings carry the date they were checked, and the vet pages
   say in as many words that "verified does not mean assessed". No competing
   pet blog or directory shows its working like this.

   So the apparatus of evidence is the design, not an afterthought at the
   bottom of the page. Citations, verification dates and source lists share
   one recognisable gold-keyed mark, and that mark is the only ornament on the
   site. Everything else is quiet: no shadows, no decorative gradients, no
   card grids, hierarchy carried by type and rules.

   PALETTE, sampled at full resolution from the brand logo
   (Bonbeno_logo_2, 825x173 RGBA). Exact values, not eyeballed:
     #182B67  navy wordmark   30,638 px  (dominant)
     #E9AA3F  gold cat + right dash
     #9A440E  rust left dash
     #2C1304  dark brown dog

   CONTRAST RULES, measured. Do not undo:
     --bb-ink   (#121A33) 15.6:1 on white. Body text.
     --bb-navy  (#182B67) 13.1:1 on white. Headings, links, bar fills.
     --bb-muted (#596079)  6.2:1 on white. Secondary text, still AA at any size.
     --bb-rust  (#9A440E)  6.5:1 on white. Safe as text.
     --bb-gold  (#E9AA3F)  2.0:1 on white. DECORATIVE ONLY. It fails even the
       3:1 non-text bar, so it is never a fill behind text, never text on
       white, and never the sole carrier of meaning. It appears as the
       evidence mark, always beside text that states the same thing.
     --bb-gold-text (#7A5A10) 6.4:1, the only gold safe as text.

   TYPE. Self-hosted below, so a reader's browser makes no third-party request
   to render a page. Both families are OFL.
     IBM Plex Sans  headings, navigation, labels, and ALL data: prices, phone
                    numbers, ratings, dates. Engineered rather than friendly,
                    with the tabular figures this site leans on constantly.
     Literata       body prose. 747 breed guides is a lot of reading, and a
                    screen-reading serif carries it better than the UI sans
                    every pet blog uses.
   The pairing is deliberately inverted from the usual serif-headline /
   sans-body: here the sans is the instrument and the serif is the argument.
   ========================================================================== */

/* ---------- self-hosted faces ---------- */

@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/literata-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/literata-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/literata-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/literata-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/plexsans-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/plexsans-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* brand, sampled from the logo at full resolution */
  --bb-navy: #182B67;
  --bb-navy-deep: #0E1838;
  --bb-navy-soft: #EEF1F8;
  --bb-navy-line: #C8D0E4;

  --bb-gold: #E9AA3F;           /* the evidence mark, and nothing else */
  --bb-gold-text: #7A5A10;
  --bb-gold-soft: #FDF4E3;

  --bb-rust: #9A440E;
  --bb-rust-soft: #FAEDE4;
  --bb-brown: #2C1304;

  /* aliases kept so older component rules stay readable */
  --bb-accent: var(--bb-navy);
  --bb-accent-dark: var(--bb-navy);
  --bb-accent-soft: var(--bb-navy-soft);
  --bb-accent-line: var(--bb-navy-line);

  --bb-ink: #121A33;            /* body. colder and darker than the old grey */
  --bb-body: #121A33;
  --bb-muted: #596079;

  --bb-ground: #FAFBFD;
  --bb-surface: #FFFFFF;
  --bb-surface-2: #F7F8FC;
  --bb-rule: #E2E6F0;
  --bb-rule-strong: #BAC2D8;

  /* semantic */
  --bb-good: #1C6E46;
  --bb-good-soft: #E7F3EC;
  --bb-caution: #8A5B09;
  --bb-caution-soft: #FBF1DC;
  --bb-alert: #A82B1B;
  --bb-alert-soft: #FCEAE7;

  /* type */
  --bb-font-head: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bb-font-ui: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bb-font-body: "Literata", Georgia, "Times New Roman", serif;
  --bb-font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

  /* layout. 38rem of Literata is roughly 72 characters, inside the 80 cap. */
  --bb-measure: 38rem;
  --bb-pad: clamp(1.1rem, 4vw, 2.25rem);

  /* One radius per class of object, so radius carries hierarchy instead of
     being the same 14px on everything from a photo to a chip. */
  --bb-r-control: 6px;          /* chips, pills, buttons, inputs */
  --bb-r-box: 10px;             /* callouts, cards, table frames */
  --bb-r-media: 14px;           /* photography */
  --bb-radius: var(--bb-r-box);
  --bb-radius-sm: var(--bb-r-control);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bb-surface);
  color: var(--bb-ink);
  font-family: var(--bb-font-body);
  font-size: 1.0625rem;
  line-height: 1.72;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

/* ---------- skip link + focus ---------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bb-navy);
  color: #FFFFFF;
  font-family: var(--bb-font-ui);
  padding: .7rem 1.1rem;
  z-index: 100;
  border-radius: 0 0 var(--bb-r-control) 0;
}
.skip-link:focus { left: 0; }

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--bb-navy);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---------- header ---------- */

.bb-header {
  background: var(--bb-surface);
  border-bottom: 1px solid var(--bb-rule);
  position: sticky;
  top: 0;
  z-index: 40;
}
.bb-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: .8rem var(--bb-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.bb-logo { display: inline-flex; align-items: center; text-decoration: none; }
.bb-logo img { height: 34px; width: auto; display: block; }
@media (max-width: 560px) { .bb-logo img { height: 28px; } }
.bb-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.35rem;
  font-family: var(--bb-font-ui);
  font-size: .92rem;
  font-weight: 450;
}
.bb-nav a {
  color: var(--bb-ink);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.bb-nav a:hover { color: var(--bb-navy); border-bottom-color: var(--bb-navy-line); }
.bb-nav a[aria-current] { color: var(--bb-navy); font-weight: 600; border-bottom-color: var(--bb-navy); }

/* Below this the logo and six nav links cannot share a line, and letting
   them try interleaves the wrapped links around the wordmark. Stack them:
   logo on its own row, nav as a left-aligned block under it. Nothing is
   hidden behind a toggle, which matters for six links a reader may be
   hunting in a hurry. */
@media (max-width: 720px) {
  .bb-header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: .55rem;
    padding-bottom: .65rem;
  }
  .bb-nav { gap: .55rem 1.1rem; font-size: .89rem; }
}

/* ---------- layout ---------- */

.bb-main { display: block; background: var(--bb-surface); }

.bb-wrap {
  max-width: calc(var(--bb-measure) + 2 * var(--bb-pad));
  margin: 0 auto;
  padding: 0 var(--bb-pad) 4rem;
}

.bb-wide { max-width: 1180px; margin: 0 auto; padding: 0 var(--bb-pad); }

.bb-layout {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--bb-pad) 4rem;
}

/* Base state FIRST, then the media query overrides it.
   This ordering is load-bearing. `.bb-side { display: none }` and
   `.bb-side { display: block }` have identical specificity, so whichever comes
   last in the file wins. When the base rule sat after the media query it
   silently beat it and the rail never appeared at any width. Do not move. */
.bb-side { display: none; }

@media (min-width: 1080px) {
  .bb-layout {
    display: grid;
    grid-template-columns: 232px minmax(0, var(--bb-measure));
    gap: 3.25rem;
    justify-content: center;
    /* Deliberately NOT align-items: start. A sticky child can only travel
       inside its parent's box, so shrink-wrapping the aside to its content
       height leaves the rail nowhere to move. */
  }
  .bb-layout > .bb-col { min-width: 0; }
  .bb-side { display: block; align-self: stretch; }
  .bb-toc-inline { display: none; }

  /* A page with NO contents rail ships one child, and that child used to drop
     into the 232px sidebar track and render as a squeezed strip. Every vet
     city page shipped like that. Span both tracks and re-centre instead of
     requiring every renderer to emit an empty aside. */
  .bb-layout > .bb-col:only-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: var(--bb-measure);
  }
}

/* ---------- breadcrumb ---------- */

.bb-crumb {
  font-family: var(--bb-font-ui);
  font-size: .82rem;
  color: var(--bb-muted);
  padding: 1.1rem 0 0;
}
.bb-crumb a { color: var(--bb-muted); text-decoration: none; }
.bb-crumb a:hover { color: var(--bb-navy); text-decoration: underline; }
.bb-crumb span[aria-current] { color: var(--bb-ink); font-weight: 600; }

/* ---------- hero ---------- */

.bb-hero { padding: 1.5rem 0 0; }

/* Sentence case, no tracking, no pill. An all-caps tracked eyebrow above
   every heading was the loudest generic tell on the old sheet: it appeared in
   nine separate components. The classification is useful on a reference site,
   so it stays as information and stops behaving like decoration. */
.bb-eyebrow {
  display: block;
  font-family: var(--bb-font-ui);
  font-size: .85rem;
  font-weight: 600;
  color: var(--bb-muted);
  margin: 0 0 .55rem;
}

h1 {
  font-family: var(--bb-font-head);
  font-weight: 650;
  font-size: clamp(2.05rem, 5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--bb-navy);
  text-wrap: balance;
  margin: 0 0 .85rem;
}

.bb-dek {
  font-size: clamp(1.08rem, 2.2vw, 1.24rem);
  line-height: 1.58;
  color: var(--bb-muted);
  margin: 0 0 1.5rem;
  text-wrap: pretty;
}

.bb-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.3rem;
  font-family: var(--bb-font-ui);
  font-size: .85rem;
  color: var(--bb-muted);
  border-top: 1px solid var(--bb-rule);
  border-bottom: 1px solid var(--bb-rule);
  padding: .85rem 0;
  margin-bottom: 1.9rem;
}
.bb-byline b { color: var(--bb-ink); font-weight: 600; }
.bb-vet {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--bb-good);
  font-weight: 600;
  background: var(--bb-good-soft);
  padding: .22rem .6rem;
  border-radius: var(--bb-r-control);
}

.bb-hero-img {
  width: 100%;
  height: auto;
  border-radius: var(--bb-r-media);
  margin-bottom: 1.9rem;
  display: block;
}

/* ---------- quick answer (speakable target) ---------- */

.quick-answer {
  background: var(--bb-navy-soft);
  border-left: 3px solid var(--bb-navy);
  border-radius: 0 var(--bb-r-box) var(--bb-r-box) 0;
  padding: 1.25rem 1.45rem;
  margin: 0 0 2rem;
}
.quick-answer h2 {
  font-family: var(--bb-font-ui);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bb-navy);
  border: none;
  padding: 0;
  margin: 0 0 .45rem;
}
.quick-answer p {
  margin: 0;
  color: var(--bb-ink);
  font-size: 1.08rem;
  line-height: 1.64;
}

/* ---------- stat strip ---------- */

.bb-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  margin: 0 0 2.4rem;
  border-top: 1px solid var(--bb-rule);
  border-bottom: 1px solid var(--bb-rule);
}
.bb-stat {
  background: transparent;
  border-right: 1px solid var(--bb-rule);
  padding: .95rem 1.1rem .95rem 0;
  display: grid;
  gap: .15rem;
  align-content: start;
}
.bb-stat:last-child { border-right: none; }
.bb-stat .v {
  font-family: var(--bb-font-ui);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--bb-navy);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.bb-stat .l {
  font-family: var(--bb-font-ui);
  font-size: .8rem;
  color: var(--bb-muted);
  line-height: 1.4;
}
.bb-stat .s { font-size: .7rem; }
.bb-stat .s a { color: var(--bb-muted); }

/* ---------- trait rating bars ---------- */

.bb-traits {
  background: var(--bb-surface);
  border: 1px solid var(--bb-rule);
  border-radius: var(--bb-r-box);
  padding: 1.45rem 1.55rem;
  margin: 0 0 2.4rem;
}
.bb-traits h2 {
  font-family: var(--bb-font-head);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--bb-navy);
  border: none;
  padding: 0;
  margin: 0 0 1.15rem;
}
.bb-trait { display: grid; gap: .3rem; margin-bottom: 1.1rem; }
.bb-trait:last-child { margin-bottom: 0; }
.bb-trait-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.bb-trait-label {
  font-family: var(--bb-font-ui);
  font-size: .94rem;
  font-weight: 600;
  color: var(--bb-ink);
}
.bb-trait-value {
  font-family: var(--bb-font-ui);
  font-size: .82rem;
  color: var(--bb-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.bb-trait-track { display: flex; gap: 4px; height: 8px; }
.bb-trait-seg { flex: 1; border-radius: 1px; background: var(--bb-surface-2); }
.bb-trait-seg.on { background: var(--bb-navy); }
.bb-trait-note { font-size: .86rem; color: var(--bb-muted); line-height: 1.55; }

/* ---------- contents rail ---------- */

.bb-toc-sticky {
  position: sticky;
  top: 5.25rem;
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .25rem .25rem .5rem 0;
}
.bb-toc-title {
  font-family: var(--bb-font-ui);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bb-muted);
  margin: 0 0 .7rem;
}
.bb-toc-sticky ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--bb-rule);
}
.bb-toc-sticky li { margin: 0; }
.bb-toc-sticky a {
  display: block;
  padding: .36rem .8rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-family: var(--bb-font-ui);
  font-size: .855rem;
  line-height: 1.42;
  color: var(--bb-muted);
  text-decoration: none;
}
.bb-toc-sticky a:hover { color: var(--bb-navy); border-left-color: var(--bb-rule-strong); }
.bb-toc-sticky a[aria-current="true"] {
  color: var(--bb-navy);
  font-weight: 600;
  border-left-color: var(--bb-navy);
}
.bb-toc-sticky::-webkit-scrollbar { width: 6px; }
.bb-toc-sticky::-webkit-scrollbar-thumb { background: var(--bb-rule); border-radius: 3px; }

/* ---------- inline contents list, mobile and narrow desktop ---------- */

.bb-toc {
  border-top: 1px solid var(--bb-rule);
  border-bottom: 1px solid var(--bb-rule);
  padding: 1.1rem 0 1.2rem;
  margin: 0 0 2.5rem;
}
.bb-toc h2 {
  font-family: var(--bb-font-ui);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bb-muted);
  border: none;
  padding: 0;
  margin: 0 0 .7rem;
}
.bb-toc ol {
  margin: 0;
  padding-left: 1.15rem;
  columns: 2;
  column-gap: 2rem;
  font-family: var(--bb-font-ui);
}
.bb-toc li { margin-bottom: .36rem; font-size: .9rem; break-inside: avoid; }
.bb-toc a { color: var(--bb-ink); text-decoration: none; }
.bb-toc a:hover { color: var(--bb-navy); text-decoration: underline; }
@media (max-width: 560px) { .bb-toc ol { columns: 1; } }

/* ---------- body content ---------- */

.bb-section { margin: 0 0 3rem; scroll-margin-top: 5rem; }

h2 {
  font-family: var(--bb-font-head);
  font-weight: 650;
  font-size: clamp(1.45rem, 3.2vw, 1.8rem);
  line-height: 1.22;
  letter-spacing: -.022em;
  color: var(--bb-navy);
  text-wrap: balance;
  margin: 0 0 .85rem;
}

h3 {
  font-family: var(--bb-font-head);
  font-weight: 600;
  font-size: 1.24rem;
  line-height: 1.3;
  letter-spacing: -.012em;
  color: var(--bb-navy);
  margin: 2.1rem 0 .6rem;
  text-wrap: balance;
}

p { margin: 0 0 1.2rem; text-wrap: pretty; }

a { color: var(--bb-navy); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

strong { font-weight: 600; color: var(--bb-ink); }

ul, ol { margin: 0 0 1.3rem; padding-left: 1.35rem; }
li { margin-bottom: .55rem; }
li::marker { color: var(--bb-rule-strong); }

/* ---------- data table ---------- */

.bb-tablewrap {
  overflow: hidden;
  border: 1px solid var(--bb-rule);
  border-radius: var(--bb-r-box);
  background: var(--bb-surface);
  margin: 1.6rem 0;
}
/* Only the table scrolls. The caption (.bb-tablecap) sits above the scroll
   box at the column's width, so a wide table no longer clips its own caption
   along with its columns (it did, as a <caption>, on every phone). */
.bb-tablescroll { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--bb-font-ui);
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
}
caption, .bb-tablecap {
  caption-side: top;
  text-align: left;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bb-ink);
  padding: .9rem 1.1rem .7rem;
  border-bottom: 1px solid var(--bb-rule);
}
th, td { text-align: left; padding: .7rem 1.1rem; border-bottom: 1px solid var(--bb-rule); }
th {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bb-muted);
  background: var(--bb-surface-2);
  white-space: nowrap;
}
td.n, th.n { text-align: right; white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) { background: var(--bb-surface-2); }

/* ---------- callouts ---------- */

.bb-note {
  background: var(--bb-surface-2);
  border-radius: 0 var(--bb-r-box) var(--bb-r-box) 0;
  padding: 1.15rem 1.35rem;
  margin: 1.7rem 0;
  border-left: 3px solid var(--bb-rule-strong);
}
.bb-note.warm, .bb-note.warn { border-left-color: var(--bb-caution); background: var(--bb-caution-soft); }
.bb-note.alert { border-left-color: var(--bb-alert); background: var(--bb-alert-soft); }
.bb-note.good { border-left-color: var(--bb-good); background: var(--bb-good-soft); }
.bb-note.info, .bb-note.neutral { border-left-color: var(--bb-navy); background: var(--bb-navy-soft); }
.bb-note p:last-child { margin-bottom: 0; }
.bb-note .lab {
  display: block;
  font-family: var(--bb-font-ui);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bb-ink);
  margin-bottom: .4rem;
}
.bb-note.warm .lab, .bb-note.warn .lab { color: var(--bb-caution); }
.bb-note.alert .lab { color: var(--bb-alert); }
.bb-note.good .lab { color: var(--bb-good); }
.bb-note.info .lab, .bb-note.neutral .lab { color: var(--bb-navy); }

.bb-india {
  background: var(--bb-gold-soft);
  border-left: 3px solid var(--bb-gold);
  border-radius: 0 var(--bb-r-box) var(--bb-r-box) 0;
  padding: 1.15rem 1.35rem;
  margin: 1.7rem 0;
}
.bb-india .lab { color: var(--bb-gold-text); }

/* ---------- the evidence mark ----------

   One mark, used everywhere this site shows its working: inline citations,
   verification dates, and the source list. Gold is 2.0:1 on white and can
   never carry meaning on its own, so it is always a rule or a dot beside text
   that says the same thing in words.                                       */

sup.cite { font-size: .62em; line-height: 0; margin-left: .1em; }
sup.cite a {
  font-family: var(--bb-font-ui);
  font-weight: 600;
  text-decoration: none;
  color: var(--bb-navy);
  padding: 0 .18em;
  border-bottom: 2px solid var(--bb-gold);
}
sup.cite a:hover { background: var(--bb-gold-soft); }

.bb-checked {
  font-family: var(--bb-font-ui);
  font-size: .8rem;
  color: var(--bb-muted);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.bb-checked::before {
  content: "";
  width: 14px;
  height: 3px;
  background: var(--bb-gold);
  border-radius: 2px;
  flex: none;
}

/* ---------- FAQ ---------- */

.bb-faq { margin: 0 0 3rem; }
.bb-faq details {
  background: var(--bb-surface);
  border-bottom: 1px solid var(--bb-rule);
  border-radius: 0;
  margin-bottom: 0;
}
.bb-faq details:first-of-type { border-top: 1px solid var(--bb-rule); }
.bb-faq summary {
  cursor: pointer;
  padding: 1rem .25rem;
  font-family: var(--bb-font-head);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--bb-navy);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
}
.bb-faq summary::-webkit-details-marker { display: none; }
.bb-faq summary::after {
  content: "+";
  font-family: var(--bb-font-ui);
  font-weight: 400;
  color: var(--bb-muted);
  font-size: 1.3rem;
  line-height: 1;
}
.bb-faq details[open] summary::after { content: "\2212"; }
.bb-faq .a { padding: 0 .25rem 1.2rem; }
.bb-faq .a p:last-child { margin-bottom: 0; }

/* ---------- sources ---------- */

.bb-sources {
  border-top: 2px solid var(--bb-gold);
  padding: 1.2rem 0 0;
  margin: 0 0 2.5rem;
}
.bb-sources h2 {
  font-family: var(--bb-font-ui);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bb-ink);
  border: none;
  padding: 0;
  margin: 0 0 .8rem;
}
.bb-sources ol {
  margin: 0;
  padding-left: 1.3rem;
  font-family: var(--bb-font-ui);
  font-size: .86rem;
  line-height: 1.55;
}
.bb-sources li { margin-bottom: .5rem; }
.bb-sources .pub { color: var(--bb-muted); }

/* A source line is a full citation string, and some carry a token no browser
   will break: a DOI, an accession number, a gazette file name. At 390px that
   pushed the line past the viewport on five guides, and because nothing here
   sets `overflow-x: hidden` the whole page scrolled sideways rather than
   clipping. Found 2026-10-31 by tools/ui_render_audit.py. The static linter
   cannot see this class at all, because the defect is geometry, not colour. */
.bb-sources li,
.bb-sources li a { overflow-wrap: anywhere; }

/* ---------- related cards ---------- */

.bb-related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 0;
  margin: 0 0 2.5rem;
  border-top: 1px solid var(--bb-rule);
}
.bb-card {
  background: var(--bb-surface);
  border-bottom: 1px solid var(--bb-rule);
  border-right: 1px solid var(--bb-rule);
  border-radius: 0;
  padding: 1.05rem 1.2rem 1.15rem 0;
  text-decoration: none;
  display: block;
}
.bb-card:hover { background: var(--bb-surface-2); }
.bb-card .t {
  font-family: var(--bb-font-head);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--bb-navy);
  display: block;
  margin-bottom: .25rem;
}
.bb-card .d {
  font-family: var(--bb-font-ui);
  font-size: .865rem;
  color: var(--bb-muted);
  line-height: 1.5;
}

/* ---------- disclosure ---------- */

.bb-disclosure {
  font-family: var(--bb-font-ui);
  font-size: .845rem;
  color: var(--bb-muted);
  border-top: 1px solid var(--bb-rule);
  padding: 1rem 0 0;
  margin: 0 0 2.5rem;
}

/* ==========================================================================
   Vet directory: the on-call rota

   A city page carries up to 57 clinics with the same eight fields each. The
   old markup gave every one of them an <h3> and a browser-default <dl>, which
   is 450 lines of indented grey and no way to find anything.

   A reader is here because an animal might be ill, often on a phone, often at
   night. So the row is built around the single thing they need: the number
   they can dial. It is the largest element in the row, set in tabular figures
   so a column of them aligns. Round-the-clock opening is a navy edge you can
   scan down the left margin rather than a word buried in a sentence.

   Rows, not cards. 57 bordered boxes with 57 shadows would be a card kit and
   would read as 57 equally weighted recommendations, which the contract
   explicitly forbids this page from implying.
   ========================================================================== */

.vet-list { list-style: none; margin: 0 0 2.5rem; padding: 0; }

.vet-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  /* Deliberately NOT align-items: start. The default stretch looks identical
     here, because .vet-act is a flex column that packs to its top anyway,
     and `align-items: start` anywhere in this sheet trips the ui_qa check
     that exists because a shrink-wrapped parent once left the contents rail
     with zero sticky travel. Not worth re-opening that for no visual gain. */
  gap: .25rem 1.75rem;
  padding: 1.15rem 0 1.25rem 1rem;
  margin: 0;
  border-top: 1px solid var(--bb-rule);
  border-left: 3px solid transparent;
  scroll-margin-top: 5rem;
}
.vet-list > .vet-row:last-child { border-bottom: 1px solid var(--bb-rule); }

/* The scannable signal. Structure carries the information: run your eye down
   the left margin and the round-the-clock clinics are the marked ones. */
.vet-row.is-24h { border-left-color: var(--bb-navy); }

.vet-name {
  font-family: var(--bb-font-head);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--bb-navy);
  margin: 0 0 .15rem;
}
.vet-name a { color: inherit; text-decoration: none; }
.vet-name a:hover { text-decoration: underline; }

.vet-where {
  font-family: var(--bb-font-ui);
  font-size: .875rem;
  line-height: 1.45;
  color: var(--bb-muted);
  margin: 0 0 .5rem;
}

/* Phone above, checked-date below, both hard right. Stacking them matters:
   when they shared a line the gold evidence mark butted against the phone's
   underline and read as part of the number. */
.vet-act {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .3rem;
  text-align: right;
}
.vet-tel {
  font-family: var(--bb-font-ui);
  font-size: 1.2rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: var(--bb-navy);
  text-decoration: none;
  border-bottom: 2px solid var(--bb-rule-strong);
  padding-bottom: 2px;
}
.vet-tel:hover { border-bottom-color: var(--bb-navy); }
.vet-act .bb-checked { margin: 0; }
.vet-nophone {
  margin: 0;
  font-family: var(--bb-font-ui);
  font-size: .85rem;
  color: var(--bb-muted);
  white-space: nowrap;
}

.vet-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 .55rem;
  padding: 0;
  list-style: none;
}
.vet-tag {
  font-family: var(--bb-font-ui);
  font-size: .76rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--bb-muted);
  background: var(--bb-surface-2);
  border-radius: var(--bb-r-control);
  padding: .1rem .5rem;
}
.vet-tag.is-open { color: #FFFFFF; background: var(--bb-navy); }
.vet-tag.is-ngo { color: var(--bb-gold-text); background: var(--bb-gold-soft); }
.vet-tag.is-mobile { color: var(--bb-rust); background: var(--bb-rust-soft); }
.vet-tag.is-sponsored { color: var(--bb-caution); background: var(--bb-caution-soft); }

.vet-meta {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: .1rem .9rem;
  margin: .35rem 0 0;
  font-family: var(--bb-font-ui);
  font-size: .865rem;
  line-height: 1.5;
}
.vet-meta dt { color: var(--bb-muted); }
.vet-meta dd { margin: 0; color: var(--bb-ink); overflow-wrap: anywhere; }
.vet-meta .num { font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
  .vet-row { grid-template-columns: minmax(0, 1fr); }
  .vet-act {
    grid-column: 1;
    align-items: flex-start;
    text-align: left;
    margin: .4rem 0 .1rem;
  }
  .vet-tel { font-size: 1.3rem; padding: .3rem 0; }
  .vet-nophone { white-space: normal; }
  .vet-meta { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .vet-meta dt { margin-top: .45rem; font-size: .8rem; }
}

/* Four statements a reader has to actually read, so they are set as prose in
   a definition grid rather than squeezed into data-table type. */
.vet-def {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0 0 1.5rem;
  border-top: 1px solid var(--bb-rule);
}
.vet-def dt {
  font-family: var(--bb-font-ui);
  font-size: .9rem;
  font-weight: 600;
  color: var(--bb-navy);
  padding: .85rem 0 .1rem;
}
.vet-def dd {
  margin: 0;
  padding: 0 0 .9rem;
  border-bottom: 1px solid var(--bb-rule);
  color: var(--bb-ink);
}
@media (min-width: 720px) {
  .vet-def { grid-template-columns: 14rem minmax(0, 1fr); }
  .vet-def dt { padding: .85rem 1.5rem .9rem 0; border-bottom: 1px solid var(--bb-rule); }
  .vet-def dd { padding: .85rem 0 .9rem; }
}

/* ---------- skip link past a long round-the-clock block ---------- */

.vet-skip { margin: 0 0 1.6rem; }
.vet-skip a {
  display: inline-block;
  font-family: var(--bb-font-ui);
  font-size: .85rem;
  line-height: 1.5;
  color: var(--bb-ink);
  text-decoration: none;
  border: 1px solid var(--bb-rule-strong);
  border-radius: var(--bb-r-control);
  padding: .32rem .7rem;
}
.vet-skip a:hover { border-color: var(--bb-navy); color: var(--bb-navy); }

.vet-group {
  font-family: var(--bb-font-ui);
  font-size: .85rem;
  font-weight: 600;
  color: var(--bb-muted);
  margin: 2.4rem 0 .2rem;
  padding: 0 0 .5rem;
  scroll-margin-top: 5rem;
}
.vet-group:first-child { margin-top: 0; }

/* ---------- homepage group index ---------- */

.bb-index { margin: 0 0 2.75rem; border-top: 1px solid var(--bb-rule); }
.bb-index a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .3rem 1.25rem;
  padding: .95rem .25rem 1rem;
  border-bottom: 1px solid var(--bb-rule);
  text-decoration: none;
}
.bb-index a:hover { background: var(--bb-surface-2); }
.bb-index .t {
  font-family: var(--bb-font-head);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--bb-navy);
  letter-spacing: -.012em;
}
.bb-index .c {
  font-family: var(--bb-font-ui);
  font-size: .85rem;
  color: var(--bb-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bb-index .d {
  grid-column: 1 / -1;
  font-family: var(--bb-font-ui);
  font-size: .875rem;
  line-height: 1.5;
  color: var(--bb-muted);
  max-width: 54ch;
}

/* ---------- footer ---------- */

.bb-footer { background: var(--bb-navy-deep); color: #C6CADF; margin-top: 3.5rem; }
.bb-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2.9rem var(--bb-pad);
  display: grid;
  gap: 1.9rem;
  font-family: var(--bb-font-ui);
}
.bb-footer a { color: #FFFFFF; text-decoration: none; }
.bb-footer a:hover { text-decoration: underline; }
.bb-footer .cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1.9rem;
}
.bb-footer h3 {
  font-family: var(--bb-font-ui);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bb-gold);
  margin: 0 0 .65rem;
}
.bb-footer ul { list-style: none; padding: 0; margin: 0; font-size: .89rem; }
.bb-footer li { margin-bottom: .45rem; }
.bb-footer .fine {
  border-top: 1px solid #28306A;
  padding-top: 1.4rem;
  font-size: .82rem;
  color: #A8ADC8;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .bb-header, .bb-footer, .bb-toc, .bb-toc-sticky, .vet-jump { display: none; }
  body { background: #fff; font-size: 11pt; }
  .vet-row { break-inside: avoid; }
}

/* ==========================================================================
   ROYAL LAYER, 31 October 2026 (replaces the design layer of the same day)
   ==========================================================================

   The owner's verdict on the first layer, in their words: the colours were
   "very dull and faded light versions of brand colours", the mobile menu
   was "horrible", there was "almost no animation", sections left "huge blank
   spaces on either side", the related cards were "old school", and card
   descriptions ran from one line to eleven on the same row. The references
   given were cloudsecuretech.com (motion), hillspet.com (the breed page) and
   pedigree.in (the care page). This layer answers each one.

   COLOUR. Full-strength brand colour, not washes. Navy is the ground of the
   crumb bar, the quick answer, the hero band and the "Where to start" band;
   gold is the rule, the active mark and the accent on navy; wheat at full
   strength is the stat tile. Every pairing is measured (WCAG relative
   luminance), ratios beside the rules:
     white on navy #182B67           12.5:1
     gold  #E9AA3F on navy            5.95:1  (AA for any size)
     gold  on deep navy #0E1838       8.1:1
     wheat #F1CC8B on navy            8.1:1
     ink   #121A33 on wheat          10.5:1
     navy  on wheat                   8.2:1
     #3F4660 on wheat                 6.1:1   (the only "muted" allowed on wheat)
     ink on gold #E9AA3F              7.75:1  (gold buttons carry ink text)
     white on cocoa #584A3E           8.75:1
     ink on clay #C18D6D              5.7:1   (clay carries ink only, never muted)
   Gold on WHITE is still 2.0:1 and is still never text or a lone rule.

   LAYOUT. Three columns from 1240px: the contents rail, the article at its
   measure, and a related rail of photo cards. The right third of a desktop
   page is no longer empty. Section bands on the hubs are full-width stripes
   (real elements, not a 100vw bleed, so no horizontal scroll).

   MOTION. A hamburger drawer, a header shadow, a reveal on scroll with a
   stagger inside rows, a count-up on stat tiles, a drifting photo strip on
   the homepage, a slow push-in on the hero photograph, card lift on hover,
   a gold underline that draws under nav links, an opening animation on
   each FAQ answer. All of it is off under prefers-reduced-motion.
   ========================================================================== */

:root {
  --bb-wheat:  #F1CC8B;
  --bb-clay:   #C18D6D;
  --bb-cocoa:  #584A3E;
  --bb-slate:  #2A2D4A;
  --bb-navy-2: #223A86;
  --bb-wheat-wash: #FDF9F1;
  --bb-clay-wash:  #F8F1ED;
  --bb-cocoa-wash: #EBE9E8;
  --bb-on-wheat-muted: #3F4660;
  --bb-royal: linear-gradient(135deg, #0E1838 0%, #182B67 58%, #223A86 100%);
  --bb-gold-line: linear-gradient(90deg, var(--bb-navy), var(--bb-gold));
  --bb-shadow: 0 10px 28px rgba(14, 24, 56, .10);
  --bb-shadow-lift: 0 20px 44px rgba(14, 24, 56, .18);
  --bb-ease: cubic-bezier(.2, .7, .3, 1);
  --bb-container: 1320px;
}

@media (min-width: 1240px) {
  :root { --bb-measure: 40rem; }   /* about 76 characters of Literata, under the 80 cap */
}

/* --------------------------------------------------------------------------
   Header: a gold rule on top, a gold underline that draws under each link,
   a shadow once the page has moved.
   -------------------------------------------------------------------------- */

.bb-header {
  border-bottom: 0;
  box-shadow: 0 1px 0 var(--bb-rule);
  transition: box-shadow .35s var(--bb-ease);
}
.bb-header::before {
  content: "";
  display: block;
  height: 4px;
  background: var(--bb-gold-line);
}
.bb-header.is-scrolled { box-shadow: 0 8px 26px rgba(14, 24, 56, .14); }
.bb-header-inner { max-width: var(--bb-container); }

.bb-nav a {
  position: relative;
  color: var(--bb-navy);
  font-weight: 500;
  padding: .3rem 0;
  border-bottom: 0;
}
.bb-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--bb-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--bb-ease);
}
.bb-nav a:hover { color: var(--bb-navy); border-bottom: 0; }
.bb-nav a:hover::after,
.bb-nav a[aria-current]::after { transform: scaleX(1); }
.bb-nav a[aria-current] { color: var(--bb-navy); font-weight: 700; border-bottom: 0; }

/* The menu button and the drawer. Nothing here paints without the script:
   the button ships hidden, and the drawer rules are keyed on html.bb-js. */
.bb-menu {
  display: none;
  align-items: center;
  gap: .55rem;
  background: var(--bb-navy);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: .5rem .95rem .5rem .8rem;
  font-family: var(--bb-font-ui);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  z-index: 70;
}
.bb-menu-bars { position: relative; display: block; width: 18px; height: 14px; }
.bb-menu-bars i {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform .32s var(--bb-ease), opacity .2s;
}
.bb-menu-bars i:nth-child(1) { top: 0; }
.bb-menu-bars i:nth-child(2) { top: 6px; }
.bb-menu-bars i:nth-child(3) { top: 12px; }
.bb-menu[aria-expanded="true"] .bb-menu-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.bb-menu[aria-expanded="true"] .bb-menu-bars i:nth-child(2) { opacity: 0; }
.bb-menu[aria-expanded="true"] .bb-menu-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 860px) {
  html.bb-js .bb-menu { display: inline-flex; }
  html.bb-js .bb-header-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem var(--bb-pad);
  }
  html.bb-js .bb-nav {
    position: fixed;
    inset: 0;
    z-index: 60;
    background-color: var(--bb-navy); background-image: var(--bb-royal);
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    padding: 5.5rem var(--bb-pad) 2.5rem;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .4s var(--bb-ease), visibility 0s linear .4s;
    overflow-y: auto;
  }
  html.bb-js .bb-nav.is-open {
    transform: none;
    visibility: visible;
    transition: transform .4s var(--bb-ease), visibility 0s;
  }
  html.bb-js .bb-nav a {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    opacity: 0;
    transform: translateX(18px);
    transition: opacity .35s var(--bb-ease), transform .35s var(--bb-ease);
  }
  html.bb-js .bb-nav a::after { display: none; }
  html.bb-js .bb-nav a[aria-current] { color: var(--bb-gold); }
  html.bb-js .bb-nav a:focus-visible { outline-color: var(--bb-gold); outline-offset: 4px; }
  html.bb-js .bb-nav.is-open a { opacity: 1; transform: none; }
  html.bb-js .bb-nav.is-open a:nth-child(1) { transition-delay: .08s; }
  html.bb-js .bb-nav.is-open a:nth-child(2) { transition-delay: .13s; }
  html.bb-js .bb-nav.is-open a:nth-child(3) { transition-delay: .18s; }
  html.bb-js .bb-nav.is-open a:nth-child(4) { transition-delay: .23s; }
  html.bb-js .bb-nav.is-open a:nth-child(5) { transition-delay: .28s; }
  html.bb-js .bb-nav.is-open a:nth-child(6) { transition-delay: .33s; }
  body.bb-menu-open { overflow: hidden; }
}

/* --------------------------------------------------------------------------
   The crumb bar: one navy line under the header on every article page.
   -------------------------------------------------------------------------- */

.bb-crumbbar { background-color: var(--bb-navy); background-image: var(--bb-royal); color: #fff; }
.bb-crumbbar-in {
  max-width: var(--bb-container);
  margin: 0 auto;
  padding: .6rem var(--bb-pad);
}
.bb-crumbbar .bb-crumb { padding: 0; color: rgba(255, 255, 255, .8); }   /* 8:1 */
.bb-crumbbar .bb-crumb a { color: #fff; }
.bb-crumbbar .bb-crumb a:hover { color: var(--bb-gold); text-decoration-color: var(--bb-gold); }
.bb-crumbbar .bb-crumb span[aria-current] { color: var(--bb-gold); }   /* 5.95:1 */
/* A page title can run to twelve words; on a phone the bar is one line and
   the current page is cut with an ellipsis rather than wrapped to two. */
@media (max-width: 560px) {
  .bb-crumbbar .bb-crumb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* --------------------------------------------------------------------------
   Layout: rail, article, related rail
   -------------------------------------------------------------------------- */

.bb-layout { max-width: var(--bb-container); }

@media (min-width: 1080px) {
  .bb-layout {
    display: grid;
    grid-template-columns: 232px minmax(0, var(--bb-measure));
    column-gap: 3rem;
    justify-content: center;
  }
  /* A page with no contents rail (the vet cities) starts with .bb-col. */
  .bb-layout > .bb-col:first-child {
    grid-column: 1 / 3;
    justify-self: center;
    width: 100%;
    max-width: var(--bb-measure);
  }
  .bb-layout > .bb-aside { grid-column: 2; }
  .bb-layout > .bb-col:first-child + .bb-aside {
    grid-column: 1 / 3;
    justify-self: center;
    width: 100%;
    max-width: var(--bb-measure);
  }
}

@media (min-width: 1240px) {
  .bb-layout {
    grid-template-columns: 224px minmax(0, var(--bb-measure)) minmax(250px, 320px);
    column-gap: 2.75rem;
    justify-content: space-between;
  }
  .bb-layout > .bb-side,
  .bb-layout > .bb-col,
  .bb-layout > .bb-aside { grid-row: 1; }
  .bb-layout > .bb-aside { grid-column: 3; }
  .bb-layout > .bb-col:first-child {
    grid-column: 1 / 3;
    justify-self: stretch;
    max-width: none;
  }
  .bb-layout > .bb-col:first-child > .bb-hero,
  .bb-layout > .bb-col:first-child > .quick-answer,
  .bb-layout > .bb-col:first-child > .bb-note,
  .bb-layout > .bb-col:first-child > .bb-section > p,
  .bb-layout > .bb-col:first-child > .bb-faq { max-width: 46rem; }
  .bb-layout > .bb-col:first-child + .bb-aside {
    grid-column: 3;
    max-width: none;
  }
  .bb-aside {
    position: sticky;
    top: 5.5rem;
    align-self: start;
    max-height: calc(100vh - 6.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: .35rem;
    scrollbar-width: thin;
  }
}

/* --------------------------------------------------------------------------
   Article hero
   -------------------------------------------------------------------------- */

.bb-hero { display: flex; flex-direction: column; padding-top: 1.6rem; }
.bb-hero > .bb-eyebrow  { order: 1; }
.bb-hero > h1           { order: 2; }
.bb-hero > .bb-hero-img { order: 3; }
.bb-hero > .bb-dek      { order: 4; margin-top: 0; }
.bb-hero > .bb-byline   { order: 5; }

.bb-hero > .bb-eyebrow,
.bb-hero-words > .bb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--bb-navy);
  font-weight: 700;
}
.bb-hero > .bb-eyebrow::before,
.bb-hero-words > .bb-eyebrow::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bb-gold);
  box-shadow: 0 0 0 3px var(--bb-wheat);
  flex: none;
}

.bb-hero-img {
  display: block;
  margin: 1.5rem 0 1.4rem;
  border-radius: 18px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--bb-cocoa-wash);
  box-shadow: var(--bb-shadow);
}
@media (prefers-reduced-motion: no-preference) {
  .bb-hero-img { animation: bb-settle-img .9s var(--bb-ease) both; }
}

.bb-byline {
  border-top: 2px solid var(--bb-gold);
  border-bottom: 1px solid var(--bb-rule);
  color: var(--bb-muted);
}
.bb-byline b { color: var(--bb-navy); }

/* --------------------------------------------------------------------------
   Quick answer: the royal panel on every page
   -------------------------------------------------------------------------- */

.quick-answer {
  background-color: var(--bb-navy); background-image: var(--bb-royal);
  color: #fff;
  border: 0;
  border-radius: 18px;
  padding: 1.5rem 1.7rem 1.6rem;
  box-shadow: var(--bb-shadow);
  position: relative;
  overflow: hidden;
}
.quick-answer::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(233, 170, 63, .38), rgba(233, 170, 63, 0) 68%);
  pointer-events: none;
}
.quick-answer h2 {
  color: var(--bb-gold);                 /* 5.95:1 */
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  position: relative;
}
.quick-answer h2::before {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--bb-gold);
}
.quick-answer p { color: #fff; position: relative; }   /* 12.5:1 */
.quick-answer a { color: var(--bb-wheat); }            /* 8.1:1 */
.quick-answer .bb-cite { color: #fff; text-decoration-color: var(--bb-gold); }

/* --------------------------------------------------------------------------
   Stat tiles: wheat at full strength, one figure each
   -------------------------------------------------------------------------- */

.bb-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1rem;
  margin: 0 0 2.4rem;
  border: 0;
}
.bb-stat {
  background: var(--bb-wheat);
  border: 0;
  border-radius: 14px;
  padding: 1.1rem 1.2rem 1.15rem;
  display: grid;
  gap: .3rem;
  align-content: start;
  box-shadow: var(--bb-shadow);
  position: relative;
  overflow: hidden;
}
.bb-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--bb-navy);
}
.bb-stat .v {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--bb-navy);                 /* 8.2:1 on wheat */
  letter-spacing: -.03em;
  line-height: 1.12;
  text-wrap: balance;
}
.bb-stat .l {
  font-weight: 600;
  font-size: .86rem;
  color: var(--bb-ink);                  /* 10.5:1 */
  line-height: 1.4;
}
.bb-stat .d {
  font-family: var(--bb-font-ui);
  font-size: .8rem;
  line-height: 1.45;
  color: var(--bb-on-wheat-muted);       /* 6.1:1 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bb-stat .s {
  font-family: var(--bb-font-ui);
  font-size: .74rem;
  font-weight: 600;
  color: var(--bb-navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  margin-top: .15rem;
  overflow-wrap: anywhere;
}
.bb-stat .s:hover { color: var(--bb-ink); }

/* --------------------------------------------------------------------------
   The evidence link: a citation is the claim itself, underlined in gold
   -------------------------------------------------------------------------- */

.bb-cite {
  color: var(--bb-navy);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--bb-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: background-color .2s var(--bb-ease);
}
.bb-cite:hover { background: var(--bb-wheat-wash); text-decoration-thickness: 2px; }
.bb-cite-bare { font-family: var(--bb-font-ui); font-size: .9em; font-weight: 500; }
th .bb-cite, caption .bb-cite { color: inherit; }
th .bb-cite { text-decoration-color: var(--bb-gold); }

/* --------------------------------------------------------------------------
   Headings, rules, tables, callouts
   -------------------------------------------------------------------------- */

.bb-section > h2 { position: relative; padding-top: .9rem; }
.bb-section > h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 46px;
  height: 4px;
  border-radius: 2px;
  background: var(--bb-gold-line);
}

.bb-tablewrap {
  border: 1px solid var(--bb-navy-line);
  box-shadow: var(--bb-shadow);
  position: relative;
}
th { background: var(--bb-navy); color: #fff; }             /* 12.5:1 */
caption, .bb-tablecap { color: var(--bb-navy); background: var(--bb-wheat-wash); }
tbody tr:nth-child(even) { background: #F8F5EE; }

.bb-india {
  background: var(--bb-wheat);
  border-left: 4px solid var(--bb-navy);
  border-radius: 0 14px 14px 0;
}
.bb-india .lab { color: var(--bb-navy); }
.bb-india p { color: var(--bb-ink); }

.bb-note { border-radius: 0 14px 14px 0; }
.bb-note.info, .bb-note.neutral { border-left-color: var(--bb-navy); background: #EEF1F8; }

.bb-traits {
  border: 1px solid var(--bb-navy-line);
  border-radius: 16px;
  box-shadow: var(--bb-shadow);
  background: #fff;
}
.bb-traits h2 { display: flex; align-items: center; gap: .6rem; }
.bb-traits h2::before {
  content: "";
  width: 26px;
  height: 4px;
  border-radius: 2px;
  background: var(--bb-gold);
}
.bb-trait-seg { background: #EFE7D6; }
.bb-trait-seg.on { background: var(--bb-navy); }

/* --------------------------------------------------------------------------
   Contents: a boxed rail (pedigree.in) and a collapsible inline list
   -------------------------------------------------------------------------- */

.bb-toc-sticky {
  padding: 0;
  border: 2px solid var(--bb-navy);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.bb-toc-title {
  background: var(--bb-navy);
  color: var(--bb-gold);                 /* 5.95:1 */
  margin: 0;
  padding: .62rem .95rem;
  font-size: .8rem;
}
.bb-toc-sticky ol { border: 0; padding: .3rem 0; }
.bb-toc-sticky a {
  margin: 0;
  padding: .5rem .95rem;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--bb-rule);
  color: var(--bb-ink);
  font-size: .84rem;
  transition: background-color .2s var(--bb-ease), color .2s var(--bb-ease);
}
.bb-toc-sticky li:last-child a { border-bottom: 0; }
.bb-toc-sticky a:hover { background: var(--bb-wheat-wash); color: var(--bb-navy); border-left-color: var(--bb-navy-line); }
.bb-toc-sticky a[aria-current="true"] {
  background: var(--bb-wheat-wash);
  color: var(--bb-navy);
  font-weight: 600;
  border-left-color: var(--bb-gold);
}

.bb-toc {
  border: 2px solid var(--bb-navy);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
}
.bb-toc h2 {
  background: var(--bb-navy);
  color: var(--bb-gold);
  margin: 0;
  padding: .62rem .95rem;
}
.bb-toc ol { padding: .8rem .95rem .9rem 2rem; }
.bb-toc a { border: 0; }
.bb-toc-btn {
  all: unset;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
  box-sizing: border-box;
}
.bb-toc-btn .n { color: #fff; font-weight: 500; }
.bb-toc-btn::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--bb-gold);
  border-bottom: 2px solid var(--bb-gold);
  transform: rotate(45deg);
  transition: transform .3s var(--bb-ease);
  margin-left: .6rem;
}
.bb-toc.is-open .bb-toc-btn::after { transform: rotate(-135deg); }
html.bb-js .bb-toc-inline ol { display: none; }
html.bb-js .bb-toc-inline.is-open ol { display: block; animation: bb-open .3s var(--bb-ease); }

/* --------------------------------------------------------------------------
   FAQ: boxed accordion
   -------------------------------------------------------------------------- */

.bb-faq details {
  border: 1px solid var(--bb-navy-line);
  border-radius: 12px;
  margin-bottom: .6rem;
  overflow: hidden;
  transition: border-color .25s var(--bb-ease), box-shadow .25s var(--bb-ease);
}
.bb-faq details:first-of-type { border-top: 1px solid var(--bb-navy-line); }
.bb-faq details[open] { border-color: var(--bb-navy); box-shadow: var(--bb-shadow); }
.bb-faq summary { padding: .95rem 1.1rem; align-items: center; }
.bb-faq summary::after {
  content: "+";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bb-navy);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  line-height: 1;
  transition: transform .3s var(--bb-ease), background-color .3s;
}
.bb-faq details[open] summary::after {
  content: "\2212";
  background: var(--bb-gold);
  color: var(--bb-ink);
  transform: rotate(180deg);
}
.bb-faq .a { padding: 0 1.1rem 1.1rem; animation: bb-open .35s var(--bb-ease); }

/* --------------------------------------------------------------------------
   Cards: a boxed photo card (hillspet.com) with one description length
   -------------------------------------------------------------------------- */

.bb-thumb {
  display: block;
  overflow: hidden;
  background: var(--bb-cocoa-wash);
}
.bb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--bb-ease);
}

.bb-related,
.bb-related--photo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 1.25rem;
  border: 0;
  margin: 0 0 2.5rem;
}
.bb-card,
.bb-related--photo .bb-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--bb-navy-line);
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
  box-shadow: var(--bb-shadow);
  position: relative;
  transition: transform .32s var(--bb-ease), box-shadow .32s var(--bb-ease), border-color .32s;
}
.bb-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: var(--bb-gold-line);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--bb-ease);
  z-index: 1;
}
.bb-card:hover,
.bb-related--photo .bb-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bb-shadow-lift);
  border-color: var(--bb-navy);
  background: #fff;
}
.bb-card:hover::before { transform: scaleX(1); }
.bb-card:hover .bb-thumb img { transform: scale(1.05); }
.bb-card .bb-thumb,
.bb-related--photo .bb-thumb { border-radius: 0; aspect-ratio: 16 / 10; }
.bb-card-body {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .95rem 1.1rem 1.15rem;
  flex: 1;
}
.bb-card .t,
.bb-related--photo .bb-card .t { margin: 0; font-size: 1.02rem; color: var(--bb-navy); line-height: 1.3; }
.bb-related--photo .bb-card:hover .t { text-decoration: none; }
.bb-card .m {
  font-family: var(--bb-font-ui);
  font-size: .76rem;
  font-weight: 600;
  color: var(--bb-gold-text);
}
.bb-card .c {
  display: block;
  font-family: var(--bb-font-ui);
  font-size: .78rem;
  color: var(--bb-muted);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.bb-card .d {
  font-family: var(--bb-font-ui);
  font-size: .86rem;
  line-height: 1.5;
  color: var(--bb-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* A card the health page builds as a div (the figure carries its own link) */
div.bb-card { padding: 1rem 1.1rem 1.1rem; }
div.bb-card .t { font-family: var(--bb-font-head); font-weight: 600; }

/* The typographic index keeps its tabular shape; the photo variant gets a crop. */
.bb-index { border-top: 2px solid var(--bb-navy); }
.bb-index a { transition: background-color .2s var(--bb-ease); }
.bb-index a:hover { background: var(--bb-wheat-wash); }
.bb-index--photo a {
  grid-template-columns: 104px minmax(0, 1fr) auto;
  align-items: center;
  gap: .25rem 1.1rem;
  padding: .8rem .25rem .85rem;
}
.bb-index--photo .bb-thumb {
  grid-row: span 2;
  width: 104px;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
}
.bb-index--photo .d { grid-column: 2 / -1; }

/* --------------------------------------------------------------------------
   The related rail
   -------------------------------------------------------------------------- */

.bb-aside { margin: 1.5rem 0 3rem; }
.bb-aside h2 {
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 0;
  margin: 0 0 1rem;
  color: var(--bb-navy);
}
.bb-aside h2::before {
  content: "";
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background: var(--bb-gold);
  flex: none;
}
.bb-aside .bb-related { margin-bottom: 0; }
.bb-aside-more-h {
  font-family: var(--bb-font-ui);
  font-size: .82rem;
  font-weight: 600;
  color: var(--bb-muted);
  margin: 1.5rem 0 .4rem;
}
.bb-aside-more {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--bb-font-ui);
  font-size: .88rem;
}
.bb-aside-more li { margin: 0; padding: .5rem 0; border-top: 1px solid var(--bb-rule); }
.bb-aside-more a { color: var(--bb-navy); text-decoration: none; }
.bb-aside-more a:hover { text-decoration: underline; text-decoration-color: var(--bb-gold); text-decoration-thickness: 2px; }
@media (min-width: 1240px) {
  .bb-aside .bb-related { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .bb-aside .bb-card .bb-thumb { aspect-ratio: 16 / 9; }
}

/* --------------------------------------------------------------------------
   The filter box over a long index
   -------------------------------------------------------------------------- */

.bb-filter {
  display: grid;
  grid-template-columns: minmax(0, 22rem);
  gap: .3rem;
  margin: 0 0 1.6rem;
}
.bb-filter label {
  font-family: var(--bb-font-ui);
  font-size: .85rem;
  font-weight: 600;
  color: var(--bb-ink);
}
.bb-filter input {
  font-family: var(--bb-font-ui);
  font-size: 1rem;
  color: var(--bb-ink);
  background: #fff;
  border: 2px solid var(--bb-navy);
  border-radius: 999px;
  padding: .65rem 1.1rem;
  width: 100%;
  box-shadow: var(--bb-shadow);
}
.bb-filter input::placeholder { color: var(--bb-muted); }
.bb-filter input:focus-visible { outline: 3px solid var(--bb-gold); outline-offset: 2px; }
.bb-filter-count {
  margin: 0;
  font-family: var(--bb-font-ui);
  font-size: .85rem;
  color: var(--bb-muted);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Hub pages: the royal hero band, full-width colour bands, a photo strip
   -------------------------------------------------------------------------- */

.bb-hero-band {
  background-color: var(--bb-navy); background-image: var(--bb-royal);
  color: #fff;
  border: 0;
  padding: 2.8rem 0 0;
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
}
.bb-hero-band::before {
  content: "";
  position: absolute;
  right: -160px;
  top: -200px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(233, 170, 63, .22), rgba(233, 170, 63, 0) 66%);
  pointer-events: none;
}
.bb-hero-band-in {
  max-width: var(--bb-container);
  margin: 0 auto;
  padding: 0 var(--bb-pad);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.9rem;
  align-items: center;
  position: relative;
}
@media (min-width: 900px) {
  .bb-hero-band-in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3.5rem;
  }
}
.bb-hero-words > .bb-crumb { margin: 0 0 1.1rem; color: rgba(255, 255, 255, .78); }
.bb-hero-words > .bb-crumb a { color: #fff; }
.bb-hero-words > .bb-crumb a:hover { color: var(--bb-gold); }
.bb-hero-words > .bb-crumb span[aria-current] { color: var(--bb-gold); }
.bb-hero-words > .bb-eyebrow { color: var(--bb-gold); }
.bb-hero-words > .bb-eyebrow::before { box-shadow: 0 0 0 3px rgba(233, 170, 63, .35); }
.bb-hero-words h1 { margin: .35rem 0 0; color: #fff; }
.bb-hero-words .bb-dek { margin: 1rem 0 0; max-width: 36ch; color: rgba(255, 255, 255, .86); }   /* 9:1 */

.bb-hero-figure { margin: 0; overflow: hidden; border-radius: 22px; box-shadow: 0 28px 70px rgba(0, 0, 0, .38); }
.bb-hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 22px;
}
@media (prefers-reduced-motion: no-preference) {
  .bb-hero-figure img { animation: bb-settle-img .9s var(--bb-ease) both, bb-push 22s ease-in-out 1s infinite alternate; }
}

.bb-hero-band-stats {
  max-width: var(--bb-container);
  margin: 2.6rem auto 0;
  padding: 0 var(--bb-pad) 2.6rem;
  position: relative;
}
.bb-hero-band-stats .bb-stats { margin-bottom: 0; }
.bb-hero-band-stats .bb-stat {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: none;
}
.bb-hero-band-stats .bb-stat::before { background: var(--bb-gold); }
.bb-hero-band-stats .bb-stat .v { color: var(--bb-gold); font-size: 2rem; }   /* 5.95:1, large */
.bb-hero-band-stats .bb-stat .l { color: #fff; }

.bb-hero-band + .bb-wrap { padding-top: 2.6rem; }
.bb-hero-band + .bb-wrap > .quick-answer {
  background: var(--bb-wheat);
  color: var(--bb-ink);
  box-shadow: var(--bb-shadow);
}
.bb-hero-band + .bb-wrap > .quick-answer::after { display: none; }
.bb-hero-band + .bb-wrap > .quick-answer h2 { color: var(--bb-navy); }
.bb-hero-band + .bb-wrap > .quick-answer h2::before { background: var(--bb-navy); }
.bb-hero-band + .bb-wrap > .quick-answer p { color: var(--bb-ink); }
.bb-hero-band + .bb-wrap > .quick-answer a { color: var(--bb-navy); }

/* Words first, then the picture, on load. An animation, not a transition
   toggled by script, so a blocked script can never leave the h1 at 0. */
@media (prefers-reduced-motion: no-preference) {
  .bb-hero-words > * { animation: bb-settle .55s var(--bb-ease) both; }
  .bb-hero-words > *:nth-child(2) { animation-delay: .06s; }
  .bb-hero-words > *:nth-child(3) { animation-delay: .12s; }
  .bb-hero-words > *:nth-child(4) { animation-delay: .18s; }
  .bb-hero-figure { animation: bb-settle-img .9s var(--bb-ease) .1s both; }
}

/* Full-width bands. The band is a sibling of the wrap, painted edge to
   edge by its own box, with the page container inside it. */
.bb-band { padding: 3rem 0 2.4rem; margin: 0 0 3rem; }
.bb-band--navy  { background-color: var(--bb-navy); background-image: var(--bb-royal); color: #fff; }
.bb-band--wheat { background: var(--bb-wheat); color: var(--bb-ink); }
.bb-band--clay  { background: var(--bb-clay); color: var(--bb-ink); }
.bb-band--cocoa { background: var(--bb-cocoa); color: #fff; }
.bb-band .bb-wrap--in-band { padding-bottom: 0; }
.bb-band .bb-section { margin-bottom: 0; }
.bb-band--navy h2, .bb-band--navy h3, .bb-band--navy p,
.bb-band--cocoa h2, .bb-band--cocoa h3, .bb-band--cocoa p { color: #fff; }
.bb-band--navy .bb-section > h2::before,
.bb-band--cocoa .bb-section > h2::before { background: var(--bb-gold); }
.bb-band--navy a:not(.bb-card), .bb-band--cocoa a:not(.bb-card) { color: var(--bb-wheat); }
.bb-band--wheat h2, .bb-band--clay h2 { color: var(--bb-navy); }
.bb-band--wheat p, .bb-band--clay p { color: var(--bb-ink); }
.bb-band--navy .bb-card, .bb-band--cocoa .bb-card { border-color: transparent; }
.bb-band--navy .bb-note, .bb-band--cocoa .bb-note { color: var(--bb-ink); }
.bb-band--navy .bb-note p, .bb-band--cocoa .bb-note p { color: var(--bb-ink); }

/* The photo strip */
.bb-strip {
  overflow: hidden;
  margin: 0 0 1rem;
  padding: .5rem 0 1rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.bb-strip-track {
  display: flex;
  width: max-content;
  animation: bb-marquee 70s linear infinite;
}
.bb-strip:hover .bb-strip-track,
.bb-strip:focus-within .bb-strip-track { animation-play-state: paused; }
.bb-strip-item {
  flex: none;
  width: 196px;
  margin-right: 1.1rem;
  text-decoration: none;
  color: var(--bb-navy);
  font-family: var(--bb-font-ui);
  font-weight: 600;
  font-size: .9rem;
  text-align: center;
}
.bb-strip-item .bb-thumb {
  border-radius: 16px;
  box-shadow: var(--bb-shadow);
  transition: transform .3s var(--bb-ease), box-shadow .3s var(--bb-ease);
}
.bb-strip-item:hover .bb-thumb { transform: translateY(-5px); box-shadow: var(--bb-shadow-lift); }
.bb-strip-item .t { display: block; margin-top: .55rem; }
.bb-strip-item:hover .t { text-decoration: underline; text-decoration-color: var(--bb-gold); text-decoration-thickness: 2px; }
@media (max-width: 560px) { .bb-strip-item { width: 150px; margin-right: .8rem; font-size: .82rem; } }

/* --------------------------------------------------------------------------
   A wide page: prose at the measure, grids at the full container, the
   section heading in a left rail.
   -------------------------------------------------------------------------- */

.bb-wrap--wide {
  max-width: var(--bb-container);
  padding-left: var(--bb-pad);
  padding-right: var(--bb-pad);
}
.bb-wrap--wide > .quick-answer,
.bb-wrap--wide > .bb-hero > .bb-dek,
.bb-wrap--wide .bb-section > p,
.bb-wrap--wide .bb-section > ol,
.bb-wrap--wide .bb-section > ul,
.bb-wrap--wide .bb-note,
.bb-wrap--wide .bb-faq details { max-width: var(--bb-measure); }
.bb-wrap--wide > .quick-answer { max-width: 52rem; }

@media (min-width: 1000px) {
  .bb-wrap--wide .bb-section {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    column-gap: 3rem;
    /* default stretch, deliberately: the items are blocks whose content sits
       at the top anyway, and ui_qa treats any align-items: start in a sheet
       that also declares position: sticky as a sticky element with no travel */
  }
  .bb-wrap--wide .bb-section > h2 {
    grid-column: 1;
    grid-row: 1 / span 99;
    margin-top: .15rem;
  }
  .bb-wrap--wide .bb-section > * { grid-column: 2; }
  .bb-wrap--wide .bb-section > .bb-related,
  .bb-wrap--wide .bb-section > .bb-index,
  .bb-wrap--wide .bb-section > .bb-tablewrap,
  .bb-wrap--wide .bb-section > .bb-filter,
  .bb-wrap--wide .bb-section > .bb-strip {
    grid-column: 1 / -1;
    margin-top: 1.4rem;
  }
  .bb-wrap--wide .bb-section > .bb-strip { margin-top: 0; }
  .bb-wrap--wide .bb-related--photo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bb-wrap--wide .bb-faq { display: block; }
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

html.bb-js .bb-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s var(--bb-ease), transform .65s var(--bb-ease);
  transition-delay: var(--bb-d, 0s);
}
html.bb-js .bb-reveal.is-in { opacity: 1; transform: none; }
/* a hovering card must not fight its own entrance */
html.bb-js .bb-card.bb-reveal.is-in {
  transition: transform .32s var(--bb-ease), box-shadow .32s var(--bb-ease), border-color .32s;
}

.bb-tablewrap[data-scrollable]::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 56px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 78%);
  opacity: 1;
  transition: opacity .25s var(--bb-ease);
}
.bb-tablewrap[data-at-end]::after { opacity: 0; }
.bb-tablewrap:focus-visible,
.bb-tablescroll:focus-visible { outline: 3px solid var(--bb-gold); outline-offset: 2px; }

.bb-col figure img,
.bb-related img { border-radius: 0; }
.bb-col figure img { border-radius: 14px; }

@keyframes bb-settle {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bb-settle-img {
  from { opacity: 0; transform: scale(1.015); }
  to   { opacity: 1; transform: none; }
}
@keyframes bb-push {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
@keyframes bb-marquee {
  to { transform: translateX(-50%); }
}
@keyframes bb-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.bb-footer { background-color: var(--bb-navy); background-image: var(--bb-royal); margin-top: 0; position: relative; }
.bb-footer::before {
  content: "";
  display: block;
  height: 4px;
  background: var(--bb-gold-line);
}
.bb-footer-inner { max-width: var(--bb-container); }

/* --------------------------------------------------------------------------
   Phone
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
  .bb-hero-img { border-radius: 14px; }
  .quick-answer { padding: 1.2rem 1.2rem 1.3rem; border-radius: 14px; }
  .bb-stats { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .bb-stat { padding: .95rem 1rem 1rem 1.1rem; }
  .bb-stat .v { font-size: 1.45rem; }
  /* photo grids on the hubs stay two across; a card inside the rail is one */
  .bb-wrap--wide .bb-related--photo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
  .bb-wrap--wide .bb-related--photo .bb-card-body { padding: .7rem .75rem .85rem; }
  .bb-wrap--wide .bb-related--photo .bb-card .t { font-size: .92rem; }
  .bb-wrap--wide .bb-related--photo .bb-card .d { font-size: .78rem; -webkit-line-clamp: 2; }
  .bb-related--photo .bb-card .c { font-size: .72rem; }
  .bb-index--photo a { grid-template-columns: 74px minmax(0, 1fr) auto; }
  .bb-index--photo .bb-thumb { width: 74px; }
  .bb-band { padding: 2.3rem 0 1.8rem; margin-bottom: 2.2rem; }
  .bb-hero-band { padding-top: 1.8rem; }
  .bb-hero-band-stats { margin-top: 1.6rem; padding-bottom: 1.8rem; }
  .bb-hero-band-stats .bb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .bb-hero-band-stats .bb-stat .v { font-size: 1.5rem; }
  .bb-faq summary { padding: .85rem .9rem; font-size: .98rem; }
  .bb-faq .a { padding: 0 .9rem .95rem; }
  .bb-toc ol { padding: .7rem .9rem .8rem 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bb-hero-img,
  .bb-hero-words > *,
  .bb-hero-figure,
  .bb-hero-figure img,
  .bb-strip-track { animation: none; opacity: 1; transform: none; }
  html.bb-js .bb-reveal { opacity: 1; transform: none; transition: none; }
  .bb-strip { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* --------------------------------------------------------------------------
   Research reports: charts drawn from the data, the dataset box, the meta line
   -------------------------------------------------------------------------- */

.bb-chart, .bb-figure { margin: 1.8rem 0 2.1rem; }
.bb-chart svg {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid var(--bb-navy-line);
  border-radius: 14px;
  box-shadow: var(--bb-shadow);
  padding: .4rem .2rem .2rem;
}
.bb-chart text { font-family: var(--bb-font-ui); }
.bb-figure img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: var(--bb-shadow); }
.bb-chart figcaption, .bb-figure figcaption {
  font-family: var(--bb-font-ui);
  font-size: .85rem;
  line-height: 1.5;
  color: var(--bb-muted);
  margin-top: .65rem;
}
.bb-chart figcaption .bb-cite, .bb-figure figcaption .bb-cite { font-size: .85rem; }

.bb-dataset {
  background: var(--bb-wheat);
  border-radius: 16px;
  padding: 1.4rem 1.6rem 1.5rem;
  margin: 0 0 2.4rem;
  box-shadow: var(--bb-shadow);
  scroll-margin-top: 5rem;
}
.bb-dataset h2 { font-size: 1.12rem; margin: 0 0 .5rem; color: var(--bb-navy); }
.bb-dataset p { margin: 0 0 .9rem; color: var(--bb-ink); font-size: .98rem; line-height: 1.6; }
.bb-dataset p:last-of-type { margin-bottom: 1.1rem; }
.bb-dataset .bb-cite { color: var(--bb-navy); }
.bb-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--bb-navy);
  color: #fff;                            /* 12.5:1 */
  font-family: var(--bb-font-ui);
  font-weight: 600;
  font-size: .92rem;
  padding: .72rem 1.25rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: var(--bb-shadow);
  transition: transform .25s var(--bb-ease), box-shadow .25s var(--bb-ease);
}
.bb-btn:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--bb-shadow-lift); }
.bb-dataset .bb-fine {
  display: block;
  margin-top: .8rem;
  font-family: var(--bb-font-ui);
  font-size: .8rem;
  color: var(--bb-on-wheat-muted);        /* 6.1:1 */
}
.bb-report-meta {
  font-family: var(--bb-font-ui);
  font-size: .85rem;
  color: var(--bb-muted);
  margin: -1.1rem 0 1.8rem;
}
.bb-report-meta b { color: var(--bb-navy); font-weight: 600; }
.bb-report-meta a { color: var(--bb-navy); }
@media (max-width: 860px) {
  html.bb-js .bb-nav.is-open a:nth-child(7) { transition-delay: .38s; }
}