:root {
  --content-width: 860px;
  --left-column-width: 610px;
  --right-column-width: calc(var(--content-width) - var(--left-column-width));
  --grid-width:    1080px;
  --navbar-height: 96px;



  --pa-font: "pa", "Roboto Flex", "Roboto", "Helvetica Neue", "Helvetica", ui-rounded, system-ui, sans-serif;

  --so-font: "so", "Roboto Flex", "Roboto", "Helvetica Neue", "Helvetica", ui-rounded, system-ui, sans-serif;



  --title-font: var(--pa-font);
  --cover-title-bright: rgba(255, 255, 255, 0.85);
  --cover-title-dark:   rgba(66, 65, 62, 1.00);

  --navbar-link-font: var(--pa-font);

  --navbar-link-bright: rgba(255, 255, 255, 0.72);
  --navbar-link-bright-highlighted: rgba(255, 255, 255, 0.98);

  --navbar-link-dark: rgba(66, 65, 62, 0.48);
  --navbar-link-dark-highlighted: rgba(66, 65, 62, 0.66);

  --navbar-shadow-color:    rgba(55, 87, 70, 0.45);
  --navbar-stronger-shadow: rgba(55, 87, 70, 0.99);

  --text-color: hsl(45, 3%, 35%);

  --default-red:    hsl(359, 59%, 58%);
  --default-red-wf: purple;

  --text-link-hover-color:        hsl(45, 3%, 18%);
  --margin-link-hover-color:      hsl(45, 3%, 42%);
  --margin-underline-color:       hsl(45, 3%, 84%);
  --margin-underline-hover-color: hsl(45, 3%, 77%);

  --about-color:  rgba(66, 65, 62, 0.38);
  --footer-color: rgba(66, 65, 62, 0.45);

  --section-title-color: rgba(66, 65, 62, 1.00);

  --section-subtitle-color: hsl(153, 6%, 75%);

  --margin-note-color: hsl(45, 3%, 66%);



  --underline-color:       rgba(66, 65, 62, 0.26);
  --underline-hover-color: rgba(66, 65, 62, 0.58);

  
  --page-margin: 12px;


  --navbar-background: transparent;

  --cover-overlay-color: hsl(160, 15%, 10%);


  --button-hover-color:  hsl(50, 18%, 92%);
  --button-active-color: hsl(50, 18%, 88%);
  --button-status-color: hsl(50, 7%, 75%);


  --research-background: hsl(181, 3%, 92%);

  --research-gallery-gap: 15px;
  --research-gallery-width: min(calc(var(--content-width) * 1.1), calc(100vw - 30px));



  --actuators-background: #2f444f;
  --actuators-hover-color: hsl(196, 45%, 65%);

  --actuators-video-height: 480px;
  --actuators-video-width: calc(var(--actuators-video-height) * 1.40);
  --actuators-specs-width: 330px;
  --actuators-annotation-color: hsl(204, 8%, 30%);  
  --actuators-line-width: 1.0px;

  --actuators-sticky-offset: calc(
    50vh 
    - 100px
    + 0.5 * var(--actuators-video-height)
    - 50vh
  );
  --actuators-sticky-space: 2600px;




  --materials-hover-color: hsl(194, 45%, 65%);


  --somat-gap: 24px;
  --somat-item-width: min(26.5vw, 460px);
  --somat-title-color: hsl(202, 9%, 80%);
  --somat-caption-color: hsl(116, 2%, 68%);


  --interfaces-hover-color: hsl(88, 45%, 65%);
  --interfaces-gallery-gap: 24px;
  --interfaces-gallery-item-width: calc(var(--content-width) * 0.3);
  --interfaces-gallery-item-height: calc(var(--interfaces-gallery-item-width) * 1.11);
  --interfaces-gallery-title-color:   hsl(116, 9%, 80%);
  --interfaces-gallery-caption-color: hsl(116, 10%, 72%);



  --publication-filters-height: 450px;
 

  --contact-color:   hsl(45, 2%, 36%);
  --contact-heading: hsl(45, 3%, 30%);


}


html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
}

@media (max-width: 240px) {
  body {
    transform: scale(0.8);
    transform-origin: top left;
    width: 125%;
  }
}
@media (max-width: 240px) {
  body {
    zoom: 100%;
  }
}


.main {
  width: 100%;
}

.navbar {
  width: 100%;
  height: var(--navbar-height);
  top: 0px;

  position: fixed;
  z-index: 100;


  animation: navbar-backdrop-fade linear both;
  animation-timeline: scroll(root block);
  animation-range: 95vh 101vh;

  
}

@keyframes navbar-backdrop-fade {
  from {
    background: rgba(255, 255, 255, 0);
  }
  to {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(18px);
  }
}


.navbar-layout {
  width: 100%;
  height: 60px;
  top: 50%;
  transform: translateY(-50%);

  position: absolute;

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 50;

  transition: top 0.25s ease-out;
}

.navbar-content {
  width: var(--content-width);
  height: 75px;

  display: flex;
  align-items: center;

  margin: 0;

  white-space: nowrap;

  position: relative;
}


.navbar-content a {
  text-decoration: none;

  position: relative;
  display: inline-block;
}

.navbar-content a.navbar-item {
  font-size: 20px;
  font-family: var(--navbar-link-font);
  color: var(--navbar-link-bright);

  opacity: 1;

  font-weight: 300;
  letter-spacing: -0.05px;

  margin-left:    9px;
  margin-right:   9px;
  margin-top:     2px;

  padding-top:    10px;
  padding-bottom: 10px;
  padding-left:   6px;
  padding-right:  6px;

  transition: 
  color 0.20s ease-out,
  opacity 0.25s ease-out;

  animation: navbar-item-fade linear both;
  animation-timeline: scroll(root block);
  animation-range: 95vh 101vh;
}

@keyframes navbar-item-fade {
  from {
    color: var(--navbar-link-bright);
  }

  to {
    color: var(--navbar-link-dark);
  }
}


.navbar-content a.navbar-item:hover {
  animation: navbar-item-highlighted-fade linear both;
  animation-timeline: scroll(root block);
  animation-range: 99vh 102vh;
}

@keyframes navbar-item-highlighted-fade {
  from {
  color: var(--navbar-link-bright-highlighted);
  }

  to {
  color: var(--navbar-link-dark-highlighted);
  }
}



.navbar-content a.push-right {
  margin-left: auto;
  right: -2px;
}

h1.site-name,
h1.site-name a {
  font-size: 36px;
  font-family: var(--title-font);
  font-weight: 900;
  color: var(--cover-title-bright);

  margin: 0;
  margin-left:  9px;
  margin-right: 18px;
  
  letter-spacing: -0.32px;
  text-transform: lowercase;
  word-spacing: -2.5px;

  white-space: nowrap;

  animation: site-name-fade linear both;
  animation-timeline: scroll(root block);
  animation-range: 89vh 101vh;
}

h1.site-name a:hover {
  
}

@keyframes site-name-fade {
  from {
    color: var(--cover-title-bright);
  }

  to {
    color: var(--cover-title-dark);
  }
}



.cover {
  overflow: hidden;

  width: 100%;
  height: 100vh;

  position: relative;
  display: block;
}


@media (orientation: portrait) {
  .cover {
    height: 100vw;
  }
}


.cover-title {
  --cover-title-color: rgb(255, 255, 255);

  width:  var(--content-width);


  position: absolute;
  z-index: 50;

  bottom: 24%;
  left: calc(50% + 5px);
  transform: translateX(-50%);

  padding-left:  0px;
  padding-right: 0px;

}

@media (max-width: 800px) { .cover-title { top: 65%; } }
@media (max-width: 300px) { .cover-title { top: 60%; } }



.cover-title h1 {
  width:  100%;

  position: relative;

  font-family: var(--pa-font);
  font-size: calc(max(min(100vw, 100vh) * 0.072, 27px));
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.20px;
  
  color: var(--cover-title-bright);

  margin-top: 0px;
  margin-bottom: 0px;

  padding: 4px;
}

.cover-title h6 {
  width:  100%;

  position: relative;

  font-family: var(--pa-font);
  font-size: calc(max(min(100vw, 100vh) * 0.036, 13px));
  font-weight: 300;
  line-height: 100%;
  letter-spacing: -0.20px;
  
  color: var(--cover-title-bright);

  margin-top: 0px;
  margin-bottom: 0px;

  padding: 4px;
}

