/* ==========================================================================
   BabyBloom Design System v3
   Single source of truth for typography, colour, spacing, components.
   Loaded on every page. Keep this file the ONLY place these tokens live.
   ========================================================================== */

/* ── 1. TOKENS ──────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --bb-blush:        #FF9AA2;
  --bb-blush-deep:   #BE414C;   /* 4.5:1 on page — safe for small text */
  --bb-blush-mid:    #E5707A;   /* decorative only — never for text */
  --bb-blush-ink:    #B33B46;   /* 6.4:1 on white — use for body-size links */
  --bb-lilac:        #a29bfe;
  --bb-lilac-ink:    #5B4FCF;   /* accessible lilac for text */
  --bb-mint:         #B5EAD7;
  --bb-teal:         #01696F;
  --bb-peach:        #FFDAC1;

  /* Ink scale */
  --bb-ink:          #1A1412;   /* headings */
  --bb-ink-2:        #3D332F;   /* body */
  --bb-ink-3:        #6B5D57;   /* secondary — 5.3:1 on cream */
  --bb-ink-4:        #8A7A73;   /* meta — use ≥14px only */

  /* Surfaces */
  --bb-bg:           #FDFBFA;
  --bb-bg-warm:      #FBF6F4;
  --bb-surface:      #FFFFFF;
  --bb-surface-2:    #F8F3F1;

  /* Lines */
  --bb-line:         #EDE4E0;
  --bb-line-2:       #E0D4CE;

  /* Semantic */
  --bb-success-bg:   #F0FBF4;
  --bb-success-ink:  #14663A;
  --bb-success-line: #BFE8CF;
  --bb-warn-bg:      #FFF9EC;
  --bb-warn-ink:     #8A5A00;
  --bb-warn-line:    #FAE3B0;
  --bb-alert-bg:     #FFF5F5;
  --bb-alert-ink:    #A32222;
  --bb-alert-line:   #FAD1D1;

  /* Type scale — fluid, mobile-first */
  --bb-text-xs:   0.8125rem;
  --bb-text-sm:   0.9375rem;
  --bb-text-base: 1.0625rem;
  --bb-text-lg:   clamp(1.125rem, 0.4vw + 1.05rem, 1.25rem);
  --bb-text-xl:   clamp(1.3rem,  0.7vw + 1.15rem, 1.55rem);
  --bb-text-2xl:  clamp(1.6rem,  1.4vw + 1.3rem,  2.1rem);
  --bb-text-3xl:  clamp(2rem,    2.6vw + 1.4rem,  2.9rem);

  /* Spacing */
  --bb-s1: 0.25rem;  --bb-s2: 0.5rem;   --bb-s3: 0.75rem;
  --bb-s4: 1rem;     --bb-s5: 1.5rem;   --bb-s6: 2rem;
  --bb-s7: 3rem;     --bb-s8: 4rem;     --bb-s9: 6rem;

  /* Radius */
  --bb-r-sm: 0.5rem;  --bb-r:    0.875rem;
  --bb-r-lg: 1.25rem; --bb-r-xl: 1.75rem;
  --bb-r-pill: 999px;

  /* Elevation — soft, warm-tinted */
  --bb-sh-sm: 0 1px 2px rgba(60, 40, 35, .05);
  --bb-sh:    0 2px 8px rgba(60, 40, 35, .06), 0 1px 2px rgba(60, 40, 35, .04);
  --bb-sh-md: 0 6px 20px rgba(60, 40, 35, .08), 0 2px 6px rgba(60, 40, 35, .04);
  --bb-sh-lg: 0 16px 40px rgba(60, 40, 35, .10), 0 4px 12px rgba(60, 40, 35, .05);

  /* Layout */
  --bb-measure: 68ch;      /* optimal reading width */
  --bb-container: 1200px;
  --bb-container-wide: 1320px;

  /* Motion */
  --bb-ease: cubic-bezier(.22, .61, .36, 1);
  --bb-dur: 180ms;
}

