/* Shared by every page of the site: the typeface (Fira Code) and the menu. */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: #fff; }
body {
  background: #fff;
  color: #000;
  font-family: "Fira Code", ui-monospace, Menlo, monospace;   /* (loaded by each page, from Google Fonts) */
}

a { color: inherit; text-decoration: none; text-underline-offset: 3px; }
a:hover, a:focus-visible { text-decoration: underline; }

/* the menu: Bio, Projects, Publications, Archive */
.menu ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 24px;
  font-size: 15px;
}
/* on a section's own page, its name in the menu stays underlined */
.menu a[aria-current="page"] { text-decoration: underline; }

/* a section page: the name (back to the homepage), the menu, then the page */
.page {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(16px, 4vmin, 48px);
  font-size: 15px;
  line-height: 1.5;
}
.page > header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(32px, 8vmin, 72px);
}
.page h1 { font-size: 15px; font-weight: normal; }
.page h2 { font-size: 15px; font-weight: normal; margin-bottom: 16px; color: #888; }
.page main ul { list-style: none; }

/* the languages, top right (added by i18n.js); the one in use underlined */
.langs {
  position: absolute;
  top: clamp(12px, 3vmin, 28px);
  right: clamp(16px, 4vmin, 48px);
  z-index: 2000;
  display: flex;
  gap: 14px;
  font-size: 13px;
}
.langs a.current { text-decoration: underline; }
/* narrow screens: on a line of their own, above the name, so they don't cover it */
@media (max-width: 760px) { .langs { position: static; justify-content: flex-end; margin-bottom: 12px; } }

/* "under construction": a little space above it, under a list */
ul + .note { margin-top: 2em; }

/* A work's image, shown by the cursor while it's over the work's link (see
   preview.js). Give the link data-preview (the image), and data-credit (its
   caption) or data-upright (for an upright image) if needed. */
.preview {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  width: min(360px, 40vw);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.preview.shown { opacity: 1; }
/* an upright image: the same size as a wide one, turned on its side */
.preview.upright { width: min(270px, 30vw); }
.preview img { display: block; width: 100%; height: auto; }
.preview figcaption { margin-top: 4px; font-size: 11px; color: #888; }
/* phones and tablets have no hover, so no preview */
@media (hover: none) { .preview { display: none; } }