@media (max-width: 800px) { .cover-title h6 { margin-bottom: -2px; } }
@media (max-width: 300px) { .cover-title h6 { margin-bottom: -5px; } }






.scroll-button-container {
  --scroll-button-size: 60px;
  --scroll-button-label-height: 22px;
  --scroll-button-color: rgba(255, 255, 255, 0.55);

  width:  var(--scroll-button-size);
  height: calc(var(--scroll-button-size) + var(--scroll-button-label-height));
  z-index: 50;

  bottom: 0.6%;
  left: 50%;
  transform: translate(-50%, -3%);
  position: absolute;

  animation: scroll-button-fade linear both;
  animation-timeline: scroll(root block);
  animation-range: 3vh 40vh;

}

@media (max-width: 800px) { .scroll-button-container { --scroll-button-size: 50px; } }
@media (max-width: 600px) { .scroll-button-container { --scroll-button-size: 40px; } }
@media (max-width: 400px) { .scroll-button-container { --scroll-button-size: 30px; } }
@media (max-width: 250px) { .scroll-button-container { --scroll-button-size: 20px; } }




@keyframes scroll-button-fade {
  from {
    opacity: 1.0;
  }
  to {
    opacity: 0.0;
  }
}



.scroll-button-label {
  width:   var(--scroll-button-size);
  height:  var(--scroll-button-label-height);

  position: absolute;
  top: 6px;

  font-family: var(--pa-font);
  font-size: 16px;
  font-weight: 300;
  line-height: 120%;
  letter-spacing: +0.36px;
  
  color: var(--scroll-button-color);

  text-align: center;

  opacity: 0.8;
}

.scroll-button {
  width:   var(--scroll-button-size);
  height:  var(--scroll-button-size);
  border:  none;
  outline: none;

  position: absolute;
  bottom: 0;

  background: transparent;

  font-family: var(--pa-font);
  font-size: calc(var(--scroll-button-size) * 0.82);
  font-weight: 300;
  line-height: 100%;
  letter-spacing: +0.36px;

  
  color: var(--scroll-button-color);

  opacity: 0.7;


}

.scroll-button-container .scroll-button,
.scroll-button-container .scroll-button-label {
  transition:
    color   0.18s ease-out,
    opacity 0.18s ease-out;

  cursor: pointer;
}

.scroll-button-container:hover .scroll-button,
.scroll-button-container:hover .scroll-button-label {
  color: rgba(255, 255, 255, 0.8);
  opacity: 0.92;
}





.cover-overlay {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background-color: var(--cover-overlay-color);
  opacity: 0;

  z-index: 10;

  animation: cover-overlay-shift linear both;
  animation-timeline: scroll(root block);
  animation-range: 82vh 96vh;
}

@keyframes cover-overlay-shift {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.85;
  }
}



.cover-video {
  position: absolute;
  inset: 0;

  top:  -25px;
  left: -25px;

  width:  calc(100% + 50px);
  height: calc(100% + 50px);

  object-fit: cover;  
  object-position: 75% 66%;

  animation: cover-video-shift linear both;
  animation-timeline: scroll(root block);
  animation-range: 35vh 100vh;

  transform-origin: 75% 50%;

  z-index: 5;

  cursor: pointer;
}


@keyframes cover-video-shift {
  from {
  }

  to {
    filter: blur(15px);
  }
}


@media (max-width: 800px) {
  .cover-video {
    filter: none !important;
  }
}



.cover-overlay, .cover-video {
  cursor: pointer;
}



.site-name, .navbar-item {
  animation: navbar-shadow-fade linear both;
  animation-timeline: scroll(root block);
  animation-range: 89vh 101vh;
}


@keyframes navbar-shadow-fade {
  from {
    text-shadow: 
    0px 0px 56px var(--navbar-shadow-color),
    0px 0px 18px var(--navbar-shadow-color),
    0px 0px  9px var(--navbar-shadow-color);
  }

  to {
    text-shadow: none;
  }
}



.popup-menu-button {
  cursor: pointer;
  border: none;
  position: absolute;
  right: 0;
  opacity: 0;
  transition: opacity 0.18s ease 0.3s;
  z-index: -100;

  background: none;

  font-size: 50px;
  
  margin-top: -3px;

  padding-left:  8px;
  padding-right: 8px;
  margin-right:  3px;
}


.stronger-shadow {
  padding-left:  12px !important;
  padding-right: 12px !important;

  margin-right: 1px !important;

  animation: stronger-shadow-fade linear both;
  animation-timeline: scroll(root block);
  animation-range: 40vh 80vh;
}

@keyframes stronger-shadow-fade {
  from {
    text-shadow: 
    0px 0px 96px var(--navbar-stronger-shadow),
    0px 0px 50px var(--navbar-stronger-shadow),
    0px 0px 40px var(--navbar-stronger-shadow),
    0px 0px  6px var(--navbar-stronger-shadow);
  }
  to {
    text-shadow:
    0px 0px 0px transparent;
  }
}



.content {
  position: relative;
  display: block;

  width: 100%;

  padding-top: 0px;

  timeline-scope: --materials-fade;
}


.section {
  width: 100%;
  overflow: hidden;
  padding-top: 20px;
  padding-bottom: 20px;
}


.section-layout {
  width: var(--content-width);
  position: relative;
  margin: 0 auto;
}

.paragraph-layout {
  width: 100%;
  padding-left:  var(--page-margin);
  padding-right: var(--page-margin);

  margin-left:  5px;
  margin-right: 5px;
}

.content h2 {
  color: var(--section-title-color);
  font-family: var(--title-font);

  font-size: 76px;
  line-height: 100%;
  font-weight: 900;

  margin-top:    0px;
  margin-bottom: 50px;

  margin-left: -1px;
}

.content h3 {
  color: var(--section-subtitle-color);
  font-family: var(--pa-font);

  font-size: 56px;
  line-height: 116%;
  font-weight: 600;
  letter-spacing: -0.35px;
  word-spacing: -0.18px;

  margin-left: -1px;

  margin-top:    28px;
  margin-bottom: 16px;
}

.left-column, .right-column {
  margin-left: 0px;
  margin-right: 0px;
}

.content .left-column {
  float: left;
  width: var(--left-column-width);
}

.content .right-column {
  float: right;
  width: 230px;
}

.content p {
  color: var(--text-color);
  font-size: 23px;
  line-height: 147%;
  font-weight: 400;
  margin-top:    22px;
  margin-bottom: 22px;
  letter-spacing: -0.24px;
  word-spacing: +0.25px;
  font-family: var(--so-font);
}

.content .positive p:first-of-type {
  margin-top: 32px !important;
}

.content p a {
  text-decoration: underline;
  text-decoration-color: var(--underline-color);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;

  cursor: pointer;

  color: var(--text-color);

  transition: 
  text-decoration-color 0.20s ease-out,
  color 0.20s ease-out;
}

.content p a:hover {
  color: var(--text-link-hover-color);
  text-decoration-color: var(--underline-hover-color);
}


.margin-note p {
  color: var(--margin-note-color);
  font-family: var(--so-font);
}

.content sup {
  line-height: 0;
  vertical-align: super;
  margin-left:  1px;
  margin-right: 2px;
}

.content .margin-note-ref {
  counter-increment: margin-note-ref;
}

.content .margin-note-label {
  counter-increment: margin-note-label;
}

.content .margin-note-ref::after {
  content: counter(margin-note-ref);
}

.content .margin-note-label::after {
  content: counter(margin-note-label);
}

.content .margin-note-ref,
.content .margin-note-label {
  font-family: var(--so-font);
  color: var(--default-red);
  font-size: 15px;
  font-weight: 600;
}

.white-foreground .margin-note-ref,
.white-foreground .margin-note-label {
  color: var(--default-red-wf);
}

.content p .margin-caption,
.content .margin-note p {
  
  font-family: var(--so-font);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.1px;

  color: var(--margin-note-color);

  margin-top:    20px;
  margin-bottom: 20px;

  line-height: 129%;

}


.content p .margin-caption a,
.content .margin-note p a {
  color: var(--margin-note-color);
  
  text-decoration: underline !important;

  text-decoration-color: var(--margin-underline-color) !important;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px !important;

  transition: color 0.20s ease-out;
}

