/* The portal's own layer over the essays' stylesheet.

   The essays live in their own repository and bring src/css/essay.css with them: the file the
   author proofreads and prints against. What the portal adds is the bar above the sheet, and it
   adds it here rather than there so that the repository never has to carry markup it does not
   have — a printed essay or a PDF export should be the text, not a sign-in link.

   Loaded after essay.css on every page under /essays/. */

/* Site header above the sheet.
   The essays are what an anonymous visitor sees first, so this bar is the only way in to an
   account from here. It sits outside .page, and print hides it: a printed essay or a PDF export
   should carry the text, not a sign-in link. */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  max-width: 210mm;
  margin: 20px auto 0;
  padding: 0 25mm;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.site-nav a {
  color: #888888;
  text-decoration: none;
}

.site-nav a:hover {
  color: #c5a059;
}

.site-nav-links {
  display: flex;
  gap: 20px;
}

/* The one action worth emphasising, since access has to be asked for. */
.site-nav-links .site-nav-cta {
  color: #1a2a3a;
  border-bottom: 1px solid #c5a059;
}

@media (max-width: 820px) {
  .site-nav {
    padding: 0 16px;
  }
}

@media print {
  .site-nav {
    display: none;
  }
}