:root {
  --page-bg: #ffffff;
  --focus: rgba(255, 255, 255, 0.72);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--page-bg);
}

body {
  overflow-y: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.site {
  width: 100%;
}

.screen {
  position: relative;
  width: 100%;
  line-height: 0;
  overflow: hidden;
}

.screen img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.hit {
  position: absolute;
  display: block;
  z-index: 2;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  text-decoration: none;
  color: transparent;
  background: transparent;
}

.hit:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Hero screenshot dimensions: 2048 × 1159. All positions use percentages so the layout scales cleanly. */
.screen-hero .logo { left: 10.1%; top: 2.4%; width: 10.7%; height: 4.9%; }
.screen-hero .current-work { left: 26.0%; top: 3.0%; width: 8.9%; height: 2.5%; }
.screen-hero .news { left: 36.5%; top: 3.0%; width: 7.8%; height: 2.5%; }
.screen-hero .books { left: 46.0%; top: 3.0%; width: 4.1%; height: 2.5%; }
.screen-hero .articles { left: 51.6%; top: 3.0%; width: 5.7%; height: 2.5%; }
.screen-hero .self-society { left: 59.3%; top: 3.0%; width: 14.4%; height: 2.5%; }
.screen-hero .teaching { left: 75.1%; top: 3.0%; width: 6.2%; height: 2.5%; }
.screen-hero .cv-bio { left: 83.7%; top: 3.0%; width: 5.5%; height: 2.5%; }

/* Bio/footer screenshot dimensions: 2047 × 905. */
.screen-bio .download-cv { left: 45.8%; top: 56.7%; width: 8.6%; height: 4.1%; }
.screen-bio .yale { left: 38.3%; top: 63.8%; width: 24.1%; height: 4.8%; }
.screen-bio .twitter { left: 87.7%; top: 91.2%; width: 2.2%; height: 4.8%; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 760px) {
  .screen-hero img,
  .screen-bio img {
    min-width: 760px;
    width: 760px;
    max-width: none;
    transform: translateX(calc((100vw - 760px) / 2));
  }

  .screen {
    overflow-x: hidden;
  }

  .hit {
    display: none;
  }
}