/* /example/the-sources: the source map.

   Named for the route's page key (example.sources). Layers on base.css.

   The governing idea: what a source gives you and what it will not tell
   you are set at the same weight, side by side, in the same type size. A
   limit styled as a footnote reads as a caveat being buried, which costs
   more trust than stating it plainly ever would.

   Colour follows the house meanings. Teal is confirmed and is used only
   on the strength column and the High reliability band. Slate is unknown
   or ruled out and carries every limit. Amber is reserved for the
   homepage problem section and appears nowhere here. */

/* ── Hero ───────────────────────────────────────────────────────── */

.so-hero { padding: 62px 0 70px; }
.so-hero h1 { max-width: 15em; }
.so-hero-lede { max-width: 37em; }
.so-hero-lede-2 {
  margin-top: 16px;
  font-size: 17px;
  color: var(--muted);
}

/* ── The shape of the evidence base ─────────────────────────────── */

.so-figures .lede { max-width: 34em; }

.so-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 48px;
}
@media (max-width: 1040px) {
  .so-stats { grid-template-columns: repeat(2, 1fr); gap: 28px 30px; }
}
@media (max-width: 560px) {
  .so-stats { grid-template-columns: 1fr; gap: 24px; }
}

.so-stat b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(38px, 4.4vw, 54px);
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
}
.so-stat span {
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-dark);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--dark-body);
}

/* ── The ten families ───────────────────────────────────────────── */

.so-family-list {
  margin-top: 46px;
  border-top: 1px solid var(--rule);
}

.so-family {
  padding: 30px 0 32px;
  border-bottom: 1px solid var(--rule);
}

.so-family-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}
.so-family-head h3 { color: var(--ink); }

.so-family-count {
  flex: none;
  font-size: 13.5px;
  color: var(--muted);
  white-space: nowrap;
}
.so-family-count b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  margin-right: 5px;
}

/* The two halves, equal width and equal type size. */
.so-family-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 860px) {
  .so-family-cols { grid-template-columns: 1fr; gap: 20px; }
}

.so-col { padding-top: 14px; border-top: 2px solid var(--rule); }
/* The only colour distinction between the two halves. Teal for what the
   source can do, slate for what it cannot, matching their meaning
   everywhere else on the site. */
.so-col-carries { border-top-color: var(--teal); }
.so-col-quiet { border-top-color: var(--slate); }

.so-col-label {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.so-col p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--body);
}

/* ── Reliability ────────────────────────────────────────────────── */

.so-rel-inner {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 1040px) {
  .so-rel-inner { grid-template-columns: 1fr; gap: 36px; }
}
.so-rel-text h2 { max-width: 12em; }

.so-rel-rule {
  margin-top: 24px;
  padding-left: 18px;
  border-left: 2px solid var(--teal);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 30em;
}

.so-rel-bands { display: grid; gap: 18px; }

.so-band {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 20px 22px;
}
.so-band-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.so-band-top h3 { font-size: 17px; color: var(--ink); }
.so-band-top b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.so-band-bar {
  margin: 12px 0 12px;
  height: 4px;
  border-radius: 2px;
  background: var(--rule);
  overflow: hidden;
}
/* Teal marks the one band that can carry a claim on its own; Medium and
   Low are both slate, because the real distinction here is authoritative
   against not, and the length and the percentage separate those two.
   Low was originally set in --rule, which is the track colour, so the
   bar was invisible against its own groove. */
.so-band-bar span { display: block; height: 100%; border-radius: 2px; }
.so-band-high .so-band-bar span { background: var(--teal); }
.so-band-medium .so-band-bar span,
.so-band-low .so-band-bar span { background: var(--slate); }

.so-band p {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* ── Where the work is ──────────────────────────────────────────── */

.so-gap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 46px;
}
@media (max-width: 1040px) {
  .so-gap-grid { grid-template-columns: 1fr; gap: 16px; }
}

.so-gap {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 26px 28px 24px;
}
@media (max-width: 700px) {
  .so-gap { padding: 22px 20px 20px; }
}

.so-gap-fig {
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.so-gap-fig b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.so-gap-fig span {
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
}
.so-gap h3 { color: var(--ink); }
.so-gap > p {
  margin-top: 10px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--body);
}

/* ── Closing ────────────────────────────────────────────────────── */

.so-cta-inner { text-align: center; }
.so-cta h2 { max-width: 14em; margin: 0 auto; }
.so-cta .lede { margin-left: auto; margin-right: auto; }
.so-cta .actions { justify-content: center; }