.white-foreground p .margin-caption a,
.white-foreground .margin-note p a {
  color: var(--margin-note-wf-color);
}


.content p .margin-caption a:hover,
.content .margin-note p a:hover {
  color: var(--margin-link-hover-color);
  text-decoration-color: var(--margin-underline-hover-color) !important;
}

.white-foreground p .margin-caption a:hover,
.white-foreground .margin-note p a:hover {
  color: var(--margin-note-wf-color);
}



.content .margin-note-ref::after {
  padding-left: 1px;
}

.content .margin-note-label::after {
  padding-right: 2px;

  font-size: 12px;
}


.content {
  counter-reset: margin-note-ref   0 
                 margin-note-label 0;
}

.column-layout {
  
}

.column-layout:not(.side-by-side-layout)::after {
  display: block;
  content: "";
  clear: both;
}



.margin-image {
  width: 100%;
  border-radius: 7px;
}

p.margin-caption {
  margin-top:    3px !important;
  margin-bottom: 5px !important;
  
}

.margin-note {
  padding-top: 16px;
}


address {
  font-style: normal;
}

.email-label {
  font-weight: 700;
}

.email-line {
  margin-top: 25px !important;
  margin-bottom: 2px !important;
}

.email-addr-line {
  margin-top: 2px !important;
  margin-bottom: 18px !important;
}

.name-line {
  margin-top: 30px !important;
  margin-bottom: -18px !important;
}

.contact-description {
  margin-top: 2px !important;
  margin-bottom: 18px !important;
}


.copy-email {
  border-radius: 6px;
  border: none;

  background: none;

  padding-left:   8px;
  padding-right:  8px;

  padding-top:    3px;
  padding-bottom: 3px;

  color: var(--contact-color);
  font-size: 23px;
  font-weight: 400;
  letter-spacing: -0.5px;
  font-family: var(--so-font);

  cursor: pointer;

  text-decoration: underline;

  text-decoration-color: var(--underline-color);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;

  margin-left: -6px;
  margin-top: -24px;
}


.copy-email:hover {
  background-color: var(--button-hover-color);
}


.copy-email:active {
  background-color: var(--button-active-color);
}


.copy-status {
  cursor: default;

  margin-left: 1px;
  margin-right: 30px;
  user-select: none;

  opacity: 0;
}

.copy-status::after {
  content: "Copied";
  color: var(--button-status-color);
  font-size: 18px;
}


.footer {
  letter-spacing: -0.5px;
  font-family: var(--so-font);
}

.footer {
  height: 60px;
  vertical-align: middle;
  margin-top: 16px;
  margin-bottom: 0px;
  padding-bottom: 0px;
  color: var(--footer-color);

  font-size: 18px;
  font-weight: 400;

  letter-spacing: -0.18px;
}


.footer .section-layout {
  padding-left: calc(var(--page-margin) + 12px);
}

.footer .section-layout {
  display: flex;
  align-items: baseline;  
}

.footer .right {
  margin-left: auto;
}





.portrait-paragraph {
  text-align: center;
}


.portrait-image {
  margin-top: 16px;

  background: hsl(60, 15%, 96%);

  filter: saturate(85%);
}



.margin-note .source {
}

.margin-note .year {
  font-size: 14.0px;
}


.research-section {
  background-color: var(--research-background);
}

.research-section h3 {
  color: hsl(171, 14%, 64%);
  opacity: 0.85;
}

.research-section p {
  color: hsl(181, 8%, 34%);
  letter-spacing: -0.01px;
}

.research-section p b {
  color: hsl(181, 9%, 32%);
  letter-spacing: +0.02px;
}

.research-section .margin-note-ref,
.research-section .margin-note-label {
  color: hsl(171, 36%, 50%);
 }

.research-section .margin-note p {
  color: hsl(181, 7%, 60%);
  letter-spacing: +0.01px;
}

.research-section .margin-note p a {
  color: hsl(181, 7%, 66%);
  text-decoration-color: hsl(195, 7%, 80%) !important;
}

.research-section .margin-note p a:hover {
  color: hsl(181, 7%, 52%);
  text-decoration-color: hsl(195, 7%, 68%) !important;
}






.actuators-outer-container {
  height: var(--actuators-sticky-space);
  background: #2f434e;
}

.actuators-inner-container {
  position: sticky;
  top: calc(-1 * var(--actuators-sticky-offset));

  background: var(--actuators-background);
  background-image:
    linear-gradient(
      90deg,
      rgba(120, 155, 178, 0.00),
      rgba(120, 155, 178, 0.00),
      rgba(120, 155, 178, 0.00)
    ),
    url("../graphics/images/actuators/bean.webp");

  background-size: auto, 102.9%;
  background-position: 54% 55%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-blend-mode: normal; 



}
.actuators-inner-container > :first-child {
  top: var(--actuators-sticky-offset);
}






.actuators-graphic {
  margin: 0px;
  padding: 0px;
}


.actuators-graphic-layout,
.actuators-video-layout {
  width: 100%;
  margin: 0px;
  padding: 0px;
}

.actuators-video-layout {
  overflow: hidden;
}

.actuators-video {
  width: 100%;
  height: 100%;
  object-fit: cover;

  object-position: 50% 60%;

  cursor: pointer;
}









.actuators-section {
  background: transparent !important;
  padding-top: 55px;
}

.actuators-section h3 {
  color: hsl(188, 26%, 65%);
}

.actuators-section p {
  color: hsl(200, 7%, 91%) !important;
  letter-spacing: +0.06px;
}

.actuators-section p b {
  color: hsl(200, 7%, 95%);
  letter-spacing: +0.21px;
}

.actuators-section a {
  color: hsl(200, 7%, 91%) !important;
  text-decoration: underline !important;
  text-decoration-color: hsl(200, 7%, 91%) !important;
}

.actuators-section a,
.actuators-section a b {
  transition: color 0.20s ease-out;
}

.actuators-section a:hover,
.actuators-section a:hover b { 
  color: var(--actuators-hover-color) !important;
  text-decoration-color: var(--actuators-hover-color) !important;
}


.actuators-section .margin-note-ref,
.actuators-section .margin-note-label {
  color: var(--actuators-hover-color);
 }

.actuators-section .margin-note p,
.actuators-card-caption p {
  color: hsl(200, 7%, 67%) !important;
  letter-spacing: +0.08px;
}

.actuators-section .margin-note p a,
.actuators-card-caption p a {
  color: hsl(200, 7%, 67%) !important;
  text-decoration-color: hsl(200, 12%, 55%) !important;
}

.actuators-section .margin-note p a:hover,
.actuators-card-caption p a:hover {
  color: hsl(200, 12%, 89%) !important;
  text-decoration-color: hsl(200, 12%, 75%) !important;
}






.actuators-section-1 {
  padding-bottom: 8px !important;
}
.actuators-section-2 {
  margin-top: -30px !important;
}

.actuators-graphic {
  height: calc(var(--actuators-video-height) + 50px);
  position: relative;
  overflow: visible !important;

  background: transparent !important;

  margin-top: 0px;
  margin-bottom: 0px;

}

.actuators-graphic-layout {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: visible !important;
}


.actuators-card {
  width: calc(var(--actuators-video-width) + var(--actuators-specs-width));
  height: var(--actuators-video-height);
  overflow: hidden;

  white-space: nowrap;
  z-index: 50;

  
  margin-left: auto;
  margin-right: auto;
}

.actuators-card::after {
  content: "";
  display: block;
  clear: both;
}

.actuators-video-layout {
  position: relative;
  overflow: hidden;
  border-radius: 22px;

  width: var(--actuators-video-width);
  height: 100%;

  display: inline-block;

  margin-right: 20px;
}


.actuators-video-layout,
.actuators-card-caption {
  display: inline-block;
  vertical-align: top;
  white-space: normal;
}



.actuators-specs-layout {
  position: absolute;
  width: var(--actuators-specs-width);

  display: inline-block;
}



.actuators-video {
  display: block;

  width:  var(--actuators-video-width);
  height: var(--actuators-video-height);
  object-fit: cover;
  object-position: 50% 50%;
  transform-origin: 50% 50%;

  border-radius: 22px;

  z-index: 0;
}

