/* Growth Capital.
 *
 * 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 amount control.
 *
 * NAVY, BLUE AND ORANGE, on a pale blue ground. `--paper` is #f3f7fa rather
 * than white, which is why the accent here is #a4490b rather than the
 * brand's #f47920 or even its #b85b18: against a ground that is already
 * slightly dark, #b85b18 measures 4.20:1 and fails. The darkest orange the
 * brand owns clears it at 5.41:1. This is the sixth brand colour in eighteen
 * sites to need that check and the first where the GROUND was the reason.
 *
 * Gabarito runs to 900 and the headline takes it.
 */

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

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

:root {
  --ink: #0d3f66;
  --ink-soft: #1d6ea8;
  --text: #33485c;
  --muted: #5d7488;

  --accent: #a4490b;
  --accent-deep: #7d3707;
  --accent-wash: #fdf1e8;
  --accent-line: #f3cdae;

  --good: #1d6ea8;
  --good-wash: #e4eff7;
  --warn: #a4490b;

  --paper: #f3f7fa;
  --card: #ffffff;
  --tint: #e8eef4;
  --rule: #d9e3ec;
  --rule-firm: #b7c6d4;

  --ask-ink: #a5bdd2;
  --ask-accent: #f9a35c;

  --shadow: 13, 63, 102;

  --display: "Gabarito", "Segoe UI", system-ui, sans-serif;
  --body: "Hanken", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --display-weight: 900;
  --display-track: -0.032em;

  --shell: 1140px;
  --radius: 16px;
  --radius-sm: 12px;
}

/* ------------------------------------------------------------------ *
 * THE AMOUNT CONTROL -- the one band this site has and the skeleton does not.
 *
 * Drag to an amount and the six programme cards below sort themselves into
 * the ones that can write it and the ones that stop short. It is the only
 * thing on this network a visitor can OPERATE, and ADR-0010 called it "what
 * that site is" when it lived in the hero. It has moved one band down, so the
 * front door can be a front door, and it now drives the real programme cards
 * rather than a list of its own.
 *
 * It submits nothing and checks nothing. Without JavaScript the slider is
 * inert and every card shows, which is the correct failure.
 * ------------------------------------------------------------------ */
.dial {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 30px 32px 26px;
  box-shadow: 0 10px 30px rgba(var(--shadow), 0.05);
}

.dial__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.dial__label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: var(--eyebrow-track);
  text-transform: var(--eyebrow-case);
  color: var(--muted);
  margin: 0;
}

.dial__value {
  font-family: var(--display);
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}

.dial input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
  height: 26px;
}

.dial__ends {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 2px 0 14px;
}

.dial__hint {
  font-size: 0.93rem;
  color: var(--muted);
  margin: 0;
}

/* A card the amount has ruled out. Dimmed rather than hidden: the point is
   to see which six there are and which of them stop short. */
.card.is-out {
  opacity: 0.42;
}

.card.is-out .card__shot img {
  filter: grayscale(1);
}


/* ---- the shared chrome, painted in this brand's colours ---- */
:root {
  --nav-bg: #f3f7fa;
  --nav-ink: #0d3f66;
  --nav-ink-soft: #5d7488;
  --nav-rule: #d9e3ec;
  --nav-hover: #a4490b;
  --nav-panel: #f3f7fa;
  --nav-cta-bg: #0d3f66;
  --nav-cta-ink: #ffffff;
  --nav-font: var(--display);
  --nav-size: 0.9375rem;
  --nav-weight: 700;
  --nav-track: -0.01em;
  --nav-case: none;

  --foot-bg: #0d3f66;
  --foot-ink: #9dbad1;
  --foot-head: #ffffff;
  --foot-rule: #1d5a8c;
  --foot-link: #ffffff;
}