/* The four section pages (ai/, faith/, stewardship/, sports/) in the site's
 * shared look (shared/theme.css): white, black, one blue, Helvetica.
 *
 * Those pages were built as near-copies of one layout (a sidebar with the
 * "What each one covers" table, then groups of cards), each in its own older
 * palette and fonts. Rather than rewrite four stylesheets, each page loads
 * theme.css and then this file after its own <style>, and this file resets
 * the shared class names. The page's section color comes from data-hue on
 * <body> and only marks things (the bar over the title, the card hover); the
 * text accent is the blue. Card sketches keep their own colors.
 */
:root {
  --card: #ffffff;
  --card-strong: #ffffff;
  --accent: var(--blue);
  --gold: var(--ink-2);
  --serif: var(--sans);
}

body { background: var(--paper); background-image: none; color: var(--ink); font-family: var(--sans); }
a { color: var(--blue); }

/* Titles: plain, no italic accent word, no capitals. */
.wordmark, .group-h, .card-title {
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: -0.02em;
}
.wordmark { font-weight: 700; font-size: 2.4rem; line-height: 1.02; border-bottom: 0; padding-bottom: 0; }
.wordmark em, .group-h em, .card-title em {
  display: inline;
  font-style: normal;
  font-weight: inherit;
  color: inherit;
}
.group-h { font-weight: 700; font-size: 1.6rem; line-height: 1.1; }
.group-head { border-bottom: 2px solid var(--rule); }
.card-title { font-weight: 700; font-size: 1.35rem; line-height: 1.15; }
.card--feature .card-title { font-size: 1.7rem; }

/* The section's color, as on the hub: a bar over the page title. */
.side-inner::before {
  content: "";
  display: block;
  width: 2.25rem;
  height: 0.5rem;
  margin-bottom: 0.9rem;
  background: var(--hue, var(--ink));
}

/* Labels: the uppercase, letter-spaced mono lines become plain small text. */
.kicker, .side-h, .card-kicker, .card-date, .layers dt, .cv-layer span, .verse cite,
.atlas-apps .lbl, .atlas-tip-k {
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: 0;
}
.kicker { font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.side-h { font-size: 0.8rem; font-weight: 700; color: var(--ink); }
.card-kicker { font-size: 0.78rem; font-weight: 400; color: var(--ink-2); }
.card-date { font-size: 0.75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.layers dt { font-size: 0.72rem; font-weight: 700; color: var(--ink); }
.cv-layer span { font-size: 0.68rem; color: var(--ink-2); }
.verse { font-family: var(--sans); }
.verse cite { font-size: 0.72rem; }
.atlas-tip-t, .atlas-topic text { font-family: var(--sans); }

/* Cards: square, a light rule, black on hover. */
.card { border-radius: 0; border-color: var(--rule-soft); }
.card:hover { transform: none; box-shadow: none; border-color: var(--ink); }
.card:hover .card-title { color: var(--ink); }
.card:hover .card-go { color: var(--blue); }
.card-link::after { border-radius: 0; }
.card-art { background: #f7f7f5; }
.cv-layer[aria-pressed="true"] { background: var(--ink); }
.side { border-right-color: var(--rule-soft); }