/* Eastgate Capital Group.
 *
 * 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 THREE GATES.
 *
 * GELASIO OVER AFACAD: a bookish serif with Georgia's proportions for the
 * heads, a compact humanist sans for the text. Plum on ivory, with a dawn
 * gold used only for the gates' keystones and rules. The plum (#8a3566) is
 * 7.5:1 on white and 7.0:1 on the ivory, so it carries every eyebrow and
 * link; buttons are the deeper #6a2550.
 */

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

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

:root {
  --ink: #2a1420;
  --ink-soft: #432534;
  --text: #4b3a43;
  --muted: #6f5f67;

  --accent: #8a3566;
  --accent-deep: #6a2550;
  --accent-wash: #f6e9f0;
  --accent-line: #e6c7d7;

  --good: #6a2550;
  --good-wash: #f6e9f0;
  --warn: #8c5a14;

  --paper: #ffffff;
  --card: #ffffff;
  --tint: #faf6f1;
  --rule: #ece3da;
  --rule-firm: #d9cbbd;

  --ask-ink: #dccbd4;
  --ask-accent: #e9a3c9;

  --shadow: 42, 20, 32;

  /* Dawn gold: the keystone of each gate. Marks only, never text. */
  --gold: #c08a3e;

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

  --display-weight: 600;
  --display-track: -0.01em;

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

/* Afacad is compact; a touch larger reads at the same size as its peers. */
body {
  font-size: 1.0625rem;
}

/* ------------------------------------------------------------------ *
 * THE THREE GATES -- the band this site has and the skeleton does not,
 * directly under the front door.
 *
 * Three arches side by side, each the thing a lender relies on: the arch's
 * head names it and what it is, the opening lists the programmes that go
 * through it with their two figures, and the threshold says what kind of
 * business it suits. Drawn with a border and a round top, a gold keystone at
 * the crown -- the brand's mark, at the size of a band.
 * ------------------------------------------------------------------ */
.gates {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}

.gates > li {
  display: flex;
}

.gate {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 2px solid var(--accent);
  border-radius: 999px 999px var(--radius) var(--radius);
  padding: 74px 28px 26px;
  text-align: center;
}

/* The keystone. */
.gate::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  width: 26px;
  height: 18px;
  transform: translateX(-50%);
  background: var(--gold);
  clip-path: polygon(0 0, 100% 0, 78% 100%, 22% 100%);
}

.gate__n {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.gate h3 {
  margin: 6px 0 4px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.75rem;
  color: var(--ink);
}

.gate__says {
  margin: 0 0 14px;
  font-style: italic;
  color: var(--muted);
}

.gate__body {
  margin: 0 0 20px;
  color: var(--text);
}

.gate__fits {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 10px;
  text-align: left;
}

.gate__fits li {
  border-top: 1px solid var(--rule);
  padding-top: 10px;
}

.gate__fits a {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--accent-deep);
  text-decoration: none;
}
.gate__fits a:hover {
  text-decoration: underline;
}
.gate__fits span {
  font-size: 0.92rem;
  color: var(--muted);
}

.gate__suits {
  margin: auto 0 0;
  padding: 12px 14px;
  background: var(--accent-wash);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.gates__note {
  margin: 30px auto 0;
  max-width: 60ch;
  text-align: center;
  color: var(--muted);
}

/* On a programme page: its gate, as a single arch in a row's words column. */
.row__say .gate {
  margin: 22px 0 6px;
  max-width: 420px;
}

@media (max-width: 1000px) {
  .gates {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---- the shared chrome, painted in this brand's colours ---- */
:root {
  --nav-bg: #ffffff;
  --nav-ink: #2a1420;
  --nav-ink-soft: #6f5f67;
  --nav-rule: #ece3da;
  --nav-hover: #8a3566;
  --nav-panel: #ffffff;
  --nav-cta-bg: #6a2550;
  --nav-cta-ink: #ffffff;
  --nav-font: var(--body);
  --nav-size: 1.02rem;
  --nav-weight: 600;
  --nav-track: 0;
  --nav-case: none;

  --foot-bg: #2a1420;
  --foot-ink: #cdbcc5;
  --foot-head: #fbf5f8;
  --foot-rule: #4a2a3d;
  --foot-link: #fdf8fb;
}

/* 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. */
.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;
}