#menu {
  width: 100vw;
  height: 100vh;
  background-color: var(--co-high);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 101;
  line-height: var(--lh-reg);
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: none;
  padding-top: 6rem;
}

#menu #blurb {
  font: var(--cs-hg1);
  padding: 0 calc(1rem * var(--lh-reg)) var(--pd-reg);
  margin-bottom: var(--ma-reg);
  color: var(--co-text);
  border-bottom: 1px solid var(--co-text);
}

#menu #blurb p {
  max-width: 72ch;
}

#menu #blurb .about {
  display: inline-block;
}

#menu h2, #menu h3, #menu .nav-item,
#related h2, #related h3, #related .nav-item  {
  text-transform: capitalize;
  font: var(--cs-hg1);
}

#related h2, #related h3 {
  margin: 0 var(--ma-reg);
}
#related #follow-us.nav-root-item {
  margin-left: var(--ma-reg);
  margin-right: var(--ma-reg);
}

#related .nav-root-item #nav-slice-item {
  padding: 0;
}

#menu h3,
#related h3 {
  font-size: var(--fs-big);
}
#menu .nav-root-item > p.research-intro,
#related .nav-root-item > p.research-intro {
  padding: 0 calc(1rem * var(--lh-reg));
  font: var(--cs-reg);
  max-width: 48ch;
}

#menu h2, #menu h3, #menu .nav-slice, #menu footer {
  padding: 0 calc(1rem * var(--lh-reg));
}

#menu .nav-pubs .nav-slice,
#related .nav-pubs .nav-slice {
  padding: 0 calc(0.5rem * var(--lh-reg));
}

#menu .nav-pubs .nav-slice .nav-slice-item,
#related .nav-pubs .nav-slice .nav-slice-item {
  margin-right: var(--ma-sml) !important;
}

#menu .nav-root,
#related .nav-root {
  overflow: visible;
}

#menu .nav-root-item,
#related .nav-root-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-bottom: var(--ma-reg);
}

#menu .nav-root-item .nav-slice,
#related .nav-root-item .nav-slice {
  display: flex;
  flex-direction: row;
  -webkit-overflow-scrolling: touch;
  overflow-x: scroll;
  align-items: stretch;
}

#menu .nav-root-item.nav-links .nav-slice,
#related .nav-root-item.nav-links .nav-slice {
  overflow-x: hidden;
}

#menu .nav-root-item .nav-slice.nav-wrap,
#related .nav-root-item .nav-slice.nav-wrap {
  flex-wrap: wrap;
}

#menu .nav-root-item .nav-slice .nav-slice-item,
#related .nav-root-item .nav-slice .nav-slice-item {
  margin-right: var(--ma-lrg);
}

#menu .nav-links .nav-slice .nav-slice-item a,
#menu #blurb a, #menu .nav-upgrade,
#related .nav-links .nav-slice .nav-slice-item a {
  display: inline;
  transition: all 200ms ease-out;
  background: linear-gradient(90deg, var(--co-pri) 50%, rgba(255, 255, 255, 0) 50%);
  background-size: 205% 100%;
  background-position: 100% 0;
}

#menu .nav-links .nav-slice .nav-slice-item a:hover,
#menu #blurb a:hover, #menu .nav-upgrade:hover,
#related .nav-links .nav-slice .nav-slice-item a:hover {
  color: var(--co-high);
  -webkit-animation: highlight 300ms 1 normal forwards;
  animation: highlight 300ms 1 normal forwards;
}

#menu .nav-root-item.nav-root-section-end,
#related .nav-root-item.nav-root-section-end {
  padding-bottom: var(--pd-reg);
  margin-bottom: var(--ma-reg);
  border-bottom: 1px solid var(--co-text);
}

#menu .nav-slice-item .lock-icon,
#related .nav-slice-item .lock-icon {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  margin-left: -12px;
  top: -8px;
  position: relative;
}

footer.site-wide-footer {
  font: var(--cs-lbl);
  margin-top: var(--ma-lrg);
  margin-bottom: var(--ma-reg);
  padding: 0 calc(1rem * var(--lh-reg));
}

footer.site-wide-footer p {
  margin-bottom: calc(1rem * var(--lh-sml));
}

footer.site-wide-footer ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

footer.site-wide-footer ul li {
  margin-right: var(--ma-reg);
}

footer.site-wide-footer .footer-logo {
  display: block;
  margin-top: var(--ma-sml);
}

footer.site-wide-footer .footer-logo svg {
  width: 26px;
  height: 15px;
}

#menu .close {
  width: calc(var(--spine-unit) + 1px);
  height: calc(var(--spine-unit) + 1px);
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--co-text);
  border-bottom: 1px solid var(--co-text);
  background: var(--co-high);
  z-index: 103;
}

#menu .close svg {
  width: 2rem;
  height: 2rem;
  cursor: pointer;
}

#menu .close:hover {
  background-color: var(--co-pri);
  color: var(--co-high);
}

/* Items */
#menu a.publication,
#menu a.application,
#related a.publication,
#related a.application {
  display: block;
  padding: var(--ma-sml);
  border: 1px solid rgba(255,255,255,0);
  transition: all 100ms;
  height: 100%;
}

#menu a.publication:hover,
#menu a.application:hover,
#related a.publication:hover,
#related a.application:hover {
  border: 1px solid var(--co-pri);
}

#menu .publication .cover,
#related .publication .cover {
  width: 16rem;
  height: 12rem;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-bottom: var(--ma-tny);
  z-index: 0;
}

#menu .publication .cover .signpost-small,
#related .publication .cover .signpost-small {
  z-index: 30;
  margin-bottom: 0;
}

#menu .publication .cover .thumb,
#related .publication .cover .thumb {
  position: absolute;
  z-index: 1;
  background-color: gray;
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
  top: 0;

}

#menu .application .thumb,
#related .application .thumb  {
  width: 10rem;
  height: 10rem;
  display: block;
  margin-bottom: var(--ma-sml);
  background-color: gray;
}

#menu .publication .meta,
#menu .application .meta, 
#related .publication .meta,
#related .application .meta {
  width: 16rem;
  display: flex;
  flex-direction: column;
}

#menu .publication .meta .title,
#menu .application .meta .title,
#related .publication .meta .title,
#related .application .meta .title {
  color: var(--co-pri);
  font: var(--cs-txt);
  text-transform: uppercase;
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
  line-height: 1.2;
}

#menu .publication .meta .intro,
#menu .publication .meta .author,
#menu .application .meta .intro,
#related .publication .meta .intro,
#related .publication .meta .author,
#related .application .meta .intro  {
  color: var(--co-text);
  font: var(--cs-txt);
  text-transform: initial;
}

#menu .publication .meta .intro,
#menu .application .meta .intro,
#related .publication .meta .intro,
#related .application .meta .intro  {
  overflow: hidden;
  font: var(--cs-lbl);
  width:100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Open & close */
#menu-toggle[type='checkbox'] {
  z-index: 2;
  position: fixed;
  top: 0;
  right: 0;
  visibility: hidden;
}

#menu-toggle[type='checkbox']:checked ~ #menu {
  display: block !important;
}

#menu .license svg {
  width: 8rem;
  height: auto;
  margin-bottom: var(--ma-tny);
}