/* Republic Business Loans.
 *
 * 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 anatomy of an offer.
 *
 * PIAZZOLLA OVER SORA. A sharp, bookish serif for the argument and a wide
 * geometric sans for the apparatus -- the pairing the old annotated sheet was
 * set in, kept because an annotation should not look like the passage.
 *
 * OXBLOOD, NOT THE LOGO'S BURGUNDY. #800020 is also Legacy's accent on this
 * network, so the accent here is the brand's own deeper shade, #6d0a1c, on a
 * paper with a little warmth in it. 11.9:1 on white.
 */

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

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

:root {
  --ink: #141414;
  --ink-soft: #0b0b0b;
  --text: #2a2a2c;
  --muted: #55565c;

  --accent: #6d0a1c;
  --accent-deep: #4e0714;
  --accent-wash: #f6ecee;
  --accent-line: #dcbcc2;

  --good: #6d0a1c;
  --good-wash: #f3e6e8;
  --warn: #6d0a1c;

  --paper: #fdfcfa;
  --card: #ffffff;
  --tint: #f4f1ec;
  --rule: #dcd7cf;
  --rule-firm: #b9b2a8;

  --ask-ink: #b9a9ac;
  --ask-accent: #e7b7c0;

  --shadow: 20, 20, 20;

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

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

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

/* ------------------------------------------------------------------ *
 * THE ANATOMY -- the one band this site has and the skeleton does not.
 *
 * Six things every offer states. Each is a term, what it is, and in the
 * margin beside it a verdict on whether it moves: with the lender, with your
 * file, often negotiable, set by the programme, fixed at zero. The old theme
 * was an annotated sheet with the notes in a right-hand margin; this keeps
 * the margin for the one thing that was always a marginal note.
 * ------------------------------------------------------------------ */
.anatomy {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: part;
  border-top: 2px solid var(--ink);
}

.anatomy > li {
  counter-increment: part;
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) 12rem;
  gap: 24px;
  align-items: baseline;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
}

.anatomy > li::before {
  content: counter(part, decimal-leading-zero);
  font-family: var(--body);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.anatomy h3 {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
}

.anatomy p {
  margin: 0;
  color: var(--text);
  line-height: 1.6;
}

.anatomy__moves {
  border-left: 1px solid var(--rule-firm);
  padding-left: 16px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

@media (max-width: 800px) {
  .anatomy > li {
    grid-template-columns: 2.4rem minmax(0, 1fr);
  }

  .anatomy__moves {
    grid-column: 2;
    border-left: 0;
    padding-left: 0;
  }
}

/* ---- the shared chrome, painted in this brand's colours ---- */
:root {
  --nav-bg: #fdfcfa;
  --nav-ink: #141414;
  --nav-ink-soft: #55565c;
  --nav-rule: #dcd7cf;
  --nav-hover: #6d0a1c;
  --nav-panel: #fdfcfa;
  --nav-cta-bg: #6d0a1c;
  --nav-cta-ink: #ffffff;
  --nav-font: var(--display);
  --nav-size: 1rem;
  --nav-weight: 600;
  --nav-track: 0;
  --nav-case: none;

  --foot-bg: #1c0f12;
  --foot-ink: #a7a0a2;
  --foot-head: #e6e4e4;
  --foot-rule: #3d2a2e;
  --foot-link: #f2f0f0;
}