/* Third-page UI only. The actual environment, glass and sculpture are WebGL. */
#works .work-stage { opacity: var(--gallery-ui, 1); }
#works .works-heading { color: #303446; max-width: 240px; }
#works .works-heading .eyebrow { color: #56677b; letter-spacing: .16em; }
#works .works-heading h2 { font-size: clamp(38px, 4.05vw, 62px); }
#works .filters button { color: #59627b; }
#works .filters button.active { color: #285e68; border-color: #285e68; }
#works .work-index { color: #33384e; width: 240px; }
#works .work-index button { opacity: .68; }
#works .work-index button.active,
#works .work-index button:hover { opacity: 1; color: #295c68; }
#works .work-index button:focus-visible { outline-color: #638eae; }
#works .work-bottom { color: #3f4966; }
#works .work-bottom a { border-bottom: 1px solid #626f8f55; padding-bottom: 4px; }
@media (max-width: 1100px) and (min-width: 901px) {
  #works .works-heading, #works .work-index { max-width: 185px; }
  #works .works-heading h2 { font-size: 45px; }
}
@media (max-width: 900px) {
  #works .work-stage::before { background: none; }
  #works .works-heading { max-width: calc(100% - 44px); }
  #works .works-heading h2 { font-size: clamp(31px, 5.7vw, 38px); }
  #works .work-index { width: auto; }
  #works .work-bottom { font-size: 9px; }
}
@media (max-height: 650px) {
  #works .work-stage { min-height: 100svh; }
  #works .works-heading { top: 100px; }
  #works .work-index { bottom: 66px; gap: 2px; }
}
.no-webgl #works { background: linear-gradient(145deg, #f2eef8, #dce6ef 50%, #c5d7e2); }
.no-webgl #works .work-stage { opacity: 1; }


@media (min-width: 901px) and (min-height: 651px) {
  #works .work-index { top: max(380px, calc(100% - 401px)); bottom: auto; transform: none; }
}

body.compact-nav .site-nav .wordmark,body.compact-nav .site-nav nav,body.in-detail .site-nav .wordmark,body.in-detail .site-nav nav{visibility:hidden;pointer-events:none}body.compact-nav .site-nav::before,body.in-detail .site-nav::before{opacity:0}