.actuators-annotation {
  --actuators-annotation-animation-start: 43%;
  --actuators-annotation-animation-end: calc(
    var(--actuators-annotation-animation-start) + 5%
  );

  width: var(--actuators-video-width);
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform-origin: 50% 50%;

  position: absolute;
  pointer-events: none;

  z-index: 10;

  opacity: 0.95;

  transition: opacity 0.65s ease-out;

  
  opacity: 0;
  will-change: opacity;
  pointer-events: none;

  animation-name: actuators-annotation-fade;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: both;

  animation-timeline: scroll(root block);
  animation-range:
    var(--actuators-annotation-animation-start)
    var(--actuators-annotation-animation-end);
}


@keyframes actuators-annotation-fade {
  0%   { opacity: 0; }
  32%  { opacity: 1; }
  68%  { opacity: 1; }
  100% { opacity: 0; }
};




.actuators-annotation.hidden {
  opacity: 0;
}

.actuators-annotation>* {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.actuators-annotation>.align-center {
  transform: translate(-50%, -50%);
}

.actuators-annotation>.align-left {
  transform: translate(0%, -50%);
}

.actuators-annotation>.align-right {
  transform: translate(-100%, -50%);
}

.actuators-annotation .text {
  color: var(--actuators-annotation-color);
  font-family: var(--so-font);
  font-size: 18px;
  line-height: 96%;
  letter-spacing: -0.25px;
  word-spacing: -0.12px;
}

.actuators-annotation .small { font-size: 16px; }
.actuators-annotation .big   { font-size: 23px; line-height: 85%; }
.actuators-annotation .thin  { font-weight: 400; }
.actuators-annotation        { font-weight: 400; }
.actuators-annotation .bold  { font-weight: 700; }
.actuators-annotation .semi  { opacity: 0.7; }

.actuators-annotation .glow { 
  text-shadow: 0px 0px 30px rgba(234, 236, 238, 1.0);
}


.actuators-annotation .capped {
  height: 10px;
  width: 20%;

  border-width: var(--actuators-line-width);
  border-style: solid;
  border-color: var(--actuators-annotation-color);

  border-top: none;
  border-bottom: none;

  opacity: 0.7;
}

.actuators-annotation .capped::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;

  border-top-width: var(--actuators-line-width);
  border-top-style: solid;
  border-top-color: var(--actuators-annotation-color);

  top: calc(50% - 0.5px);

}



.actuators-annotation .arrow {
  --arrow-length: 40px;
  --arrow-head-size: 7px;
  --arrow-head-width: 4.5px;

  position: relative;

  width: var(--actuators-line-width);
  height: var(--arrow-length);

  background: currentColor;
  color: var(--actuators-annotation-color);

  opacity: 0.8;
}

.actuators-annotation .arrow::after {
  content: "";
  position: absolute;

  left: 50%;
  bottom: calc(-1 * var(--arrow-head-size));

  transform: translateX(-50%);

  width: 0;
  height: 0;

  border-left: var(--arrow-head-width) solid transparent;
  border-right: var(--arrow-head-width) solid transparent;
  border-top: calc(var(--arrow-head-size) * 1.4) solid currentColor;
}

.actuators-annotation .arrow.double::before {
  content: "";
  position: absolute;

  left: 50%;
  top: calc(-1 * var(--arrow-head-size));

  transform: translateX(-50%);

  width: 0;
  height: 0;

  border-left: var(--arrow-head-width, var(--arrow-head-size)) solid transparent;
  border-right: var(--arrow-head-width, var(--arrow-head-size)) solid transparent;
  border-bottom: calc(var(--arrow-head-size) * 1.4) solid currentColor;
}

.actuators-annotation .line {
  position: relative;

  display: flex;
  flex-direction: row;

  height: 50px;
  top: 28.9%;
  opacity: 0.7;
}

.actuators-annotation .line-A {
  position: relative;
  top: 0%;
  left: 22.85%;
  width: 7.5%;
  height: 100%;

  border-top-width: var(--actuators-line-width);
  border-top-style: solid;
  border-top-color: var(--actuators-annotation-color);
}

.actuators-annotation .line-B {
  position: relative;
  top: 0%;
  left: 22.85%;
  width: 7.5%;
  height: 100%;

  border-top-width: var(--actuators-line-width);
  border-top-style: solid;
  border-top-color: white;
}








.actuators-specs-layout {
  width: var(--actuators-specs-width);
  height: 100%;

  display: inline-block;

  margin-top: -16px;

}

.actuators-specs {
  position: absolute;

  padding-top:  16px !important;
  padding-left:  0px !important;

  font-size: 20px;
  font-family: var(--so-font);
}

.actuators-specs h4 {
  font-family: var(--so-font);
  font-size: 22px;
  font-weight: 400;
  line-height: 110%;
  letter-spacing: +0.03px;
  word-spacing: -0.12px;

  margin-top:    0px !important;
  margin-bottom: 8px !important;

  color: hsl(200, 4%, 48%);
  color: hsl(195, 32%, 52%);
}

.actuators-specs h3 {
  font-family: var(--pa-font);
  font-size: 30px;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.09px;
  word-spacing: -0.24px;

  margin-top:    0px !important;
  margin-bottom: 9px !important;

  color: hsl(200, 7%, 90%);

  backdrop-filter: blur(1px);  
}

.actuators-specs h3 em {
  font-weight: 800;
  font-style: normal;

  letter-spacing: +0.65px;
  word-spacing: -1.0px;

  margin-left: 2px;

  color: hsl(200, 6%, 94%);
  white-space: nowrap;

}

.actuators-schematics {
  width: 100%;
  height: 140px;

  position: relative;

  margin-top: 2px;
  margin-bottom: -8px;

  z-index: 5;
}

.actuators-schematics .label {
  font-family: var(--so-font);
  font-size: 14px;
  font-weight: 300;
  line-height: 105%;
  letter-spacing: +0.30px;
  word-spacing: -0.24px;

  color: hsl(200, 7%, 86%);
  opacity: 0.70;

  position: absolute;
  bottom: 3.5%;
  left: 50%;
  transform: translate(-50%, -5%);

  z-index: 10;
}

.actuators-schematics .label:nth-of-type(1) {
  left: 28%;
}

.actuators-schematics .label:nth-of-type(2) {
  left: 76.5%;
}

.actuators-schematics .label:nth-of-type(3) {
  left: 50.2%;
  top: 21%;
}

.actuators-schematics .drawing {
  width:  90%;
  height: 90%;
  object-fit: cover;  
  object-position: 50% 50%;

  position: absolute;
  left: 50%;
  top: calc(50% - 12px);
  transform: translate(-51%, -45%);

  opacity: 0.88;
}


.actuators-specs-list {
  position: absolute;

  list-style: none;
  margin-left: 0px;
  padding-left: 0px;

  width: 100%;

  backdrop-filter: blur(2px);  
}

.actuators-specs-item-layout {
  font-size: 15px;
  font-weight: 300;
  font-style: normal;

  letter-spacing: +0.65px;
  word-spacing: -1.0px;

  color: hsl(200, 7%, 87%);

  border-bottom: 1px solid hsl(200 7% 82% / 0.16);

  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  width: 100%;
}

.actuators-specs-item-layout {
  padding-top:     7px;
  padding-bottom:  7px;
}

.actuators-specs-item-layout>.item-name {
  display: flex;
  text-transform: uppercase;
  letter-spacing: +0.88px;
  word-spacing: -0.5px;

}

.actuators-specs-item-layout .item-value {
  margin-left: auto;
  text-align: right;
  letter-spacing: +0.45px;
  word-spacing: -0.5px;
}

.actuators-specs-item-layout .item-note {
  font-size: 14px;
  opacity: 0.32;
  letter-spacing: +0.25px;
  word-spacing: -0.5px;
  margin-top: -1px;
}





.actuators-card-caption {
  position: relative;
  width: 100%;

  margin-top: 12px !important;;

  display: block;
  margin-left: auto;
  margin-right: auto;

}