/* ── 2. RESET & BASE ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;   /* clears the sticky header on anchor jumps */
}

/* Belt-and-braces horizontal overflow guard. `clip` is used on the root
   because `hidden` there would break `position: sticky` descendants. */
html { overflow-x: clip; }

body {
  margin: 0;
  font-family: 'Nunito', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--bb-text-base);
  line-height: 1.7;
  color: var(--bb-ink-2);
  background: var(--bb-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;           /* kills horizontal scroll on mobile */
}

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

/* Prevent layout shift from images that declare dimensions */
img[width][height] { height: auto; }

/* ── 3. TYPOGRAPHY ──────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  color: var(--bb-ink);
  font-weight: 700;
  letter-spacing: -0.018em;
  text-wrap: balance;           /* avoids orphan words in headings */
  margin: 0 0 var(--bb-s4);
}

h1 { font-size: var(--bb-text-3xl); line-height: 1.12; letter-spacing: -0.028em; }
h2 { font-size: var(--bb-text-2xl); line-height: 1.2;  margin-top: var(--bb-s7); }
h3 { font-size: var(--bb-text-xl);  line-height: 1.3;  margin-top: var(--bb-s6); }
h4 { font-size: var(--bb-text-lg);  line-height: 1.4;  margin-top: var(--bb-s5); font-family: 'Nunito', sans-serif; font-weight: 800; }

h1 + p, h2 + p, h3 + p { margin-top: 0; }

p { margin: 0 0 var(--bb-s4); text-wrap: pretty; }

/* Lead paragraph — first para after H1 */
.bb-lead {
  font-size: var(--bb-text-lg);
  line-height: 1.65;
  color: var(--bb-ink-3);
}

ul, ol { margin: 0 0 var(--bb-s4); padding-left: 1.35rem; }
li { margin-bottom: var(--bb-s2); }
li::marker { color: var(--bb-blush-deep); }

strong, b { font-weight: 800; color: var(--bb-ink); }

a {
  color: var(--bb-blush-ink);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: rgba(179, 59, 70, .32);
  transition: color var(--bb-dur) var(--bb-ease),
              text-decoration-color var(--bb-dur) var(--bb-ease);
}
a:hover { color: var(--bb-lilac-ink); text-decoration-color: currentColor; }

blockquote {
  margin: var(--bb-s6) 0;
  padding: var(--bb-s2) 0 var(--bb-s2) var(--bb-s5);
  border-left: 3px solid var(--bb-blush);
  color: var(--bb-ink-3);
  font-style: italic;
}

hr { border: 0; border-top: 1px solid var(--bb-line); margin: var(--bb-s7) 0; }

/* ── 4. FOCUS & ACCESSIBILITY ───────────────────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--bb-lilac-ink);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

.bb-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--bb-ink);
  color: #fff;
  padding: var(--bb-s3) var(--bb-s5);
  border-radius: 0 0 var(--bb-r) 0;
  font-weight: 700;
  text-decoration: none;
}
.bb-skip:focus { left: 0; }

.bb-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 5. LAYOUT ──────────────────────────────────────────────────────────── */
.bb-container {
  width: 100%;
  max-width: var(--bb-container);
  margin-inline: auto;
  padding-inline: var(--bb-s5);
}
@media (max-width: 640px) { .bb-container { padding-inline: var(--bb-s4); } }

.bb-section { padding-block: var(--bb-s8); }
@media (max-width: 768px) { .bb-section { padding-block: var(--bb-s7); } }

/* Reading column */
.bb-prose { max-width: var(--bb-measure); }
.bb-prose > * { max-width: 100%; }

