/*
 * /staff/, on top of system.css: the one address the people running an event
 * need to remember. Served as it lies, like the page it styles.
 */

.masthead {
  padding-block: var(--s5) var(--s4);
}

/* ---------- /staff/ ---------- */

/* Every page the people running the event use, one tap each. The tower and
   the starter's phone have no links out, on purpose — a stray click there
   mid-race costs a recording or a start — so this is where they are found. */
.staff-page {
  padding-block: var(--s5) var(--s6);
}

.staff-page__lead {
  margin: 0 0 var(--s3);
  color: var(--n6);
}

.staff__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s3);
}

.staff__link {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  min-height: 3.5rem;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--n4);
  border-radius: var(--r);
  background: var(--n0);
  color: var(--n7);
  text-decoration: none;
}

.staff__link:hover {
  border-color: var(--navy);
  box-shadow: inset 3px 0 0 var(--navy);
}

.staff__name {
  color: var(--navy);
  font-size: var(--t-lead);
  font-weight: 700;
}

/* An arrow, so it reads as somewhere to go rather than a label. */
.staff__name::after {
  content: ' →';
}

.staff__what {
  color: var(--n6);
  font-size: var(--t-small);
  line-height: var(--lh-row);
}

.staff-page__back {
  margin: var(--s5) 0 0;
}