/* Patriot 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 whole economy.
 *
 * OSWALD OVER PUBLIC SANS. Oswald is a condensed sign-writer's face, and it is
 * the only condensed display on the network; Public Sans is the US
 * government's own text face, which is as close as a typeface gets to the
 * brand's name.
 *
 * NAVY, RED AND GOLD. The red #b3161b is 6.9:1 on white and carries the
 * eyebrows and the accent. The gold is 2.4:1 on white, so it never appears on
 * paper: it is the accent on the navy application band, where it is 7.5:1.
 */

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

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

:root {
  --ink: #14224a;
  --ink-soft: #0b1430;
  --text: #2c3552;
  --muted: #5a6478;

  --accent: #b3161b;
  --accent-deep: #8c1115;
  --accent-wash: #fbeced;
  --accent-line: #efc4c6;

  --good: #14224a;
  --good-wash: #e6eaf4;
  --warn: #b3161b;

  --paper: #ffffff;
  --card: #ffffff;
  --tint: #f2f4f8;
  --rule: #d3d9e6;
  --rule-firm: #a9b3c8;

  --ask-ink: #a9b3cc;
  --ask-accent: #c9a227;

  --shadow: 20, 34, 74;

  --display: "Oswald", "Arial Narrow", sans-serif;
  --body: "PublicSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* A condensed face at 600 is already tight; it wants air, not less. */
  --display-weight: 600;
  --display-track: 0.005em;

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

/* ------------------------------------------------------------------ *
 * THE WHOLE ECONOMY -- the one band this site has and the skeleton does not.
 *
 * "Contractors, restaurants, haulage, salons, clinics, shops": the copy names
 * six trades, and this band shows them, one photograph each, captioned with
 * the trade and nothing else. It is the brand's argument -- small business is
 * the whole economy -- made as a row of the businesses rather than as a
 * sentence about them.
 * ------------------------------------------------------------------ */
.economy {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.economy figure {
  margin: 0;
}

.economy img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}

.economy figcaption {
  margin-top: 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  border-top: 3px solid var(--accent);
  padding-top: 8px;
}

@media (max-width: 900px) {
  .economy {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 12px;
  }
}

@media (max-width: 520px) {
  .economy {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- the shared chrome, painted in this brand's colours ---- */
:root {
  --nav-bg: #ffffff;
  --nav-ink: #0b1430;
  --nav-ink-soft: #5a6478;
  --nav-rule: #d3d9e6;
  --nav-hover: #b3161b;
  --nav-panel: #ffffff;
  --nav-cta-bg: #b3161b;
  --nav-cta-ink: #ffffff;
  --nav-font: var(--display);
  --nav-size: 1rem;
  --nav-weight: 500;
  --nav-track: 0.02em;
  --nav-case: uppercase;

  --foot-bg: #0b1430;
  --foot-ink: #a9b3cc;
  --foot-head: #ffffff;
  --foot-rule: #2a3a68;
  --foot-link: #ffffff;
}