/* Northpoint Business Capital.
 *
 * On the ADR-0011 skeleton -- `tools/sitegen/page.css` is the layout. What is
 * here is the palette, the two typefaces, and the one band this site has
 * that the skeleton does not: THE FIVE BEARINGS.
 *
 * BIG SHOULDERS DISPLAY OVER KUMBH SANS: a tall condensed face for the heads,
 * the lettering of signage and survey plates, over a round geometric text
 * face. Compass amber on chart navy. The amber (#b05800) is 4.95:1 on white
 * and 4.6:1 on the cool tint, so it carries eyebrows and links; buttons are
 * the navy, which is the ink. On the navy the amber is lifted to #f59e3b.
 */

@font-face {
  font-family: "Big Shoulders Display";
  src: url("display.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

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

:root {
  --ink: #14213d;
  --ink-soft: #22335a;
  --text: #36425a;
  --muted: #5c6578;

  --accent: #b05800;
  --accent-deep: #14213d;
  --accent-wash: #fdf1e3;
  --accent-line: #f0cfa6;

  --good: #14213d;
  --good-wash: #e9eef6;
  --warn: #b05800;

  --paper: #ffffff;
  --card: #ffffff;
  --tint: #f6f7fa;
  --rule: #e1e5ec;
  --rule-firm: #c9d0dc;

  --ask-ink: #c2cbdc;
  --ask-accent: #f59e3b;

  --shadow: 20, 33, 61;

  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body: "Kumbh Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --display-weight: 800;
  --display-track: 0.005em;

  --radius: 6px;
  --radius-sm: 4px;
}

/* A condensed face needs more size to carry the same weight on the page. */
.h1 {
  font-size: clamp(2.9rem, 5.6vw, 4.6rem);
  line-height: 0.98;
  text-transform: uppercase;
}
.h2 {
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  line-height: 1.02;
}

/* ------------------------------------------------------------------ *
 * THE FIVE BEARINGS -- the band this site has and the skeleton does not,
 * directly under the front door, on the navy.
 *
 * Five instruments in a row, each read the same way from the top: its
 * compass bearing (the circle divided by five), a photograph of what the
 * lender is looking at, the reading's name, what it reads and why it
 * matters, and then the two programmes that weigh it most and least. Five
 * across on a wide screen, two and then one as it narrows.
 * ------------------------------------------------------------------ */
#bearings {
  background: var(--ink);
  color: #dde3ee;
}
#bearings .h2 {
  color: #ffffff;
}
#bearings .lede {
  color: var(--ask-ink);
}
#bearings .eyebrow {
  color: var(--ask-accent);
}
#bearings .eyebrow::before {
  background: var(--ask-accent);
}

.bearings {
  list-style: none;
  margin: 52px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.bearing {
  display: flex;
  flex-direction: column;
  background: #1b2b4d;
  border: 1px solid #2c3f66;
  border-radius: var(--radius);
  overflow: hidden;
}

.bearing img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.bearing__body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.bearing__deg {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--ask-accent);
}

.bearing h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
  text-transform: uppercase;
  color: #ffffff;
}

.bearing__reads {
  margin: 0;
  font-weight: 600;
  color: #ffffff;
  font-size: 0.95rem;
}

.bearing__why {
  margin: 0;
  font-size: 0.92rem;
  color: #c2cbdc;
}

.bearing__lean {
  margin: auto 0 0;
  padding: 12px 0 0;
  border-top: 1px solid #2c3f66;
  display: grid;
  gap: 10px;
  font-size: 0.86rem;
}
.bearing__lean dt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9fb0cc;
}
.bearing__lean dd {
  margin: 2px 0 0;
  color: #dde3ee;
}
.bearing__lean a {
  color: var(--ask-accent);
  font-weight: 700;
  text-decoration: none;
}
.bearing__lean a:hover {
  text-decoration: underline;
}

.bearings__note {
  margin: 30px auto 0;
  max-width: 64ch;
  text-align: center;
  color: var(--ask-ink);
}

/* On a programme page: the bearing it weighs most, as a row's words. */
.row__say .bearing__deg {
  color: var(--accent);
}

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

/* ---- the shared chrome, painted in this brand's colours ---- */
:root {
  --nav-bg: #ffffff;
  --nav-ink: #14213d;
  --nav-ink-soft: #5c6578;
  --nav-rule: #e1e5ec;
  --nav-hover: #b05800;
  --nav-panel: #ffffff;
  --nav-cta-bg: #14213d;
  --nav-cta-ink: #ffffff;
  --nav-font: var(--body);
  --nav-size: 0.95rem;
  --nav-weight: 700;
  --nav-track: 0;
  --nav-case: none;

  --foot-bg: #14213d;
  --foot-ink: #b8c2d4;
  --foot-head: #ffffff;
  --foot-rule: #2c3f66;
  --foot-link: #f6f8fc;
}

/* The apply page opens with the form, and on a phone the form comes first,
   so the head's top padding is taken in. */
@media (max-width: 760px) {
  .head--form {
    padding-top: 18px;
  }
  .head--form .frame {
    padding: 6px;
  }
}

/* The legal pages: numbered heads inside the prose, in the text face because
   a condensed capital is hard going over a long document. */
.legal h2 {
  font-family: var(--body);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  margin: 2em 0 0.5em;
}
.legal ul {
  padding-left: 1.2em;
}
.legal li {
  margin-bottom: 0.5em;
}