/* The colour strip and the top bar. Linked by every page so there is one
   definition; the palette variables come from the page that links it. */
.strip { display: flex; height: 10px; flex: 0 0 auto; }
.strip i { flex: 1; }
.strip i:nth-child(1) { background: var(--purple); }
.strip i:nth-child(2) { background: var(--sky); }
.strip i:nth-child(3) { background: var(--yellow); }
.strip i:nth-child(4) { background: var(--mint); }
.strip i:nth-child(5) { background: var(--pink); }

.top {
  flex: 0 0 auto; display: flex; align-items: stretch; flex-wrap: wrap;
  border-bottom: 3px solid var(--black); background: var(--white);
  /* line the bar up with the 1120px content column instead of the window edge */
  padding-left: max(20px, calc((100% - 1120px) / 2));
  padding-right: max(20px, calc((100% - 1120px) / 2));
}
.top .brand {
  display: flex; align-items: center; padding: 10px 20px;
  border-right: 3px solid var(--black);
}
.top .brand img { display: block; width: 112px; height: auto; }
.top nav { display: flex; flex: 1 1 auto; flex-wrap: wrap; }
.top nav a { flex: 1 1 auto; justify-content: center; }
.top nav a {
  display: flex; align-items: center; justify-content: center; padding: 14px 20px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--black); text-decoration: none;
  border-right: 3px solid var(--black);
}
.top nav a:last-child { border-right: 0; }
.top nav a:hover { background: var(--paper); }
.top nav a[aria-current] {
  box-shadow: inset 0 -6px 0 var(--purple);
  font-weight: 700;
}
.top .meta {
  display: flex; align-items: center; margin-left: auto; padding: 0 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
@media (max-width: 620px) {
  .top .brand { flex: 1 1 100%; border-right: 0; border-bottom: 3px solid var(--black); }
  .top nav a { flex: 1 1 auto; justify-content: center; padding: 11px 8px; }
  .top .meta { flex: 1 1 100%; border-top: 3px solid var(--black); padding: 8px 16px; }
}