/* Prime 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 notes.
 *
 * NEWSREADER OVER ARCHIVO, on bone paper. The old theme was one column of
 * serif text with every clause numbered in the margin, because this brand
 * sells a second opinion and a second opinion is read, not skimmed. The
 * numbering survives in the notes; the serif survives in every heading.
 *
 * Jade is the accent. The gold off the old title page is 4.6:1 on the bone,
 * which is enough for a figure and not enough for an eyebrow over every
 * band, so it prints the price on each card and nothing else.
 */

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

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

:root {
  --ink: #15171a;
  --ink-soft: #0e0f11;
  --text: #2c2f32;
  --muted: #5c5f63;

  --accent: #14614a;
  --accent-deep: #0e4636;
  --accent-wash: #e6f0ec;
  --accent-line: #b9d4ca;

  --good: #14614a;
  --good-wash: #e1ede8;
  --warn: #6d561c;

  --paper: #f5f2ea;
  --card: #fbfaf6;
  --tint: #ebe5d7;
  --rule: #d8d1c1;
  --rule-firm: #bdb4a0;

  --ask-ink: #b2ada1;
  --ask-accent: #d2ba7e;

  --shadow: 21, 23, 26;

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

  /* A text serif at 600 reads as a book, not a banner. */
  --display-weight: 600;
  --display-track: -0.012em;

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

/* ------------------------------------------------------------------ *
 * THE NOTES -- the one band this site has and the skeleton does not.
 *
 * "How to read an offer": four things worth checking on anything you are
 * sent, numbered in the margin the way a set of terms numbers its clauses.
 * It is the argument this brand actually makes, so it is set as the one
 * place on the site that looks like a document rather than a page.
 * ------------------------------------------------------------------ */
.notes {
  list-style: none;
  counter-reset: note;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
}

.notes > li {
  counter-increment: note;
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 0 16px;
  padding: 26px 0;
  border-top: 1px solid var(--rule-firm);
}

.notes > li::before {
  content: counter(note, decimal-leading-zero);
  font-family: var(--display);
  font-size: 2rem;
  line-height: 1;
  color: var(--accent);
  grid-row: span 2;
}

.notes h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 8px;
}

.notes p {
  margin: 0;
  color: var(--text);
}

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

/* ---- the shared chrome, painted in this brand's colours ---- */
:root {
  --nav-bg: #f5f2ea;
  --nav-ink: #15171a;
  --nav-ink-soft: #5c5f63;
  --nav-rule: #d8d1c1;
  --nav-hover: #14614a;
  --nav-panel: #fbfaf6;
  --nav-cta-bg: #14614a;
  --nav-cta-ink: #ffffff;
  --nav-font: var(--display);
  --nav-size: 1.0625rem;
  --nav-weight: 600;
  --nav-track: 0;
  --nav-case: none;

  --foot-bg: #1e1c17;
  --foot-ink: #a8a7a4;
  --foot-head: #e1e1e0;
  --foot-rule: #3f3d36;
  --foot-link: #f2f2f2;
}