/* Guardian Business Financing.
 *
 * On the ADR-0011 skeleton -- `tools/sitegen/page.css` is the layout. What is
 * here is the palette, the two typefaces, and one band the skeleton does not
 * have: the voices.
 *
 * PETRONA IS THE FOURTH SERIF ON THIS NETWORK and the only one with a
 * newspaper's build -- narrow, sturdy, drawn for a column rather than a
 * masthead. On a site whose whole premise is answering awkward questions
 * without the sales voice, a headline that reads like a leader column rather
 * than an advertisement is the point.
 *
 * NAVY AND BLUE, on a paper that is almost but not quite white. No warm
 * colour anywhere, which is deliberate: the accent, the tick and the price
 * figure are three depths of the same blue.
 */

@font-face {
  font-family: "Petrona";
  src: url("display.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Onest";
  src: url("text.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --ink: #212255;
  --ink-soft: #171838;
  --text: #3a3d55;
  --muted: #62657f;

  --accent: #2b52c4;
  --accent-deep: #1f3d95;
  --accent-wash: #eef2fd;
  --accent-line: #c3d0f4;

  --good: #2b52c4;
  --good-wash: #e6ebfb;
  --warn: #1f3d95;

  --paper: #fbfbfc;
  --card: #ffffff;
  --tint: #f1f2f7;
  --rule: #e2e3ec;
  --rule-firm: #c0c2d2;

  --ask-ink: #a9abc7;
  --ask-accent: #8ba5ec;

  --shadow: 33, 34, 85;

  --display: "Petrona", Georgia, "Times New Roman", serif;
  --body: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* A narrow text serif at 700 wants almost no tracking. */
  --display-weight: 700;
  --display-track: -0.008em;

  --shell: 1080px;
  --radius: 5px;
  --radius-sm: 4px;
}

/* ------------------------------------------------------------------ *
 * THE VOICES -- the one band this site has and the skeleton does not.
 *
 * Three owners, named, with the trade and the state. They are kept because
 * they are this brand's own and describe a process rather than a result --
 * the test the copy files apply to a testimonial. Set as pull quotes in the
 * display serif, which is the only place on the site that face appears at
 * body size.
 * ------------------------------------------------------------------ */
.voices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

.voice {
  border-top: 2px solid var(--ink);
  padding-top: 20px;
  margin: 0;
}

.voice blockquote {
  font-family: var(--display);
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 16px;
}

.voice figcaption {
  font-size: 0.9rem;
  color: var(--muted);
}

.voice figcaption b {
  display: block;
  color: var(--ink-soft);
  font-weight: 700;
}

@media (max-width: 900px) {
  .voices {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ---- the shared chrome, painted in this brand's colours ---- */
:root {
  --nav-bg: #fbfbfc;
  --nav-ink: #212255;
  --nav-ink-soft: #62657f;
  --nav-rule: #e2e3ec;
  --nav-hover: #2b52c4;
  --nav-panel: #fbfbfc;
  --nav-cta-bg: #212255;
  --nav-cta-ink: #ffffff;
  --nav-font: var(--body);
  --nav-size: 0.9375rem;
  --nav-weight: 600;
  --nav-track: 0;
  --nav-case: none;

  --foot-bg: #171838;
  --foot-ink: #a0a2bd;
  --foot-head: #ffffff;
  --foot-rule: #2c2d57;
  --foot-link: #ffffff;
}