/* Legacy 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 clauses.
 *
 * SOURCE SERIF 4 OVER RETHINK SANS, burgundy off the logo on a paper with a
 * little warmth in it. This is the one site on the network written like a
 * private bank rather than a lead magnet, and the old theme set every section
 * as a prospectus sets a clause: a heading across the measure and the
 * argument indented beneath it. The indent survives in exactly one place, the
 * three commitments, which are the part of this copy that reads as clauses.
 *
 * Burgundy is #800020, 10.9:1 on white, so it can carry the eyebrow, the tick
 * and the rate without a second, darker ink.
 */

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

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

:root {
  --ink: #16120f;
  --ink-soft: #0e0b09;
  --text: #3f3a34;
  --muted: #655e55;

  --accent: #800020;
  --accent-deep: #5c0017;
  --accent-wash: #f7ecee;
  --accent-line: #e2bcc4;

  --good: #800020;
  --good-wash: #f5e6e9;
  --warn: #800020;

  --paper: #fcfbf9;
  --card: #ffffff;
  --tint: #f4f1ec;
  --rule: #e9e4db;
  --rule-firm: #ddd7cd;

  --ask-ink: #bdaeb0;
  --ask-accent: #e7a9b6;

  --shadow: 38, 18, 20;

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

  --display-weight: 600;
  --display-track: -0.01em;

  --shell: 1120px;
  --radius: 2px;
  --radius-sm: 2px;
}

/* ------------------------------------------------------------------ *
 * THE CLAUSES -- the one band this site has and the skeleton does not.
 *
 * Three commitments, numbered as a prospectus numbers its clauses: the
 * numeral and the word across the measure in the display serif, the argument
 * indented beneath it. It is what the whole of the old site looked like, kept
 * for the one part of the copy that is written as undertakings.
 * ------------------------------------------------------------------ */
.clauses {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: clause;
}

.clauses > li {
  counter-increment: clause;
  border-top: 1px solid var(--rule-firm);
  padding: 30px 0 34px;
}

.clauses > li:last-child {
  border-bottom: 1px solid var(--rule-firm);
}

.clauses h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 14px;
}

.clauses h3::before {
  content: counter(clause, upper-roman) ".";
  display: inline-block;
  min-width: 2.4em;
  color: var(--accent);
}

.clauses p {
  margin: 0 0 0 calc(2.4em * 1.9 + 4px);
  max-width: 38rem;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text);
}

@media (max-width: 700px) {
  .clauses h3::before {
    display: block;
    min-width: 0;
    font-size: 0.6em;
    margin-bottom: 4px;
  }

  .clauses p {
    margin-left: 0;
  }
}

/* ---- the shared chrome, painted in this brand's colours ---- */
:root {
  --nav-bg: #fcfbf9;
  --nav-ink: #16120f;
  --nav-ink-soft: #655e55;
  --nav-rule: #e9e4db;
  --nav-hover: #800020;
  --nav-panel: #fcfbf9;
  --nav-cta-bg: #800020;
  --nav-cta-ink: #ffffff;
  --nav-font: var(--display);
  --nav-size: 1rem;
  --nav-weight: 600;
  --nav-track: 0.06em;
  --nav-case: uppercase;

  --foot-bg: #250f11;
  --foot-ink: #a89fa0;
  --foot-head: #d6d2d2;
  --foot-rule: #503f41;
  --foot-link: #e6e4e4;
}