.actuators-card-caption p {
  font-family: var(--so-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 120%;
  padding-left: 6px;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.actuators-card-caption p .source {
  opacity: 0.50 !important;
}












.materials-outer-container {
  background: #030507;
}

.materials-inner-container {
  background-image:
    linear-gradient(
      90deg,
      hsl(202 45% 4% / 0.87) 0%,
      hsl(202 45% 4% / 0.79) 66%
    ),
    url("../graphics/images/materials/elastic.webp");

  background-size: auto, 123%;
  background-position: 50% 25%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-blend-mode: multiply; 
}






.materials-section,
.somat-section {
  background-color: transparent !important;
}

.materials-section {
  padding-top: 55px;
}

.materials-section h3 {
  color: hsl(194, 32%, 48%);
}

.materials-section p {
  color: hsl(202, 12%, 82%);
  letter-spacing: +0.08px;
}

.materials-section p b {
  color: hsl(202, 12%, 95%);
  letter-spacing: +0.11px;
}

.materials-section a {
  color: hsl(202, 12%, 82%) !important;
  text-decoration: underline !important;
  text-decoration-color: hsl(202, 7%, 40%) !important;
}

.materials-section a,
.materials-section a b {
  transition: color 0.20s ease-out;
}

.materials-section a:hover,
.materials-section a:hover b { 
  color: var(--materials-hover-color) !important;
  text-decoration-color: var(--materials-hover-color) !important;
}


.materials-section .margin-note-ref,
.materials-section .margin-note-label {
  color: hsl(194, 58%, 50%);
 }

.materials-section .margin-note p {
  color: hsl(202, 11%, 67%);
  letter-spacing: +0.07px;
}

.materials-section .margin-note p a {
  color: hsl(202, 11%, 67%) !important;
  text-decoration-color: hsl(202, 7%, 66%) !important;
}

.materials-section .margin-note p a:hover {
  color: hsl(202, 7%, 96%) !important;
  text-decoration-color: hsl(202, 7%, 85%) !important;
}



.interfaces-inner-container {
  background-image:
    linear-gradient(
      90deg,
      hsl(105 9% 21%/ 0.96) 0%,
      hsl(105 9% 21%/ 0.60) 66%,
      hsl(105 9% 21%/ 0.20) 100%
    ),
    url("../graphics/images/interfaces/grass.webp");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-blend-mode: multiply; 
}


@media (max-width: 720px) {
  .actuators-inner-container,
  .materials-inner-container,
  .interfaces-section {
    background-attachment: scroll;
  }
}


.interfaces-section {
  padding-top: 45px;
}

.interfaces-section h3 {
  color: hsl(88, 11%, 56%);
}

.interfaces-section p {
  color: hsl(116, 3%, 78%);
  letter-spacing: +0.05px;
}

.interfaces-section p b {
  color: hsl(116, 4%, 87%);
  letter-spacing: +0.12px;
}

.interfaces-section a {
  color: hsl(116, 3%, 78%) !important;
  text-decoration: underline !important;
  text-decoration-color: hsl(116, 4%, 40%) !important;
}

.interfaces-section a,
.interfaces-section a b {
  transition: color 0.20s ease-out;
}

.interfaces-section a:hover,
.interfaces-section a:hover b { 
  color: var(--interfaces-hover-color) !important;
  text-decoration-color: var(--interfaces-hover-color) !important;
}

.interfaces-section .margin-note-ref,
.interfaces-section .margin-note-label {
  color: hsl(88, 50%, 69%);
 }

.interfaces-section .margin-note p {
  color: var(--somat-caption-color);
  letter-spacing: +0.05px;
}

.interfaces-section .margin-note p a {
  color: var(--somat-caption-color);
  text-decoration-color: hsl(116, 7%, 36%);
}

.interfaces-section .margin-note p a:hover {
  color: hsl(116, 3%, 80%);
  text-decoration-color: hsl(116, 7%, 85%);
}



.publications-section {
  background-color: hsl(53, 17%, 92%);

  padding-top:    32px;
  padding-bottom: 64px;

  margin-top:    0px;
  margin-bottom: 0px;
}

.publications-section h2 {
  margin-left: 8px;
  margin-top: 20px;
  margin-bottom: 25px;
}



.contact-section {
  background-color: hsl(48, 6%, 97%);

  padding-top: 60px;
  padding-bottom: 40px;
}



.actuators-section h3:first-of-type,
.materials-section h3:first-of-type,
.interfaces-section h3:first-of-type {
  margin-top: -2px;
}



.actuators-section,
.materials-section,
.interfaces-section {
  padding-bottom: 45px;
}



.biography-section .section-layout:first-of-type {
  margin-top: 12px;
  margin-bottom: -25px !important;
}

.materials-section:not(.materials-section-2) {
  padding-bottom: 20px !important;
}

.materials-section-2 {
  padding-top: 0px !important;
}

.materials-section-2 .section-layout {
  padding-top: 0px !important;
}



.somat-section {

  width: 100%;

  padding: 0;
  padding-top:     5px;
  padding-bottom: 55px;

  position: relative;
  display: block;

  overflow: visible;

}


.somat-layout {

  display: grid;
  gap: var(--somat-gap);

  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, var(--somat-item-width)), 1fr)
  );

  margin-inline: auto;  
  margin-bottom: -5px;
}


.somat-layout,
.somat-layout-opening {
  max-width: calc(
    var(--somat-item-width) * 3 + var(--somat-gap) * 2
  );

  width: 100%;
}


.somat-layout-opening {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.somat-layout-opening h3 {
  color: var(--somat-title-color);
  line-height: 125%;

  font-size: 43px;
  margin-bottom: 20px;
  letter-spacing: -0.6px;
  font-weight: 300;
  font-family: var(--pa-font);
  opacity: 0.96;
}



.somat-item {
  width: 100%;
  max-width: var(--somat-item-width);
  justify-self: center;

  padding-top: 0px;
  padding-bottom: 5px;

  position: relative;
}

.somat-video-container {
  width: 100%;
  overflow: hidden;
  aspect-ratio: var(--somat-video-ratio, 850 / 720);

  border-radius: 18px;

  position: relative;
}

.somat-video {
  display: block;
  width: 100%;
  height: auto;

  cursor: pointer;

  object-fit: contain;
  object-position: 50% 50%;

  transform: scale(var(--somat-video-scale, 1));
  transform-origin: 50% 50%;
}

.somat-video.manual-pause:not(:hover),
.somat-video:not(.active):not(:hover) {
}

.somat-video-container.show-pause::after {
  content: "⏸";
  font-family: var(--pa-font);
  font-size: 56px;
  font-weight: 700;

  position: absolute;
  z-index: 200;
  bottom: 8px;
  right: 30px;  

  color: white;
  text-shadow: 
    0px 0px 48px rgba(0,0,0,0.25),
    0px 0px 12px rgba(0,0,0,0.45);

  pointer-events: none;
}

.somat-video-container.show-pause.dark-pause::after {
  color: hsl(202, 40%, 10%);
  text-shadow: none;
  opacity: 0.6;
}



#video-jumper {
  --somat-video-scale: 1.05;
  transform-origin: 50% 95%;
}


.somat-caption-container {
  width: 100%;
}

.somat-caption {
  color: var(--somat-caption-color);
  font-family: var(--so-font);
  font-size: 16px;
  line-height: 125%;
  font-weight: 400;
  
  letter-spacing: +0.12px;

  opacity: 0.55;
}

.somat-caption .source {
}


.somat-title {

  color: var(--somat-title-color);
  font-family: var(--so-font);
  font-size: 28px;
  line-height: 105%;
  font-weight: 600;
  
  letter-spacing: -0.12px;

  margin-top: 21px;
  margin-bottom: 7px;

}


.materials-section-1 {
  padding-bottom: 40px !important;
}

.materials-section-2 {
  padding-top: 0px !important;
  padding-bottom: 60px !important;
}






.interfaces-gallery {
  padding-top:    0px !important;
  padding-bottom: 0px !important;

  position: relative;
}

.interfaces-gallery-layout {

  display: grid;
  gap: var(--interfaces-gallery-gap);

  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, var(--interfaces-gallery-item-width)), 1fr)
  );

  margin-inline: auto;  
}

.interfaces-gallery-layout,
.interfaces-gallery-opening {
  max-width: calc(
    var(--interfaces-gallery-item-width) * 4 + var(--interfaces-gallery-gap) * 3
  );

  width: 100%;
}