/* ── 6. BUTTONS ─────────────────────────────────────────────────────────── */
.bb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bb-s2);
  min-height: 48px;                    /* touch target */
  padding: 0.8rem 1.5rem;
  border-radius: var(--bb-r);
  border: 1.5px solid transparent;
  font-family: 'Nunito', sans-serif;
  font-size: var(--bb-text-sm);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--bb-dur) var(--bb-ease),
              box-shadow var(--bb-dur) var(--bb-ease),
              background-color var(--bb-dur) var(--bb-ease),
              border-color var(--bb-dur) var(--bb-ease),
              color var(--bb-dur) var(--bb-ease);
}
.bb-btn:hover { text-decoration: none; transform: translateY(-1px); }
.bb-btn:active { transform: translateY(0); }

.bb-btn--primary {
  background: var(--bb-ink);
  color: #fff;
  box-shadow: var(--bb-sh);
}
.bb-btn--primary:hover { background: #2E2422; color: #fff; box-shadow: var(--bb-sh-md); }

.bb-btn--accent {
  background: var(--bb-blush-deep);
  color: #fff;
  box-shadow: var(--bb-sh);
}
.bb-btn--accent:hover { background: #D3606A; color: #fff; box-shadow: var(--bb-sh-md); }

.bb-btn--ghost {
  background: var(--bb-surface);
  color: var(--bb-ink);
  border-color: var(--bb-line-2);
}
.bb-btn--ghost:hover { border-color: var(--bb-ink); background: var(--bb-surface); color: var(--bb-ink); }

.bb-btn--sm { min-height: 40px; padding: 0.55rem 1.1rem; font-size: var(--bb-text-xs); }

/* ── 7. CARDS ───────────────────────────────────────────────────────────── */
.bb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bb-surface);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r-lg);
  padding: var(--bb-s5);
  box-shadow: var(--bb-sh-sm);
  transition: transform var(--bb-dur) var(--bb-ease),
              box-shadow var(--bb-dur) var(--bb-ease),
              border-color var(--bb-dur) var(--bb-ease);
}
.bb-card--link:hover {
  transform: translateY(-2px);
  box-shadow: var(--bb-sh-md);
  border-color: var(--bb-line-2);
}
/* Full-card click target without nesting interactive elements */
.bb-card--link a.bb-card__target::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
}

.bb-card__eyebrow {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bb-blush-deep);
  margin-bottom: var(--bb-s2);
}
.bb-card__title {
  font-family: 'Playfair Display', serif;
  font-size: var(--bb-text-lg);
  font-weight: 700;
  color: var(--bb-ink);
  line-height: 1.25;
  margin: 0 0 var(--bb-s2);
}
.bb-card__body { font-size: var(--bb-text-sm); color: var(--bb-ink-3); margin: 0; }

/* Grid */
.bb-grid { display: grid; gap: var(--bb-s5); }
.bb-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.bb-grid--3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.bb-grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ── 8. CALLOUTS ────────────────────────────────────────────────────────── */
.bb-callout {
  border-radius: var(--bb-r);
  padding: var(--bb-s4) var(--bb-s5);
  margin: var(--bb-s6) 0;
  border-left: 3px solid;
  font-size: var(--bb-text-sm);
}
.bb-callout__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: var(--bb-s2);
}
.bb-callout--info    { background: var(--bb-success-bg); border-color: var(--bb-success-line); color: var(--bb-success-ink); }
.bb-callout--warn    { background: var(--bb-warn-bg);    border-color: var(--bb-warn-line);    color: var(--bb-warn-ink); }
.bb-callout--alert   { background: var(--bb-alert-bg);   border-color: var(--bb-alert-line);   color: var(--bb-alert-ink); }

/* ── 9. TABLES ──────────────────────────────────────────────────────────── */
.bb-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--bb-s6) 0;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r);
  background: var(--bb-surface);
}
table { border-collapse: collapse; width: 100%; font-size: var(--bb-text-sm); }
th, td { padding: 0.8rem 1rem; text-align: left; border-bottom: 1px solid var(--bb-line); }
th {
  background: var(--bb-surface-2);
  font-weight: 800;
  color: var(--bb-ink);
  font-size: var(--bb-text-xs);
  letter-spacing: 0.02em;
  position: sticky; top: 0;
}
tr:last-child td { border-bottom: 0; }

