/* Shared dark palette and page chrome for the homepage and network directory. */
.cb-dark {
  --home-base: #181e1b;
  --home-deep: #121915;
  --home-band: #1f2922;
  --home-panel: #28352c;
  --home-hover: #334236;
  --home-edge: #4d5d50;
  --home-text: #f3eedf;
  --home-muted: #c9d0c2;
  --home-gold: #e4c683;
  --home-sage: #bacc9b;
  --home-contours: url("/assets/terrain-contours.svg");
  background: var(--home-base);
  color: var(--home-text);
}

.cb-dark > :is(header, main, footer) {
  --navy: var(--home-gold);
  --ink: var(--home-text);
  --muted: var(--home-muted);
  --green: var(--home-sage);
  --sky: var(--home-sage);
  --yellow: var(--home-gold);
}

.cb-dark > header {
  background: var(--home-deep);
  border-color: var(--home-edge);
}

.cb-dark .compass-lettering { filter: brightness(0) invert(.94); }
.cb-dark .circlebridge-brand img { clip-path: circle(46%); }
.cb-dark .circlebridge-brand,
.cb-dark #navlinks a { color: var(--home-text); }
.cb-dark #navlinks a:hover { color: var(--home-gold); }

@media (max-width: 1100px) {
  .cb-dark #navlinks,
  .cb-dark .menu {
    background: var(--home-deep);
    border-color: var(--home-edge);
    color: var(--home-text);
  }
}

.cb-dark :is(.hero, .directory-intro) {
  background: linear-gradient(118deg, #17221b 10%, #29392d 100%);
}

.cb-dark :is(.hero, .directory-intro)::before {
  background: var(--home-contours) center 46% / cover no-repeat;
  opacity: .86;
  mask-image: linear-gradient(90deg, #0006, #000 70%);
}

.cb-dark > main {
  background: linear-gradient(#181e1b8c, #181e1b8c), var(--home-contours) center top / max(100%, 980px) auto repeat-y;
}

.cb-home .orbit {
  background:
    radial-gradient(ellipse at 58% 42%, #56664782 0%, #42534050 58%, transparent 73%);
}
.cb-home .hero-cover img,
.cb-home .cover-stage img { filter: drop-shadow(5px 10px 11px #090d09b3); }
.cb-home .hero-bottom { position: relative; color: var(--home-muted); }

.cb-home .people-band,
.cb-home .books-section {
  background-color: var(--home-band);
  background-image: linear-gradient(90deg, #1f2922a8, #1f292280), var(--home-contours);
  background-repeat: repeat-y;
  background-size: max(100%, 980px) auto;
  background-position: center 19%;
}

.cb-home .books-section { background-position: center top; }

.cb-dark > :is(footer, .resource-discovery) {
  background: linear-gradient(#181e1bb8, #181e1bb8), var(--home-contours) center 80% / max(100%, 980px) auto;
}
.cb-dark > .resource-discovery a { color: var(--home-gold); }

.cb-home .person,
.cb-home .kindling,
.cb-home .tool-card,
.cb-home .training-links > a { background: var(--home-panel); }

.cb-home .person,
.cb-home .tool-card { border: 1px solid var(--home-edge); }

.cb-home .tool-card:hover,
.cb-home .training-links > a:hover { background: var(--home-hover); }

.cb-home .training-links > a { border-color: var(--home-edge); border-top-color: var(--home-sage); }
.cb-home .training-links p,
.cb-home .bridge-book-quote figcaption,
.cb-home .band-intro,
.cb-home .project-card p { color: var(--home-muted); }

.cb-home .bridge-book-quote { border-color: var(--home-sage); }
.cb-home .bridge-book-quote blockquote p { color: var(--home-text); }
.cb-home .principles span { color: var(--home-sage); }

.cb-home :is(.hero-bottom, .principles, .book-row, .training-opportunities),
.cb-home main details,
.cb-dark > footer small { border-color: var(--home-edge); }

.cb-home .cover-stage { background: #304039; }
.cb-home .cover-stage::before {
  background-image: linear-gradient(90deg, #ecedcc10 1px, transparent 1px),
    linear-gradient(#ecedcc10 1px, transparent 1px);
}
.cb-home .stage-02 { background: #3b472d; }
.cb-home .stage-03 { background: #4c402c; }
.cb-home .stage-04 { background: #333e40; }
.cb-home .book-num { color: var(--home-text); }

.cb-home .button.navy,
.cb-home .button.yellow { background: var(--home-gold); color: #1b2118; }
.cb-home .button.navy:hover,
.cb-home .button.yellow:hover { background: #f2d99f; color: #1b2118; }
.cb-home .button.outline { border-color: var(--home-gold); color: var(--home-gold); }
.cb-home .button.outline:hover { background: var(--home-gold); color: #1b2118; }

@media (max-width: 760px) {
  .cb-dark :is(.hero, .directory-intro)::before { background-position: 58% center; mask-image: none; opacity: .72; }
}

@media print {
  .cb-dark { background: white; color: black; }
  .cb-dark > :is(header, main, footer) {
    --navy: #152a28;
    --ink: #111;
    --muted: #333;
    --home-text: #111;
    --home-muted: #333;
  }
  .cb-dark .compass-lettering { filter: none; }
}