/*
  The whole site's styling. Every page links this file, so a palette or layout
  change happens once here instead of being copied into each page — which is how
  404.html drifted onto raw hexes while the other pages used the variables.

  Selectors are mostly element selectors on purpose: the pages are semantic
  HTML, so they need no classes to style them.
*/

:root {
  --simple-purple: #6d2598;
  --ivory-porcelain: #ede4d1;
  --muted-fawn: #dbac8f;
  --byzantine: #bf34a4;
  --traditional-purple: #aa1c7d;
}

body {
  background: var(--ivory-porcelain);
  color: var(--simple-purple);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.6;
  margin: 0 auto;
  /* ~72 characters a line at 18px Georgia. 40rem measured 85, past the 45-75
     range where the eye reliably finds the start of the next line in long-form
     prose. */
  max-width: 34rem;
  padding: 3rem 1.25rem 5rem;
}

h1 {
  font-size: 2rem;
  margin: 0 0 0.5rem;
}

h2 {
  color: var(--traditional-purple);
  font-size: 1.25rem;
  margin: 2rem 0 1rem;
}

/* A section that opens the article sets its own spacing from the rule above it. */
article > h2:first-child {
  margin-top: 0;
}

a {
  /* Byzantine on ivory measures 3.92:1 — under the 4.5:1 WCAG AA floor for text
     this size. Traditional Purple is 5.24:1; the underline keeps links distinct
     from the body text now sharing their colour. */
  color: var(--traditional-purple);
}

hr {
  border: 0;
  border-top: 2px solid var(--muted-fawn);
  margin: 2.5rem 0;
}

nav {
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

time {
  color: var(--traditional-purple);
  font-size: 0.9rem;
}

blockquote {
  border-left: 2px solid var(--muted-fawn);
  margin: 0;
  padding-left: 1rem;
}

footer {
  color: var(--traditional-purple);
  font-size: 0.9rem;
}

/* The review disclosure, sitting under the Apply button and quieter than the
   form it follows. The colour is set here rather than inherited, so the rule
   does not depend on which part of the page the sentence lives in.

   It stops at Traditional Purple's 5.24:1 rather than going lighter still:
   Byzantine is 3.92:1 and Muted Fawn 1.61:1 on this background, and WCAG AA
   asks 4.5:1 of small text exactly as it does of body text. Lighter here would
   mean a disclosure that only some readers can read. */
.disclosure {
  color: var(--traditional-purple);
  font-size: 0.8rem;
  margin-top: 1rem;
}

/* Blog index */

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

ul.posts li {
  margin-bottom: 2rem;
}

ul.posts h2 {
  margin: 0 0 0.25rem;
}

/* Post titles are large bold text, where Byzantine's 3.92:1 clears the 3:1 AA
   floor — so the accent keeps a visible job on the page. */
ul.posts h2 a {
  color: var(--byzantine);
}

/* Application form */

/* Keep each label above its control so the long questions remain readable. */
form p {
  margin: 0 0 1.25rem;
}
form label {
  display: block;
  margin-bottom: 0.35rem;
}

form input,
form textarea,
form button {
  box-sizing: border-box;
  font-family: inherit;
  font-size: 1rem;
}
form input,
form textarea {
  background: var(--ivory-porcelain);
  border: 2px solid var(--muted-fawn);
  color: var(--simple-purple);
  display: block;
  max-width: 34rem;
  padding: 0.65rem 0.75rem;
  width: 100%;
}
form textarea {
  resize: vertical;
}

/* The button sizes to its label rather than the column: a full-width block of
   Simple Purple would be the loudest thing on an otherwise all-text site. */
form button {
  background: var(--simple-purple);
  border: 2px solid var(--simple-purple);
  color: var(--ivory-porcelain);
  cursor: pointer;
  padding: 0.65rem 1.5rem;
}
form input:focus-visible,
form textarea:focus-visible,
form button:focus-visible {
  outline: 3px solid var(--simple-purple);
  outline-offset: 2px;
}
/* The honeypot field in apply.html. Hidden from people, filled by bots, which
   is the whole point — do not delete this rule to "fix" the invisible input. */
.hp {
  display: none;
}