/* Frontier Business Funding.
 *
 * 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 chooser.
 *
 * THE TYPE IS THE OTHER WAY ROUND. Every other site on this network sets its
 * headlines in something and its running text in a grotesque. Frontier sets
 * its headlines in Saira, a condensed grotesque, and its BODY in Literata, a
 * serif drawn for reading on screens. That inversion is the single most
 * recognisable thing about this site at a glance and it costs two lines.
 *
 * RUST ON WARM PAPER. `--paper` is #f7f5f1 and the cards are the only white
 * on the page. The accent is #9c4a26, which is the one colour on this network
 * that is neither blue nor green nor gold, and it clears AA on this ground at
 * 5.5:1.
 */

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

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

:root {
  --ink: #12283c;
  --ink-soft: #19354e;
  --text: #3b4a57;
  --muted: #61707d;

  --accent: #9c4a26;
  --accent-deep: #7a391c;
  --accent-wash: #f6ece6;
  --accent-line: #e4cbbd;

  --good: #19354e;
  --good-wash: #e8edf2;
  --warn: #9c4a26;

  --paper: #f7f5f1;
  --card: #ffffff;
  --tint: #efebe4;
  --rule: #ddd8cf;
  --rule-firm: #c0b8ab;

  --ask-ink: #a5b3bf;
  --ask-accent: #e0a184;

  --shadow: 18, 40, 60;

  --display: "Saira", "Segoe UI", system-ui, sans-serif;
  --body: "Literata", Georgia, "Times New Roman", serif;

  --display-weight: 700;
  --display-track: -0.02em;

  /* A serif body wants a little more leading than a grotesque. */
  --body-size: 17px;
  --body-line: 1.72;

  --shell: 1120px;
  --radius: 4px;
  --radius-sm: 3px;
}

/* ------------------------------------------------------------------ *
 * THE CHOOSER -- the one band this site has and the skeleton does not.
 *
 * One question -- what is the money for -- and three answers that cover
 * almost everyone. Each branch names the one or two products worth reading
 * about and lets a visitor skip the other four. It is the only place on this
 * network where a site tells a reader NOT to read four of its pages, and it
 * is why this brand's front page works without a comparison table.
 * ------------------------------------------------------------------ */
.branches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.branch {
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  padding: 28px 26px 24px;
  display: flex;
  flex-direction: column;
}

.branch h3 {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 10px;
}

.branch p {
  font-size: 0.99rem;
  color: var(--text);
  margin: 0 0 20px;
  flex: 1;
}

.branch ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.branch a {
  display: block;
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--accent-deep);
  text-decoration: none;
  border-top: 1px solid var(--rule);
  padding-top: 8px;
}

.branch a:hover {
  text-decoration: underline;
}

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

/* ---- the shared chrome, painted in this brand's colours ---- */
:root {
  --nav-bg: #f7f5f1;
  --nav-ink: #12283c;
  --nav-ink-soft: #61707d;
  --nav-rule: #ddd8cf;
  --nav-hover: #9c4a26;
  --nav-panel: #f7f5f1;
  --nav-cta-bg: #12283c;
  --nav-cta-ink: #ffffff;
  --nav-font: var(--display);
  --nav-size: 0.9375rem;
  --nav-weight: 600;
  --nav-track: 0.01em;
  --nav-case: none;

  --foot-bg: #12283c;
  --foot-ink: #9cabb8;
  --foot-head: #ffffff;
  --foot-rule: #24405a;
  --foot-link: #ffffff;
}