/* The Restored Leader assessment: the one place the brand lives. This is TRL's OWN
   brand, taken from restoredleader.com and the RL hexagon mark, not Arthur & Archie's:
   the blue #447DB5 of the mark, the deep navy #142C42, the mark's grey #A9A8AA, a near
   white page, square corners, Lato for headings over a Caslon for body.

   Adobe Caslon Pro is the site's body face and is not web-free, so Libre Caslon Text
   stands in for it and Georgia stands in behind that.

   TWO CONSUMERS, ONE FILE. The interview links it (`/brand.css`); the report cannot,
   because a report has to stand on its own in a tab, a saved file and a PDF, so lib.js
   inlines this file at the marker template.html keeps for it. Do not write that
   marker's name here: this whole file lands inside the page.

   Colour is semantic, and TRL's palette has no second hue to spend, so the grid reads
   by VALUE rather than by hue:
     NAVY  — named and shown. Rooted. The settled one.
     BLUE  — shown and never claimed. The unclaimed strength, and the growth edge.
     grey  — claimed with nothing behind it yet, or never reached at all.
   The Johari figure is drawn on the navy, where the unclaimed strength can be the
   brightest thing on the page, which is the point of it. */
:root {
  /* surfaces */
  --trl-paper: #FFFFFF;
  --trl-surface: #F7F7F7;        /* the site's own page colour */
  --trl-stone: #E7EAEE;

  /* ink */
  --trl-ink: #262525;            /* the mark's near-black */
  --trl-ink-deep: #142C42;       /* the site's deep navy */
  --trl-muted: #5C656E;          /* 11px captions clear 4.5:1 on surface */
  --trl-rule: #D5D9DE;

  /* accents */
  --trl-blue: #447DB5;           /* the RL mark's blue */
  --trl-blue-dark: #2E456D;      /* the site's link and accent */
  --trl-blue-ink: #2E5F93;       /* the same role as text: #447DB5 is 3.3:1 on white */
  --trl-blue-pale: #E8EEF4;
  --trl-grey: #A9A8AA;           /* the mark's grey */

  /* the dark ground the Johari figure sits on, and the type that goes over it */
  /* A darker navy than the site's, on purpose. The quadrant tints are alpha over this
     ground, so the ground sets how much room they have: at #142C42 the bright pane came
     up close enough to the gridlines that the grid disappeared inside it. */
  --trl-dark: #0C1C2B;
  --trl-dark-2: #16314A;         /* a panel raised off the ground */
  --trl-on-dark: #EAF1F7;
  --trl-on-dark-muted: #9DB2C6;
  --trl-on-dark-rule: rgba(234,241,247,.32);     /* the frame and the quadrant dividers */
  --trl-on-dark-grid: rgba(234,241,247,.42);     /* the whole-step gridlines, which have
                                                    to read inside the brightest pane too */

  /* type: Lato for headings, a Caslon for body, as the site */
  --trl-display: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --trl-body: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --trl-ui: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* geometry: the site's buttons are square */
  --trl-radius: 0px;
  --trl-radius-lg: 0px;
  --trl-page-x: 0.70in;
  --trl-page-top: 0.62in;
  --trl-page-bottom: 0.72in;
}

.trl-wordmark {
  font-family: var(--trl-ui);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--trl-ink-deep);
}
.trl-doclabel {
  font-family: var(--trl-ui);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--trl-muted);
}
.trl-eyebrow {
  font-family: var(--trl-ui);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--trl-blue-ink);
}

/* Page numbers exist only on paper; print.css turns them on. */
.trl-pagenum { display: none; }