/* Anchorstone Funding.
 *
 * 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 ANCHOR POINTS, a ledger.
 *
 * ALEO OVER HEEBO: a soft slab for the heads, because a ledger wants a face
 * with feet on it, and a plain sans for reading. Indigo on a cool paper,
 * squarer than the skeleton's default corners. The indigo (#4338ca) is 7.7:1
 * on white and 7.2:1 on the tint, so it carries eyebrows and links as well
 * as fills; on the night-indigo ink of the application band the eyebrow is
 * a pale periwinkle instead.
 */

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

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

:root {
  --ink: #1b1838;
  --ink-soft: #2c2852;
  --text: #3d3a57;
  --muted: #625f7a;

  --accent: #4338ca;
  --accent-deep: #312e81;
  --accent-wash: #eef0fd;
  --accent-line: #c7cdf7;

  --good: #312e81;
  --good-wash: #eef0fd;
  --warn: #8b4a0c;

  --paper: #ffffff;
  --card: #ffffff;
  --tint: #f4f4f9;
  --rule: #e4e3ee;
  --rule-firm: #cfcde0;

  --ask-ink: #cfcdea;
  --ask-accent: #a5b4fc;

  --shadow: 27, 24, 56;

  --display: "Aleo", Georgia, serif;
  --body: "Heebo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --display-weight: 700;
  --display-track: -0.015em;

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

/* ------------------------------------------------------------------ *
 * THE ANCHOR POINTS -- the ledger, directly under the application.
 *
 * Four columns: the programme, what it fixes when you sign (its own specs,
 * read from common.mjs), what is still yours, and the question to settle
 * first. Ruled like a ledger, not carded: a heavy indigo rule at the top,
 * hairlines between rows, the fixed column set in a pale indigo field so
 * the eye can run down "what is locked in" for all six at once.
 * ------------------------------------------------------------------ */
.ledger {
  margin-top: 56px;
  border-top: 4px solid var(--accent-deep);
}

.ledger__head {
  display: grid;
  grid-template-columns: 1.05fr 1.25fr 1fr 1fr;
  gap: 0 32px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-firm);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.ledger__rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ledger__row {
  display: grid;
  grid-template-columns: 1.05fr 1.25fr 1fr 1fr;
  gap: 0 32px;
  align-items: start;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
}

.ledger__row[aria-current] {
  background: var(--accent-wash);
  box-shadow: -16px 0 0 var(--accent-wash), 16px 0 0 var(--accent-wash);
}

.ledger__name a {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
  margin-bottom: 6px;
}
.ledger__name a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.ledger__name span {
  color: var(--muted);
  font-size: 0.95rem;
}

/* The column labels repeat inside each row, but only where the header row
   is not there to name them: on a phone. */
.ledger__label {
  display: none;
  margin: 0 0 6px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.ledger__fixed {
  background: var(--accent-wash);
  border-left: 3px solid var(--accent);
  padding: 12px 16px;
}
.ledger__fixed dl,
.anchor-one__fixed dl {
  margin: 0;
}
.ledger__fixed dl > div,
.anchor-one__fixed dl > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px dotted var(--accent-line);
}
.ledger__fixed dl > div:last-child,
.anchor-one__fixed dl > div:last-child {
  border-bottom: 0;
}
.ledger__fixed dt,
.anchor-one__fixed dt {
  color: var(--text);
  font-size: 0.9rem;
}
.ledger__fixed dd,
.anchor-one__fixed dd {
  margin: 0;
  font-weight: 700;
  color: var(--ink);
  font-size: 0.92rem;
  text-align: right;
}

.ledger__yours p:last-child,
.ledger__ask p:last-child {
  margin: 0;
  color: var(--text);
  font-size: 0.97rem;
}

.ledger__ask p:last-child {
  font-family: var(--display);
  font-style: italic;
  color: var(--ink-soft);
}

.ledger__note {
  max-width: 64ch;
  margin: 32px auto 0;
  text-align: center;
  color: var(--muted);
}

/* A programme page's own row, opened out. */
.anchor-one {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 48px;
  margin-top: 28px;
  align-items: start;
}
.anchor-one__fixed {
  background: var(--card);
  border-top: 4px solid var(--accent-deep);
  padding: 20px 24px;
  box-shadow: 0 10px 30px rgba(var(--shadow), 0.06);
}
.anchor-one .ledger__label {
  display: block;
}
.anchor-one__ask {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink);
}

@media (max-width: 1000px) {
  .ledger__head {
    display: none;
  }
  .ledger__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px 28px;
  }
  .ledger__name {
    grid-column: 1 / -1;
  }
  .ledger__label {
    display: block;
  }
}

@media (max-width: 700px) {
  .ledger {
    margin-top: 36px;
  }
  .ledger__row {
    grid-template-columns: 1fr;
  }
  .ledger__row[aria-current] {
    box-shadow: -12px 0 0 var(--accent-wash), 12px 0 0 var(--accent-wash);
  }
  .anchor-one {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ---- the shared chrome, painted in this brand's colours ---- */
:root {
  --nav-bg: #ffffff;
  --nav-ink: #1b1838;
  --nav-ink-soft: #625f7a;
  --nav-rule: #e4e3ee;
  --nav-hover: #4338ca;
  --nav-panel: #ffffff;
  --nav-cta-bg: #4338ca;
  --nav-cta-ink: #ffffff;
  --nav-font: var(--body);
  --nav-size: 0.95rem;
  --nav-weight: 500;
  --nav-track: 0;
  --nav-case: none;

  --foot-bg: #1b1838;
  --foot-ink: #c4c2dc;
  --foot-head: #f6f6fd;
  --foot-rule: #34305c;
  --foot-link: #fafaff;
}

/* The front door and the application page open with the form; 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, smaller than a band's h2. */
.legal h2 {
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--ink);
  margin: 2em 0 0.5em;
}
.legal ul {
  padding-left: 1.2em;
}
.legal li {
  margin-bottom: 0.5em;
}