.interfaces-gallery-opening {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.interfaces-gallery-opening h3 {
  color: var(--interfaces-gallery-title-color);
  line-height: 125%;

  font-size: 43px;
  margin-bottom: 20px;
  letter-spacing: -0.6px;
  font-weight: 300;
  font-family: var(--pa-font);
  opacity: 0.96;
}


.interfaces-gallery-item {
  width:       var(--interfaces-gallery-item-width);
  height: calc(var(--interfaces-gallery-item-height) + 300px);

  justify-self: center;

  padding-top:    0px;
  padding-bottom: 0px;

  position: relative;
}


.interfaces-gallery-image-container {
  width:  var(--interfaces-gallery-item-width);
  height: var(--interfaces-gallery-item-height);

  border-radius: 16px;

  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}


.interfaces-gallery-image-container img {
  object-fit: cover;  
  object-position: center center;

  width:  100%;
  height: 100%;
}  

.interfaces-gallery-caption-container {
  padding-left: 2px;
}

.interfaces-gallery-caption-container .title {
  color: var(--interfaces-gallery-caption-color);
  font-family: var(--so-font);
  font-size: 28px;
  line-height: 105%;
  font-weight: 600;
  
  letter-spacing: -0.12px;

  margin-top: 21px;
  margin-bottom: 7px;
}

.interfaces-gallery-caption-container .caption {
  color: var(--interfaces-gallery-caption-color);
  font-family: var(--so-font);
  font-size: 16px;
  line-height: 125%;
  font-weight: 400;
  
  letter-spacing: +0.12px;

  opacity: 0.65;
}


.interfaces-section-1 {
  padding-bottom: 25px !important;
}

.interfaces-section-2 {
  padding-top: 0px !important;
  margin-top: -30px !important;
  padding-bottom: 60px !important;
}


.compensate {
  margin-top: -22px;
}

.biography-section {
  padding-top:    40px;
  padding-bottom: 50px;
}

.research-section {
  padding-top: 60px;
  padding-bottom: 50px;
}



.publication-list {
  
}

.publication-row {
  --ratio: 72%;

  display: flex;
  flex-direction: row;
  gap: 12px;  

  min-height: 200px;

  padding-left:   12px;
  padding-right:  18px;

  padding-top:    24px;
  padding-bottom: 24px;

}


.publication-list > a:not(.hidden):has(~ a:not(.hidden)) .publication-row {
  border-bottom: 1px solid rgba(66, 65, 62, 0.15);
}



.publication-data {
  
}

.publication-row .publication-data:nth-child(1) {
  flex: 0 0 var(--ratio);
}

.publication-row .publication-data:nth-child(2) {
  flex: 0 0 calc(100% - var(--ratio));
}

.publication-data .where-line {
  font-size: 23px;
  font-family: var(--so-font);
  font-weight: 700;
  color: rgba(66, 65, 62, 1.0);

  letter-spacing: -0.2px;
  word-spacing: -0.2px;

  line-height: 115%;
  margin-top: 7px;
  margin-bottom: 8px;
}


.publication-data .title {
  font-size: 26px;
  font-family: var(--pa-font);
  font-weight: 300;

  color: rgba(66, 65, 62, 1.0);
  opacity: 0.9;

  letter-spacing: -0.20px;
  word-spacing: +0.5px;
  line-height: 125%;
  margin-top: 0px;
  margin-bottom: 8px;
}




a .publication-data .title {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;

  transition: text-decoration-color 0.1s ease-out;
}

a:hover .publication-data .title {
  --publication-title-hover-color: hsl(45, 3%, 65%);
  text-decoration-color: var(--publication-title-hover-color);
}

.publication-data .publication-thumbnail {
  overflow: hidden;
  position: relative;

}

a:hover .publication-data .publication-thumbnail {
}

.publication-data .publication-thumbnail img {
  position: absolute;
  inset: 0;

  width:  100%;
  height: 100%;

  object-fit: cover;  
  object-position: 50% 50%;

  filter: saturate(86%);
  opacity: 0.89;

  transition:
    filter  0.1s ease-out,
    opacity 0.1s ease-out;

}

a:hover .publication-data .publication-thumbnail img {
  filter: saturate(100%);
  opacity: 1.0;
}


.publication-data .authors,
.publication-data .info {
  font-size: 16px;
  font-family: var(--so-font);
  font-weight: 400;
  color: rgba(66, 65, 62, 1.0);
  opacity: 0.36;

  letter-spacing: -0.02px;
  word-spacing: -0.5px;

}

.publication-data .authors {
  line-height: 135%;
  margin-top: 0px;
  margin-bottom: 0px;
}

.publication-data .authors {
  list-style: none;
  padding-left: 0px !important;
}

.publication-data .authors li {
  display: inline;
  text-wrap: nowrap;
}

.publication-data .authors:not(.single-author) li:not(:last-child)::after {
  content: ", ";
}

.publication-data .authors:not(.single-author) li:last-child::before {
  content: "and ";
}



.publication-thumbnail {
  overflow: hidden;
  border-radius: 9px;

  width: 100%;
  height: 100%;

  background: hsl(53, 17%, 85%);
}

.publication-thumbnail img {
  object-fit: cover;  
  object-position: 50% 50%;
  position: absolute;

}

.publication-data .info {
  opacity: 0.60;
  white-space: nowrap;
}

.publication-data .info:not(.remove-bar) {
  margin-left: 4px;
}

.publication-data .info:not(.remove-bar)::before {
  content: " | ";
  margin-right: 6px;
  font-weight: 400;
  opacity: 0.40;

  display: inline-block;
  transform: scaleY(90%) translateY(-1.0px);
}

.publication-section .section-layout {
  position: relative;
}

.publication-filters-container,
.publication-list {
  
}

.publication-list {
  padding-left:  5px;
  padding-right: 5px;
  
  margin-top: calc(var(--publication-filters-height) * -1);

  min-height: var(--publication-filters-height);
}


.publication-filters-container {
  --filters-width: 180px;
  --filters-margin: 10px;

  position: sticky;
  top: 150px;
  height: var(--publication-filters-height);

  width: var(--filters-width);
  margin-left: calc(var(--filters-width) * -1 - var(--filters-margin));

  pointer-events: auto;

}


.publication-filters-layout {
  width: 100%;
  height: 100%;

  font-family: var(--so-font);
  font-weight: 400;
  color: rgba(66, 65, 62, 1.0);
  opacity: 1.0;
  
  padding-top: 33px;
}

.publication-filters-layout h4 {
  font-size: 18px;
  font-weight: 700;
  opacity: 0.9;

  letter-spacing: +0.05px;

  margin-top: 0px;
  margin-bottom: 4px;
}

.publication-filters-layout ul {
  list-style: none;
  margin-left: 0px;
  padding-left: 0px;

  margin-top: 0px;
  margin-bottom: 18px;
}

.publication-filters-layout li {
  font-size: 16px;
  font-weight: 400;
  line-height: 145%;
}

.publication-filters-layout .filter {
  display: flex;
  flex-direction: row;

  margin-left: -1px;

  cursor: pointer;
}

.publication-filters-layout .name {
  text-align: left;

  padding-left: 2px;

}

.publication-filters-layout .count {
  text-align: right;

  font-size: 13px;
  opacity: 0.36;
}

.publication-filters-layout .count::before {
  content: " (";
    margin-left: 3px;
}

.publication-filters-layout .count::after {
  content: ")";
}

.publication-filters-layout .filter {
  border-radius: 8px;
  padding-left:  7px;

  margin-top:    1px;
  margin-bottom: 1px;
}

.publication-filters-layout .filter .name {
  color: rgba(66, 65, 62, 0.52);
}

.publication-filters-layout .filter.selected {
  background: hsl(53, 15%, 84%);
}

.publication-filters-layout .filter:hover {
}

.publication-filters-layout .filter.selected .name, 
.publication-filters-layout .filter:hover .name {
  color: rgba(66, 65, 62, 0.85);
}


.publication-list>a.hidden {
  display: none;
}

.contact-address {
  line-height: 136% !important;
}

.contact-description {
  display: none;
}

.contact-info {
  margin-top: -30px !important;
}













.banner-layout {
  position: relative;
  left: 50%;
  transform: translateX(-50%);

  margin-top:    32px;
  margin-bottom: 12px;

  --banner-width:  min(90vw, calc(var(--content-width) * 1.333));
  --banner-height: calc(var(--banner-width) * 0.333);

  width:  var(--banner-width );
  height: var(--banner-height);

}

.banner-image-container {
  display: flex;

  overflow: hidden;
  border-radius: 13px;
}

.banner-image {
  display: block;
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: 50% 50%;

  filter: saturate(90%) brightness(100%);
}



.contact-image-frame {
  margin-left: -28px !important;
  margin-top: 24px;
  width: 230px;
  height: 230px;
}

.contact-image {
  display: block;
  width:  100%;
  height: 100%;

  object-fit: cover;
  object-position: 50% 40%;

  opacity: 0.88;
  filter: saturate(97%);
}

.footer .right {
  margin-right: 27px;
}

.nowrap {
  white-space: nowrap;
}

*:not(.navbar) a, 
*:not(.navbar) a:visited, 
*:not(.navbar) a:active {
  color: inherit;
}

.publication-list a {
  text-decoration: none !important;
}


.section-anchor {
  width: 0px;
  height: 0px;

  position: absolute;
  margin-top: calc(var(--navbar-height) * -1 - 50px);
}

.biography-section .section-anchor {
  margin-top: calc(var(--navbar-height) * -1 - 50px);
}

.all-emails {
  margin-top: -20px;
}

.all-emails>.email-container {
  display: inline-block;
  vertical-align: top;
}

.all-emails>.email-container:not(:first-child) {
  margin-left: 0px;
}

.contact-info *,
.copy-email {
  color: var(--contact-color) !important;
}

.contact-info .heading * {
  color: var(--contact-heading) !important;

  letter-spacing: -0.3px;
}

h3.trajectory-heading {
  margin-top: 55px;
}






.research-gallery {
  width: 100%;
  padding-top: 0 !important;
  padding-bottom: 0 !important;

  position: relative;

  background: var(--research-background);
}

.research-gallery-layout {
  width: var(--research-gallery-width);

  position: relative;
  left: calc(50%);
  transform: translateX(-50%);

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: var(--research-gallery-gap);

  aspect-ratio: 5 / 2;
}

.research-gallery-item {
  width: 100%;
  height: 100%;

  border-radius: 10px;
  overflow: hidden;

  background: rgba(255, 255, 255, 0.2);
}

.research-gallery-item img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center center;
}