/* ── 10. FORMS ──────────────────────────────────────────────────────────── */
label { display: block; font-size: var(--bb-text-sm); font-weight: 700; color: var(--bb-ink); margin-bottom: var(--bb-s2); }
input[type="text"], input[type="email"], input[type="number"], input[type="date"],
input[type="password"], select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  font-family: inherit;
  font-size: 16px;              /* prevents iOS zoom-on-focus */
  color: var(--bb-ink);
  background: var(--bb-surface);
  border: 1.5px solid var(--bb-line-2);
  border-radius: var(--bb-r-sm);
  transition: border-color var(--bb-dur) var(--bb-ease), box-shadow var(--bb-dur) var(--bb-ease);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--bb-lilac-ink);
  box-shadow: 0 0 0 3px rgba(91, 79, 207, .12);
  outline: none;
}

/* ── 11. MOTION ─────────────────────────────────────────────────────────── */
.bb-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s var(--bb-ease), transform .55s var(--bb-ease);
  will-change: opacity, transform;
}
.bb-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .bb-reveal { opacity: 1 !important; transform: none !important; }
  .bb-btn:hover, .bb-card--link:hover { transform: none !important; }
}

/* ── 12. ARTICLE LAYOUT REPAIR + POLISH ─────────────────────────────────── */
/* Defensive: even if markup regresses, never let prose become flex columns. */
.article-outer > p,
.article-outer > ul,
.article-outer > ol,
.article-outer > h2,
.article-outer > h3,
.article-outer > table,
.article-outer > details,
.article-outer > blockquote { flex: 1 1 100%; min-width: 0; width: 100%; }

/* Centre the reading column instead of letting it hug the left edge.
   With sticky side columns present they keep their fixed widths and the
   prose column still caps out at a comfortable measure. */
.article-outer { justify-content: center; }

.article-centre {
  min-width: 0;
  flex: 1 1 auto;
  max-width: 820px;
  margin-inline: auto;
}
.article-centre > * { max-width: 100%; }

/* Prose gets a slightly tighter measure than blocks like tables and cards */
.article-centre > p,
.article-centre > ul,
.article-centre > ol,
.article-centre > blockquote { max-width: var(--bb-measure); }

/* Headline sits on the same optical axis as the prose */
.article-centre > h1 { max-width: 20ch; }
@media (min-width: 768px) {
  .article-centre > h1 { max-width: 24ch; }
}

/* Article hero */
.article-hero-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 440px;
  object-fit: cover;
  border-radius: var(--bb-r-lg);
  margin: var(--bb-s5) 0 var(--bb-s6);
  box-shadow: var(--bb-sh-md);
  background: var(--bb-surface-2);   /* placeholder tone prevents flash */
}
@media (max-width: 768px) {
  .article-hero-img { aspect-ratio: 3 / 2; max-height: 260px; border-radius: var(--bb-r); }
}

/* Byline */
.byline {
  display: flex; align-items: center; gap: var(--bb-s4);
  padding: var(--bb-s3) var(--bb-s4);
  background: var(--bb-surface);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r);
  margin: var(--bb-s4) 0 var(--bb-s6);
  flex-wrap: wrap;
  font-size: var(--bb-text-xs);
  color: var(--bb-ink-3);
}

