/* Paragon Business Funds.
 *
 * 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 PARAGON STANDARD, five tests set as a ruled
 * document.
 *
 * GLOOCK OVER GEIST. A high-contrast display serif, used at one weight, for
 * the voice of a printed standard; a plain modern sans for everything that
 * has to be read quickly. Ivory paper, near-black ink, and one cool accent:
 * a deep cerulean (#0b5d7a, 6.9:1 on the paper, 6.3:1 on the stone tint) for
 * the eyebrows, links and the tests' passing marks. Failing marks use the
 * skeleton's warm --warn, which is the only other colour type is set in.
 */

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

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

:root {
  --ink: #12161c;
  --ink-soft: #232a33;
  --text: #39414c;
  --muted: #5b6470;

  --accent: #0b5d7a;
  --accent-deep: #083f54;
  --accent-wash: #e5eff3;
  --accent-line: #b6d2dd;

  --good: #0b5d7a;
  --good-wash: #e5eff3;
  --warn: #8c3b14;

  --paper: #fbfaf7;
  --card: #ffffff;
  --tint: #f2efe7;
  --rule: #e3ddd0;
  --rule-firm: #cbc2ae;

  --ask-ink: #c3cdd4;
  --ask-accent: #8fd0e6;

  --shadow: 18, 22, 28;

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

  /* Gloock has one weight, and a serif this contrasty wants air, not tracking. */
  --display-weight: 400;
  --display-track: -0.005em;

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

body {
  background: var(--paper);
}

/* ------------------------------------------------------------------ *
 * THE PARAGON STANDARD -- directly under the application on the front
 * page, and the reason the site exists.
 *
 * Five tests as a ruled document: a large numeral, the test and the question
 * it asks, then what passing and failing look like side by side. Hairline
 * rules, no cards and no photographs, because a standard should read like
 * something you could print and take into a meeting.
 * ------------------------------------------------------------------ */
.standard {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  counter-reset: test;
  border-top: 2px solid var(--ink);
}

.standard__test {
  counter-increment: test;
  display: grid;
  grid-template-columns: 88px minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  padding: 34px 0;
  border-bottom: 1px solid var(--rule-firm);
  align-items: start;
}

.standard__test::before {
  content: counter(test, upper-roman);
  font-family: var(--display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--accent);
}

.standard__test h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 10px;
}

.standard__ask {
  margin: 0;
  color: var(--text);
  font-style: italic;
}

.standard__verdict {
  margin: 0;
  padding: 0 0 0 30px;
  position: relative;
  color: var(--text);
}

.standard__verdict b {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.standard__verdict::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.1;
}

.standard__verdict--pass b,
.standard__verdict--pass::before {
  color: var(--accent);
}
.standard__verdict--pass::before {
  content: "\2713";
}

.standard__verdict--fail b,
.standard__verdict--fail::before {
  color: var(--warn);
}
.standard__verdict--fail::before {
  content: "\2715";
}

.standard__note {
  max-width: 64ch;
  margin: 32px 0 0;
  color: var(--muted);
}

/* On a programme page: the one test that matters most for that programme,
   as a single boxed clause of the standard. */
.applied {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 8px 32px;
  border: 1px solid var(--rule-firm);
  border-top: 4px solid var(--accent);
  background: var(--card);
  padding: 36px 40px;
  border-radius: var(--radius);
}

/* The numeral holds the left column for the whole clause; everything else
   reads down the right. */
.applied > * {
  grid-column: 2;
}

.applied__n {
  grid-column: 1;
  grid-row: 1 / span 6;
  font-family: var(--display);
  font-size: 3.4rem;
  line-height: 1;
  color: var(--accent);
}

.applied h2 {
  margin: 0;
}

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

.applied .standard__ask {
  color: var(--muted);
}

@media (max-width: 1000px) {
  .standard__test {
    grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px 28px;
  }
  .standard__test::before {
    grid-row: span 2;
  }
  .standard__say {
    grid-column: 2 / -1;
  }
}

@media (max-width: 700px) {
  .standard {
    margin-top: 36px;
  }
  .standard__test {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px 16px;
    padding: 28px 0;
  }
  .standard__test::before {
    grid-row: span 3;
    font-size: 1.9rem;
  }
  .standard__say,
  .standard__verdict {
    grid-column: 2;
  }
  .applied {
    grid-template-columns: 1fr;
    padding: 28px 22px;
  }
  .applied > *,
  .applied__n {
    grid-column: 1;
    grid-row: auto;
  }
  .applied__n {
    font-size: 2.6rem;
  }
}

/* ---- the shared chrome, painted in this brand's colours ---- */
:root {
  --nav-bg: #fbfaf7;
  --nav-ink: #12161c;
  --nav-ink-soft: #5b6470;
  --nav-rule: #e3ddd0;
  --nav-hover: #0b5d7a;
  --nav-panel: #fbfaf7;
  --nav-cta-bg: #12161c;
  --nav-cta-ink: #ffffff;
  --nav-font: var(--body);
  --nav-size: 0.9375rem;
  --nav-weight: 500;
  --nav-track: 0;
  --nav-case: none;

  --foot-bg: #12161c;
  --foot-ink: #b9c2ca;
  --foot-head: #f4f1ea;
  --foot-rule: #2b333d;
  --foot-link: #f4f6f8;
}

/* The front door and the application page open with the form; on a phone
   the head's full top padding would leave an empty band above the first
   question, so it 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, set smaller than a
   band's h2 so a long document reads as one document. */
.legal h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--ink);
  margin: 2em 0 0.5em;
}
.legal ul {
  padding-left: 1.2em;
}
.legal li {
  margin-bottom: 0.5em;
}