.research-section-1 {
  padding-bottom: 15px;
}

.research-section-2 {
  padding-top: 20px;
}



@media (max-width: 800px) {
  .navbar-layout {
    justify-content: flex-start;
  }

  .navbar-content a.navbar-item {
    opacity: 0;
  }
}


@media (max-width: 1300px) {
  .publication-filters-container {
    display: none;
  }
  .publication-list {
    margin-top: 0px;
  }
}

@media (max-width: 900px) { 
  :root { 
    --content-width:     calc(100% - 16px); 
    --left-column-width: calc(100% -  0px); ;
  }
  .paragraph-layout {
    width: calc(100% - 32px); 
  }
}


@media (max-width: 980px) { 
  .right-column.margin-note {
    width: 210px;
    margin-right: 24px !important;
  }
}

@media (max-width: 900px) { 
  .right-column.margin-note {
    float: left !important;
    width: calc(100% - 24px);
    margin-left: 12px;
    padding-top: 0px;
    margin-top: -15px;
    margin-bottom: 24px;
  }
}







@media (max-width: 880px) {
  .publication-row .publication-data:nth-child(1) {
    flex: 0 1 var(--ratio);
  }
  .publication-list {
    padding-left: 10px;
    padding-right: 10px;
  }
  .publication-thumbnail {
    position: relative;
    width:  230px;
    height: 200px;
  }
  .publication-data .title {
    font-size: 24px;
  }
}


@media (max-width: 580px) {
  .publication-thumbnail {
    position: relative;
    width:  207px;
    height: 180px;
  }
  .publication-data .title {
    font-size: 22px;
  }
}

@media (max-width: 480px) {
  .publication-data .title {
    font-size: 20px;
  }
  .publication-data .where {
    font-size: 18px;
  }
  .publication-data .info {
    font-size: 15px;
  }
  .publication-data .title {
    font-size: 20px;
  }
  .publication-data .info:not(.remove-bar)::before {
    margin-right: 4px;
  }
  .publication-data .info:not(.remove-bar) {
    margin-left: 2px;
  }
  .publication-thumbnail {
    position: relative;
    width:  208px;
    height: 160px;
  }
  .publication-row {
    position: relative;
    display: grid;
    gap: 5px;
  }
  .publication-row .publication-data:nth-child(1) {
    width: 100%;
    grid-row: 2;
  }
  .publication-row .publication-data:nth-child(2) {
    width: 100%;
    grid-row: 1;
  }
}





@media (max-width: 800px) { .content h2 { font-size: 60px; margin-bottom: 30px; } }
@media (max-width: 600px) { .content h2 { font-size: 50px; margin-bottom: 10px; } }
@media (max-width: 400px) { .content h2 { font-size: 40px; margin-bottom:  5px; } }
@media (max-width: 250px) { .content h2 { font-size: 30px; margin-bottom:  0px; } }


                          .publications-section h2 {                  margin-left: 12px; }
@media (max-width: 800px) { .publications-section h2 { font-size: 60px; margin-left: 20px; } }
@media (max-width: 600px) { .publications-section h2 { font-size: 50px; margin-left: 20px; } }
@media (max-width: 400px) { .publications-section h2 { font-size: 40px; margin-left: 20px; } }
@media (max-width: 250px) { .publications-section h2 { font-size: 30px; margin-left: 16px; } }



@media (max-width: 800px) { .content p { font-size: 21px; } }
@media (max-width: 600px) { .content p { font-size: 20px; } }
@media (max-width: 400px) { .content p { font-size: 18px; } }
@media (max-width: 250px) { .content p { font-size: 16px; } }


@media (max-width: 800px) { .content .copy-email { font-size: 21px; } }
@media (max-width: 600px) { .content .copy-email { font-size: 18px; } }
@media (max-width: 400px) { .content .copy-email { font-size: 16px; } }
@media (max-width: 250px) { .content .copy-email { font-size: 14px; } }


@media (max-width: 800px) { .content h3 { font-size: 40px; } }
@media (max-width: 600px) { .content h3 { font-size: 36px; } }
@media (max-width: 400px) { .content h3 { font-size: 28px; } }
@media (max-width: 250px) { .content h3 { font-size: 24px; } }


@media (max-width: 800px) { .somat-title { font-size: 22px; } }
@media (max-width: 600px) { .somat-title { font-size: 18px; } }
@media (max-width: 400px) { .somat-title { font-size: 16px; } }
@media (max-width: 250px) { .somat-title { font-size: 14px; } }

@media (max-width: 800px) { .somat-caption { font-size: 15px; } }
@media (max-width: 600px) { .somat-caption { font-size: 14px; } }
@media (max-width: 400px) { .somat-caption { font-size: 13px; } }
@media (max-width: 250px) { .somat-caption { font-size: 12px; } }


@media (max-width: 800px) { 
  .somat-layout { 
    gap: 5px; 
    max-width: calc(var(--somat-item-width) * 3 + var(--somat-gap) * 2 + 32px);
  }
  .interfaces-gallery {
    max-width: calc(100% + 32px);
  }
}
@media (max-width: 600px) { 
  .somat-layout { 
    gap: 0px; 
    max-width: calc(var(--somat-item-width) * 3 + var(--somat-gap) * 2 + 24px);
  } 
  .interfaces-gallery {
    max-width: calc(100% + 32px);
  }
  .somat-item {
    max-width: calc(100% - 12px);
    margin-bottom: 20px;
  }
}
@media (max-width: 400px) { 
  .somat-layout { 
    gap: 0px; 
    max-width: calc(var(--somat-item-width) * 3 + var(--somat-gap) * 2 + 16px);
  } 
  .interfaces-gallery {
    max-width: calc(100% + 32px);
  }
  .somat-item {
    max-width: calc(100% - 9px);
    margin-bottom: 15px;
  }
}
@media (max-width: 250px) { 
  .somat-layout { 
    gap: 0px; 
    max-width: calc(var(--somat-item-width) * 3 + var(--somat-gap) * 2 + 8px);
  } 
  .interfaces-gallery-opening {
    padding-left:  20px;
    padding-right: 20px;
  }
  .somat-item {
    max-width: calc(100% - 3px);
    margin-bottom: 10px;
  }
}


