/* USA Business Lending Co.
 *
 * 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 schedule of enclosures.
 *
 * INCONSOLATA OVER LIBRE BASKERVILLE -- a typed heading over a book face,
 * which is what a letter from a desk looks like. The old site was set as
 * correspondence throughout; what survives of that is the pair of faces, the
 * signed letters inside the bands, and the numbering the letters cite.
 *
 * BLUE AND RED, off the logo. The logo's red #ed1c24 is 4.0:1 on white, so it
 * is never type: the accent is the blue, and `--warn` is the deeper red
 * #b3121b (6.7:1), which prints the cost of each programme and nothing else.
 */

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

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

:root {
  --ink: #14181f;
  --ink-soft: #0c0f14;
  --text: #3a404b;
  --muted: #5a6270;

  --accent: #21409a;
  --accent-deep: #002089;
  --accent-wash: #eef1fa;
  --accent-line: #c5cfee;

  --good: #21409a;
  --good-wash: #e8ecf8;
  --warn: #b3121b;

  --paper: #ffffff;
  --card: #ffffff;
  --tint: #f4f2ed;
  --rule: #ddd8cd;
  --rule-firm: #b4ada0;

  --ask-ink: #aab3c9;
  --ask-accent: #ff7b80;

  --shadow: 20, 24, 31;

  --display: "Inconsolata", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --body: "LibreBaskerville", Georgia, "Times New Roman", serif;

  /* A typewriter face at 700 is already wide; it wants no tracking at all. */
  --display-weight: 700;
  --display-track: -0.01em;

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

/* ------------------------------------------------------------------ *
 * THE SCHEDULE OF ENCLOSURES -- the one band this site has and the skeleton
 * does not.
 *
 * Every page, numbered once, 1 to 12. The letters on this site cite those
 * numbers -- "enclosures 3 to 8 are the six programmes", "see enclosure 8" --
 * and every page's head carries its own, so a reference made in one letter
 * resolves on every other. Set in the typed face, like a list at the foot of
 * a letter.
 * ------------------------------------------------------------------ */
.enclosures {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
  border-top: 2px solid var(--ink);
}

.enclosures li {
  border-bottom: 1px solid var(--rule);
}

.enclosures a {
  display: grid;
  grid-template-columns: 3.2em minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 14px 0;
  color: var(--ink);
  text-decoration: none;
}

.enclosures a:hover .enclosures__t {
  color: var(--accent);
  text-decoration: underline;
}

.enclosures__n {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--warn);
}

.enclosures__t {
  font-size: 1rem;
}

.enclosures [aria-current] .enclosures__t {
  font-weight: 700;
}

.enclosures [aria-current] .enclosures__n::after {
  content: " \2190";
}

/* The sign-off under a letter. */
.sign {
  font-family: var(--display);
  font-size: 1rem;
  color: var(--ink);
  margin: 26px 0 0;
}

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

/* ---- the shared chrome, painted in this brand's colours ---- */
:root {
  --nav-bg: #ffffff;
  --nav-ink: #14181f;
  --nav-ink-soft: #5a6270;
  --nav-rule: #ddd8cd;
  /* The logo is a round emblem with its name set small inside it, so it
   * needs more height than a wordmark to be read; the bar grows to hold it. */
  --nav-h: 92px;
  --nav-hover: #21409a;
  --nav-panel: #ffffff;
  --nav-cta-bg: #b3121b;
  --nav-cta-ink: #ffffff;
  --nav-font: var(--display);
  --nav-size: 1rem;
  --nav-weight: 600;
  --nav-track: 0;
  --nav-case: none;

  --foot-bg: #14181f;
  --foot-ink: #a3a9b4;
  --foot-head: #ffffff;
  --foot-rule: #2c323d;
  --foot-link: #ffffff;
}