/* one font, one size, one weight, lowercase */
* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9px;
  font-weight: normal;
  line-height: 1.45;
  color: #000;
  background: #fff;
  text-transform: lowercase;
  -webkit-text-size-adjust: 100%;
  scroll-snap-type: y proximity;
}
body { background: #fff; }
h1, h2, h3, p, li, a, button { font: inherit; }
a { color: inherit; text-decoration: none; }
a:hover { color: #999; }
ul { list-style: none; }
img, video { display: block; }

/* menu */
#menu {
  position: fixed;
  top: 16px;
  left: 16px;
  width: 240px;
  z-index: 10;
}
#menu ul ul { padding-left: 1.2em; }
#menu .home { margin-bottom: 1.45em; }
#menu a { display: inline-block; }
#menu .active { color: #999; }
#work-list.collapsed { display: none; }

/* content */
#content {
  margin-left: 280px;
  padding: 16px 16px 16px 0;
  min-height: 100vh;
}

/* pdf pages */
.pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4vh;
  padding: 8vh 0 9vh;
}
.page {
  scroll-snap-align: center;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 84vh;
  box-shadow: 0 0 0 1px #ececec;
  background: #fafafa;
}

/* video */
.video-wrap {
  min-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.video-wrap video {
  width: min(72vh, 100%);
  aspect-ratio: 1 / 1;
  background: #fff;
  cursor: pointer;
  object-fit: contain;
}
.video-ui { width: min(72vh, 100%); display: flex; justify-content: space-between; }
.video-ui button { background: none; border: 0; cursor: pointer; color: #000; padding: 0; }
.video-ui button:hover { color: #999; }

/* text pages */
.text { max-width: 520px; }
.text p + p, .text h2 + p, .text p + h2 { margin-top: 1.45em; }
.text h2 + p { margin-top: 0; }
.text .gap { margin-top: 2.9em; }
.text a:hover { color: #999; }
.about { min-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.about-img { width: 140px; height: auto; margin-top: auto; }
.about p:last-of-type { margin-bottom: 4em; }
.below { max-width: 520px; margin: 0 auto; padding-bottom: 20vh; scroll-snap-align: end; }

/* notes */
.notes .page { box-shadow: none; background: none; width: min(420px, 100%); max-height: none; }
.notes .below { width: min(420px, 100%); }

@media (max-width: 760px) {
  html { scroll-snap-type: none; }
  /* only "noahnaegel" stays on top while scrolling */
  #menu, #menu > ul { display: contents; }
  #menu > ul > li { padding: 0 16px; }
  #menu .home {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    padding: 16px 16px 1.45em;
    margin-bottom: 0;
  }
  #menu > ul > li:last-child { padding-bottom: 16px; }
  #content { margin-left: 0; padding: 0 16px 16px; min-height: 0; }
  .pages { padding: 24px 0; gap: 16px; }
  .page { max-height: none; }
  .video-wrap { min-height: 0; padding: 24px 0; }
  .about { min-height: 0; }
  .video-wrap video, .video-ui { width: 100%; }
}