@media (max-width: 800px) { 
  .actuators-inner-container {
    background-size: auto, 160%;
    background-position: 54% 55%;
    background-repeat: round;
  }
  .materials-inner-container { 
    background-size: auto, 160%;
    background-position: 50% 40%;
    background-repeat: round;
  }
  .interfaces-gallery-opening {
    margin-left:  16px;
    margin-right: 16px;
    width: calc(100% - 32px);
  }
}
@media (max-width: 600px) { 
  .materials-inner-container { 
    background-size: auto, 200%;
    background-position: 50% 60%;
    background-repeat: round;
  }
  .interfaces-gallery-opening {
    margin-left:  16px;
    margin-right: 16px;
    width: calc(100% - 32px);
  }
}
@media (max-width: 400px) { 
  .materials-inner-container { 
    background-size: auto, 240%;
    background-position: 50% 80%;
    background-repeat: round;
  }
  .interfaces-gallery-opening {
    margin-left:  16px;
    margin-right: 16px;
    width: calc(100% - 32px);
  }
}
@media (max-width: 250px) { 
  .materials-inner-container { 
    background-size: auto, 280%;
    background-position: 50% 100%;
    background-repeat: round;
  }
  .interfaces-gallery-opening {
    margin-left:  16px;
    margin-right: 16px;
    width: calc(100% - 32px);
  }
}





@media (max-width: 500px) {
  .footer { 
    margin-bottom: 10px;
    font-size: 18px;
    gap: 10px;
  }
  .footer .right {
    display: none;
  }
}
@media (max-width: 400px) { .footer { font-size: 16px; } }
@media (max-width: 250px) { .footer { font-size: 13px; } }


@media(max-width: 640px) {
  .contact-section .left-column {
    float: none;
  }
  .contact-section .right-column {
    float: none;    
  }
  .contact-image-frame {
    margin-left: 0px !important;
  }  
}


@media(max-width: 820px) {
  .email-addr-line {
    margin-top: -2px !important;
  }
  .all-emails {
    margin-top: 2px;
  }
  .contact-address {
    margin-bottom: 18px !important;
  }
  .contact-section {
    padding-bottom: 10px;
  }
  .email-line {
    margin-top: -6px !important;
  }
  .footer .right {
    margin-right: 34px;
  }
}


@media(max-width: 450px) {
  .all-emails>.email-container {
    display: block;
  }
}

@media (max-width: 1160px) { 
  .interfaces-gallery-layout, .interfaces-gallery-opening {
    max-width: 60%;
    width: 100% !important;
  }
}

@media (max-width: 903px) { 
  .interfaces-gallery-opening {
    max-width: 100%;

    width: calc(100% - 45px) !important;    
  }

  .interfaces-gallery-layout {
    display: flow-root;
    margin-bottom: 45px;
  }

  .interfaces-gallery-item {
    display: block;
    position: relative;

    width: 100%;


    clear: both;
  }
  .interfaces-gallery-image-container {
    width: 30%;
    height: 150px;
    float: left;
    margin-top: 16px;
  }
  .interfaces-gallery-image-container img {
    object-fit: cover;  
    object-position: center;
  }
  .interfaces-gallery-caption-container {
    width: calc(70% - 20px);
    float: right;

    padding-top: 0px;
    margin-top: -9px;
    margin-bottom: 12px;
  }

  .interfaces-gallery::after {
    content: "";
    display: block;
    clear: both;
  }
}




@media (max-width: 640px) { 
  .interfaces-gallery-opening,
  .interfaces-gallery-layout {
    display: flow-root;
    max-width: calc(100% - 45px) !important;
    width: calc(100% - 45px) !important;    
  }
}


@media (max-width: 800px) { 
  :root { --research-gallery-gap: 12px; }
  .research-gallery-item { border-radius: 8px; }
  .research-section-1 { padding-bottom:   2px; }
  .research-section-2 { padding-top:      2px; }
}

@media (max-width: 600px) { 
  :root { --research-gallery-gap: 9px; }
  .research-gallery-item { border-radius: 7px; }
  .research-section-1 { padding-bottom:   0px; }
  .research-section-2 { padding-top:      0px; }
}

@media (max-width: 400px) { 
  :root { --research-gallery-gap: 7px; }
  .research-gallery-item { border-radius: 5px; }
  .research-section-1 { padding-bottom:   0px; }
  .research-section-2 { padding-top:      0px; }
}


@media (max-width: 900px) {
  .portrait-image { width: min(35%, 400px); }
}

@media (max-width: 640px) {
  .portrait-image { width: min(75%, 230px); }
}

@media (max-width: 500px) {
  .portrait-image { width: min(85%, 230px); }
}





@media (max-width: 1100px) {
  .actuators-graphic {
    zoom: calc(100vw / 1000px * 0.9);
  }
}




@media (max-width: 875px) {
  .actuators-graphic {
    --zoom-ratio: calc(100vw / 1000px * 0.8 + 0.2);
    zoom: var(--zoom-ratio);
    height: calc(var(--actuators-video-height) + 580px);
  }
  .actuators-card {
  }
  .actuators-card>* {
    display: block;
  }
  .actuators-video-layout {
    margin-right: 0px;
    overflow: visible;

    margin-left:  auto !important;
    margin-right: auto !important;
  }
  .actuators-specs-layout {
    margin-top: 9px;
    zoom: 1.0;
    left: 35%;
  }

  .actuators-video-layout,
  .actuators-specs-layout {
    transform: translateX(calc(-150px + 100px * 125vw / 1000px));
  }
  .actuators-schematics .drawing {
    overflow: visible;  
  }

  .actuators-specs-list {
    width: 115%;
  }


  .actuators-section-2 {
    padding-top: 25px;
  }
}

@media (max-width: 600px) {
  .actuators-graphic {
    height: calc(var(--actuators-video-height) + 770px);
  }  
}
@media (max-width: 450px) {
  .actuators-graphic {
    height: calc(var(--actuators-video-height) + 820px);
  }  
}
@media (max-width: 400px) {
  .actuators-graphic {
    --zoom-ratio: calc(100vw / 1000px * 0.8 + 0.13);
    height: calc(var(--actuators-video-height) + 900px);
  }  
}

@media (max-width: 800px) { .actuators-specs h3 { font-size: 30px; } }
@media (max-width: 600px) { .actuators-specs h3 { font-size: 25px; } }
@media (max-width: 400px) { .actuators-specs h3 { font-size: 20px; } }
@media (max-width: 250px) { .actuators-specs h3 { font-size: 18px; } }

@media (max-width: 875px) { .actuators-specs-layout { zoom: 1.0; left: 35%; } }
@media (max-width: 800px) { .actuators-specs-layout { zoom: 1.0; left: 35%; } }
@media (max-width: 600px) { .actuators-specs-layout { zoom: 1.5; left: 37%; } }
@media (max-width: 400px) { .actuators-specs-layout { zoom: 1.8; left: 45%; } }
@media (max-width: 250px) { .actuators-specs-layout { zoom: 1.9; left: 45%; } }


@media (max-width: 450px) {
  .actuators-specs-item.driving-mechanism .item-name {
    font-size: 0;
  }
  .actuators-specs-item.driving-mechanism .item-name::before {
    font-size: 15px;
    margin-right: -8px;
    content: "Mechanism";
  }

  .actuators-specs-item.driving-voltage .item-name {
    font-size: 0;
  }
  .actuators-specs-item.driving-voltage .item-name::before {
    font-size: 15px;
    margin-right: -8px;
    content: "Voltage";
  }

  .actuators-specs-item.shape-change .item-value {
    font-size: 0;
  }
  .actuators-specs-item.shape-change .item-value::before {
    font-size: 15px;
    margin-right: -8px;
    content: "40% Strain";
  }

  .actuators-specs-item.contractile-speed .item-value {
    font-size: 0;
  }
  .actuators-specs-item.contractile-speed .item-value::before {
    font-size: 15px;
    margin-right: -8px;
    content: "20x length/s";
  }

}





@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}