/* Breadcrumbs */
.bb-breadcrumb-nav { margin: 0 0 var(--bb-s5); }
.bb-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--bb-s2);
  font-size: var(--bb-text-xs);
  color: var(--bb-ink-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.bb-breadcrumb li { margin: 0; }
.bb-breadcrumb a {
  color: var(--bb-ink-3);
  text-decoration: none;
  display: inline-block;
  padding: 0.15rem 0;
}
.bb-breadcrumb a:hover { color: var(--bb-blush-ink); text-decoration: underline; }
.bb-breadcrumb [aria-current="page"] { color: var(--bb-ink-2); font-weight: 700; }
.bb-bc-sep { color: var(--bb-line-2); user-select: none; }

/* Long trails stay on one line on phones */
@media (max-width: 520px) {
  .bb-breadcrumb { font-size: 0.75rem; gap: 0.35rem; }
}

/* Table of contents */
.toc, .toc-col {
  background: var(--bb-surface);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r);
  padding: var(--bb-s4) var(--bb-s5);
  margin: var(--bb-s5) 0 var(--bb-s6);
}
.toc-title {
  font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--bb-ink-4);
  margin: 0 0 var(--bb-s3);
}
.toc ol { margin: 0; padding-left: 1.1rem; }
.toc li { margin-bottom: var(--bb-s2); font-size: var(--bb-text-sm); }
.toc a { color: var(--bb-ink-2); text-decoration: none; }
.toc a:hover { color: var(--bb-blush-ink); text-decoration: underline; }

/* Related articles */
.related-articles {
  background: var(--bb-bg-warm);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r-lg);
  padding: var(--bb-s5) var(--bb-s6);
  margin: var(--bb-s7) 0;
}
.related-articles h3 { margin-top: 0; font-size: var(--bb-text-lg); }
.related-articles ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--bb-s2); }
.related-articles li a {
  display: inline-flex; align-items: baseline; gap: var(--bb-s2);
  font-weight: 700; color: var(--bb-ink); text-decoration: none;
  font-size: var(--bb-text-sm);
}
.related-articles li a::before { content: "\2192"; color: var(--bb-blush-deep); font-weight: 800; }
.related-articles li a:hover { color: var(--bb-blush-ink); text-decoration: underline; }

/* Details / FAQ accordions */
details {
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r);
  background: var(--bb-surface);
  margin-bottom: var(--bb-s3);
  overflow: hidden;
}
details summary {
  cursor: pointer;
  padding: var(--bb-s4) var(--bb-s5);
  font-weight: 800;
  color: var(--bb-ink);
  font-size: var(--bb-text-sm);
  list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: var(--bb-s3);
  min-height: 48px;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: "+"; font-size: 1.35rem; font-weight: 400; color: var(--bb-blush-deep);
  transition: transform var(--bb-dur) var(--bb-ease); flex-shrink: 0; line-height: 1;
}
details[open] summary::after { transform: rotate(45deg); }
details summary:hover { background: var(--bb-surface-2); }

/* ── 13. MOBILE GUARDS ──────────────────────────────────────────────────── */
/* These use !important deliberately: they are defensive guards that must beat
   the per-page inline <style> blocks, which load after this file. */

@media (max-width: 768px) {
  :root { --bb-text-base: 1.0625rem; }
  h2 { margin-top: var(--bb-s6); }
  .related-articles { padding: var(--bb-s4); }
  .toc, .toc-col { padding: var(--bb-s4); }
}

/* Wide data tables scroll inside their own container rather than
   stretching the page. Applied at every size as a safety net. */
.bb-scroll-x {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r);
  background: var(--bb-surface);
  margin: var(--bb-s5) 0;
}
.bb-scroll-x > table { margin: 0; border: 0; min-width: 34rem; }
.bb-scroll-x th { position: static; }

@media (max-width: 900px) {
  /* Fallback for any table the wrapper script missed */
  .article-centre table:not(.bb-scroll-x > table) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* Headings must always be allowed to wrap. A `white-space: nowrap` on a
   section heading silently widens the whole document on narrow screens. */
h1, h2, h3, h4, h5, h6 { white-space: normal !important; }

/* Section header rows wrap rather than forcing their children wide */
.section-head { flex-wrap: wrap; gap: var(--bb-s3) var(--bb-s4); min-width: 0; }
.section-head > * { min-width: 0; }

@media (max-width: 700px) {
  /* Horizontal cards stack instead of overflowing */
  .article-card {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }
  .article-card > * { min-width: 0 !important; max-width: 100% !important; }
  .article-card-desc,
  .article-card-meta,
  .article-card-title {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  /* Any flex/grid child must be allowed to shrink */
  main *:not(.bb-scroll-x) > * { min-width: 0; }

  /* Long unbroken strings (URLs, long words) never widen the page */
  p, li, td, th, dd, dt, h1, h2, h3, h4 { overflow-wrap: break-word; }
}

@media (max-width: 420px) {
  .bb-btn { width: 100%; }        /* full-width CTAs on small phones */
  .bb-btn--inline { width: auto; }
}

/* Very small phones (≤400px): card grids with a large minimum track
   (e.g. minmax(280px, 1fr)) are wider than the available space. Collapse
   them to a single column so cards shrink to fit. */
@media (max-width: 460px) {
  /* No `main` prefix — some pages nest <main> below these containers. */
  [class*="grid"],
  .article-cards,
  .article-card-grid,
  .milestone-links,
  .milestone-grid,
  .card-grid,
  .link-grid {
    grid-template-columns: 1fr !important;
  }
  .article-card,
  .milestone-link,
  .article-grid > * {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Very small phones (≤360px): the nav row must still fit.
   Without this the hamburger is pushed past the right edge. */
@media (max-width: 360px) {
  .bb-nav-v2, .nav-inner, .nav-bar {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    gap: 0.4rem !important;
  }
  .nav-growth-cta, .nav-growth-always {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    font-size: 0.6875rem !important;
  }
  .hamburger { margin-right: 0 !important; flex-shrink: 0; }
  .nav-logo span, .bb-logo-text { font-size: 1rem !important; }
}

/* Floating controls must never sit outside the viewport.
   `left: auto` matters — a stale `left` value lets a fixed element extend
   the document's scroll width on narrow screens. */
#back-to-top {
  position: fixed !important;
  left: auto !important;
  right: 1rem !important;
  bottom: 1rem !important;
  width: 44px !important;
  height: 44px !important;
  max-width: 44px;
  z-index: 60;
}

/* ── 14. PRINT ──────────────────────────────────────────────────────────── */
@media print {
  .bb-nav-v2, nav, footer, .toc-col, .back-col, .bb-btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ── 15. CARD THUMBNAIL MARK ────────────────────────────────────────────── */
/* Replaces the old emoji thumbnails. One consistent mark across every card
   keeps the grid calm and on-brand instead of a wall of mixed emoji. */
.card-emoji {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: var(--bb-surface-2) !important;
  border-bottom: 1px solid var(--bb-line);
  color: #C08A90;
}
.card-emoji > svg { width: 54px; height: 54px; }
@media (max-width: 700px) {
  .card-emoji { height: 140px !important; }
  .card-emoji > svg { width: 44px; height: 44px; }
}

/* ── 16. LINKS THAT LOOK LIKE CONTROLS ──────────────────────────────────── */
/* The global underline is right for links inside prose, wrong for links
   styled as buttons, pills, chips or whole-card targets. */
.bb-btn,
.cta-btn,
.card,
.article-card,
.subpage-card,
.related-link,
.explore-link,
.milestone-link,
.nav-growth-cta,
.card-link,
.back-btn-desktop,
.toc-link,
[class*="-pill"],
[class*="-chip"],
[class*="-tag"],
[class*="-badge"],
[class*="-btn"],
.bb-breadcrumb a {
  text-decoration: none !important;
}

/* Give them a considered hover instead of an underline */
.related-link:hover,
.explore-link:hover,
.card-link:hover,
.milestone-link:hover {
  color: var(--bb-blush-ink) !important;
  text-decoration: none !important;
}

/* Whole-card targets: underline only the title on hover, which reads as
   interactive without cluttering the card. */
.card:hover .card-title,
.article-card:hover .article-card-title,
.subpage-card:hover .subpage-card-title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}